Раскрывающиеся списки & поля со списком

Примечание

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

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

снимок экрана поля со списком "время напоминания"

Типичное поле со списком.

Следующие термины важны для понимания при чтении этой статьи:

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

Примечание

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

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

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

  • Используется ли элемент управления для выбора одного из вариантов из списка взаимоисключающих значений? Если нет — используйте другой элемент управления. Чтобы выбрать несколько параметров, используйте стандартный список с множественным выбором, список флажков, построитель списка или добавить или удалить список.
  • Являются ли команды Options? Если это так, используйте кнопку меню или разворачивающуюся кнопку. Используйте раскрывающиеся списки и поля со списком для объектов (существительных) или атрибутов (прилагательных), но не команд (глаголы).
  • Представляет ли список данные, а не параметры программы? В любом случае раскрывающийся список или поле со списком подходит для выбора. Напротив, переключатели подходят только для небольшого количества параметров программы.

Раскрывающиеся списки

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

    снимок экрана с наивысшим качеством кнопки по умолчанию

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

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

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

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

Изменяемые раскрывающиеся списки

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

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

  • Можно ли перечислить наиболее вероятные варианты? В противном случае используйте текстовое поле.

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

    снимок экрана с диалоговым окном "Запуск" с раскрывающимся списком

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

    снимок экрана Outlook — строка и автоматическое завершение

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

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

    снимок экрана окна "Outlook — линия" и кнопка "Обзор"

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

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

  • Нужно ли пользователям быстро размещать элемент в большом списке? (Только Win32) Если это так, используйте поле со списком, так как пользователи могут выбрать элемент, введя его полное имя. Напротив, раскрывающийся список Win32 выбирает элементы только по последнему введенному символу (так что ввод «Июн» в список месяцев будет соответствовать Ноябрьу, а не Июньу). В этом случае используйте поле со списком, даже если возможные варианты ограничены.

Редактируемые списки

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

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

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

Раскрывающиеся списки и поля со списком имеют несколько шаблонов использования:

Использование Пример
Раскрывающийся список стандартного раскрывающегося списка с фиксированным набором предварительно определенных значений.
При закрытии отображается только выбранный элемент. Когда пользователь найдет кнопку раскрывающегося списка, все параметры станут видимыми. Чтобы изменить это значение, пользователи могут открыть список и выбрать другое значение.
снимок экрана: раскрывающийся список, параметры скрыты
В этом примере список находится в нормальном состоянии.
снимок экрана: раскрывающийся список с отображаемыми параметрами
В этом примере список был сброшен.
Предварительный просмотр раскрывающегося списка, в котором отображаются результаты выбора, чтобы помочь пользователям выбрать.
снимок экрана с параметрами цвета и текста
В этих примерах раскрывающиеся списки предварительно проводят результаты выбора.
Редактируемый раскрывающийся список раскрывающегося списка, который позволяет пользователям вводить значение, не содержащееся в раскрывающемся списке.
aa511458. dropdownlists27 (EN-US, MSDN. 10) .pngснимок экрана поля со списком для редактируемого размера шрифта
Примеры редактируемого раскрывающегося списка в режимах правки и отклонения.
Используйте этот элемент управления, если требуется обеспечить гибкость текстового поля, но вы хотите помочь пользователям, предоставив удобный список вероятных вариантов.
Изменяемые списки. Обычное поле со списком, которое позволяет пользователям вводить значения, не входящие в список всегда видимых.
снимок экрана с раскрывающимся списком параметров шрифта
В этих примерах всегда отображаются редактируемые списки.
Этот элемент управления лучше выбирать по сравнению с неизменяемым раскрывающимся списком, когда важно порекомендовать пользователям просматривать альтернативные варианты выбора или приглашать изменения.

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

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

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

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

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

    Исправить:  снимок экрана с логическим раскрывающимся списком

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

    Неправильный:  снимок экрана с раскрывающимся списком раскрывающегося списка

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

    Исправить:  снимок экрана с раскрывающимся списком в алфавитном порядке

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

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

  • Заключите meta-параметры в круглые скобки.

    Снимок экрана, на котором отображается раскрывающийся список с выбранным "(нет)".

    В этом примере "(нет)" является мета-параметром, так как он не является допустимым значением для выбора, а не описывает, что сам параметр не используется.

  • При отключении раскрывающегося списка или поля со списком также отключите все связанные метки и кнопки команд.

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

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

    Исправить:  снимок экрана с раскрывающимся списком без выбранных элементов

    Неправильный:  снимок экрана с раскрывающимся списком с пустым выбранным

    В неправильном примере значение параметра Blank является неясным.

