126 lines
4.1 KiB
Markdown
126 lines
4.1 KiB
Markdown
# 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) 整理，便于团队统一理解与落地。*
|