---
title: 设计原则
slug: 设计原则
category: 基础
figma_node_id: 1:2
figma_page_name: 设计原则
aliases: [设计准则, design principles, 交互原则, 视觉原则, 体验原则, 设计理念]
last_extracted: 2026-05-19
status: ok
---

# 设计原则

> 如流设计系统的核心设计原则，分两大类：交互原则（8 条）与视觉原则（含动效规范）。所有原则均给出"原则名 / 一句话定义 / 详细说明 / 案例"四段式结构，案例来自如流真实业务场景。

## 总览

| 大类 | 数量 | 字号 | 字体 |
|------|------|------|------|
| 交互原则 | 8 条 | 36px 标题 | PingFang SC Semibold |
| 视觉原则 | 1 条主则 + 动效规范 | 36px 标题 | PingFang SC Semibold |

**正文排版规格：**
- 原则名：PingFang SC Semibold 16px
- 描述：PingFang SC Light 16px（两端对齐）
- 案例标签色：`#FF4040`（红色高亮）
- 背景色：白底 `#FFFFFF`，深色对照块为 `#000000`

---

## 交互原则

### 1. 控件：高效灵活

> 保证跨场景组件体验一致，同时保持控件拓展性，灵活适配，保证用户操作简单易用与高效

**案例**：如待办组件在如流端和知识库场景体验保持一致；如人员选择器在邮箱场景需要展示部门和邮箱字段，在知识库场景需要扩展发送通知功能。

**配图示意**：以"我的待办"卡片为例，同一控件在不同场景下保持核心交互一致，仅按场景扩展辅助字段。

---

### 2. 流程：简单顺畅

> 针对复杂流程操作，应简化任务步长，减少页面跳转与非预期刷新次数，具备一致的返回方式，保证流程体验简单顺畅

**案例**：非必要完成流程、可后置完成流程、可自动完成流程都需要尽量减少；如上传身份证任务可拆分为上传正面和上传反面。

---

### 3. 帮助：分级显示

> 采用分级机制，一次引导帮助只明确一个引导项，避免同时展现多个引导项，影响用户阅读和认知效率

**案例**：如界面的步骤引导，功能性引导等。

---

### 4. 文案：简洁直白

> 文案要保持精炼，通俗易懂；语意简明扼要，多页面或场景出现同一内容的话术要保持统一，避免概念混淆，影响用户认知；界面中的用语应遵循 5 个主要原则：词汇统一、语法正确、文案精炼、通俗易懂、语言友好。

**案例**：如保存修改的信息可简化为"保存"；KU 享的解释不能一会叫"文档分享"，一会叫"知识库分享"等概念混淆。

**5 个文案原则速记：**
1. 词汇统一
2. 语法正确
3. 文案精炼
4. 通俗易懂
5. 语言友好

---

### 5. 表单：智能高效

> 表单信息应保持清晰易读，可采用智能识别或者主动提示，给予用户操作的认知指引，提升表单填写效率。同时须具备容错机制，降低用户可能损失

**案例**：如在用户输入时，自动识别用户历史地址、手机号，通过选择直接完成填写；如表单填写中退出后重新进入，应保留历史输入信息。

---

### 6. 容错：安全可控

> 当用户做决策时，引发重要后果的事件需要给予用户明确提醒，让用户对后果可预期。重要事件需提供可逆操作，提升用户安全体验

**辅助原则**：弱化背景，突出 toast。

**案例**：如用户提交表单后即将建立审批流程时，应通过提示帮助用户建立预期；如用户误删除重要卡片时，可通过撤销操作挽回损失。

---

### 7. 反馈：及时明确

> 针对用户操作结果行为，须给予用户及时的响应和反馈，让用户明确知晓当前状态。当用户行为结果遇到阻断时，应给予用户有效且明确的指引，以帮助用户明确后续行为。

**案例**：当用户提交表单后，可通过 toast 提示或及时反馈告知用户提交成功的状态；如加载失败后应引导用户通过刷新进行后续操作或可拨打 \*\* 电话咨询等。

---

### 8. 框架：体验统一

> 如流基线当前主要分为工具类和内容分发类框架，跨场景时应保持同类别框架体验统一，提升认知一致性

**案例**：日程和待办同属于工具类框架，在如流端内展示日历或待办详情时，应统一采用侧边栏形式；三方接入时应首先明确接入内容的定位，以适配不同的框架模式。

**框架分类速查：**
- **工具类框架** — 例：日程、待办（侧边栏形式）
- **内容分发类框架** — 例：消息、知识库

---

## 视觉原则

### 转场动效：自然连续

通过对比展示原则。

**正例**：从边缘展开面板。
**反例**：直接调起侧边栏，无动画，唤起不自然。

**要点：**
- 浮层 / 面板的出现要从屏幕边缘自然展开，给用户空间方位感
- 避免突然出现，破坏沉浸式体验

---

### AI 消息气泡拖尾动效（视觉规范示例）

页面中有一段详细的 AI 消息气泡拖尾动效规范，可作为复杂动效设计的参考样例。

**视觉规则速查：**

| 元素 | 规格 |
|------|------|
| 小机器人 | 40 × 40 px |
| 标签切图 | 37 × 16 px |
| 渐变拖尾尺寸 | 宽 180px，高根据行数自适应，圆角 17px |
| 拖尾渐变色 | Linear Gradient #DBDFFF 0% → #DBDFFF 30% |
| 文案示例 | "新增【我关注的待办】功能，浏览关注更方便。" |

**位移动效保底实现：**
- 单行（不满一行）：终点和文字末尾错位 34px
- 整行及多行：保底匀速 500 px/s
- 多行场景：保底匀速 550 px/s
- 优化版（视开发难度）：曲线运动

**透明度动效：**
- 起点透明度 32%
- 中段透明度 68%
- 终点逐渐淡出

**位移分解：**
- 起点位置：进入动画起始坐标
- 终点位置：消息文字末尾对齐位置
- 拖尾视觉规则：1 行场景使用短拖尾，多行场景使用长拖尾，按行数动态适应

---

## 示例

![设计原则封面](../图片/基础/设计原则/cover.png)
![交互原则 - 我的待办卡片示例](../图片/基础/设计原则/kong-jian-mytodo.png)
<!-- 缺图: 交互原则 - 流程简化示例 → ../图片/基础/设计原则/流程-步骤拆分.png（Figma 节点未导出或图已删除，待手动补图） -->
<!-- 缺图: 交互原则 - 反馈 toast 示例 → ../图片/基础/设计原则/反馈-toast.png（Figma 节点未导出或图已删除，待手动补图） -->
<!-- 缺图: 视觉原则 - 边缘展开面板正例 → ../图片/基础/设计原则/转场-正例.png（Figma 节点未导出或图已删除，待手动补图） -->
<!-- 缺图: 视觉原则 - 唤起不自然反例 → ../图片/基础/设计原则/转场-反例.png（待补图） -->
<!-- 缺图: AI 消息气泡拖尾动效示意 → ../图片/基础/设计原则/动效-拖尾.png（待补图） -->

## 关联
- 设计系统总览见 [设计系统简介](设计系统简介.md)
- 反馈相关的具体控件规范见 [Toast](../组件/Toast.md)、[弹窗](../组件/弹窗.md)
- 表单相关具体控件见 [表单](../组件/表单.md)
- 框架相关见 [框架功能布局](../主体框架/框架功能布局.md)
