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

Примечание

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

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

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

Примечание

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

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

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

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

  

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

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

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

  

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

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

  

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

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

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

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

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

Цели прогрессивного раскрытия:

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

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

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

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

  

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

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

  

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

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

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

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

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

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

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

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

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

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

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

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

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

Шеврон

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

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

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

Стрелки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Общие сведения

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

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

  Правильно:

  

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

  

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

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

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

  

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

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

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

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

  

  

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

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

Уровень представления

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

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

  

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

  Правильно:

  

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

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

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

  

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

Шеврон

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

  Правильно:

  

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

  

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

  Правильно:

  

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

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

  Правильно:

  

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

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

  

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

Стрелки

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

  Правильно:

  

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

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

  

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

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

  

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

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

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

Метки

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

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

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

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

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

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

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

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

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

Примеры:

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