Layout

Примечание

Это руководство по проектированию было создано для Windows 7 и не обновлялось для более новых версий Windows. Большая часть руководства по-прежнему применяется в принципе, но презентация и примеры не отражают наше текущее руководство по проектированию.

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

Примечание: Рекомендации по управлению окнами приведены в отдельной статье. Рекомендуемые размеры и интервалы для конкретных элементов управления приведены в соответствующих руководствах.

Принципы проектирования

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

Окно или страница имеет четкую визуальную иерархию, когда его внешний вид указывает на связь и приоритет элементов. Без визуальной иерархии пользователям придется самостоятельно выяснить эти связи и приоритеты.

Визуальная иерархия достигается за счет умелого сочетания следующих атрибутов:

• Фокус. Макет указывает, где пользователи должны искать в первую очередь.
• Потока. Глаз проходит плавно и естественно по четкому пути через поверхность, находя элементы пользовательского интерфейса в порядке, соответствующем их использованию.
• Группировки. Логически связанные элементы пользовательского интерфейса имеют четкую визуальную связь. Связанные элементы группируются; несвязанные элементы являются отдельными.
• Акцент. Элементы пользовательского интерфейса выделяются на основе их относительной важности.
• Трассы. Элементы пользовательского интерфейса имеют согласованное размещение, поэтому они легко сканируются и отображаются упорядоченно.

Кроме того, эффективный макет имеет следующие атрибуты:

• Независимость устройства. Макет отображается должным образом независимо от шрифта или размера шрифта, точек на дюйм (точек на дюйм), дисплея или графического адаптера.
• Простота сканирования. Пользователи могут быстро найти нужный контент.
• Эффективность. Элементы пользовательского интерфейса, которые являются большими, должны быть большими, а элементы, которые являются маленькими, хорошо малы.
• Возможность изменения размера. Если это полезно, размер окна можно изменить, и его макет содержимого эффективен независимо от того, насколько большая или маленькая поверхность.
• Баланс. Содержимое будет равномерно распределено по поверхности.
• Визуальная простота. Восприятие того, что макет не сложнее, чем он должен быть. Пользователи не чувствуют себя перегруженными внешним видом макета.
• Согласованность. Похожие окна или страницы используют похожий макет, поэтому пользователи всегда чувствуют себя ориентированными.

Хотя размер, интервал и размещение являются простыми понятиями, задача макета заключается в том, чтобы обеспечить правильное сочетание этих атрибутов.

В Windows макет передается с помощью независимых от устройств метрик, таких как диалоговые единицы (DLL) и относительные пиксели.

Модель проектирования для чтения

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

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

• Люди читать слева направо, сверху вниз (в западных языках).

• Существует два режима чтения: иммерсивное чтение и сканирование. Цель иммерсивного чтения — понимание.

  

  Эта схема моделирует иммерсивное чтение.

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

  

  Эта схема моделирует сканирование.

  

  Если текст проходит вдоль левого края страницы, пользователи сначала сканируют его.

• При использовании программного обеспечения пользователи погружаются не в сам пользовательский интерфейс, а в свою работу. Следовательно, пользователи обычно не читают текст пользовательского интерфейса, который он сканирует. Затем они читают биты текста всесторонне только тогда, когда они считают, что им это нужно.

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

• Пользователи, как правило, пропускают большие блоки неформатированного текста, не читая их вообще.

  

  Пользователи, как правило, пропускают большие блоки текста и области навигации при сканировании.

• При всех равных условиях пользователи сначала смотрят в левом верхнем углу окна, сканируют страницу и заканчивают сканирование в правом нижнем углу. Они, как правило, игнорируют левый нижний угол.

  

  При всех равных условиях пользователи будут считывать эти числа в следующем порядке: 1, 2, 4 и 3.

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

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

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

Пользователи прекращают сканирование, когда думают, что все готово.

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

Проектирование для сканирования

Пользователи не читают, они сканируют, поэтому следует разработать поверхности пользовательского интерфейса для сканирования. Не предполагайте, что пользователи будут читать текст, написанный слева направо, сверху вниз, а скорее, что они будут смотреть на элементы пользовательского интерфейса, которые привлекают их внимание.

Чтобы спроектировать для сканирования, выполните приведенные далее действия.

