Руководство по спискам (или выбору)

Приложение для Windows: включенные и отключенные списки

Приложение для Windows: включенные и отключенные списки

Приложение Windows Phone:список

Приложение Windows Phone:список

Описание

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

Пример

Снимок экрана, иллюстрирующий стандартный элемент управления “Встроенный выбор”

Это подходящий элемент управления?

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

Случаи нецелесообразности использования списка включают:

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

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

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

Дополнительные рекомендации по использованию

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

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

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

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

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

Связанные разделы

Для разработчиков
Руководство по раскрывающимся спискам
Руководство по флажкам
Руководство по тумблерам
Руководство по представлениям сетки и представлениям списка
Руководство по контекстному масштабированию
Руководство по ползункам
Руководство по переключателям
Создание макета пользовательского интерфейса
Для разработчиков (HTML)
select element | select object
Добавление элементов управления выбором
Для разработчиков (XAML)
ListBox class
Добавление полей со списком и списков

 

 

Показ:
© 2015 Microsoft