Список — это элемент интерфейса, который позволяет структурированно отображать связанные данные. Его основная задача — помочь пользователю быстро воспринимать информацию и легко в ней ориентироваться. Списки используются везде: от простых перечислений до сложных древовидных структур с множеством уровней вложенности.
Базовая анатомия
Основу списка составляет контейнер, внутри которого располагаются элементы. Каждый элемент может включать маркер (для маркированных списков), номер (для нумерованных списков) или просто отступ. Важно обеспечить достаточное расстояние между элементами для комфортного восприятия.
Анатомия с дополнительными элементами
Элементы списка могут содержать не только текст, но и другие компоненты: изображения, иконки, чекбоксы или кнопки действий. При добавлении таких элементов необходимо следить за выравниванием и сохранением визуальной целостности списка.
Вложенные списки
При проектировании многоуровневых списков каждый уровень вложенности получает дополнительный отступ. Визуальные маркеры могут меняться в зависимости от уровня, помогая пользователю лучше ориентироваться в структуре.
Списки должны реагировать на действия пользователя особенно, если они являются частью навигации или интерфейса управления.
Default
В обычном состоянии все элементы списка должны быть хорошо читаемы, а их иерархия — очевидна. Если список интерактивный, элементы должны визуально отличаться от обычного текста.
Hover
При наведении на интерактивный элемент списка он должен менять свой внешний вид, например, через изменение цвета фона или добавление подсветки. Изменения должны быть заметными, но не отвлекающими.
Active
В момент взаимодействия с элементом (клик или тап) важно обеспечить мгновенную обратную связь. При выборе нескольких элементов их состояние должно быть хорошо различимо.
Disabled
Неактивные элементы списка должны визуально отличаться пониженной контрастностью, сохраняя при этом читаемость.
