Списки

Примечание

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

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

Типичный список с одним выбором.

Примечание

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

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

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

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

Списки с одним выбором

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

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

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

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

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

Стандартные списки с множественным выбором и проверка списки полей

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

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

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

Построители списков, а также добавление и удаление списков

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

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

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

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

Списки имеют несколько шаблонов использования:

Метка	Значение
Списки с одним выбором Разрешить пользователям выбирать по одному элементу за раз.	В этом примере пользователи могут выбрать только один отображаемый элемент.
Стандартные списки множественного выбора Разрешить пользователям выбирать любое количество элементов, включая ни одно.	Стандартные списки с множественным выбором имеют точно такой же внешний вид, что и списки с одним выбором, поэтому нет визуального признака того, что список поддерживает множественный выбор. Так как пользователи должны обнаружить эту возможность, этот шаблон списка лучше всего использовать для задач, где множественный выбор не является обязательным и используется редко. Существует два разных режима множественного выбора: множественный и расширенный. Режим расширенного выбора является наиболее распространенным, где выбор можно расширить путем перетаскивания или с помощью клавиш SHIFT+щелчок и CTRL+щелчок для выбора групп смежных и несмежных значений соответственно. В режиме множественного выделения щелчок любого элемента переключает его состояние выделения независимо от клавиш SHIFT и CTRL. Учитывая такое необычное поведение, режим множественного выбора не рекомендуется использовать, и вместо этого следует использовать проверка списки полей. В этом примере пользователи могут выбрать любое количество элементов с помощью режима множественного выбора.
Списки флажок Как и стандартные списки с множественным выбором, проверка списки позволяют пользователям выбирать любое количество элементов, включая ни один.	В отличие от стандартных списков с множественным выбором, поля проверка четко указывают на возможность множественного выбора. Используйте этот шаблон списка для задач, в которых множественный выбор является обязательным или часто используемым. В этом примере пользователи обычно выбирают несколько элементов, поэтому используется список проверка. Учитывая это четкое указание на множественный выбор, можно предположить, что проверка списки предпочтительнее стандартных списков с множественным выбором. На практике для некоторых задач требуется множественный выбор или его использование в значительной степени; Использование списка проверка в таких случаях привлекает слишком много внимания к выбору. Следовательно, стандартные списки множественного выбора являются гораздо более распространенными.
Предварительный просмотр списков Может быть один или несколько фрагментов, но они показывают предварительный просмотр эффекта выделения, а не просто текста.	В этом примере предварительный просмотр каждого параметра четко показывает эффект выбора, который является более эффективным, чем использование только текста.
Построители списков Разрешить пользователям создавать список вариантов, добавляя по одному элементу за раз и при необходимости устанавливая порядок списка.	Построитель списков состоит из двух списков с одним выбором: список слева представляет собой фиксированный набор параметров, а список справа — список, который создается. Между списками есть две кнопки команд: Кнопка Добавить , которая перемещает выбранный в данный момент параметр в создаваемый список, вставленный перед выбранным элементом. (Двойной щелчок по элементу параметра имеет тот же эффект.) Кнопка Удалить , которая удаляет выбранный элемент из созданного списка и возвращает его в список параметров. (Двойной щелчок по элементу в встроенном списке имеет тот же эффект.) При необходимости в созданном списке могут быть команды Переместить вверх и Переместить вниз для упорядочения элементов списка. В этом примере построитель списков используется для создания панели инструментов путем выбора элементов из набора доступных параметров и настройки их порядка.
Добавление и удаление списков Разрешить пользователям создавать список вариантов, добавляя один или несколько элементов за раз и при необходимости устанавливая порядок списков (например, построитель списков).	В отличие от построителя списков, при нажатии кнопки Добавить отображается диалоговое окно для выбора элементов для добавления в список. Использование отдельного диалогового окна обеспечивает значительную гибкость при выборе элементов, можно использовать специализированное средство выбора объектов или даже общий диалог. По сравнению с построителем списков этот вариант является более компактным, но требует немного больше усилий для добавления элементов. В этом примере пользователи могут добавлять или удалять инструменты из меню, а также задавать порядок. Хотя построитель списков и шаблоны добавления и удаления списков значительно сложнее, чем другие списки с множественным выбором, они обладают двумя уникальными преимуществами: Пользователи могут управлять порядком списка как при создании списка, так и после него. Пользователи могут просматривать сводку по выбранным элементам, что может быть значительным преимуществом, если количество вариантов большое. Их недостатки в том, что они требуют гораздо больше места на экране и могут быть трудно использовать при создании большого списка элементов с нуля. Следовательно, их лучше всего использовать для создания коротких списков или изменения уже существующих списков.

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

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

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

Правильно:

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

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

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

Правильно:

В этом примере элементы списка проще найти, так как они отсортированы в алфавитном порядке. Однако элемент "Все продукты Windows" находится в начале списка, независимо от порядка сортировки.

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

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

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

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

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

Правильно:

В этом примере вместо него используется мета-параметр "(none)".

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

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

Правильно:

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

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

Допустимо:

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

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

Приемлемо:

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

Списки с множественным выбором

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

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

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

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

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

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

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

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

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

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

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

Метки

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

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

Исключение: Опустите метку, если она является просто повтором инструкции main диалогового окна. В этом случае инструкция main принимает двоеточие (если это не вопрос) и ключ доступа.

Acceptable:

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

Лучше:

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

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

В этом примере поле со списком подчинено переключателю и предоставляет общую метку.

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

Правильно:

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

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

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

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

Правильно:

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

Неправильно

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

Best:

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

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

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

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

Инструктивный и дополнительный текст

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

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

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

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

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

Пример. В списке Перейти к чему выберите Закладка.