Списки

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

Обложка списков

Ресурсы

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

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

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

Варианты

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

Списки анатомии

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

Анатомия

Списки анатомии

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

Штаты

Получение списка состояний

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

Список спецификаций

Предложение по высоте списка

Интервал в списке

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

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

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

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

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

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

Иконки

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

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

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

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