列表List
你可能会说
这些内容一条一条排下来就行，格式统一。
列表是按相同结构连续排列多条内容或记录的数据组件消息、文章和联系人可一行一条从上向下浏览。它适合不需逐列比较的信息；需要比较固定字段时使用表格通常更清楚。
什么时候用
- 消息、通知、动态这类按时间排的内容用评论者提交了一条评论发布时间协协作者发出项目邀请发布时间
- 文章、资讯流：标题 + 摘要 + 来源时间如何用 AI 规划官网内容作者、阅读量与统计时间设计系统落地指南
- 每条带缩略图和少量相关操作的内容集合首页 Banner 终稿Sketch · 2.4 MB下载图标库 v3SVG · 856 KB下载
- 设置页、菜单这种简单的导航列表账号与安全›消息通知›隐私设置›
什么时候不用
- 需要多列精确对比：使用 表格 Table任务状态登录页进行中支付流已完成
- 图片是主体的内容，如商品、作品：使用 卡片 Card 网格图片全被压成细长条
- 只有一两条数据，列表反而显得空荡荡林唯一的一条数据只有一条记录时，列表结构没有必要
- 表达流程步骤：使用 步骤条 Steps 或 时间轴 Timeline1填写信息2确认订单3完成支付
组成结构 · Anatomy
林
评论者提交了一条评论评论摘要 · 发布时间
查看 ›
若干结构相同的列表项垂直排列
一条内容一行，整行通常可点
可选，快速识别来源或类型
标题 + 摘要，视线的落点
时间、状态或操作按钮
常见变体 · Variants
基础列表Basic
账号与安全密码、绑定手机›
消息通知推送、邮件›
菜单和设置页需要展示纯文字条目时
带头像With Avatar
K
用户关注了你发布时间
内容与人物强相关，需要识别来源时
带操作With Actions
首页 Banner 终稿Sketch · 2.4 MB
每条记录都需要独立操作时，例如下载文件
典型使用场景
消息通知中心
消息通知
评论者提交了一条评论评论摘要 · 发布时间
构建完成：AI 图鉴 v2.4.0部署到生产环境成功 · 1 小时前
文章资讯流
如何用 AI 规划官网内容作者与阅读数据应标注来源和统计时间
设计系统从规范到代码作者与阅读数据应标注来源和统计时间搜索结果
找到 24 条相关结果
AI 组件图鉴：零基础入门每个组件一张卡片，3 分钟看懂一个 · 教程
用 AI 组件库搭建后台从表格到表单，按统一规范实现 · 文档
设置菜单页
账号
账号与安全›
消息通知›
通用
隐私设置›
延伸阅读 · 权威出处