<?xml version="1.0" encoding="utf-8"?>
<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>

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

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

<section id="general-guidelines">
<title>Общие рекомендации</title>

<list>
<item><p>Точка выравнивания — это точка пересечения воображаемых линий по вертикали и горизонтали, которые проходят через границы одного или нескольких управляющих элементов. Постарайтесь сократить количество этих точек: чем их меньше, тем чище и проще выглядит расположение элементов, а следовательно проще для восприятия пользователем.</p></item>
<item><p>Тщательно выравнивайте содержимое и управляющие элементы. Невыровненные объекты бросаются в глаза: их не только сложнее воспринимать визуально, но они ещё и раздражают пользователей.</p></item>
<item><p>Будьте последовательны в отступах, выдерживайте одинаковые промежутки.</p></item>
<item><p>Объединяйте связанные элементы и информацию, используйте отступы между такими группами. Это упростит понимание интерфейса.</p>
<list>
<item><p>используйте отступ кратный 6 пикселам, чем меньше связь между элементами, тем больше между ними должен быть отступ;</p></item>
<item><p>между текстовыми метками и связанными компонентами используйте отступ в 12 пикселов;</p></item>
<item><p>между группами компонентов используйте вертикальный отступ в 18 пикселов;</p></item>
<item><p>между содержимым диалогового окна и границами окна рекомендуется использовать общий отступ в 18 пикселов.</p></item>
</list></item>
<item><p>Чтобы подчеркнуть связь между сгруппированными элементами, используйте отступ в 12 символов.</p></item>
<item><p>избегайте использования рамок с видимыми границами для разделения групп элементов, вместо этого используйте отступы и заголовки.</p></item>
</list>

<p>Пример неправильного использования отступов и выравнивания:</p>
<media type="image" mime="image/svg" src="figures/visual-alignment-incorrect.svg"/>

<p>Пример правильного использования отступов и выравнивания:</p>
<media type="image" mime="image/svg" src="figures/visual-alignment-correct.svg"/>

<p>Пример правильного использования отступов и выравнивания (в пикселах):</p>
<media type="image" mime="image/svg" src="figures/visual-alignment-spacing.svg"/>

</section>

<section id="label-alignment">
<title>Выравнивание текстовых меток</title>

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

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

</section>

<section id="hierarchy">
<title>Визуальная иерархия</title>

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

</section>

</page>