EN
展现形式 · 概念

List:连续扫描与顺序表达的列表

说明 List 如何表达集合、步骤和优先次序,何时选有序或无序列表,以及如何避免过长、重复字段和层级不清。

List 将一组相关项目按明确顺序纵向排列。顺序有意义时使用有序列表,顺序无意义但成员关系重要时使用无序列表;只有视觉上排成一列,并不自动构成语义列表。

适合与不适合

适合步骤、规格、搜索结果、文章目录以及需要从上到下快速扫描的文本型项目。不适合需要同时比较多个字段的对象,也不适合靠大面积图片形成视觉发现的集合;前者考虑 Comparison,后者可考虑 Grid。

优点与缺点

优点缺点
阅读顺序清楚,对长标题和说明包容度高项目过多时页面会很长
小屏通常无需复杂重排重复字段会制造视觉噪声
语义列表能表达项目数量和集合关系层级、缩进和分隔不足时难以扫描
容易容纳状态、元信息和操作每项动作过多会使焦点路径冗长

内容与结构要求

每项应共享稳定的信息骨架,但允许文本长度不同。把最能区分项目的信息放在开头,重复的类别名或说明移到列表标题。严格步骤必须保留编号;排序结果要说明排序依据,不能让视觉位置暗示未经说明的推荐。

响应式与无障碍

优先使用原生列表语义,并让每项标题、摘要和操作保持连续阅读。小屏可以把辅助字段换行,但不要改变项目顺序。整行可点击时仍应有可识别的链接文本;多个操作应明确各自作用对象。

状态与退化

零项需要解释为何为空并提供合理下一步;一项仍可保留列表语义,但不必显示多余分隔;大量项目需要筛选、分页或分组标题。样式失效后,标记和顺序仍应表达集合关系。

发布前检查

  • 项目顺序是否有业务含义,是否选对有序或无序列表?
  • 每项最先出现的信息能否帮助区分?
  • 重复字段能否提升到列表级说明?
  • 键盘用户是否要穿过过多重复操作?
  • 空结果和加载失败是否与“没有数据”区分?