Ant Desian

Ant Desian

作者：巧仔
时间：2019年5月16日

Ant Desian的企业级产品是一个庞大且复杂的体系。它里面说到的原则有：亲密性、对齐、对比、重复、直截了当、足不出户、化简交互、提供邀请、巧用过渡、及时反应等。
视觉有：色彩、布局、字体、图标等。
模式有：概览、文案、导航、数据录入、数据展示、反馈等。
还有可视化和动效等。

下面说一下原则里面的亲密性。

亲密性
如果信息之间关联性越高，它们之间的距离就应该越接近，也越像一个视觉单元；反之，则它们的距离就应该越远，也越像多个视觉单元。亲密性的根本目的是实现组织性，让用户对页面结构和信息层次一目了然。
纵向间距关系

纵向间距示例
在 Ant Design 中，这三种规格分别为：8px（小号间距）、16px（中号间距）、24px（大号间距）。
通过『小号间距』、『中号间距』、『大号间距』这三种规格来划分信息层次。

增加元素示例
通过增加『分割线』来拉开层次。
在这三种规格不适用的情况下，可以通过加减『基础间距』的倍数，或者增加元素来拉开信息层次。
注：在 Ant Design 中，y = 8 + 8 * n。其中，n >= 0，y 是纵向间距，8 是『基础间距』。

横向间距关系

组合排布示例
为了适用不同尺寸的屏幕，在横向采用栅格布局来排布组件，从而保证布局的灵活性。

复选框内示例
在一个组件内部，元素的横向间距也应该有所不同。

下面是视觉里面的色彩。
色彩
Ant Design 将色彩体系解读成两个层面：系统级色彩体系和产品级色彩体系。
系统级色彩体系主要定义了蚂蚁中台设计中的基础色板、中性色板和数据可视化色板。产品级色彩体系则是在具体设计过程中，基于系统色彩进一步定义符合产品调性以及功能诉求的颜色。
设计师专属
安装 ，不但可以使用 Ant Design 官方色板库，还可以管理自己的专属色板。
色彩模型
计师在调整色彩时对于颜色有明确的心理预期，同时也方便团队间的沟通。
系统级色彩体系
然场景的抽象捕捉，结合蚂蚁的技术基因，形成了特有的 12 色。进一步又通过大量的观察，捕捉不同色彩在自然光下的变化规律，借助美术中素描的思路，对 12 个颜色进行了衍生。在中性色板的定义上，则是平衡了可读性、美感以及可用性得出的。
产品级色彩体系
品牌色的应用
品牌色是体现产品特性和传播理念最直观的视觉元素之一。在色彩选取时，需要先明确品牌色在界面中的使用场景及范围。在基础色板中选择主色，我们建议选择色板从浅自深的第六个颜色作为主色。 Ant Design 的品牌色取自基础色板的蓝色，Hex 值为 1890FF，应用场景包括：关键行动点，操作状态、重要信息高亮，图形化等场景。

功能色
接等。功能色的选取需要遵守用户对色彩的基本认知。我们建议在一套产品体系下，功能色尽量保持一致，不要有过多的自定义干扰用户的认知体验。Ant Design 的功能色板如右图：

中性色
Ant Design 的中性色主要被大量的应用在界面的文字部分，此外背景、边框、分割线、等场景中也非常常见。产品中性色的定义需要考虑深色背景以及浅色背景的差异，同时结合 WCAG 2.0 标准。Ant Design 的中性色在落地的时候是按照透明度的方式实现的，具体色板如右图：

作为一份子，自然界的方方面面都会对用户行为产生深远影响，设计者应该从其中汲取灵感，并运用到当下的设计工作中。我们已做了部分探索，并将追求『自然』作为我们未来持之以恒的方向。