列表
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
列表是一个或多个相关项的直观表示形式。它们通常用于显示选项集合。
资源
亮点
- 列表是文本或图片的连续集合。
- 列表应该让人感觉很自然,并且方便浏览。
- 列表由项组成,包含主要操作和补充操作(以图标和文本表示)。
变体
列表有三种类型:单行列表、两行列表和三行列表。
- 单行列表:用一行文字来传达每项内容。这种简单的设计可确保每个列表项彼此明显区分开来。
- 两行式列表:使用两条平行线来传达每一项。
这种结构化设计可确保自然的可读性,并避免认知过载。
- 三行式列表:使用三条平行线表示每项内容。
这种装饰设计具有非常高的视觉显眼程度。
解剖学
- 图标:表示特定对象或操作的小图形,通常用于直观地传达某个概念或概念。
- 上横线:显示在标题或副标题上方的一行简短文字,通常用于提供额外的背景信息或进行强调。
- 标题:一行大号的粗体文字,用作设计元素或页面的主标题。
- 副标题:在主标题下方提供更多信息或上下文的较小文本行。
- 控件:可让用户输入决定的交互式元素。
状态
规格
用法
列表是垂直整理的文本和图片组。一个列表由一个连续的一列项目组成,旨在提高阅读理解能力。列表项可以包含以图标和文本表示的主要操作和补充操作。
check_circle
正确做法
列表项不是按钮。这些项没有容器。默认情况下,列表项处于未选中和未聚焦状态。
warning
注意
仅在必要时对列表项使用容器背景。
选择控件
控件:列表项的显示信息和操作。它们可与列表项的前边缘或尾边缘对齐。
- 复选框:选择一个或多个列表项。
- 单选按钮:请仅选择列表中的一项。
- 开关:开启或关闭某个控件。
check_circle
正确做法
使用图标选择指示器可在列表中清楚地显示所选项目。这有助于用户轻松识别他们选择了哪类商品,并提升整体用户体验。
cancel
错误做法
避免仅依赖背景颜色来指示列表中的选择。
cancel
错误做法
避免在列表项内放置按钮,因为这样可能导致用户混淆哪个元素当前获得焦点。
图标
check_circle
正确做法
如果您要在列表中显示相同类型的内容,请省略图标,以减少视觉干扰并改善用户体验。如果图标毫无意义且没有提供额外的信息,请避免在列表中使用图标。
cancel
错误做法
避免对列表中的所有项使用相同的图标。这可能会让用户感到有点不知所措。只应在其能带来价值或提供额外信息时才使用图标。
头像和图片
列表项可以包含圆形剪裁的图片,以表示人物或实体。
本页面上的内容和代码示例受内容许可部分所述许可的限制。Java 和 OpenJDK 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2024-06-27。
[{
"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":"其他"
}]