# 如流设计系统 2.0 知识库

> 数据源：Figma《如流设计系统2.0》（fileKey: `w0sifGo4F7nnrI59sGO55A`）
> 抽取日期：2026-05-19 / 更新：2026-05-20
> 总篇数：**45** 篇正文 + 本索引 + 术语表（其中 5 篇标记为 `needs_update`，原 Figma 页注明待补全）

## 使用说明

- 每篇 MD 自带 frontmatter（title / slug / category / figma_node_id / aliases / last_extracted / status），可用作 RAG 元数据。
- 颜色字体 token 命名速查见 [术语表](术语表.md)。
- 已知问题清单见 [KNOWN-ISSUES.md](KNOWN-ISSUES.md)。
- 图片资产在 `图片/` 目录下，与 MD 引用路径一致（相对路径）。


## 基础（设计原则、token、规范基石）

- [设计系统简介](基础/设计系统简介.md) — 如流设计系统 2.0（Infoflow Design 2.0）的总览入口页，按 9 个板块介绍系统的接入、协同、组件、流程和理念。Figma 文件 fileKey: `w0sifGo4F7nnrI59sGO55A`，封面副标题 "Version 2.0"。
- [设计原则](基础/设计原则.md) — 如流设计系统的核心设计原则，分两大类：交互原则（8 条）与视觉原则（含动效规范）。所有原则均给出"原则名 / 一句话定义 / 详细说明 / 案例"四段式结构，案例来自如流真实业务场景。
- [2023设计语言规范](基础/2023设计语言规范.md) — 如流设计系统的视觉语言基石，覆盖色彩体系、中性色板、渐变、透明度、投影、对比度、桌面端工作流图标规范。色彩采用 HSB 模式定义，sRGB 输出。色值含 120 个（12 主色 × 衍生色），第 6 号色为主色基准。
- [基础元素](基础/基础元素.md) — 如流设计系统 2.0 的"原子层"规则集合页：把不属于具体组件、却被所有组件复用的视觉与行为规范集中起来，包括布局、卡片、文案、字体、圆角、数据格式、动效、投影、颜色、手势 / 操作、头像（缺）、分割线、声音、水印共 14 个板块。本页主要充当索引，把"色彩 / 字体 / 图标"三类大规则拆出到独立 MD，本文聚焦剩余…
- [色彩](基础/色彩.md) — 如流设计系统 2.0 的色彩 token 总表，由"2023 设计语言规范"页与"基础元素 / 颜色"卡片聚合而成。色彩定义采用 HSB 模式、sRGB 输出；总色板包含 120 个色值（12 主色 × 10 阶），每个色系的 60 号色（如 Brandblue60）为该色系主色锚点。中性色另以 `C-Coolgray…
- [字体](基础/字体.md) — 如流设计系统 2.0 的字体规范，覆盖字体栈、字号阶梯、字重映射、行高与使用场景。中文主栈采用 **PingFang SC**，英文 / 数字辅栈采用 **Inter**。字号阶梯主要为 12 / 13 / 14 / 16 / 20 / 24 / 30 / 48 / 66 / 90，行高与字号大体保持 1.0–1.83…
- [图标](基础/图标.md) — 如流设计系统 2.0 图标库总览。Figma 中以一个超大画布（3668 × 5410）承载，"如流图标库"主框架按语义分 7 大类：互动 / 箭头 / 大模型 / 用户头像 / 图影音 / 通用工具 / 便捷服务 / AI 卡片。BEP 协同大模型图标独立成卡，参见 [BEP协同大模型图标](BEP协同大模型图标.m…
- [BEP协同大模型图标](基础/BEP协同大模型图标.md) — "BEP 协同大模型图标"是如流设计系统 2.0 中专门为 BEP（Baidu Enterprise Platform，企业级大模型）协同场景设计的图标集合。Figma 中独立为一张白底大卡（1280×4219，圆角 24px），与"如流图标库"互为补充。所有图标统一沿用 48×48 viewBox、单色 / 填充两种…

## 组件（31 篇可复用控件 + 模式）

- [Banner](组件/Banner.md) — 用于承载运营 / 营销 / 入口推广的横向图卡组件。**移动端**采用 8:3 固定比例，圆角 6px；**桌面端**跟随面板宽度切换三档：最大宽度面板下 697px、默认屏幕 531px、最小屏幕 455px，高度保持不变（约 150px 一档），圆角 8px。
- [suglist](组件/suglist.md) — 搜索框激活后弹出的实时联想列表。综合 tab 页下分单行文本与两行文本两种布局，覆盖普通检索词、群、联系人、文档、会议、本地文件六种结果类型，以及默认态与 hover 态两种交互状态。hover 时背景变深、出小手、并露出"清除"等更多操作按钮。
- [Toast](组件/Toast.md) — 轻量、非阻断式的反馈提示。不会影响用户操作，用户可以不与回应，通常有时间限制，**出现 2s 就会自动消失**。在页面居中展示；文言提示尽量简短，最大宽度视情况由设计师自行判断，**不建议文字过多**。
- [按钮](组件/按钮.md) — 用于行动 / 命令引导的核心控件。如流按钮按形态分主要、次要、组合、文字四类，按语义分通用与警示（红）两组，按平台分桌面端与移动端两套号型。文字内容应包含动词，且不超过 6 个中文字符。
- [半浮层面板](组件/半浮层面板.md) — 介于完整弹窗（[弹窗](弹窗.md)）与浮层（[浮层](浮层.md)）之间的中等遮罩组件，常用于通讯流 / 多页 Tab 切换的二级面板承载。容器宽度按 iPhone 标准 375px，高度 812px（覆盖屏幕主区），含 Tab 条 + 内容区 + Home Indicator 三段结构。规范关键约束：当 Tab 条…
- [标签](组件/标签.md) — 用于表达内容属性、状态、分类或优先级的小尺寸标识。具备桌面端与移动端两套规格，按号型分小（16px）/中（18px）/大三档，按语义分警示、提示、积极、中性、消极五色，并支持优先级（低优/高优）、AI 渐变等专用样式。
- [表单](组件/表单.md) — 表单提供了文本框和选择方式进行内容录入，通常成组出现。对于组内需要使用开关、复选等操作的情况，可使用列表组件与表单混排。它是「文字输入框 / 数字输入框 / 文本域 / 单复选 / 滑块 / 开关 / 选择器 / 上传」等数据输入类组件的容器与排布规则。
- [步骤条](组件/步骤条.md) — 引导用户按既定顺序完成多步操作的流程指示控件。按形态分可操作 / 只读 / 带图标 / 垂直四种，按节点状态枚举当前节点 / 已完成 / 未完成 / 处理中 / 异常五态。每个步骤可携带主标题（"步骤一"）与辅助信息文案。
- [单复选](组件/单复选.md) — 在一组选项中选择一项（单选 Radio）或多项（复选 Checkbox）的输入控件。如流单复选按平台分桌面端 / 移动端两套，按形态分类型 1（与列表 / 组件组合）与类型 2（独立列表场景），覆盖默认 / hover / 按下 / 选中 / 未选禁用 / 已选禁用六种状态。
- [弹窗](组件/弹窗.md) — 用于打断用户当前任务、强引导关键操作或反馈系统状态的对话框。覆盖系统升级、对话框、通知提醒、其他类型四大场景，按按钮数量分单 / 双 / 三按钮三档，桌面端与移动端共用一套设计语言。弹窗黑色蒙层为纯黑 `#000000` 透明度 32%，弹出位置于页面内居中展示。
- [导航菜单](组件/导航菜单.md) ⚠️ needs_update — 如流应用的主导航控件。桌面端采用左侧侧边导航 + 标签页（消息 / 工作台 / 知识 / 会议 / 文档 / 内部应用），移动端按顶部导航 + 底部 tab 双层布局。两套形态都覆盖默认态与选中态，并支持系统标题栏（mac @1x/@2x 切图）。
- [浮层](组件/浮层.md) — 由用户主动触发、相对触发元素定位的悬浮容器。承载下拉菜单 / 加号菜单 / 右键菜单 / 操作菜单等多种语义。桌面端固定宽度 144px，移动端 160px；常见选项行高 44px，圆角 8px；上下间距 16px、相邻选项间隔 8px。当浮层用于"已经存在黑色蒙层"的场景（如智能看板）时改用投影替代蒙层。
- [浮窗](组件/浮窗.md) — 邮箱场景的桌面端独立悬浮窗口。固定大小宽 640 × 高 600px，不可拉伸；标题区居中展示，字符最大限制 420px；窗口标题构成 = 标题区域 + 关闭按钮；弹出位置于页面内居中，整体背景使用黑色遮罩 `#000000` 30%。
- [横幅提示](组件/横幅提示.md) ⚠️ needs_update — 跨整行宽度承载即时提示信息的横条容器。如流横幅按位置分"提示条"与"常驻位"两类，按色相分蓝条 / 黄条 / 灰条 / 运营条 / 红条等语义色。提示条主要承载临时通知（如新消息、会议进行中），常驻位承载持久状态（如版本升级、运营活动）。提示条高度 38px，常驻位 40–44px。
- [加载](组件/加载.md) — 异步操作进行中、内容尚未就绪时的等待反馈。如流加载分**页面加载**和**模块加载**两类，按尺寸提供 108px / 96px 两档。页面级加载适合内容种类单一的场景；有固定模块的一级页面（如工作流）应使用骨架屏；模块加载失败则在模块内居中展示空态图。
- [结果列表](组件/结果列表.md) — 如流全局搜索（搜索框）触发后承载搜索结果呈现的列表组件。覆盖综合 / 垂类两种 tab 形态，从最简的"单行文本"到"两行文本"到"复杂结果"（周报 / OKR / 会议 / 文档插件）共三档结构。会议搜索结果列表是 24 年 Q3 的重点更新，新增文档外露与会议纪要 / 智能记录入口。
- [开关](组件/开关.md) — 用于在「开启 / 关闭」两个互斥状态之间快速切换的二态控件，结果即时生效，无需提交。如流开关按平台分桌面端 / 移动端两套，桌面端按号型分小号（S）/ 中号（M），覆盖开启 / 关闭 / 开启禁用 / 关闭禁用四种状态。
- [空页面](组件/空页面.md) — 当页面无数据 / 网络异常 / 无权限 / 加载失败时展示的占位插画 + 文案组合。如流空页面分**全局缺省**与**模块缺省**两个层级、**浅色**与**深色**两种模式，并覆盖 7 种语义场景：无权限 / 无网络 / 加载失败 / 直播空 / 空事件-日程-审批 / 消息空 / 空内容-搜索-文件。桌面端缺省图 …
- [列表](组件/列表.md) ⚠️ needs_update — 用于纵向罗列同类信息的基础容器组件。如流列表分桌面端与移动端两套规格：移动端覆盖基础样式 1–5 五大形态及组合样式，每个基础样式支持开关 / 勾选 / 禁用等状态变体；桌面端列表则按"消息（首页 / 二级页）"和"组合"两类展开，列表项宽度统一 272px。
- [面包屑](组件/面包屑.md) — 表达当前页面在层级结构中所处位置的路径导航控件。文字显示 10 个有效字符，含默认 / 悬浮 / 点击 / 选中四种状态；按高度分大（60px）与小（48px）两档号型。
- [飘新-气泡-红点](组件/飘新-气泡-红点.md) — 用于在图标 / 入口 / 列表 / 导航上标示"新"或"未读"状态的小尺寸标记。分三大类：**小红点 / 小灰点（6px 切图）** 用于消息列表纯提示；**数字气泡 / 飘新** 用于带计数的提示（含 99+ 溢出态）；**会话气泡** 用于消息内容容器，覆盖 @我、@全员、单 / 多消息等场景。由于各端屏幕差异，红…
- [日期选择](组件/日期选择.md) — 用于选择具体日期 / 日期范围 / 年月颗粒度的输入组件。支持移动端轮播式选择器、桌面端日期选择框 + 下拉日期面板两条产品形态，覆盖年月日 / 年月 / 月日多种颗粒度，可叠加顶部日期回显与底部「今天 / 时间设置」快捷区。
- [筛选器](组件/筛选器.md) — 搜索结果集 / 列表场景下的条件过滤控件。按选择方式分单选 / 复选 / 带检索能力的筛选三种类型，覆盖未选 / hover / 选中 / 已选禁用四种交互状态，同时支持横向自适应布局和上下 / 左右两种排布。2024 Q3 进行过结构更新（"筛选器·更新时间 24 年 Q3"）。
- [时间选择](组件/时间选择.md) — 用于选择时 / 时分两种颗粒度的时间输入组件。由触发器（时间选择框）和下拉列表（小时列表 / 时-分双列列表）组合而成，覆盖默认 / 悬浮 / 已选 / 已选悬停四种状态。支持时颗粒度（仅小时）与时分颗粒度（小时 + 分钟双列）两种使用方式。
- [输入框](组件/输入框.md) — 表单中最基础的文字 / 数字录入控件。支持单行 / 多行两种形态，左右 / 上下两种布局，覆盖默认 / Hover / 点击 / 输入 / 错误提示 / 输入多行 / 滚动等完整状态。单行高度 32px，多行高度 50px / 122px，最大宽度 328px（在桌面端规范画板中）。
- [搜索导航](组件/搜索导航.md) — 全局搜索内承载结果分类切换的二级 tab 导航条。位于搜索框下方、结果列表上方，提供"综合 / 人 / 消息记录"等多个分类入口的横向切换。区别于上层框架级的导航菜单（一级导航）。覆盖基础布局、交互状态、tab 渐变宽度三档号型。
- [搜索框](组件/搜索框.md) — 如流框架顶部全局搜索控件。Mac / Win 两套号型分别交付，默认态宽度跟随视窗的 1/3，且与超级助理入口固定间距，激活态维持线上不变。覆盖默认 / 激活 / 键入 / 文字较多 / hover / tips 通知等完整状态。
- [下拉菜单](组件/下拉菜单.md) — 用于加号、点等图标点击后弹出的功能菜单或下拉选择器。桌面端覆盖类型一（纯文本）/ 类型二（图标+文本）/ 类型三（图标+标题+辅助信息）三种内容形态、三种对齐方式（左/右/居中）与大小两档尺寸；移动端覆盖选择器入口与列表入口两类，状态枚举默认 / 未选 / 选中 / 按下四态。
- [下拉选择](组件/下拉选择.md) — 用于从一组预设选项中选择一项 / 多项的输入类组件。如流的下拉选择按容器形态分**有框式**与**无框式**两类，按弹层形态分菜单面板 / 滚动式半层面板 / 操作菜单半层面板 / 全页面下拉弹层 / 浮层菜单五种，覆盖从轻量页面到表单可输入场景的全部下拉需求。
- [长按气泡](组件/长按气泡.md) — 移动端长按消息后弹出的气泡式操作菜单，承载转发 / 创建待办 / 收藏 / 删除 / 大模型等高频互动入口。气泡相对所选内容自动判断上下与左右位置弹出，避免遮挡内容。同时为 "消息长按菜单" 和 "消息多选操作" 两类场景提供同一套样式。
- [指向弹窗](组件/指向弹窗.md) — 由触发元素旁弹出、明确指向具体目标的气泡式弹窗。常用于功能引导、新手提示、服务号弹出指向等场景。与"浮层"的区别在于**带指向尖角 / 圆点**明确锚定目标元素；尺寸按内容自适应，文案 1 行或最多 2 行；按指示方向分上 / 下 / 左 / 右四向。

