Я уже достаточно давно работаю с корпоративными приложениями. За это время увидел много уродливых диалоговых окон и форм. Мне хотелось бы изменить ситуацию к лучшему, поэтому я поделюсь своим опытом в дизайне и программировании UI в WinForms и для операционной системы Windows в целом.
Я начну описывать распространенные ошибки, которые делают приложение уродливым и делать свои рекомендации/комментарии.
1. Шрифт. Некоторые люди используют уродливые шрифты. Некоторые шрифты намного лучше смотрятся, чем другие. Британскими учеными доказано, что лучшие шрифты для восприятия это Verdana и Tahoma. Один из худших, которые встречаются в корпоративных приложениях – Comic Sans MS. Сравните текст набранный различными шрифтами:
2. Кнопки формы. Многие разработчики нелогично включают или выключают стандартные кнопки «свернуть», «развернуть» и «закрыть». Вот несколько правил, которые надо помнить при работе с формой:
- если форма sizable, она должна уметь разворачиваться на весь экран, т.е. кнопка «развернуть» должна быть активна (и наоборот);
- если форма имеет активную кнопку «свернуть», то она также должна отображаться в диспетчере задач (и наоборот);
- кнопка «закрыть» должна всегда отображаться и всегда быть включенной. Пользователь должен всегда иметь возможность закрыть форму быстро и без проблем. Если вы хотите проверить условие или что-то спросить у пользователя – есть методы, кроме того, чтобы выключить кнопку «закрыть» и сделать свою собственную внизу формы.
- Если форма – модальный диалог, и на нем есть кнопка, которая закрывает диалог, всегда ставьте кнопку выставляйте свойство CancelButton у формы. Это позволит пользователю закрыть окно по нажатию на клавишу «Esc». Иногда бывает, что кнопка “Cancel” находится не на форме, а на пользовательском контроле, который в свою очередь лежит на форме. В таком случае можно реализовать интерфейс IButton в пользовательском контроле, и тогда можно будет свойству CancelButton у формы прямо в дизайнере присвоить пользовательский контрол.
3. Размеры формы. Частая ошибка при дизайне форм – неправильные размеры. Есть несколько эмпирических правил, которым я стараюсь следовать:
- если форма sizable, она должна иметь минимальный размер. При изменении размеров форма всегда должна иметь минимальный размер, при котором все ее содержимое корректно отображается и позволяет продолжить работу.
- если форма sizable, все ее компоненты должны иметь правильно выставленные якоря. При изменении размера все контролы должны изменять размер так, чтобы оставаться функциональными, т.е. с ними можно было продолжать работать. Согласитесь, неудобно вводить текст в поле шириной в 2 пикселя. Также контролы должны быть визуально не уродливыми (врядли кому-то понравится кнопка, растянутая на пол экрана). Для этих целей очень рекомендуется использовать и правильно настраивать TableLayoutPanel WinForms и Grid в WPF.
- когда создаете форму – старайтесь делать ее размеры в пропорции 4:3, это привычная и удобная для глаз пропорция.
4. Расположение элементов формы. Очень распространенная ошибка – некорректное расположение контролов на форме. Когда вы делаете форму, старайтесь располагать элементы колонками. Человек лучше воспринимает текст и информацию, которые разбиты на колонки. Это не я придумал – откройте любой журнал или газету, и вы увидите, что все разбито на колонки одинаковой ширины. Вот пример формы с нормальным расположение элементов:
Также часто вижу неправильное выравнивание элементов. Сдвиги контролов на 1-2 пикселя портят внешний вид формы. Не забывайте, что есть панель для выравнивания элементов в Visual Studio:
5. Tab order. Очень очень частая ошибка – неверный Tab order. Проверить очень просто – открываем форму в приложении, зажимаем кнопку “Tab” на клавиатуре и смотрим куда бежит курсор. В Visual Studio легко лечится при нажатии на кнопку:
И прокликивания всех элементов в нужном порядке.
Надеюсь мои советы помогут сделать ваш UI лучше, а ваших заказчиков и пользователей довольнее жизнью и вашей работой =)
Tags: .NET, UI, WinForms, дизайн, разработка ПО