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

Примечание

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

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

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

Примечание

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

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

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

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

  

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

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

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

  

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

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

  

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

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

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

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

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

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

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

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

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

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

  

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

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

  

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

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

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

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

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

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

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

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

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

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

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

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

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

Шеврон

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

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

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

Стрелки

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

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

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

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

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

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

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

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

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

Вращающиеся треугольники

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

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

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

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

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

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

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

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

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

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

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

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

  Правильно:

  

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

  

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

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

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

  

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

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

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

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

  

  

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

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

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

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

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

  

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

  Правильно:

  

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

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

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

  

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

Шеврон

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

  Правильно:

  

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

  

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

  Правильно:

  

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

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

  Правильно:

  

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

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

  

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

Стрелки

• Не используйте графику со стрелками, которую можно спутать с "Назад", "Вперед", "Перейти" или "Воспроизвести". Используйте простые наконечники треугольной формы (стрелки без стеблей) на нейтральном фоне.

  Правильно:

  

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

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

  

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

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

  

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

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

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

Метки

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

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

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

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

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

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

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

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

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

Примеры:

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