Списки

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

Ресурсы

Тип	Связь	Статус
Дизайн	Исходный код дизайна (Фигма)	Доступный
Выполнение	Реактивный ранец	Доступный

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

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

Варианты

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

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

Анатомия

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

Штаты

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

Использование

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

check_circle

Делать

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

warning

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

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

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

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

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

check_circle

Делать

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

cancel

Не

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

cancel

Не

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

Иконки

check_circle

Делать

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

cancel

Не

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

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

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