• Предположим, что пользователи начинают с быстрого сканирования всего окна, а затем считывают элементы пользовательского интерфейса примерно в следующем порядке:
  • Интерактивные элементы управления в центре
  • Кнопки фиксации
  • Интерактивные элементы управления, найденные в другом месте
  • Основная инструкция
  • Дополнительные объяснения
  • Текст со значком предупреждения
  • Заголовок окна
  • Другой статический текст в тексте main
  • Примечания
• Поместите элементы пользовательского интерфейса, которые инициируют задачу, в левом верхнем углу или по верхнему центру.
• Поместите элементы пользовательского интерфейса, которые выполняют задачу, в правом нижнем углу.
• По возможности поместите важный текст в интерактивные элементы управления, а не статический текст.
• Не помещайте важные сведения в левый нижний угол или внизу длинного прокручиваемого элемента управления или страницы.
• Не показывайте большие блоки текста. Исключите ненужный текст. Используйте стиль представления инвертированных пирамид .
• Если вы делаете что-то для привлечения внимания пользователей, убедитесь, что внимание является оправданным.

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

Чтобы выделить основные элементы пользовательского интерфейса, выполните следующее:

• Поместите основные элементы пользовательского интерфейса в путь сканирования.

• Поместите любой пользовательский интерфейс для запуска задачи в левом верхнем углу или в верхнем центре.

• Поместите кнопки фиксации в правый нижний угол.

• Поместите оставшийся основной пользовательский интерфейс в центр.

• Используйте элементы управления, которые привлекают внимание, такие как кнопки, ссылки на команды и значки.

• Используйте видный текст, включая крупный и полужирный текст.

• Пользователи должны читать текст в интерактивных элементах управления, со значками или на баннерах.

• Используйте темный текст на светлом фоне.

• Окружите элементы щедрым пространством.

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

  

  В этом примере показано множество способов выделения основных элементов пользовательского интерфейса.

Чтобы не выделить дополнительные элементы пользовательского интерфейса, выполните следующее:

• Поместите дополнительные элементы пользовательского интерфейса за пределы пути сканирования.

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

• Используйте элементы управления, которые не привлекают внимания, например ссылки на задачи, вместо кнопок команд.

• Используйте обычный или серый текст.

• Используйте светлый текст на темном фоне. Белый текст на темно-сером или синем фоне хорошо работает.

• Заключите элементы с минимальным пространством.

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

  

  В этом примере показано множество способов отмены выделения дополнительных элементов пользовательского интерфейса.

Эффективное использование пространства на экране

Эффективное использование экранного пространства требует от вас баланса нескольких факторов: использовать слишком много места, и окно чувствует себя тяжелым и расточительным, и даже трудно использовать в соответствии с законом Фиттов.

Неправильно:

В этом примере окно слишком велико для содержимого.

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

Неправильно:

В этом примере окно слишком мало для содержимого.

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

Вы знаете, что макет эффективно использует экранное пространство, когда:

• Размер окон, оконных областей и элементов управления не требуется изменять, чтобы их можно было использовать. Если первое, что делают пользователи, — это изменение размера окна, панели или элемента управления, то его размер неверен.
• Данные не усекаются. Большинство данных в представлениях списков и представлениях в виде дерева не имеют многоточия, а данные в других элементах управления не обрезаются, если длина данных не является необычно большой. Данные, которые необходимо прочитать для выполнения задачи, не должны быть усечены.
• Размеры окон и элементов управления соответствуют размеру, чтобы исключить ненужную прокрутку. Существует несколько горизонтальных полос прокрутки и нет ненужных вертикальных полос прокрутки.
• Элементы управления в основном используют стандартные размеры. Старайтесь уменьшить количество размеров элементов управления, например, используя только одну или две ширины кнопок на поверхности.
• Поверхность пользовательского интерфейса сбалансирована. Не существует больших неиспользуемых областей экрана.

Выберите размеры окон, которые достаточно велики, чтобы хорошо выполнить свою цель. (Если размер окна можно изменить, эта цель применяется к его размеру по умолчанию.) Сочетание усеченных данных или полос прокрутки и большого количества свободного места на экране является явным признаком неэффективного макета.

Размер элемента управления

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

