展现形式 · 概念
List:连续扫描与顺序表达的列表
说明 List 如何表达集合、步骤和优先次序,何时选有序或无序列表,以及如何避免过长、重复字段和层级不清。
List 将一组相关项目按明确顺序纵向排列。顺序有意义时使用有序列表,顺序无意义但成员关系重要时使用无序列表;只有视觉上排成一列,并不自动构成语义列表。
适合与不适合
适合步骤、规格、搜索结果、文章目录以及需要从上到下快速扫描的文本型项目。不适合需要同时比较多个字段的对象,也不适合靠大面积图片形成视觉发现的集合;前者考虑 Comparison,后者可考虑 Grid。
优点与缺点
| 优点 | 缺点 |
|---|---|
| 阅读顺序清楚,对长标题和说明包容度高 | 项目过多时页面会很长 |
| 小屏通常无需复杂重排 | 重复字段会制造视觉噪声 |
| 语义列表能表达项目数量和集合关系 | 层级、缩进和分隔不足时难以扫描 |
| 容易容纳状态、元信息和操作 | 每项动作过多会使焦点路径冗长 |
内容与结构要求
每项应共享稳定的信息骨架,但允许文本长度不同。把最能区分项目的信息放在开头,重复的类别名或说明移到列表标题。严格步骤必须保留编号;排序结果要说明排序依据,不能让视觉位置暗示未经说明的推荐。
响应式与无障碍
优先使用原生列表语义,并让每项标题、摘要和操作保持连续阅读。小屏可以把辅助字段换行,但不要改变项目顺序。整行可点击时仍应有可识别的链接文本;多个操作应明确各自作用对象。
状态与退化
零项需要解释为何为空并提供合理下一步;一项仍可保留列表语义,但不必显示多余分隔;大量项目需要筛选、分页或分组标题。样式失效后,标记和顺序仍应表达集合关系。
发布前检查
- 项目顺序是否有业务含义,是否选对有序或无序列表?
- 每项最先出现的信息能否帮助区分?
- 重复字段能否提升到列表级说明?
- 键盘用户是否要穿过过多重复操作?
- 空结果和加载失败是否与“没有数据”区分?