Раскрывающийся список Windows 7 и поля со списком

Примечание.

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

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

screen shot of reminder time combo box

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

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

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

Примечание.

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

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

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

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

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

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

    screen shot of highest quality as default button

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

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

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

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

Редактируемые раскрывающиеся списки

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

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

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

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

    screen shot of run dialog box with drop-down list

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

    screen shot of outlook to line and auto-complete

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

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

    screen shot of outlook to line and browse button

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

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

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

Редактируемые поля списков

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

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

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

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

Использование Пример
Раскрывающийся список стандартного раскрывающегося списка с фиксированным набором предопределенных значений.
При закрытии отображается только выбранный элемент. Когда пользователи нажимают кнопку раскрывающегося списка, все параметры становятся видимыми. Чтобы изменить значение, пользователи могут открыть список и щелкнуть другое значение.
screen shot of drop-down list, options hidden
В этом примере список находится в обычном состоянии.
screen shot of drop-down list, options displayed
В этом примере список был удален.
Раскрывающийся список предварительного просмотра содержит раскрывающийся список, который просматривает результаты выбора, чтобы помочь пользователям выбирать.
screen shot of color and text options
В этих примерах раскрывающийся список отображает результаты выбора.
Раскрывающийся список редактируемых списков позволяет пользователям вводить значение, которое не входит в раскрывающийся список.
aa511458.dropdownlists27(en-us,msdn.10).pngscreen shot of editable font-size combo box
Примеры редактируемого раскрывающегося списка в режимах редактирования и удаления.
Используйте этот элемент управления, если вы хотите предоставить гибкость текстового поля, но хотите помочь пользователям, предоставив удобный список вероятных вариантов.
Редактируемые поля списка обычное поле со списком, которое позволяет пользователям вводить значение, которое не отображается в всегда видимом списке.
screen shot of drop-down list of font options
В этих примерах всегда отображаются редактируемые поля списка.
Этот элемент управления лучше, чем редактируемый раскрывающийся список, когда важно поощрять пользователей просматривать альтернативные варианты или приглашать изменения.

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

Общие

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

Презентация

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

    Правильное.screen shot of logical drop-down list

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

    Неправильноscreen shot of disorganized drop-down list :

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

    Правильное.screen shot of alphabetized drop-down list

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

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

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

    Screenshot that shows a drop-down list with '(None)' selected.

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

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

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

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

    Правильное.screen shot of drop-down list with none selected

    Неправильноscreen shot of drop-down list with blank selected :

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

Предварительный просмотр раскрывающихся списков

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

    screen shot of drop-down list of fonts previewed

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

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

    Неправильноscreen shot of drop-down list of labels with icons :

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

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

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

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

    screen shot of drop-down list of font sizes

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

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

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

Запросы

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

screen shot of a search box

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

Используйте запрос, когда:

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

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

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

  • Рисуйте текст запроса в курсивном сером и реальном тексте в обычном черном цвете. Текст запроса не должен быть перепутан с реальным текстом.
  • Оставить текст запроса кратким. Фрагменты можно использовать вместо полных предложений.
  • Используйте прописную букву в стиле предложений.
  • Не используйте конечные знаки препинания или многоточия.
  • Текст запроса не должен быть редактируемым и должен исчезать после нажатия кнопки или вкладки в текстовое поле.
    • Исключение: отображается запрос, если текстовое поле имеет фокус ввода по умолчанию и исчезает только после того, как пользователь начнет вводить текст.
  • Текст запроса восстанавливается, если текстовое поле по-прежнему пусто при потере фокуса ввода.

Неправильноscreen shot of six editable drop-down lists :

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

screen shot of drop-down list and specifications

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

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

Наклейки

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

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

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

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

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

    Правильное.screen shot of drop-down list label alignment

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

    Неправильноscreen shot of drop-down list incorrectly aligned :

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

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

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

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

Инструкционный текст

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

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

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

    screen shot of drop-down list with added data

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

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

При обращении к раскрывающимся спискам:

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

Пример. В списке размеров шрифтов щелкните "Крупные шрифты".

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

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

Пример. В поле "Шрифт" введите нужный шрифт.