Раскрывающиеся списки для предварительного просмотра

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

    снимок экрана с раскрывающимся списком предварительно отображаемых шрифтов

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

  • Не используйте ненужные значки в предварительных выпусках.

    Неправильный:  снимок экрана с раскрывающимся списком меток со значками

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

Поля со списком

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

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

    снимок экрана с раскрывающимся списком размеров шрифтов

    В этом примере не указаны многие допустимые варианты, например 15 или шрифты половинного размера, например 9,5.

Значения по умолчанию

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

Запросы

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

снимок экрана поля поиска

Типичный запрос.

Использовать запрос в следующих случаях:

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

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

При использовании запросов:

  • Нарисуйте текст подсказки полужирным серым и черным текстом в нормальном режиме. Текст подсказки не следует путать с реальным текстом.
  • Текст подсказки следует кратко отображать. Вместо полных предложений можно использовать фрагменты.
  • Используйте прописные буквы в стиле предложения.
  • Не используйте закрывающие знаки препинания или многоточие.
  • Текст подсказки не должен быть доступным для редактирования и должен исчезнуть после нажатия пользователем кнопки или клавиши TAB в текстовом поле.
    • Исключение: Запрос отображается, если текстовое поле имеет фокус ввода по умолчанию и исчезает только после того, как пользователь запустит ввод.
  • Текст подсказки восстанавливается, если текстовое поле остается пустым при потере фокуса ввода.

Неправильный:  снимок экрана с шестью изменяемыми раскрывающимися списками

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

снимок экрана с раскрывающимся списком и спецификациями

Рекомендуемые размеры и промежутки для раскрывающихся списков и полей со списками.

  • Выберите ширину, соответствующую наиболее длинным допустимым данным. Раскрывающиеся списки нельзя прокручивать по горизонтали, поэтому пользователи могут видеть только то, что отображается в элементе управления. (Обратите внимание, однако, что для полей со списком может быть включена функция прокрутки.)
  • Включите дополнительные 30% (до 200 процентов для более короткого текста) для любого текста (но не чисел), который будет локализован.
  • Выберите длину списка, которая устраняет ненужную вертикальную прокрутку. Так как раскрывающиеся списки отображаются по запросу, их списки должны отображать до 30 элементов. Редактируемые списки (не имеющие кнопки раскрывающегося списка) должны отображать от 3 до 12 элементов.

Метки

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

  • Напишите метку как слово или фразу, а не как предложение и заставьте двоеточие. Исключения:

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

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

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

    Исправить:  снимок экрана с раскрывающимся списком для выравнивания меток

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

    Неправильный:  снимок экрана раскрывающегося списка с неправильным рассогласованием

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

  • Единицы измерения (секунды, соединения и т. д.) можно указать в скобках после метки.

  • Не делайте содержимое раскрывающегося списка или поля со списком (или метки единиц измерения) в предложении, так как это не локализуется.

Текст параметра

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

Пояснительный текст

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

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

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

    снимок экрана с раскрывающимся списком с добавленными данными

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

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

При ссылке на раскрывающиеся списки:

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

Пример. в списке Размер шрифта выберите пункт крупные шрифты.

При ссылке на поля со списком:

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

Пример. в поле Шрифт введите шрифт, который вы хотите использовать.