---
title: 基础元素
slug: 基础元素
category: 基础
figma_node_id: 1:3
figma_page_name: 基础元素
aliases: [Foundation, design fundamentals, atomic tokens, layout, 圆角, 阴影, 间距, 滚动条, 动效, 数据格式, 手势, 分割线, 水印, 头像]
last_extracted: 2026-05-19
status: ok
---

# 基础元素

> 如流设计系统 2.0 的"原子层"规则集合页：把不属于具体组件、却被所有组件复用的视觉与行为规范集中起来，包括布局、卡片、文案、字体、圆角、数据格式、动效、投影、颜色、手势 / 操作、头像（缺）、分割线、声音、水印共 14 个板块。本页主要充当索引，把"色彩 / 字体 / 图标"三类大规则拆出到独立 MD，本文聚焦剩余的原子规则。

## 一、本页 14 个板块（Figma 主导航）

页面以 14 个 Group 的网格作为导航入口，每个 Group 是一张白底卡片，圆角 24px，标题 PingFang SC 16px / Regular（globalVars: `style_RWJOG9` = PingFang SC 400 / 16）。下表把 Figma 中 Group 顺序与对应的子页 / 状态——一一列出。

| 序 | 板块 | Figma 状态 | 备注 |
|---|---|---|---|
| 1 | 布局 | 在册 | 详见本页"二、布局与栅格" |
| 2 | 卡片 | 在册 | 详见本页"五、卡片与容器" |
| 3 | 文案 | 缺失（标"缺失"） | 文案规则散落在组件页 |
| 4 | 字体 | 在册 | 拆分至 [字体](字体.md) |
| 5 | 圆角 | 在册 | 详见本页"三、圆角阶梯" |
| 6 | 数据格式 | 在册 | 详见本页"七、数据格式" |
| 7 | 动效 | 在册 | 详见本页"八、动效规范" |
| 8 | 投影 | 在册 | 详见本页"四、投影规范" |
| 9 | 颜色 | 在册 | 拆分至 [色彩](色彩.md)、[2023设计语言规范](2023设计语言规范.md) |
| 10 | 手势 & 操作 | 在册 | 详见本页"九、手势与操作" |
| 11 | 头像 | 缺失（标"缺失"） | 待补 |
| 12 | 分割线 | 在册 | 详见本页"六、分割线与滚动条" |
| 13 | 声音 | 在册 | 仅占位，无详细规则 |
| 14 | 水印 | 在册 | 仅占位，无详细规则 |

> 每张卡片右上角以 "Figma" 标识表示该板块在 Figma 主文件内有可复用源；标"@贝思"表示由设计师贝思维护；标"缺失"表示当前未补全。

## 二、布局与栅格

页面默认画布宽度 **1280px**（页面尺寸 1280 × 5658）。基础元素索引网格的列宽与间距以 16px 为基本步长。卡片内部内容区一般留出与外缘 **70–87.65px** 的内边距（globalVars 中 `layout_NWQ9VC` / `layout_PB4EZR` 等数据反推），主标题与卡片左缘的内边距常为 88–101.9px。

**关键尺寸（页面观察）：**
- 桌面端基准画布：1280px
- 卡片标题区高度：232px
- 卡片内容区典型高度：371px（双栏布局每栏 469.96px）
- 移动端长截图画布：3668 × 5410（图标页画布）

## 三、圆角阶梯

页面观察到的有效圆角：**0 / 1 / 2 / 4 / 6 / 8 / 24 px**。语义对应：

| token | px | 用途 |
|---|---|---|
| `radius-0` | 0 | 平直边、分隔线 |
| `radius-tiny` | 1 | 切图微圆角（如 56×56 工作流图标） |
| `radius-xs` | 2 | 滚动条 |
| `radius-s` | 4 | 小按钮 / 小卡片 |
| `radius-m` | 6 | 下拉菜单容器（"菜单容器高度、宽度根据选项自适应，圆角为 6px"） |
| `radius-l` | 8 | 主按钮 / 常规卡片 |
| `radius-xl` | 24 | 页面级大卡片（基础元素索引卡片、BEP 大模型图标卡） |

> 工作流图标切图：尺寸 56×56px，圆角 1px。

## 四、投影规范

> 中性色投影：默认色值为 Blue100（#001B66），透明度 0.16；
> 彩色投影：默认色值为主色 60（如 Red60），透明度 0.32。

