4.1 KiB
4.1 KiB
Arco Design 设计规范学习笔记
一、设计语言定位：务实的浪漫主义
Arco Design 用「务实的浪漫主义」形容自己的设计语言，也代表其工作模式。
- 务实：清晰与一致 → 清晰的效率提升是基础，品牌一致性是目的
- 浪漫：韵律与开放 → 推敲设计的韵律，用包容开放的体系解决问题
设计原则相当于语言体系中的「修辞手法」，在实际设计中提供模式化的思考结构，让整个设计系统更完整、可复用。
二、八大设计原则
1. 及时反馈
系统应让用户清楚当前状态，并及时给出对应反馈。
- 操作后要有明确、即时的状态变化（如加载、成功、失败）
- 避免用户不确定「有没有生效」「进行到哪一步」
2. 贴近现实
用用户的语言、用词和熟悉的概念，而不是系统术语。
- 遵循现实世界的惯例
- 让信息符合自然思考逻辑
- 避免技术黑话、内部用语
3. 系统一致性
同一用语、功能、操作在系统内保持一致。
- 相同功能用相同名称、相同交互方式
- 相同类型的反馈用相同形式（如成功/错误提示）
- 有利于降低学习成本、建立心智模型
4. 防止错误发生
比「出错后再提示」更好的是：用设计提前避免错误。
- 在用户做出选择/动作之前，就减少容易混淆或错误的选择
- 通过禁用、约束、确认、默认值等方式预防问题
- 错误提示是兜底，不是主要手段
5. 遵从习惯
减少用户对操作目标的记忆负荷，动作和选项应尽量可见。
- 例如：填完表单后，下一步应是「生成/提交表单」，而不是笼统的「完成」
- 步骤、选项要符合用户对流程的预期
- 减少「需要记住才能操作」的情况
6. 突出重点
用户的行为多是「扫」而不是「读」或「看」。
- 设计中应突出重点，弱化或剔除无关信息
- 重要对话/流程中不堆砌无关内容
- 通过层级、对比、留白引导注意力
7. 错误帮助
错误信息要用自然语言表达，而不是仅显示错误码（如 404）。
- 准确说明问题所在
- 给出建设性的解决建议
- 帮助用户从错误中恢复，将损失降到最低
- 提供清晰的说明和下一步指引
8. 人性化帮助
理想情况是系统本身无需帮助文档；若需要帮助，应分层、适度。
帮助的优先级建议：
- 无需提示：设计自解释，用户自然能懂
- 一次性提示：如首次使用的引导、Tooltip
- 常驻提示：如表单旁的说明、占位符
- 帮助文档：作为最后兜底，便于深度查阅
三、设计规范结构速览（Arco 官网）
设计相关文档大致包括：
| 类型 | 说明 |
|---|---|
| 设计价值观 | 务实与浪漫的价值观定义 |
| 设计原则 | 上述八大原则（本文档重点） |
| 样式指南 | 视觉与交互的样式规范 |
| 组件用法 | 各组件（Button、Form、Table 等）的设计与使用规范 |
开发侧还有：快速上手、暗黑模式、颜色、设计变量（Token）、国际化、定制主题等，与设计规范配合使用。
四、在项目中的使用建议
- 做界面时：先对照「及时反馈、贴近现实、一致性、防错、遵从习惯、突出重点」检查一版交互与文案。
- 写错误与帮助：遵循「错误帮助」和「人性化帮助」，避免只扔错误码，并控制提示的侵入性。
- 统一用语与交互：建立一份产品用词表与组件使用规范，对齐「系统一致性」。
- 用 Arco 组件时：优先按官方组件用法与样式指南使用，便于保持「务实的浪漫主义」下的整体体验。
文档根据 Arco Design 设计原则 整理，便于团队统一理解与落地。