---
title: 列表
slug: 列表
category: 组件
figma_node_id: 1:28
figma_page_name: ＞列表-需要更新
aliases: [List, 列表项, 行列表, 列表组, listview, table]
last_extracted: 2026-05-19
status: needs_update
---

# 列表

> 用于纵向罗列同类信息的基础容器组件。如流列表分桌面端与移动端两套规格：移动端覆盖基础样式 1–5 五大形态及组合样式，每个基础样式支持开关 / 勾选 / 禁用等状态变体；桌面端列表则按"消息（首页 / 二级页）"和"组合"两类展开，列表项宽度统一 272px。

> ⚠️ 本页在 Figma 中被标注"需要更新"，内容可能不是最新版本。

## 类型与号型

### 移动端列表（375px 宽）

| 样式 | 列表项高度 | 主要语义 |
|---|---|---|
| 基础样式 1 | 83px | 带开关（开启 / 关闭 / 各自禁用态） |
| 基础样式 2 | 83px | 带勾选（勾选 / 未勾选 / 各自禁用态） |
| 基础样式 3 | 55px | 简化版开关行（开启 / 关闭 / 禁用） |
| 基础样式 4 | 55px | 简化版勾选行（勾选 / 未勾选 / 禁用） |
| 基础样式 5 | 55px / 64px | 序号 1–10 的纯文本行（最后一条 64px 含分隔） |
| 组合样式 1 / 2 / 3 | 64px | 标题 + 副标题 + 右侧操作的组合 |
| 消息列表 1 / 2 / 3 | 72px | 消息流式列表项 |

### 桌面端列表（272px 宽）

| 样式 | 列表项高度 | 主要语义 |
|---|---|---|
| 消息/首页 1–6 | 64px | 消息会话主入口列表项 |
| 消息/二级页 1–6 | 64px | 消息二级页（如群成员、收藏内容）列表项 |
| 组合 1 / 2 | 64px | 标题 + 副标题 + 右侧操作组合，宽 324px |
| 右侧边栏列表 | 同上 | 右侧边栏中嵌入的列表（96×24 标签） |
| 邮箱列表 | 同上 | 邮箱场景下的列表 |

## 尺寸规格

数据来自 Figma layout token：

| 元素 | 宽 × 高 | 来源 layout token |
|---|---|---|
| 移动端列表画板 | 1280 × 3577px | `layout_WB6SLB` |
| 桌面端列表画板 | 1280 × 3474px | `layout_SPVGUQ` |
| 移动端基础样式 1 / 2（带开关 / 勾选） | 375 × 83px | `layout_QCM196 / 0AP42D` 等 |
| 移动端基础样式 3 / 4（简化版） | 375 × 55px | `layout_T0OYV2 / XL018Q` 等 |
| 移动端基础样式 5 末条 | 375 × 64px | `layout_2MZQP8` |
| 移动端组合样式 | 375 × 64px | `layout_6TD8U7 / WLEV1H` |
| 移动端消息列表项 | 375 × 72px | `layout_ECGAEA / P9P8DP / CVFO57` |
| 桌面端列表项（首页 / 二级页 / 邮箱） | 272 × 64px | `layout_2ZIM8B / AFHUI1` 等（共 12 个） |
| 桌面端组合列表项 | 324 × 64px | `layout_92FJ4S / C8RE23` |
| 灰底说明区 | 960 × 839 / 1532 / 683 / 288 / 310px | `layout_2SQY04 / 54OBG0 / H03GXC / TFIKAC / 8IPOXJ` |
| 章节大标题（消息 / 组合 / 基础） | 48 × 24px，24px Medium | `layout_RRFFRK / LN9896 / 9Q7DKY` + `style_C9Q3C1` |
| 小节标签（样式 1 / 首页 / 二级页 / 消息） | 24–36 × 12px，12px Medium | `style_NGW2IC` |

## 状态

每个基础样式都展开 4 个状态实例（来自 Figma Components 命名）：

| 状态 | 含义 | 适用样式 |
|---|---|---|
| 开启 / 关闭 | 开关 ON / OFF | 基础样式 1 / 3 |
| 开启禁用 / 关闭禁用 | 开关不可操作态 | 基础样式 1 / 3 |
| 勾选 / 未勾选 | checkbox 选中 / 未选中 | 基础样式 2 / 4 |
| 勾选禁用 / 未勾选禁用 | checkbox 不可操作态 | 基础样式 2 / 4 |
| 序号 1–10 | 列表项序位 | 基础样式 5 |
| 首页 1–6 / 二级页 1–6 | 消息列表形态变体 | 桌面端消息列表 |

