# Arco Design 设计规范学习笔记

> 参考：[Arco Design 设计原则](https://arco.design/docs/spec/philosophy)

## 一、设计语言定位：务实的浪漫主义

Arco Design 用「**务实的浪漫主义**」形容自己的设计语言，也代表其工作模式。

- **务实**：清晰与一致 → 清晰的效率提升是基础，品牌一致性是目的  
- **浪漫**：韵律与开放 → 推敲设计的韵律，用包容开放的体系解决问题  

设计原则相当于语言体系中的「修辞手法」，在实际设计中提供**模式化的思考结构**，让整个设计系统更完整、可复用。

---

## 二、八大设计原则

### 1. 及时反馈

**系统应让用户清楚当前状态，并及时给出对应反馈。**

- 操作后要有明确、即时的状态变化（如加载、成功、失败）
- 避免用户不确定「有没有生效」「进行到哪一步」

---

### 2. 贴近现实

**用用户的语言、用词和熟悉的概念，而不是系统术语。**

- 遵循现实世界的惯例
- 让信息符合自然思考逻辑
- 避免技术黑话、内部用语

---

### 3. 系统一致性

**同一用语、功能、操作在系统内保持一致。**

- 相同功能用相同名称、相同交互方式
- 相同类型的反馈用相同形式（如成功/错误提示）
- 有利于降低学习成本、建立心智模型

---

### 4. 防止错误发生

**比「出错后再提示」更好的是：用设计提前避免错误。**

- 在用户做出选择/动作之前，就减少容易混淆或错误的选择
- 通过禁用、约束、确认、默认值等方式预防问题
- 错误提示是兜底，不是主要手段

---

### 5. 遵从习惯

**减少用户对操作目标的记忆负荷，动作和选项应尽量可见。**

- 例如：填完表单后，下一步应是「生成/提交表单」，而不是笼统的「完成」
- 步骤、选项要符合用户对流程的预期
- 减少「需要记住才能操作」的情况

---

### 6. 突出重点

**用户的行为多是「扫」而不是「读」或「看」。**

- 设计中应**突出重点**，弱化或剔除无关信息
- 重要对话/流程中不堆砌无关内容
- 通过层级、对比、留白引导注意力

---

### 7. 错误帮助

**错误信息要用自然语言表达，而不是仅显示错误码（如 404）。**

- 准确说明问题所在
- 给出建设性的解决建议
- 帮助用户从错误中恢复，将损失降到最低
- 提供清晰的说明和下一步指引

---

### 8. 人性化帮助

**理想情况是系统本身无需帮助文档；若需要帮助，应分层、适度。**

帮助的优先级建议：

1. **无需提示**：设计自解释，用户自然能懂  
2. **一次性提示**：如首次使用的引导、Tooltip  
3. **常驻提示**：如表单旁的说明、占位符  
4. **帮助文档**：作为最后兜底，便于深度查阅  

---

## 三、设计规范结构速览（Arco 官网）

设计相关文档大致包括：

| 类型       | 说明 |
|------------|------|
| 设计价值观 | 务实与浪漫的价值观定义 |
| 设计原则   | 上述八大原则（本文档重点） |
| 样式指南   | 视觉与交互的样式规范 |
| 组件用法   | 各组件（Button、Form、Table 等）的设计与使用规范 |

开发侧还有：快速上手、暗黑模式、颜色、设计变量（Token）、国际化、定制主题等，与设计规范配合使用。

---

## 四、在项目中的使用建议

1. **做界面时**：先对照「及时反馈、贴近现实、一致性、防错、遵从习惯、突出重点」检查一版交互与文案。  
2. **写错误与帮助**：遵循「错误帮助」和「人性化帮助」，避免只扔错误码，并控制提示的侵入性。  
3. **统一用语与交互**：建立一份产品用词表与组件使用规范，对齐「系统一致性」。  
4. **用 Arco 组件时**：优先按官方组件用法与样式指南使用，便于保持「务实的浪漫主义」下的整体体验。

---

*文档根据 [Arco Design 设计原则](https://arco.design/docs/spec/philosophy) 整理，便于团队统一理解与落地。*