Закон Фиттса гласит, что чем меньше цель, тем дольше требуется, чтобы получить ее с помощью мыши. Кроме того, для компьютеров, использующих технологию windows Tablet and Touch Technology, мышь может быть ручкой или пальцем пользователя, поэтому при определении размеров небольших элементов управления следует учитывать альтернативные устройства ввода. Размер элемента управления 16 x 16 относительных пикселей является хорошим минимальным размером для любого устройства ввода. В отличие от этого, стандартные относительные кнопки управления вращением пикселей 15x9 слишком малы для эффективного использования ручками.

Интервал

Предоставление щедрого (но не чрезмерного) пространства делает макет более удобным и удобным для анализа. Эффективное пространство не является неиспользуемым пространством, оно играет важную роль в улучшении возможности сканирования для пользователей, а также добавляет визуальную привлекательность вашего дизайна. Рекомендации см. в таблице интервалов.

Для компьютеров, использующих windows Tablet and Touch Technology, мышью может быть перо или палец пользователя. Нацеливание сложнее при использовании пера или пальца в качестве указывающего устройства, в результате чего пользователи нажимают за пределами целевого объекта. Если интерактивные элементы управления расположены очень близко друг к другу, но на самом деле не касаются, пользователи могут щелкнуть неактивное пространство между элементами управления. Так как нажатие неактивного пространства не приводит к результату или визуальной обратной связи, пользователи часто не уверены, что пошло не так. Если небольшие элементы управления слишком близко расположены, пользователь должен нажать с точностью, чтобы избежать касания неправильного объекта. Чтобы устранить эти проблемы, целевые области интерактивных элементов управления должны быть сенсорными или иметь по крайней мере 3 DDLu (5 относительных пикселей) пространства между ними.

Вы знаете, что макет имеет хороший интервал, если:

• В целом поверхность пользовательского интерфейса чувствует себя комфортно и не чувствует себя тесной.
• Пространство выглядит однородным и сбалансированным.
• Связанные элементы находятся близко друг к другу, а несвязанные элементы находятся относительно далеко друг от друга.
• Между элементами управления, которые должны быть вместе, такими как кнопки панели инструментов, нет пробела.

Окна с изменяемыми размерами

Окна с изменяемыми размерами также являются фактором эффективного использования пространства на экране. Некоторые окна состоят из фиксированного содержимого и не получают преимуществ от изменения размера, но окна с изменяемым содержимым должны изменяться. Конечно, причина изменения размера окна заключается в том, чтобы занять дополнительное пространство экрана, поэтому содержимое должно соответствующим образом расширяться, предоставляя больше места для элементов пользовательского интерфейса, которым он необходим. Окна с динамическим содержимым, документами, изображениями, списками и деревьями больше всего выигрывают от окна с изменяемым размером.

В этом примере изменение размера окна изменяет размер элемента управления представлением списка.

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

Текст становится трудно читать по мере увеличения длины строки. Для текстовых документов рекомендуется использовать максимальную длину строки в 80 символов, чтобы упростить чтение текста. (Символы включают буквы, знаки препинания и пробелы.)

Неправильно:

В этом примере длинная длина текста затрудняет чтение.

Наконец, окна с изменяемым размером также должны эффективно использовать пространство экрана при уменьшении размера, уменьшая размер содержимого и удаляя пространство из элементов пользовательского интерфейса, которые могут эффективно работать без него. В какой-то момент окно или его элементы пользовательского интерфейса становятся слишком маленькими, чтобы их можно было использовать, поэтому им следует назначить минимальный размер или полностью удалить некоторые элементы.

В этом примере область имеет минимальный размер.

Некоторые программы используют совершенно другую презентацию, чтобы сделать содержимое пригодным для использования при меньших размерах.

В этом примере Медиаплеер Windows изменить свой формат, если окно становится слишком маленьким для стандартного формата.

Фокус

Макет имеет фокус, когда есть одно очевидное место для просмотра в первую очередь. Важно сосредоточиться, чтобы показать пользователям, с чего начать сканирование окна или страницы. Без четкого фокуса глаз пользователя будет бесцельно блуждать. Фокус должен быть чем-то важным, что пользователи должны быстро найти и понять, и должен иметь наибольший визуальный акцент. Левый верхний угол является естественным фокусом для большинства окон.

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

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

• Поместите его в верхнюю левую или верхнюю центральную часть поверхности.
• Использование важных и понятных интерактивных элементов управления.
• Использование видного текста, например инструкции main.
• Предоставление элементам управления выбора по умолчанию и начального фокуса ввода.
• Размещение элементов управления на фоне другого цвета.

