Алан Дэй (Allan Day)
aday@gnome.org
Калум Бенсон (Calum Benson)
Адам Элман (Adam Elman)
Сэт Никел (Seth Nickell)
Колин Робертсон (Colin Robertson)
Расположение элементов в интерфейсе пользователя.

# Визуальное расположение

Визуальное расположение элементов управления, информации и содержимого способствует эффективному использованию приложения. От визуального дизайна зависит то, насколько удобно будет пользоваться приложением. Приложения с грамотным визуальным расположением проще и понятнее в работе.

Следование следующим рекомендациям поможет вам создавать привлекательные, эффективные и простые в использовании приложения.

# Общие рекомендации

Точка выравнивания — это точка пересечения воображаемых линий по вертикали и горизонтали, которые проходят через границы одного или нескольких управляющих элементов. Постарайтесь сократить количество этих точек: чем их меньше, тем чище и проще выглядит расположение элементов, а следовательно проще для восприятия пользователем.

Тщательно выравнивайте содержимое и управляющие элементы. Невыровненные объекты бросаются в глаза: их не только сложнее воспринимать визуально, но они ещё и раздражают пользователей.

Будьте последовательны в отступах, выдерживайте одинаковые промежутки.

Объединяйте связанные элементы и информацию, используйте отступы между такими группами. Это упростит понимание интерфейса.

используйте отступ кратный 6 пикселам, чем меньше связь между элементами, тем больше между ними должен быть отступ;

между текстовыми метками и связанными компонентами используйте отступ в 12 пикселов;

между группами компонентов используйте вертикальный отступ в 18 пикселов;

между содержимым диалогового окна и границами окна рекомендуется использовать общий отступ в 18 пикселов.

Чтобы подчеркнуть связь между сгруппированными элементами, используйте отступ в 12 символов.

избегайте использования рамок с видимыми границами для разделения групп элементов, вместо этого используйте отступы и заголовки.

Пример неправильного использования отступов и выравнивания:

Пример правильного использования отступов и выравнивания:

Пример правильного использования отступов и выравнивания (в пикселах):

# Выравнивание текстовых меток

Если возможно, используйте выравнивание текста в метках по правой стороне (см. рисунок). Это уберёт зазоры между метками и связанными с ними элементами. Этот тип выравнивания, однако, нельзя применять, если управляющие элементы имеют собственные отступы, в этом случае используйте выравнивание по левой стороне.

# Визуальная иерархия

Выстраивайте элементы сверху вниз и слева направо. Это естественное направление, в котором люди считывают информацию (это относится к культурам, в которых чтение и запись информации осуществляется справа налево). Чем раньше должен быть считан элемент, тем выше и левее он должен располагаться. Используя данный подход при построении интерфейса, элементы окажутся включены в визуальную иерархию: более важные управляющие элементы управления будут расположены выше и левее подчинённых им элементов. Ключевым шаблоном в решении данной задачи являются панели заголовков.