教程 | 一起来 Ant Design 吧

这几天好好研究了 Ant Design ，虽然之前也有接触，在后台设计工作中使用，但总归缺少系统性的整理。借着本文，我们一起了解下这套 UI 设计语言以及它强大的特性。

项目地址 https://ant.design

Ant Design 是一套服务于企业级产品的设计体系，基于「确定」和「自然」的设计价值观上的模块化解决方案，让设计者和开发者专注于更好的用户体验。目前已经在 GitHub 上获得了 35454 个小星星🌟，并且以每日的频率维护更新着。

设计价值观

设计价值观为 Ant Design 的设计者以及基于 Ant Design 进行产品设计的设计者，提供评价设计好坏的内在标准，并提供有效的设计实践所遵循的规则。同时，它启示并激发了设计原则和设计模式，为具体的设计问题提供向导和一般解决方案。

在「设计价值观」的坚持上，Ant Design 有两点与众不同：

自然

作为一份子，自然界的方方面面都会对用户行为产生深远影响，设计者应该从其中汲取灵感，并运用到当下的设计工作中。

• 在行为的执行中，利用行为分析、人工智能、传感器、元数据等一系列方式，辅助用户有效决策、减少用户额外操作，从而节省用户脑力和体力，让人机交互行为更自然。

• 在感知和认知中，视觉系统扮演着最重要的角色，通过提炼自然界中的客观规律并运用到界面设计中，从而创建更有层次产品体验；同时，适时加入听觉系统、触觉系统等，创建更多维、更真实的产品体验。

确定

「设计者」需要做出更好的设计决策，给予研发团队一种高确定性、低熵值的研发状态。同时，不同设计者在充分理解业务述求后，基于 Ant Design 体系都会有相同且符合当前业务特性的设计产出。

• 保持克制： 能做，但想清楚了不做。设计者应当聚焦在最有价值产品功能打磨，并用尽可能少的设计元素将其表达。正如 Antoine de St.Exupery 所说：完美不在于无以复加，而在于无可删减，万事莫不如此。

• 面向对象的方法： 探索设计规律，并将其抽象成『对象』，增强界面设计的灵活性和可维护性，同时也减少『设计者』的主观干扰，从而降低系统的不确定性。例如：色值换算、间距排版。

• 模块化设计： 将复杂或者重复出现的局部封装成模块，提供有限接口与其他模块互动，最终全面减少系统的复杂度，进而增进可靠性以及可维护性。设计者可运用现有的组件/模板或者自行抽象可复用的组件/模板，节约无谓的设计且保持系统一致性，让『设计者』把创造力专注在最需要的地方。

实践案例

从 2015 年 4 月起，Ant Design 在蚂蚁金服中后台产品线迅速推广，对接多条业务线，覆盖系统 800 个以上。定位于中台业务的 Ant Design 兼顾专业和非专业的设计人员，具有学习成本低、上手速度快、实现效果好等特点，并且提供从界面设计到前端开发的全链路生态，可以大大提升设计和开发的效率。

举个我很喜欢产品的实例吧 — 语雀。

与团队一起编写文档，极致体验，高效协同。 在微笑中构建专属知识库。

对，这是中国团队做出来的产品，足够优秀！

原则

Ant Design 遵循以下原则：

• 亲密性

• 对齐

• 对比

• 重复

• 直截了当

• 足不出户

• 简化交互

• 提供邀请

• 巧用过度

• 即时反应

视觉上从色彩、布局、字体、图标四个方面着手，展开风格刻画。 系统级色彩体系主要定义了蚂蚁中台设计中的基础色板、中性色板和数据可视化色板。产品级色彩体系则是在具体设计过程中，基于系统色彩进一步定义符合产品调性以及功能诉求的颜色。

笔者提供 Ant Design 相关设计资源和设计工具的下载， 后台回复关键词「ant」即可 ，当然，你也可以到 Ant Design 的官网上进行下载。

这里我就其中的 Sketch 工具集 Kitchen 着重讲一下。