Рассмотрим Windows Search. Фокусом для Поиска Windows должно быть поле Поиска, так как оно является отправной точкой для задачи. Однако он находится в правом верхнем углу, чтобы соответствовать стандартному расположению поля поиска. Поле Поиска содержит фокус ввода, но с учетом его расположения в пути сканирования этого ключа недостаточно.

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

Хорошо:

В этом примере видная инструкция в верхней центральной части окна направляет пользователей в поле Поиска.

Без инструкций окно не будет иметь очевидного фокуса.

Неправильно:

В этом примере нет очевидного фокуса. Пользователи не знают, где искать.

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

Неправильно:

Если не указана важная инструкция в качестве фокуса, выделенная кнопка Все является непреднамеренным.

Поток

Макет имеет поток, когда пользователи плавно и естественно ориентируются по четкому пути по его поверхности, находя элементы пользовательского интерфейса в порядке, соответствующем их использованию. После того как пользователи определят фокус, они должны определить, как выполнить задачу. Размещение элементов пользовательского интерфейса определяет их связь и должно зеркало шаги для выполнения задачи. Как правило, это означает, что шаги задачи должны выполняться естественным образом слева направо, сверху вниз (в западных языках).

Вы знаете, что макет имеет хороший поток, если:

• Размещение элементов пользовательского интерфейса отражает действия, необходимые пользователям для выполнения задачи.
• Элементы пользовательского интерфейса, инициирующие задачу, находятся в левом верхнем углу или в верхнем центре.
• Элементы пользовательского интерфейса, которые выполняют задачу, находятся в правом нижнем углу.
• Связанные элементы пользовательского интерфейса находятся вместе; несвязанные элементы являются отдельными.
• Необходимые действия находятся в потоке main.
• Необязательные шаги выходят за рамки потока main, возможно, с помощью подходящего фона или постепенного раскрытия информации.
• Часто используемые элементы отображаются перед редко используемыми элементами в пути сканирования.
• Пользователи всегда знают, что делать дальше. В потоке задач нет непредвиденных скачков или перерывов.

Неправильно:

В этом примере пользователи не знают, что делать дальше. В потоке задач происходят непредвиденные скачки и перерывы.

Правильно:

В этом примере представление элементов пользовательского интерфейса отражает шаги по выполнению задачи.

Группирование

Макет имеет группирование, если логически связанные элементы пользовательского интерфейса имеют четкую визуальную связь. Группы важны, так как пользователям проще понять и сосредоточиться на группе связанных элементов, чем на элементах по отдельности. Группы упрощают и упрощают анализ макета.

Группирование можно показать следующими способами (при увеличении тяжести):

• Макет. Вы можете сгруппировать связанные элементы управления рядом друг с другом и установить дополнительные интервалы между несвязанными элементами управления.

  

  В этом примере для отображения связей элементов управления используется только макет.

• Разделители. Разделитель — это горизонтальная или вертикальная линия, которая объединяет группу элементов управления. Разделители обеспечивают более простой и чистый внешний вид. Однако, в отличие от групповых полей, они лучше всего работают, когда они охватывают всю поверхность.

  

  В этом примере для отображения связей элементов управления используются помеченные разделители.

• Агрегаторы. Агрегатор — это рисунок, который создает визуальную связь между строго связанными элементами управления.

  

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

• Поля группирования. Поле группы — это прямоугольная рамка с меткой, которая окружает набор связанных элементов управления.

  

  В этом примере поле группы окружает и помечает набор связанных элементов управления.

• Стола. Фон можно использовать для выделения или отмены выделения различных типов контента.

  

  В этом примере область задач панели управления используется для группировки связанных задач и элементов панели управления.

  Чтобы избежать визуального загромождения, самый легкий вес группирования, который хорошо выполняет работу, является лучшим выбором. Дополнительные сведения см. в разделе Поля группирования, вкладки, разделители и фоновые данные.

Независимо от стиля группировки, можно использовать отступы, чтобы показать связь элементов управления в группе. Элементы управления, которые являются однорангами друг с другом, должны быть выровнены по левому краю, а зависимые элементы управления имеют отступ 12 единиц dll или 18 относительных пикселей.

