用途:List View 是以线性纵向列表呈现项目的界面模式,强调可读性、少量属性的比较和高效扫描。它适合活动流与收件箱列表、字段不多的后台记录,以及移动优先的数据浏览场景。
使用时机:当用户需要查看一组条目并进行扫描或比较少量属性时使用;当用户只需一两个值、不需要完整布局时应用更简单的视图;当任务是创建或编辑而非解读数据时应避免使用;若其他表现形式更清晰,不要在移动端强行套用同一视图。
实施流程:先确认模式与问题和约束匹配,再复制示例;从 references/pattern.md 的解剖与示例出发,选择最小可行变体;在叠加视觉打磨前先应用无障碍、性能和交互护栏;用测试指引验证键盘、屏幕阅读器、响应式和失败场景下的行为。
无障碍要求:仅用键盘即可完成列表视图操作,保持逻辑焦点顺序,并保留在高倍缩放下仍清晰的可见焦点;优先使用语义元素,仅在语义不足时补充 ARIA;在正确位置以恰当语气播报错误、加载或完成等状态变化;可用 aria-describedby 或结构化标题连接标签、提示与状态文本;不要仅靠颜色传达严重程度、完成或选中状态。
性能护栏:先测量默认视图渲染成本,再考虑嵌套操作、图表或行内过滤器等更丰富的装饰;当布局会一次渲染过多条目时,使用分页、窗口化或渐进披露;稳定高度与占位几何,避免加载和刷新时产生大幅布局偏移。
常见错误:先选布局后定任务,应从用户任务出发映射布局;忽视非正常状态,应提前设计空、部分、过期和失败结果,以及加载与错误状态;只做桌面密度模型,应在实现前定义移动策略,如堆叠卡片、渐进披露或替代摘要。
相关模式可参考卡片网格、表格和时间线。完整实现细节、示例与测试说明见 references/pattern.md,模式页面为 https://uxpatterns.dev/patterns/data-display/list-view。