列表List
内容与数据展示把同类内容一条条排列出来
列表按照相同结构连续展示消息、文章或联系人等内容，用户可以从上往下浏览。它比表格更自由、比卡片更省空间，适合不需要逐列比较的信息。
林小hu 评论了你的设计稿这个配色很舒服 👍 · 2 分钟前
油
阿油 邀请你加入项目AI 图鉴 · 1 小时前
什么时候用
- 消息、通知、动态这类按时间排的内容林林小hu 评论了你的设计稿2 分钟前油阿油 邀请你加入项目1 小时前
- 文章、资讯流：标题 + 摘要 + 来源时间如何用 AI 一周做完官网oil-oil · 3.2k 阅读 · 昨天设计系统落地指南
- 每条带缩略图和一两个操作的内容集合首页 Banner 终稿Sketch · 2.4 MB下载图标库 v3SVG · 856 KB下载
- 设置页、菜单这种简单的导航列表账号与安全›消息通知›隐私设置›
什么时候不用
- 要多列精确对比 → 用 表格 Table任务状态登录页进行中支付流已完成
- 图片是主角的内容（商品、作品）→ 用 卡片 Card 网格图片全被压成细长条
- 只有一两条数据，列表反而显得空荡荡林唯一的一条数据就一条，列表的阵仗白搭了
- 表达流程步骤 → 用 步骤条 Steps 或 时间轴 Timeline1填写信息2确认订单3完成支付
组成结构 · Anatomy
林
林小hu 评论了你的设计稿这个配色很舒服 · 2 分钟前
查看 ›
1列表List若干结构相同的列表项垂直排列
2列表项Item一条内容一行，整行通常可点
3头像 / 图标Avatar可选，快速识别来源或类型
4主内容Content标题 + 摘要，视线的落点
5附加区Extra时间、状态或操作按钮
常见变体 · Variants
基础列表Basic
账号与安全密码、绑定手机›
消息通知推送、邮件›
纯文字条目,菜单和设置项的默认款
带头像With Avatar
K
KK 关注了你5 分钟前
内容和人强相关,要一眼认出是谁
带操作With Actions
首页 Banner 终稿Sketch · 2.4 MB
每条都要就地处理,比如下载文件
典型使用场景
消息通知中心
消息通知
林小hu 评论了你的设计稿这个配色很舒服 👍 · 2 分钟前
构建完成：AI 图鉴 v2.4.0部署到生产环境成功 · 1 小时前
文章资讯流
如何用 AI 一周做完官网oil-oil · 3.2k 阅读 · 昨天
设计系统落地指南：从规范到代码KK · 1.8k 阅读 · 3 天前搜索结果
找到 24 条相关结果
AI 组件图鉴：零基础入门每个组件一张卡片，3 分钟看懂一个 · 教程
用 AI 组件库搭建后台从表格到表单，一套规范全搞定 · 文档
设置菜单页
账号
账号与安全›
消息通知›
通用
隐私设置›