## 颜色与 token

| 用途 | hex | token / 说明 |
|---|---|---|
| 列表容器底色 | `#FFFFFF` = `White` | 通用底色 |
| 灰底说明区 | `#F7F8FA` = `C-Coolgray20` | 各 demo 框底色 |
| 章节大标题 | `#11141A` | 24px Medium |
| 小节标签文字 | `#17181A` | 12px Medium |
| AI 渐变页头 | `linear-gradient(-64deg, rgba(51,119,255,0) 0%, rgba(51,119,255,0.06) 100%)` | 页头装饰渐变 |
| "需要更新"标红描边 | `#FF0000` 11px stroke | 页内提示框描边色 |
| "需要更新"标红文字 | `#FF0B0B`，26px Bold | 页内提示文字 |

> 关联 token 详见 [色彩](../基础/色彩.md)。

## 间距与排布

- 移动端 2 列排布：左列 x: 225，右列 x: 680，与同尺寸的小节标签纵向对齐
- 基础样式 1 / 2 单条 83px，纵向步进 107px（500→607→780→887）
- 基础样式 3 / 4 单条 55px，纵向步进 79px（1060→1139→1284→1363）
- 桌面端消息列表项之间无空隙（紧贴排列）
- 灰底说明区与列表项左右内边距 65px（160 起 + 65 = 225）
- 页头横幅高度统一 232px（`layout_015LR8` 1080 × 232px，所有页面共享）

## 文案规则

- 章节标题用 2–3 字（"消息"、"组合"、"基础"）
- 小节标签用 2–4 字（"样式 1"、"首页"、"二级页"、"邮箱列表"）
- 列表项主标题 1 行内、副标题 1 行内，超出截断
- 时间戳右上对齐（详见消息列表组件规范）

## 交互行为

- **开关项**：点击切换 ON / OFF；禁用态不响应点击
- **勾选项**：点击切换选中态；勾选禁用态不响应（常见于多选场景的不可选行）
- **消息列表项**：整行可点击进入会话；右侧可包含未读红点 / 时间戳 / 状态图标
- **组合列表项**：根据右侧操作类型，可整行可点击或右侧操作单独点击
- **分隔线**：基础样式 1 / 2 / 3 / 4 之间通过 1px 浅灰分隔线划分

## 示例

![移动端列表-基础样式总览](../图片/组件/列表/mobilebaseyang-shioverview.png)
![移动端列表-消息列表](../图片/组件/列表/mobilemsglist.png)
![移动端列表-组合样式](../图片/组件/列表/mobilezu-he-yang-shi.png)
![桌面端列表-消息首页](../图片/组件/列表/desktopmsgshou-ye.png)
![桌面端列表-消息二级页](../图片/组件/列表/desktopmsger-ji-ye.png)
![桌面端列表-组合样式](../图片/组件/列表/desktopzu-he-yang-shi.png)
![桌面端列表-邮箱列表](../图片/组件/列表/desktopmaillist.png)

## 设计考量 / 原文摘录

> （本页未提供文字版设计原文，仅以画板展示样式枚举）

- **基础样式按行高分两档**：83px 含双行主副标题、55px 仅主标题，按内容密度选择
- **桌面端列表宽 272px 固定**：适配右侧边栏、消息列表等狭窄容器
- **组合样式 64px 桌面 / 移动端共享**：跨端一致便于复用
- **状态命名"开启 / 关闭 / 勾选 / 未勾选 / 禁用"**：与 [开关](开关.md)、[单复选](单复选.md) 同义词体系一致

## 不推荐用法

- 同一列表内混用 83px 与 55px 行高（破坏视觉节奏）
- 桌面端列表项宽度自定义为非 272px（除非整行宽度的特殊场景）
- 在基础样式 5（纯序号文本）行内塞入开关 / 勾选控件
- 列表项之间叠加多种语义图标 / 状态，超过两个右侧元素

## 关联

- 列表中开关控件见 [开关](开关.md)
- 列表中勾选控件见 [单复选](单复选.md)
- 长按列表项的菜单见 [长按气泡](长按气泡.md)
- 列表中标签的位置规则见 [标签](标签.md)
- 列表空状态见 [空页面](空页面.md)
- 色彩 token 见 [色彩](../基础/色彩.md)
