Списки

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

Ресурсы

Основные моменты

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

Варианты

Существует три типа списков: однострочный список, двухстрочный список и трехстрочный список.

1. Однострочный список : одна строка для описания каждого элемента. Этот простой дизайн гарантирует, что каждый предмет четко отличается от другого.
2. Двухстрочный список : для передачи каждого элемента используются две параллельные строки. Этот структурированный дизайн обеспечивает естественную читабельность и позволяет избежать когнитивной перегрузки.
3. Трехстрочный список : для представления каждого элемента используются три параллельные линии. Этот декоративный дизайн создает высокий уровень визуальной заметности.

Анатомия

1. Значок : Небольшое изображение, представляющее определенный объект или действие, часто используемое для визуальной передачи идеи или концепции.
2. Надстрочная линия : короткая строка текста, которая появляется над заголовком или подзаголовком и часто используется для предоставления дополнительного контекста или выделения.
3. Заголовок : большая жирная строка текста, служащая основным заголовком элемента дизайна или страницы.
4. Подзаголовок : небольшая строка текста, предоставляющая дополнительную информацию или контекст под основным заголовком.
5. Элемент управления : интерактивный элемент, который позволяет пользователю вводить решение.

состояния

Спецификация

Применение

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

check_circle

Делать

Элементы списка не являются кнопками. У предметов нет контейнеров. Элементы списка по умолчанию не выбраны и не имеют фокуса.

warning

Осторожность

Используйте фон контейнера для элементов списка только при необходимости.

Элементы управления выбором

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

1. Флажки : выберите один или несколько элементов списка.
2. Радиокнопки : выберите ровно один элемент в списке.
3. Переключатели : включение или выключение элемента управления.

check_circle

Делать

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

cancel

Не

Не полагайтесь исключительно на цвет фона для обозначения выбора в списке.

cancel

Не

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

Иконки

check_circle

Делать

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

cancel

Не

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

Аватары и изображения

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