Зависимые элементы управления имеют отступ 12 DLUS или 18 относительных пикселей, что по умолчанию представляет собой расстояние между проверка прямоугольниками и переключателями от их меток.

Вы знаете, что макет имеет хорошее группирование, когда:

• Окно или страницы содержит не более 7 групп.
• Назначение каждой группы очевидно.
• Связь элементов управления в каждой группе очевидна, особенно зависимость элемента управления.
• Группирование упрощает содержимое, а не усложняет его.

Выравнивание

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

При определении выравнивания необходимо учитывать несколько целей.

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

Горизонтальное выравнивание

Выравнивание по левому краю

Из-за порядка чтения слева направо выравнивание по левому краю хорошо работает для большинства содержимого. Выравнивание по левому краю позволяет легко сканировать данные столбцов по вертикали.

Выравнивание по правому краю

Выравнивание по правому краю лучше всего подходит для числовых данных, особенно для столбцов числовых данных. Выравнивание по правому краю также хорошо подходит для кнопок фиксации , а также элементов управления, выровненных по правому краю окна.

В этом примере элемент управления Расширенный поиск с прогрессивным раскрытием выровнен по правому краю, так как он расположен по правому краю окна.

Выравнивание по центру

Выравнивание по центру лучше всего подходит для ситуаций, когда выравнивание по левому или правому краю является неуместным или не сбалансировано.

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

Не выцентривайте содержимое окна только для заполнения пространства.

Неправильно:

В этом примере содержимое неправильно выцентрировано в окне с возможностью изменения размера для заполнения пространства.

Вертикальное выравнивание

Вершины элементов

Из-за порядка чтения сверху вниз выравнивание по верхнему краю хорошо работает для большинства содержимого. Выравнивание по верхнему углу позволяет легко сканировать элементы пользовательского интерфейса по горизонтали.

Базовые показатели текста

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

Правильно:

Неправильно:

В правильном примере элемент управления и его метка выравниваются по вертикали по текстовым базовым показателям.

Вы знаете, что макет имеет хорошее выравнивание, когда:

• Это легко сканировать как по горизонтали, так и по вертикали.
• Он имеет простой внешний вид.

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

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

• Упрощение вертикального сканирования для поиска нужного элемента управления.
• Упрощение горизонтального сканирования для связывания меток с элементами управления.
• Упрощение локализации, обработка меток, которые отличаются по длине на разных языках.
• Хорошо работает со смесью разной длины меток.
• Обеспечивает эффективное использование доступного пространства, избегая усеченного текста.

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

Существует четыре распространенных стиля размещения и выравнивания меток, каждый из которых имеет свои преимущества:

• Метки, оправданные слева, над элементами управления
• Метки, оправданные слева от элементов управления
• Метки, оправданные слева от элементов управления, элементы управления неровные слева
• Метки, оправданные справа слева от элементов управления

Метки, оправданные слева, над элементами управления

Этот стиль проще всего локализовать, так как макет не зависит от длины меток, но занимает наибольшее вертикальное пространство.

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

Лучше всего использовать в следующих случаях:

• Помеченные элементы управления являются интерактивными (а не только текстом).
• Пользовательский интерфейс будет локализован. Этот стиль часто позволяет удвоить или даже утроить длину этикетки.
• В пользовательском интерфейсе используется технология фиксированного макета (например, Win32).
• Существует десять или меньше элементов управления. С большими элементами управления метки трудно сканировать.
• Для размещения меток достаточно места по вертикали.
• Макет должен иметь свободную форму, а не только столбцы.

Метки, оправданные слева от элементов управления

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

Этот стиль хорошо работает. Тем не менее, есть два столбца, но визуально это выглядит так, как четыре, что делает данные более сложными.

Лучше всего использовать в следующих случаях:

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

Метки, оправданные слева от элементов управления, элементы управления неровные слева

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

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

Лучше всего использовать в следующих случаях:

• В пользовательском интерфейсе используется технология макета переменных (например, Windows Presentation Foundation).
• Пользователи, скорее всего, будут сканировать по вертикали, чтобы найти определенные метки.
• Пользователи, скорее всего, будут читать метки и элементы управления слева направо, сверху вниз.
• Пользователи, скорее всего, не будут сканировать элементы управления по вертикали.
• Текст элемента управления отличается по длине и, скорее всего, будет усечен при использовании другого стиля.
• Элементы управления доступны только для чтения, например текстовые поля только для чтения. Для других элементов управления это выравнивание будет выглядеть неаккуратно. Однако элементы управления могут стать редактируемыми при щелчке.
• В столбце много столбцов, но мало элементов управления.

