<page xmlns="http://projectmallard.org/1.0/" type="topic" id="visual-layout" xml:lang="ru">

  <info>

    <credit type="author">

      <name>Алан Дэй (Allan Day)</name>

      <email>aday@gnome.org</email>

    </credit>

    <credit>

      <name>Калум Бенсон (Calum Benson)</name>

    </credit>

    <credit>

      <name>Адам Элман (Adam Elman)</name>

    </credit>

    <credit>

      <name>Сэт Никел (Seth Nickell)</name>

    </credit>

    <credit>

      <name>Колин Робертсон (Colin Robertson)</name>

    </credit>

    <include xmlns="http://www.w3.org/2001/XInclude" href="legal.xml"/>

    <desc>Расположение элементов в интерфейсе пользователя.</desc>

  </info>

<title>Визуальное расположение</title>

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

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

<section id="general-guidelines">

<title>Общие рекомендации</title>

<list>

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

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

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

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

<list>

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

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

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

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

</list></item>

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

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

</list>

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

<media type="image" mime="image/svg" src="figures/visual-alignment-incorrect.svg"/>

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

<media type="image" mime="image/svg" src="figures/visual-alignment-correct.svg"/>

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

<media type="image" mime="image/svg" src="figures/visual-alignment-spacing.svg"/>

</section>

<section id="label-alignment">

<title>Выравнивание текстовых меток</title>

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

<media type="image" mime="image/svg" src="figures/label-alignment.svg"/>

</section>

<section id="hierarchy">

<title>Визуальная иерархия</title>

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

</section>

</page>