Списки
Оптимизируйте свои подборки
Сохраняйте и классифицируйте контент в соответствии со своими настройками.
Списки — это визуальное представление одного или нескольких связанных элементов. Они обычно используются для отображения набора опций.
Ресурсы
Основные моменты
- Списки представляют собой непрерывную коллекцию текста или изображений.
- Списки должны выглядеть естественно и легко просматриваться.
- Списки состоят из элементов, содержащих основные и дополнительные действия, представленные значками и текстом.
Варианты
Существует три типа списков: однострочный список, двухстрочный список и трехстрочный список.
- Однострочный список : одна строка для описания каждого элемента. Этот простой дизайн гарантирует, что каждый предмет четко отличается от другого.
- Двухстрочный список : для передачи каждого элемента используются две параллельные строки. Этот структурированный дизайн обеспечивает естественную читабельность и позволяет избежать когнитивной перегрузки.
- Трехстрочный список : для представления каждого элемента используются три параллельные линии. Этот декоративный дизайн создает высокий уровень визуальной заметности.
Анатомия
- Значок : Небольшое изображение, представляющее определенный объект или действие, часто используемое для визуальной передачи идеи или концепции.
- Надстрочная линия : короткая строка текста, которая появляется над заголовком или подзаголовком и часто используется для предоставления дополнительного контекста или выделения.
- Заголовок : большая жирная строка текста, служащая основным заголовком элемента дизайна или страницы.
- Подзаголовок : небольшая строка текста, предоставляющая дополнительную информацию или контекст под основным заголовком.
- Элемент управления : интерактивный элемент, который позволяет пользователю вводить решение.
Штаты
Спецификация
Использование
Списки представляют собой вертикально организованные группы текста и изображений. Оптимизированный для понимания прочитанного список состоит из одного непрерывного столбца элементов. Элементы списка могут содержать основные и дополнительные действия, представленные значками и текстом.
check_circle
Делать
Элементы списка не являются кнопками. У предметов нет контейнеров. Элементы списка по умолчанию не выбраны и не имеют фокуса.
warning
Осторожность
Используйте фон контейнера для элементов списка только при необходимости.
Элементы управления выбором
Элементы управления отображают информацию и действия для элементов списка. Их можно выровнять по ведущему или заднему краю элемента списка.
- Флажки : выберите один или несколько элементов списка.
- Радиокнопки : выберите ровно один элемент в списке.
- Переключатели : включение или выключение элемента управления.
check_circle
Делать
Используйте индикатор выбора значка, чтобы четко показать выбранный элемент в списке. Это поможет пользователям легко определить, какой элемент они выбрали, и улучшить общий пользовательский опыт.
cancel
Не
Не полагайтесь исключительно на цвет фона для обозначения выбора в списке.
cancel
Не
Избегайте размещения кнопок внутри элемента списка, так как это может привести к путанице в отношении того, какой элемент в данный момент находится в фокусе.
Иконки
check_circle
Делать
Если вы показываете в списке контент одного и того же типа, опустите значки, чтобы уменьшить визуальный шум и улучшить взаимодействие с пользователем. Избегайте использования значков в списке, если они не служат никакой цели и не предоставляют дополнительной информации.
cancel
Не
Не используйте один и тот же значок для всех элементов в списке. Это может быть визуально подавляющим и сбивать с толку пользователей. Вместо этого используйте значки только тогда, когда они повышают ценность или предоставляют дополнительную информацию.
Аватары и изображения
Элементы списка могут включать изображения в круговой обрезке, представляющие человека или организацию.
Контент и образцы кода на этой странице предоставлены по лицензиям. Java и OpenJDK – это зарегистрированные товарные знаки корпорации Oracle и ее аффилированных лиц.
Последнее обновление: 2024-08-19 UTC.
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"Отсутствует нужная мне информация"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"Слишком сложен/слишком много шагов"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"Устарел"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"Проблема с переводом текста"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"Проблемы образцов/кода"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"Другое"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"Прост для понимания"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"Помог мне решить мою проблему"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"Другое"
}]
{"lastModified": "\u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435: 2024-08-19 UTC."}
[[["Прост для понимания","easyToUnderstand","thumb-up"],["Помог мне решить мою проблему","solvedMyProblem","thumb-up"],["Другое","otherUp","thumb-up"]],[["Отсутствует нужная мне информация","missingTheInformationINeed","thumb-down"],["Слишком сложен/слишком много шагов","tooComplicatedTooManySteps","thumb-down"],["Устарел","outOfDate","thumb-down"],["Проблема с переводом текста","translationIssue","thumb-down"],["Проблемы образцов/кода","samplesCodeIssue","thumb-down"],["Другое","otherDown","thumb-down"]],["Последнее обновление: 2024-08-19 UTC."]]