Метки, оправданные справа слева от элементов управления

Этот стиль является самым простым для чтения по горизонтали, чтобы связать метки с их элементами управления, но его трудно сканировать по вертикали и он не работает правильно, если labelsList с метками с отступом и элементами управления сильно отличаются по длине.

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

Лучше всего использовать в следующих случаях:

• Пользователи, скорее всего, будут читать метки и элементы управления слева направо, сверху вниз.
• Пользователи, скорее всего, не будут сканировать по вертикали, чтобы найти определенные метки, возможно, из-за:
  • Существует несколько элементов управления.
  • Метки хорошо известны.
  • Элементы управления в основном понятны и редко являются пустыми (возможно, имеют значения по умолчанию, чтобы избежать пустых элементов управления).
• Для размещения меток достаточно места по горизонтали.
• Длина меток не сильно различается.
• существует много столбцов; Визуально метки и элементы управления отображаются в виде одного столбца.

Однако прежде чем использовать любой из этих стилей, примите во внимание еще два фактора:

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

Balance

В окне или на странице имеется баланс, если содержимое отображается равномерно распределено по поверхности. Если бы поверхность физически имела такой же вес, как и визуально, сбалансированный макет не опрокидывался бы на одну сторону.

Наиболее распространенной проблемой баланса является слишком много содержимого в левой части окна или страницы. Баланс можно создать следующими способами:

• Использование больших полей слева, чем справа.
• Размещение элементов пользовательского интерфейса, используемых для выполнения задачи, справа.
• Размещение элементов пользовательского интерфейса, используемых во всей задаче, в центре.
• Удлинение элементов управления с изменяемыми размерами или многостроковых элементов управления.
• Стратегическое использование выравнивания по центру.

Этот хорошо сбалансированный макет страницы мастера показывает большее левое поле, чем справа, чтобы улучшить баланс.

Если эти методы не обеспечивают баланс, рассмотрите возможность уменьшения ширины окна или страницы, чтобы лучше соответствовать их содержимому.

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

Сетки

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

Количество линий сетки влияет на восприятие визуальной сложности. Макет с меньшим количеством линий сетки выглядит проще, чем макет с большим количеством линий сетки.

Визуально сложные:

Визуально простой:

Ненужные линии сетки создают визуальную сложность.

Вы знаете, что макет эффективно использует сетки, когда:

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

Визуальная простота

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

Вы знаете, что макет имеет визуальную простоту, когда он:

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

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

Рекомендации

Разрешение экрана и разрешение на дюйм

• Поддержка минимального эффективного разрешения Windows 800 x 600 пикселей. Для критически важных пользовательских интерфейсов, которые должны работать в безопасном режиме, поддерживается эффективное разрешение 640 x 480 пикселей. Обязательно учитывайте пространство, используемое панелью задач, резервируя 48 вертикальных относительных пикселей для окон, отображаемых на панели задач.
• Оптимизируйте изменяемые макеты окон для эффективного разрешения 1024 x 768 пикселей. Автоматически изменяйте размер этих окон для уменьшения разрешения экрана таким образом, чтобы они по-прежнему были функциональными.
• Обязательно протестируйте окна в режимах 96 точек на дюйм (800 x 600 пикселей), 120 точек на дюйм (1024 x 768 пикселей) и 144 точек на дюйм (1200 x 900 пикселей). Проверьте наличие проблем с макетом, таких как обрезка элементов управления, текста и окон, растяжение значков и растровых рисунков.
• Для программ с сенсорным и мобильными устройствами оптимизируйте для 120 точек на дюйм. Экраны с высоким разрешением на дюйм в настоящее время широко распространены на сенсорных и мобильных компьютерах.

Размер окна

