概述：

当产品到达一个庞大且复杂的体系时，就需要有自己的设计规范去自适应产品业务发展和打造更好的用户体验。

蚂蚁打磨出的Ant Design是基于“确定”和“自然”的设计价值观，通过模块化的解决方案获得一些稳定且高复用性的内容，使得设计与开发能及时对产品频繁的变动快速做出响应。

设计原则：

Ant Design中用了10个很贴切的形容词来对他们的设计原则进行了不同方面的描述。

1.亲密性

亲密性反应来页面结构的信息层次，根本目的的是为了实现组织性，如果信息关联性越高，距离就应该越近，也越像一个视觉单元；反之，距离越远，越像多个视觉单元。

纵向间距

在Ant Design中，通过”小（8px）、中（16px）、大（24px）”号这三种间距规格来划分信息层次。当没有其中满足的情况，可以通过加减“基础间距”的倍数或增加元素来拉开信息层次。（基础间距 y=8+8*n，其中y是纵向间距，8是基础间距，n>=0；增加元素例如“分割线”）

横向间距

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

2.对齐

文案类对齐：例如标题和正文左对齐。

表单类对齐：例如冒号对齐。

数字类对齐：建议所有数值取相同有效位数，并且右对齐。

3.对比

对比是增强视觉效果最有效的方法之一，一旦决定要作出对比就必须强烈，切不可畏畏缩缩。

对比分为

主次关系对比：用来突出其中一项相对更重要或更高频率的操作，突出的方法不局限于强化重点项，也可以弱化其他项。但注意在一些需要用户慎重决策的场景中，系统应该保持中立，不能诱导用户做出判断。

总分关系对比

状态关系对比：常见类型有静态对比和动态对比

4.重复

相同元素在界面中的不断重复，不仅可以降低用户的学习成本，也可以帮助用户识别这些元素在不同界面中的关联性。

重复元素可以是一条线、一种线框，某种相同的颜色、设计要素样式、设计风格，某种文案格式、空间关系等。

5.直截了当

快速简单的直接操作，不要为了编辑内容而打开另外一个页面，而应该直接在上下文中实现编辑。

页内编辑

当“易读性”远比“易编辑性”重要时，可以使用“单击编辑”（鼠标悬停时，指针变为手型，编辑区域增加底色，出现Tooltips提示单击编辑，鼠标点击后，出现输入框、确定按钮、取消按钮，同时光标定位在输入框中。）

当“易读性”为主，同时也要突出可操作的“易编辑性”时，可使用“文字链／图表编辑”（在可编辑行附近出现文字链／图标，鼠标点击编辑文字链／图标后，出现同上表单反馈元素。）

利用拖放

移动列表内单元格位置

鼠标悬停该行时，出现可移动图标，指针变为手型，拖动到放置区域附近时，出现位置提示（如蓝色描边），告知该区域可放置该对象。

上传文件图片

将对象直接拖拽到视图指定区域。

6.简化交互

根据费茨法则，用户鼠标移动距离越长，所用时间越长；目标越大，所用时间越短。

实时可见工具

如果某个操作非常重要，就应该把它放到界面中并实时可见。当鼠标悬停该操作图标时，指针变为手型，底色发生变化，鼠标点击后，增加样式改变，和未点击前有明显区分。

悬停即现工具

如果某项操作没有那么重要，或使用实时可见工具时过于啰嗦会影响用户阅读体验时，可在鼠标悬停在该对象时展示操作项。

开关显示工具

如果某项操作只需在特定模式时开启，可以通过开关来实现。（这里的开关并非开关按钮，而是该项操作的指示图标）

交互中的工具

如果操作不重要，或者可以通过其他途径来完成时，可将 工具放置在操作流程中，减少界面元素，降低认知负担同时也给用户带来了操作体验上的小惊喜。（例如鼠标滑选／双击时，自动复制该部分内容）

可视区域≠可点击区域

当使用Table时，可以使用文字链所在的单元格作为用户触发操作的热区。

