Элементы управления поэтапным представлением информации

Примечание.

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

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

Примеры прогрессивных элементов управления раскрытием информации.

Примечание.

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

Выбор правильного элемента управления

Чтобы решить, рассмотрите следующие вопросы:

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

  

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

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

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

  

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

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

  

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

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

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

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

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

Целями прогрессивного раскрытия являются следующие задачи:

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

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

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

• Уменьшение веса разрешений для дополнительного пользовательского интерфейса. Доступность — это визуальные свойства, которые показывают, как используются объекты. Тенденция заключается в том, чтобы пользовательский интерфейс, с которым пользователи могли взаимодействовать на месте, но для того, чтобы весь такой пользовательский интерфейс нарисовался, чтобы кричать "щелкнуть меня!" приводит к слишком много визуального загромоздки. Для дополнительного пользовательского интерфейса часто лучше использовать тонкие возможности и дать полный эффект на наведении мыши.

  

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

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

  

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

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

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

Прогрессивные элементы управления раскрытием информации

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

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

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

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

Элемент управления	Характер использования	Внешний вид	Глиф указывает
Шеврон	Показать все: показать или скрыть оставшиеся элементы в полностью или частично скрытом содержимом. Элементы отображаются на месте (с помощью одной шеврона) или во всплывающем меню (с помощью двойного шеврона).	Шевроны указывают в направлении, в котором будет происходить действие.	Будущее состояние
Стрелки	Показать параметры: показать всплывающее меню команды.	Стрелки указывают в направлении, в котором будет происходить действие.	Будущее состояние
Элементы управления "Плюс" и "минус"	Разверните контейнеры: разверните или свернуть содержимое контейнера при переходе по иерархии.	Символы плюса и минуса не указывают, но действие всегда выполняется справа.	Будущее состояние
Поворот треугольников	Отображение сведений: отображение или скрытие дополнительных сведений на месте для отдельного элемента. Они также используются для расширения контейнеров.	Вращающиеся треугольники несколько похожи на поворотные рычаги, поэтому они указывают в направлении, в котором произошло действие.	Текущее состояние

Если вы делаете только одну вещь...

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

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

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

Шеврон

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

Шевроны используются следующим образом:

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

Стрелки

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

Если кнопка со стрелкой является независимым элементом управления, он получает фокус ввода и активируется с помощью панели пробела. Если кнопка со стрелкой имеет родительский элемент управления, родитель получает фокус ввода, а стрелка активируется с помощью клавиш ALT+ВНИЗ и ALT+СТРЕЛКА ВВЕРХ, как и в раскрывающемся списке.

Стрелки используются следующими способами:

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

Элементы управления "Плюс" и "минус"

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

Связанный объект получает фокус ввода. Плюс активируется с помощью клавиши стрелки вправо и минуса с помощью клавиши со стрелкой влево.

Элементы управления "Плюс" и "минус" используются следующими способами:

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

Поворот треугольников

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

Связанный объект получает фокус ввода. Свернутый треугольник (вправо) активируется с помощью клавиши со стрелкой вправо и развернутого (нисходящего) треугольника с помощью клавиши со стрелкой влево.

Поворот треугольников используется следующим образом:

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

Стрелки предварительного просмотра

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

В этих примерах из Microsoft Медиаплеер Windows глифы имеют стрелки, которые предлагают действие, которое произойдет.

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

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

Общие

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

• Не используйте ссылки для прогрессивных элементов управления раскрытием. Используйте только прогрессивные элементы управления раскрытием, представленные в разделе "Шаблоны использования". Однако используйте ссылки для перехода к разделам справки.

  Правильное.

  

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

  

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

Взаимодействие

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

  

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

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

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

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

  

  

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

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

Презентация

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

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

  

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

  Правильное.

  

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

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

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

  

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

Шеврон

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

  Правильное.

  

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

  

  В неправильном примере двойной шеврон используется для постепенного раскрытия.

  Правильное.

  

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

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

  Правильное.

  

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

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

  

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

Стрелки

• Не используйте графику со стрелками, которые можно путать с back, forward, Go или Play. Используйте простые треугольно-фигурные стрелки (стрелки без стеблей) на нейтральных фонах.

  Правильное.

  

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

  Неправильно (для прогрессивного раскрытия):

  

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

  Неправильно (для back, forward):

  

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

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

Рекомендуемый размер и интервалы для прогрессивных элементов управления раскрытием информации.

Наклейки

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

Документация

При обращении к прогрессивным элементам управления раскрытием информации:

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

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

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

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

• Чтобы описать взаимодействие с пользователем, используйте команду click. Если требуется для ясности, используйте щелчки... чтобы развернуть или свернуть.

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

Примеры:

• (Для шеврона) Чтобы определить размер файла, нажмите кнопку "Сведения".
• (Для стрелки) Чтобы просмотреть все параметры, щелкните стрелку рядом с полем поиска .
• (Для плюса или минуса) Чтобы просмотреть рисунок, нажмите кнопку "Рисунки".