Визуальное расположение элементов управления, информации и содержимого способствует эффективному использованию приложения. От визуального дизайна зависит то, насколько удобно будет пользоваться приложением. Приложения с грамотным визуальным расположением проще и понятнее в работе.
Следование следующим рекомендациям поможет вам создавать привлекательные, эффективные и простые в использовании приложения.
Точка выравнивания — это точка пересечения воображаемых линий по вертикали и горизонтали, которые проходят через границы одного или нескольких управляющих элементов. Постарайтесь сократить количество этих точек: чем их меньше, тем чище и проще выглядит расположение элементов, а следовательно проще для восприятия пользователем.
Тщательно выравнивайте содержимое и управляющие элементы. Невыровненные объекты бросаются в глаза: их не только сложнее воспринимать визуально, но они ещё и раздражают пользователей.
Будьте последовательны в отступах, выдерживайте одинаковые промежутки.
Объединяйте связанные элементы и информацию, используйте отступы между такими группами. Это упростит понимание интерфейса.
используйте отступ кратный 6 пикселам, чем меньше связь между элементами, тем больше между ними должен быть отступ;
между текстовыми метками и связанными компонентами используйте отступ в 12 пикселов;
между группами компонентов используйте вертикальный отступ в 18 пикселов;
между содержимым диалогового окна и границами окна рекомендуется использовать общий отступ в 18 пикселов.
Чтобы подчеркнуть связь между сгруппированными элементами, используйте отступ в 12 символов.
избегайте использования рамок с видимыми границами для разделения групп элементов, вместо этого используйте отступы и заголовки.
Пример неправильного использования отступов и выравнивания:
Пример правильного использования отступов и выравнивания:
Пример правильного использования отступов и выравнивания (в пикселах):
Если возможно, используйте выравнивание текста в метках по правой стороне (см. рисунок). Это уберёт зазоры между метками и связанными с ними элементами. Этот тип выравнивания, однако, нельзя применять, если управляющие элементы имеют собственные отступы, в этом случае используйте выравнивание по левой стороне.
Выстраивайте элементы сверху вниз и слева направо. Это естественное направление, в котором люди считывают информацию (это относится к культурам, в которых чтение и запись информации осуществляется справа налево). Чем раньше должен быть считан элемент, тем выше и левее он должен располагаться. Используя данный подход при построении интерфейса, элементы окажутся включены в визуальную иерархию: более важные управляющие элементы управления будут расположены выше и левее подчинённых им элементов. Ключевым шаблоном в решении данной задачи являются панели заголовков.