На начальном этапе программирования допускаются классические ошибки по дизайну. Попробуем пройтись по ошибкам, которые допускал я сам или видел как это делает кто-то другой. Чтобы это не выглядело в виде утверждения, что можно только так, а не иначе сразу скажу, что моя текущая позиция, это лишь выбор сделанный на основе моих личных предпочтений и с учётом адекватных на мой взгляд причин.
Не лепите элементы близко к краю GUI
Желание сделать компактно свой GUI это нормально. Но нужно задать себе вопрос, кому нужна эта компактность? Вы когда нибудь видели чтобы текст в книге был да края страницы? Отступ элементов от края я делаю 10 пикселов. Если нужно уплотнить интерфейс то не менее 5, если делать разряжённым, то 20, иначе уменьшить размер окна. Исключением может быть элементы Edit, объект IE, объект видеоплеера, их можно сделать вплотную к краю окна, так как не придётся кликать у самого края. Ещё исключением может быть окно в виде плавающей панели инструментов, когда требуется одновременно работать в некоторой рабочей области и любой захват пространства на счету. Совсем другое дела с одноразовыми окнами, например окно настройки программы, которое будет открыто, выполнены изменения настроек без отвлечения к другим окнам и закрыто. Пользователь не оценит избыточной компактности, поэтому не стоит лепить элементы впритык к краям GUI.
Определение максимального размера окна
Если размер GUI жёстко задан и не изменяется, то должен учитываться на маленьком разрешении экрана, например 640x480 или 800x600, по крайней мере нетбуки с высотой 600 пиксель используются. И желательно оставить место для панели задач. Итог ориентироваться на максимальный размер окна 760x560, и обычно этого хватает. В противном случае подумать о возможности изменять размер окна или прокручивать интерфейс.
Не используйте компактный заголовок окна
Первое время диалог "О программе" я делал со стилем инструментальной панели. Но изучив другие программы понял, что никто так не делает.
Для инструментальной панели, которая находится в рабочей области постоянно и заголовок является частью, за который эта панель перетаскивается мышью, такой стиль является полезным. Но для одноразовых окон, как было сказано выше, принуждает пользователя прицеливаться на минималистические элементы интерфейса. Итак, окно настройки, любое временное диалоговое окно, диалог "О программе" не должны иметь компактного заголовка окна.
Размеры элементов
Какие подводные камни готовит нам установка размеров элементов? Размер Label делайте с запасом, так как шрифт на другом ПК (другая ОС) может быть больше. Если у вас он умещается в 13 пикселей высоты, то на другом ПК (другая ОС) нужно 17, аналогично по ширине будет больше. Если по ширине текст не умещается, то переносится на новую строку, поэтому обязательно добавьте стиль "без переноса на новую строку", потому что именно ключевое слово может оказаться невидимым. Если используется многоязыковая поддержка, то на другом языке текст может быть в полтора раза длиннее. Если в правой части от Label пустое пространство и есть возможность увеличить Label, то делайте его максимально возможным. Существует значение по умолчанию "-1", которое автоматически изменяет размер Label по размеру текста, но я бы не рекомендовал этим пользоваться, так как не контролируемое увеличение приведёт к перекрыванию элементов друг другом, а это смотрится хуже чем обрезка.
По окончании проверьте границы элементов Label, Checkbox, Radio с помощью "AutoIt v3 Window Info", которая ограничивающим прямоугольником подсвечивает края элементов. Этим вы можете избавить себя от ситуации, когда элемент без явных границ частично перекрывает кнопку или Input, визуально это не видно, но кликнуть на кнопке не удаётся в той части где происходит перекрывание.
Стандартный размер кнопки - ширина: 70-90, высота: 25-28. Минималистический интерфейс в отношении кнопок тоже не рекомендуется. Никто не желает прицеливаться. Не рекомендуется делать кнопки разного размера (и по ширине и по высоте), например подстраиваться под длину текста на кнопках. Понятие "придерживаться одного стиля" подразумевает в разных окнах одной программы иметь одинаковой высоты кнопки, по возможности и ширины. Если текст умещается, то при всех равных условиях по возможности делать кнопки одинаковой длины. Исключением может быть основные управляющие кнопки и кнопки возле Input для диалога выбора папок и файлов.
Юзабельность
Этот критерий скорее наживной. Создаётся кнопка, привязывается событие и кажется, что вся задача выполнена. Но у разных пользователей есть свой подход к интерфейсу. Кто-то пользуется мышкой, кто-то горячими клавишами. Лучше учесть все способы взаимодействия. Обязательно в каждом окне определяйте кнопку по умолчанию, которая наиболее вероятно будет нажата с помощью "клацнуть на Enter". Используйте быстрые клавиши для всех кнопок и укажите их в подсказке, чтобы пользователь смог легко просмотреть их в подсказке и облегчить себе вызов часто используемых кнопок.
Форматирование
Иногда Label или Input нужно выравнивать по правому краю. Числа разделять пробелом по три цифры. Столбики чисел выравнивать с помощью StringFormat и моноширинного шрифта.
Симметричность, эстетика
Когда все необходимые элементы размещены в окне и не планируется добавление, самое время проверить симметричность элементов. Понятно что правый и левый отступы должны быть одинаковы, аналогично верхний и нижний. Промежутки между однотипными элементами одинаковы. Отступы от краёв внутри группы также должны быть симметричны. Расчёт прост, вычисляется сумма промежутков между кнопок в ряду, например 300 - (70*3), где ширина окна 300 минус ширина трёх кнопок 70*3 равно 300-210 = 90. Ширина 90 это правый и левый отступ в сумме с двумя промежутками между кнопок, итак 90 / 4 = 22,5. Если придерживаться более правильных расчётов, то от 90 отнимаем ширину полей GUI к примеру отступы от краёв GUI = 10, итак 90 - (2*10)=70, теперь 70 делим на отступы между кнопок и два отступа от краёв воображаемого прямоугольника кнопок, то есть 70 / 4 = 17,5 или округлённо 18. Первая кнопка имеет позицию 10 + 18 = 28, вторая кнопка 28+70+18 = 116, третья кнопка 116+70+18 = 204. То есть левый и правый промежуток от края GUI до кнопки всегда шире, чем промежутки между кнопок, потому что отступы GUI и отступы блока кнопок это как бы две составляющие от суммарной величины отступов.
Интерфейс сделанный на глаз для других может оказаться не привлекательным.
Изменяйте цвет либо у всех элементов, либо совсем не изменяйте
Если хочется сделать более красивый интерфейс, возможно просто изменить цвет текста, то учитывайте, что тема установленная на другом компьютере может оказаться противоположной и цвет текста будет сливаться с цветом фона, ну или почти сливаться и быть очень неудобочитаемым. Цвет текста должен назначаться одновременно с цветом фона.
Тексты
Все названия должны точно и кратко описывать назначение элемента. Используйте профессиональные термины, не используйте сленг. Сленг не для всех может оказаться понятным, а программа воспринимается не профессиональной. Это относится и к описанию программы (Readme.txt). Опечатки указывают на то, что автор не проверял тексты, доверие к коду программы будет на том же уровне.
Проверяйте GUI на разных операционных системах
Если GUI сохраняет позиции и размер окна, проверьте, что это работает и окно не сдвигается и не изменяется после каждого перезапуска. Симметричность будет видна визуально. Если используются системные иконки, проверьте что они соответствуют. Проверьте, что программа имеет доступ к разделам реестра, которые она изменяет.
Особый случай для системы WinPE, проверьте что программа может работать с диска, на который недоступна запись. Предусмотрите вывод сообщения о завершении программы в случае отсутствия необходимых библиотек DLL, это будет красивей чем крах.
Заключение
Отмечу, что некоторые перечисленные здесь ошибки могут быть вызваны технической стороной реализации, другие по забывчивости. Просто добавьте их в план проверки и ставьте галочку, когда пункт проверки выполнен.
Спасибо, AZJIO за отличную статью! Почти ничего нового для себя не узнал, хотя и новичек в программировании. Рассматривал интерфейс в профессиональных программах. Настраиваю GUI со всеми вычислениями и не жалею времени на разработку интерфейса, есть свои "стандарты". Люблю когда: - Все "по полочкам". - Удобно глазам. - Удобно переключатся между элементами с клавиатуры. - Быстро запоминается какие элементы и где находятся в окне. - Все интуитивно понятно. Все что я люблю, стараюсь восполнить в своих программах.
Добавлять комментарии могут только зарегистрированные пользователи. [ Регистрация | Вход ]