• Выберите размер окна по умолчанию, соответствующий его содержимому. Не бойтесь использовать большие размеры начальных окон, если вы можете эффективно использовать пространство.
• Используйте сбалансированное соотношение сторон высоты и ширины. Пропорции между 3:5 и 5:3 предпочтительнее, хотя пропорции 1:3 можно использовать для диалоговых окон сообщений (например, ошибок и предупреждений).
• Используйте окна с возможностью изменения размера, когда это удобно, чтобы избежать полос прокрутки и усеченных данных. Окна с динамическим содержимым, документами, изображениями, списками и деревьями больше всего выигрывают от окна с изменяемым размером.
• Для текстовых документов рекомендуется использовать максимальную длину строки в 80 символов, чтобы упростить чтение текста. (Символы включают буквы, знаки препинания и пробелы.)
• Окна фиксированного размера:
  • Окна фиксированного размера должны быть полностью видимыми и иметь размер для размещения в рабочей области.
• Окна с изменяемыми размерами:

  • Окна с изменяемыми размерами могут быть оптимизированы для более высокого разрешения, но при необходимости уменьшаться до фактического разрешения экрана.

  • В окнах с постепенно большими размерами должно отображаться все больше информации. Убедитесь, что по крайней мере одна часть окна или элемент управления содержит содержимое с изменяемым размером.

  • Не изменяйте левый верхний источник содержимого при изменении размера окна. Не перемещайте источник, чтобы сбалансировать содержимое при изменении размера окна.

  • Установите максимальный размер содержимого, если содержимое может быть слишком растянуто слишком широко. Если содержимое становится громоздким, не изменяйте размер области содержимого сверх ее максимальной ширины или изменяйте источник содержимого, так как размер окна будет увеличен. Вместо этого оставьте максимальную ширину и фиксированный верхний левый источник.

  • Установите минимальный размер окна, если размер, ниже которого содержимое больше не будет использоваться. Для элементов управления с изменяемым размером задайте минимальные размеры элементов с изменяемым размером, например минимальную ширину функциональных столбцов в представлениях списков. Необязательные элементы пользовательского интерфейса должны быть полностью удалены.

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

    

    В этом примере Медиаплеер Windows изменяет свой формат, когда окно становится слишком маленьким для стандартного формата.

Размер элемента управления

• Сделайте все интерактивные элементы управления по крайней мере относительными 16 x 16 пикселей. Это хорошо подходит для всех устройств ввода, включая планшеты Windows и Сенсорные технологии.

• Элементы управления размером, чтобы избежать усеченных данных. Не усекать данные, которые необходимо прочитать для выполнения задачи. Размер столбцов представления списка, чтобы избежать усечения данных.

• Элементы управления размером, чтобы исключить ненужную прокрутку. Сделайте элементы управления немного больше, если это позволит исключить полосу прокрутки. Должно быть несколько вертикальных полос прокрутки и нет ненужных горизонтальных полос прокрутки.

  

  В этом примере раскрывающийся список имеет размер, чтобы исключить полосу прокрутки.

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

  

  В этом примере единообразно используется одно поле списка и размер кнопки команды.

• Для элементов управления, размер которых зависит от их текста, включите дополнительные 30 процентов (до 200 процентов для более короткого текста) для любого текста, который будет локализован. В этом руководстве предполагается, что макет разработан с использованием текста на английском языке. Обратите внимание, что это руководство относится к локализованным текстам, а не к числам.

• Расширение элементов управления статическим текстом, проверка полей и переключателей до максимальной ширины, которая будет соответствовать макету. Это позволяет избежать усечения текста переменной длины и локализации.

  Неправильно:

  

  В этом примере текст элемента управления неоправданно усекается.

Интервалы между элементами управления

• Если элементы управления не касаются, между ними должно быть не менее 3 единиц dll (5 относительных пикселей). В противном случае пользователи могут щелкнуть неактивное пространство между элементами управления. Так как щелчок неактивного пространства не имеет результата или визуальной обратной связи, пользователи часто не уверены, что пошло не так.

Размещение

• Расположите элементы пользовательского интерфейса в пределах поверхности так, чтобы они естественным образом протекали слева направо и сверху вниз (в западных языках и региональных параметрах). Размещение элементов пользовательского интерфейса определяет их связь и должно зеркало шаги для выполнения задачи.
• Поместите элементы пользовательского интерфейса, инициирующие задачу, в левый верхний угол или по верхнему центру. Присвойте элементу пользовательского интерфейса, на который сначала должны обратить внимание пользователи.
• Поместите элементы пользовательского интерфейса, выполняющие задачу, в правом нижнем углу.
• Размещайте связанные элементы пользовательского интерфейса вместе и отделяйте несвязанные элементы.
• Разместите необходимые шаги в потоке main.
• Размещайте необязательные шаги за пределами потока main, возможно, с отменой выделения с помощью подходящего фона или прогрессивного раскрытия информации.
• Поместите часто используемые элементы перед редко используемыми элементами в пути сканирования.