## 主体框架（页面级布局规则）

- [框架功能布局](主体框架/框架功能布局.md) ⚠️ needs_update — 如流客户端的主体框架分区与功能布局规范。规定主导航 / 副导航 / 拓展功能弹窗的位置与数量约束，以及桌面端 / 移动端两套排布方式。本页定义"哪一块区域承担哪类功能"，与拉伸尺寸（见 [框架拉伸策略](框架拉伸策略.md)）正交。
- [框架拉伸策略](主体框架/框架拉伸策略.md) — 桌面端如流主框架在窗口缩放时，各分区按"固定 / 默认 / 可拉伸"三类策略协同响应的规范。规定可拉伸区域 1（左侧主面板）、可拉伸区域 2（中央内容区）、可拉伸区域 3（右侧辅助区）的最小 / 最大 / 默认尺寸，以及拉伸过程中各高度行的固定 / 自适应表现。本规范聚焦"哪一块跟着拉、跟到多少"，与功能分区（见 [框…
- [新窗口规范](主体框架/新窗口规范.md) — 桌面端从如流主窗口弹出的独立子窗口（如聊天记录、消息记录管理、会议、日程、待办、项目、图片查看、视频查看、群直播提醒等）的整体规范。覆盖独立窗口的标题构成、尺寸分级、弹出位置与拉伸规则四大部分。
- [会中框架规则](主体框架/会中框架规则.md) ⚠️ needs_update — 用户处于如流视频会议过程中（会中），整个客户端框架的尺寸、布局与拖拽边界规则。区别于会议未开始的常态主框架（见 [框架功能布局](框架功能布局.md)），会中框架对窗口最小拖拽尺寸做了独立约束，并按"有/无共享内容"分两套布局。

## 品牌（logo + AI 视觉体系）

- [大模型视觉体系规范-BEP](品牌/大模型视觉体系规范-BEP.md) — 如流大模型（BEP，Baidu Enterprise Platform）相关界面的整套视觉体系。覆盖 AI 色系（颜色原则、渐变取色、单色、暗黑）、AI 排版（字号 / 字重 / Logo 配比）、AI 组件（按钮、单选、输入框、反馈）、AI 动效（旋转 / 扩写 / 形状结合）四大模块。本页与基础页 [BEP 协同大…
- [如流logo应用规范](品牌/如流logo应用规范.md) — 如流品牌 logo 在产品 / 营销 / 物料中的应用规范。本页主要由一张 1094 × 543 的主版式画板承载 logo 各形态与安全区示意；从 Figma 抽得的可读规则较少，详细的最小尺寸 / 主色变体 / 禁用场景以画板内规范图为准。建议设计师在拉规范时直接在 Figma 中按"4867:669"打开页面，本…
