设计原则参考 #

Ant Design是什么 #

众所周知蚂蚁集团的B端产品是一个庞大的系统，数量多且功能复杂，而且变动频繁，常常需要设计师和开发人员能快速做出工作上的配合。同时这类产品中有存在很多类似的页面以及组件，根据原子设计理论可以得到一些稳定且高复用性的内容。

随着这两年B端产品的逐渐白热化，越来越多的用户对更好的用户体验有了进一步的要求。带着这样的一个终极目标，蚂蚁集团体经过大量项目实践和总结，逐步打磨出一个服务于企业级产品的设计体系 —— Ant Design。通过组件化设计规范，降低冗余的生产成本，让设计者专注于更好的用户体验。

Ant Design设计原则是什么 #

针对B端产品反复出现的一些设计体验等问题， Ant Design 给出标准的设计原则，实现跨应用交互一致性的有效融合。依照这些原则使用 Ant Design 组件设计界面，既减少了不必要的认知成本，又能够提升设计的效率。考虑到需要适应各种定制化的业务场景，设计原则具有一定的灵活性，万变不离其宗，通过了解设计原则的构建逻辑，高效组织信息、帮助建立用户与界面的互动等原则性要求，可以衍生出更具场景特性的设计方案。

Ant Design设计原则的由来 #

可以说 Ant design的设计规范摄取了《web界面设计》和《写给大家看的设计书》两本书中的精华原则，并做了理论之外最佳的设计实践。其十大设计原则反过来是对书本理论的补充，每一个原则都用了大量通俗易懂的案例来补充说明，这也是为什么国内的企业一直以来都很喜欢使用这套组件的原因。

Ant Design设计原则的内容 #

十大原则如下：

• 亲密原则（Proximity）

• 对齐原则 (Alignment)

• 对比原则 (Contrast)

• 重复原则 (Repetition)

• 直截了当 (Make it Direct)

• 简化交互 (Keep it Lightweight)

• 足不出户 (Stay on the Page)

• 提供邀请 (Provide Invitation)

• 即时反应 (React Immediately)

• 巧用过渡 (Use Transition)

---

接下来我就给大家说说我是如何快速理解 Ant Design 的这10条设计原则并运用到工作当中。

Ant Design 定义了10条设计原则，为了更容易记忆和实际设计中运用，将这些设计原则提炼出共通性，将其归为4类，也就是大家只需记住四类设计原则，在工作中适当延展即可。