具体投影 hex / 透明度详见 [色彩 · 投影色](色彩.md#投影色)，对比度规则详见 [2023设计语言规范 · 03 对比度](2023设计语言规范.md#03-对比度)。

文本内嵌投影（globalVars 中 `effect_5SYBHU` 示例）：`inset 0 0.32px 0.96px 0 rgba(0,0,0,0.5)`，用于精细标签的内阴影。

## 五、卡片与容器

- **基础卡片**：白底 `#FFFFFF`、圆角 24px，内嵌 1px Coolgray50 描边（`#E1E6F0`）。
- **粗分隔卡片**：底色 `C-Coolgray20 #F7F8FA`，无描边。
- **可点击胶囊**：底色 `C-Coolgray30 #F2F4F7`，圆角随胶囊高度自适应。
- **不可用按钮**：底色 `C-Coolgray40 #EDF0F5`，文字色 `C-Coolgray60`。
- **对话气泡**：底色 `C-Coolgray50 #E1E6F0`。
- **卡片内部安全间距**：内容到卡片边缘留出固定间距，移动端缩略图取桌面端的 73%。

## 六、分割线与滚动条

- **一级分隔线（框架）**：`#C7CDD9`（与 C-Coolgray50 同梯度更深一档）
- **二级分隔线**：`C-Coolgray50 #E1E6F0`
- **粗分隔线**：`C-Coolgray20 #F7F8FA`
- **滚动条**：宽 4px、圆角 2px、色值 `#E1E6F0`；暗黑模式色值 `#505051`
- **内容滚动**：内容区域在固定范围内展示，与容器保持安全距离；超过固定距离时支持上下滚动，滚动时右侧出现滚动条。

## 七、数据格式

> 类型包含：日期时间、数值。

- **日期时间**：保证数据表达的标准化，准确一致的理解数据。
- **数值**：与日期同步骤约束，桌面端 / 移动端示例分别给出（见 Figma 子板块"示例：桌面端 / 示例：移动端"）。

设计目标："保证数据表达的标准化，准确一致的理解数据。" 具体格式约定（年/月/日、12 小时 vs 24 小时、千分位等）依产品场景，组件页（日期选择、时间选择）会进一步收敛。

## 八、动效规范

### 动效类型与输出规范

> 按照规范样式，不同场景下可以调整大小。输出形式：rd 可实现旋转，输出 svg 或 2倍 png 切图，旋转速率 0.25°/ms。

> 动效设计需结合体验感、场景、业务价值、开发成本等方面的考量，避免无效设计。增强感知，给用户更清晰的操作反馈；阐述层级关系和界面变化；更有效的吸引用户注意力，营造视觉焦点，有效传达信息；在不降低用户执行任务效率的前提下，运用恰当的趣味性表达情绪，缓解焦虑，提升体验。

**五大类型：**
| 类型 | 典型场景 |
|---|---|
| ·loading 类 | 按钮加载、toast（移动端）、呼叫等待中、数据载入 / 刷新 |
| ·状态类 | 超声波识别、智能记录点赞 / 标记、会议模版计时器、AI 纪要填入、智能记录-录制中、会中麦克风 |
| ·操作感知类 | 点击 / 双击操作的视觉反馈 |
| ·功能引导类 | 动态 icon 引导、动态图引导、动态按钮引导、移动端底部导航栏的动态图标 |
| ·提升体验类 | 用于重点功能的引导 |

### 输出格式

| 倍数 / 大小 | 格式 | 用途 |
|---|---|---|
| 1× / 2× png 切图 | png 帧序列 | 简单代码可实现的动效（旋转、缩放、位移、渐近渐现） |
| svg | svg | 单图旋转、循环动效 |
| 动效文件 + 帧率说明 | json / mp4 | 循环动效 |
| 开始 / 循环 / 结束 3 段资源 | 切图 + demo | 组合型动效 |
| demo + 动效说明 | 文档 | 纯 FE 实现动效 |

### 落地原则

> 同类功能状态，注意不同场景下各端形式统一，可以调整大小。
> 考虑场景适用性、业务目标、开发成本，提高感知的同时需符合如流设计语言。

## 九、手势与操作

### 单击

- 触发场景：可调起输入框、弹窗、半层面板、下拉菜单、跳转页面、浮层、toast 等
- 状态：默认 / 点击 / 点击完成（背景、文字、icon 颜色 / 边框 / 阴影可配置变化）

### 双击

- 字符区域双击可选中当前文字或词组，确认选中区域与文字安全距离
- 次区域可自行配置，需要与其他方式双击方式耦合
- 双击可触发跳转
- IM 列表中双击可调起独立窗口

### hover

- 桌面端：hover 展示内容 / hover 文字按钮 / hover 展示 icon 三种典型形态
- 会话列表缩略图在列表区域尺寸与列表中一致，透明度 80%
- 会话列表缩略图在非列表区域尺寸比列表中小，缩小为原大小的 73%，透明度与列表中保持一致

## 十、声音 / 水印 / 头像（待补）

页面索引中存在但内容缺失：

- **声音**：占位，未给出具体规则
- **水印**：占位，未给出具体规则
- **头像**：标记为"缺失"，待后续补全

## 关联

- 完整色彩规则见 [色彩](色彩.md) 与 [2023设计语言规范](2023设计语言规范.md)
- 字体阶梯与字重见 [字体](字体.md)
- 图标系统见 [图标](图标.md)
- 设计哲学背景见 [设计原则](设计原则.md)