当需要增强按钮的响应时，通过增加点击热区的范围而不是增大按钮形状来激活Hover状态。

7.足不出户

能在当前页面解决的问题就不要跳转到其他页面，频繁的页面刷新和跳转只会破坏用户体验。

覆盖层

二次确认覆盖层：用户点击删除后，出现Message告知用户操作成功，并提供“撤销”按钮，用户进行下一个操作或者1分钟内不进行任何操作，Message消失，用户将无法再进行“撤销”操作。避免滥用Modal进行二次确认。

详情覆盖层

一般在列表中，用户通过悬停／点击某个区块，在当前页面加载该条列表项的更多详情信息。区块激活时，需设置鼠标移入0.5秒左右的延迟触发，鼠标移出时，立刻关闭覆盖层。

输入覆盖层

鼠标点击图标触发操作，让用户直接进行少量字段的输入，输入完成后，点击悬浮层以外的其他区块，直接保存输入结果并退出。

嵌入层

列表嵌入层

在列表中，显示某条列表项的详情信息，保持上下文不中断。

标签层

将多个平级信息进行整理和分类，一次只显示一组信息。

流程处理

渐进式展示

对于某些流程处理而言，传统的把每个步骤都放在一个单独页面上并非最佳方案。尝试渐进式展示优化这一体验，基于用户手势操作（例如滑动）或某种特定规则，渐进式地在同一页面展示不同的操作流程。

配置程序

通过一些列的配置项，帮助用户完成任务或产品组装。

弹出框覆盖层

虽然弹出框会打断用户的心流，应当谨慎使用，但有时候在弹出框中使用“步骤条”来管理复杂流程也是可行的。

8.提供邀请

很多富交互模式（例如拖放、行内编辑、上下文工具）都有一个共同问题，就是缺少易发现行。所以“提供邀请”是完成人机交互的关键所在。

邀请就是引导用户进行下一个交互层次的提醒和暗示。当可供性中可感知的部分表现为意符时，人机交互的过程往往更加自然、顺畅。（名词解释：意符（Signifiers） ：一种额外的提示，告诉用户可以采取什么行为，以及应该怎么操作；必须是可感知（eg：视觉、听觉、触觉等）。——摘自《设计心理学 1 》。可供性（Affordance） ：也被翻译成『示能』，由 James J. Gibson 提出，定义为物品的特性与决定物品用途的主体能力之间的关系；其中部分可感知（此部分定义为 Perceived Affordance），部分不可感知。——摘自《设计心理学 1 》）

静态邀请

引导操作邀请：常见类型有文本邀请、白板式邀请、未完成邀请。

漫游探索邀请：当用户首次登录时，出现少量“功能探索点”，当用户点击‘我知道了“能快速切换到下一个探索点。

动态邀请

悬停邀请：在鼠标悬停期间提供邀请（例如文字链或新按钮的变化出现）。

推论邀请：用户“点赞”后，系统提供开启类似内容的推送邀请。

更多内容邀请：在Modal中出现前后内容切换的箭头。

9.巧用过渡动效

在视图变化时保持上下文：滑入与滑出、传送带、折叠窗口

解释刚刚发生了什么：列表／表格中的对象增加、对象删除、对象更改、对象呼出。

改善感知性能

自然运动

10.及时反应

查询模式

自动完成：用户输入时，下拉列表会随着输入关键词显示匹配项，根据查询结果分类的多少，可以分为。确定类目和不确定类目两种类型。

实时搜索：随着用户输入，实时显示搜索结果。

反馈模式

实时预览：在用户提交输入之前，实时反馈系统对输入结果的判断（例如密码强度和有效性的实时反馈）。

渐进式展现：在必要的时候提供必要的提示。

进度指示：告知进度，保持与用户的沟通。常见的进度指示有：加载按钮、表格加载、富列表加载、页面加载。根据操作的量级和重要性，展示不同类型的进度指示。

点击刷新：告知用户有新内容，并提供可点击区块帮助用户查看新内容。

定时刷新：新增的列表项内容“高亮”显示，持续几秒后恢复正常。