Фокус

• Выберите один элемент пользовательского интерфейса, на который пользователи должны сначала обратить внимание, чтобы быть фокусом. Координатор должен быть чем-то важным, что пользователи должны быстро найти и понять.
• Поместите фокус в левый верхний угол или по верхнему центру.
• Присвойте фокусу наибольший визуальный акцент, например выделенный текст, выделение по умолчанию или начальный фокус ввода.

Выравнивание

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

Специальные возможности

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

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

  Неправильно:

  

  В этом примере текстовое поле неправильно помещается в метку поля проверка.

  Правильно:

  

  Здесь текстовое поле помещается после метки поля проверка.

• Сделайте группирование доступным. Группы, определенные окнами, полями групп, разделителями, текстовыми метками и агрегаторами, автоматически обрабатываются специальными средствами. Однако группы, определенные только размещением и фоном, не являются и должны быть определены программным способом для специальных возможностей.

Дополнительные рекомендации см. в разделе Специальные возможности.

Рекомендуемые размеры и интервалы

Изменение размера элемента управления

В следующей таблице перечислены рекомендуемые размеры (ширина x высота или высота, если одно число) для общих элементов пользовательского интерфейса (для 9 пт. Segoe UI с разрешением 96 точек на дюйм). Ширина на основе самого длинного элемента на английском языке добавляет 30 процентов для локализации (до 200 процентов для более короткого текста) для любого текста (но не чисел), который будет локализован.

Пример	Элемент	Диалоговые блоки	Относительные пиксели
	Флажки	10	17
	Поля со списком	ширина самого длинного элемента + 30 % x 14	ширина самого длинного элемента + 30 % x 23
	Кнопки команд	50 x 14	75 x 23
	Ссылки на команды	25 (одна строка) или 35 (две строки)	41 (одна строка) или 58 (две строки)
	Раскрывающиеся списки	ширина наиболее длинных допустимых данных + 30 % x 14	ширина самого длинного элемента + 30 % x 23
	Окна со списками	ширина самого длинного элемента + 30 % x целое число элементов (минимум 3 элемента)
	Представления списка	ширина столбцов, не допускающая усечения данных x целое число элементов
	Индикаторы выполнения	107 или 237 x 8	160 или 355 x 15
	Переключатели	10	17
	через ползунки;	15	24
	Текст (статический)	8	13
	Текстовые поля	ширина самого длинного или ожидаемого входного значения + 30% x 14 (одна строка) + 10 для каждой дополнительной строки	ширина самых длинных допустимых данных + 30% x 23 относительных пикселей (одна строка) + 16 для каждой дополнительной строки
	Представления в виде дерева	ширина самого длинного элемента + 30 % x целое количество элементов (минимум 5 элементов)

Интервал

В следующей таблице перечислены рекомендуемые интервалы между общими элементами пользовательского интерфейса (для 9 пт. пользовательский интерфейс Segoe с разрешением 96 точек на дюйм).

	Элемент	Диалоговые блоки	Относительные пиксели
	Поля диалогового окна	7 со всех сторон	11 со всех сторон
	Между текстовыми метками и связанными с ними элементами управления (например, текстовыми полями и списками)	3	5
	Между связанными элементами управления	4	7
	Между несвязанными элементами управления	7	11
	Первый элемент управления в поле группы	11 вниз от верхней части поля группы; выравнивание по вертикали по названию поля группы	16 вниз от верхней части поля группы; выравнивание по вертикали по названию поля группы
	Между элементами управления в группе	4	7
	Между кнопками по горизонтали или по вертикали	4	7
	Последний элемент управления в поле группы	7 над нижней частью поля группы	11 над нижней частью поля группы
	От левого края поля группы	6	9
	Текстовая метка рядом с элементом управления	3 вниз от верхней части элемента управления	5 вниз от верхней части элемента управления
	Между абзацами текста	7	11
	Наименьшее пространство между интерактивными элементами управления	3 или без пробела	5 или без пробела
	Наименьшее пространство между неинтерактивным элементом управления и любым другим элементом управления	2	3