概览

秉承 Ant Design 设计价值观，针对企业级产品反复出现的设计问题，设计模式给出一般性的解决方案，实现跨应用交互一致性的有效融合。依照设计模式使用 antd 组件设计界面，既减少了不必要的认知成本，又能够提升交互确定性和设计的效率。考虑到需要适应各种独特的业务场景，模式的规则具有一定的灵活性，万变不离其宗，通过了解设计模式的构建逻辑，可以衍生出更具场景特性的解决方案。设计模式包含以下内容：

原则

基于价值观衍生出的一般设计技巧，包括如何高效组织信息、帮助建立用户与界面的互动等原则性要求。

全局规则

通过规范常见的互动行为，包括导航、数据录入、数据展示、反馈、操作、帮助等，呈现组件元素的标准用法和弹性空间，并了解如何将他们组织在一起来创建良好的体验。

模板文档

基于蚂蚁中台的设计经验，我们总结了表单、列表、数据可视化、详情页、工作台、异常、结果、编辑器几类页面的典型解决方案，介绍每类页面的设计目标、设计技巧以及典型页面内容等，帮助广大设计者可以快速开始构建界面。你还可以在 Ant Design Pro 里在线预览这些典型页面。

设计原则

亲密性

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

纵向间距关系

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

通过增加「分割线」来拉开层次。

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

横向间距关系

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

复选框内示例

对齐

正如「格式塔学派」中的连续律（Law of Continuity）所描述的，在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线，使曲线继续成为曲线。在界面设计中，将元素进行对齐，既符合用户的认知特性，也能引导视觉流向，让用户更流畅地接收信息。
格式塔学派（德语：Gestalttheorie）：是心理学重要流派之一，兴起于 20 世纪初的德国，又称为完形心理学；主张人脑的运作原理是整体的，「整体不同于其部件的总和」。——摘自「维基百科」

文案类对齐

推荐示例

标题和正文左对齐，使用了一个视觉起点。

不推荐示例

标题和正文使用了两个视觉起点，不推荐该种对齐方式，除非刻意强调两者区别。
如果页面的字段或段落较短、较散时，需要确定一个统一的视觉起点。

表单类对齐

冒号对齐示例

数字类对齐

正确示例

错误示例

对比

对比是增加视觉效果最有效方法之一，同时也能在不同元素之间建立一种有组织的层次结构，让用户快速识别关键信息。
注：要实现有效的对比，对比就必须强烈，切不可畏畏缩缩。

主次关系对比

正确示例

错误示例
为了让用户能在操作上（类似表单、弹出框等场景）快速做出判断， 来突出其中一项相对更重要或者更高频的操作。
注意：突出的方法，不局限于强化重点项，也可以是弱化其他项。

不区分主次的示例

「通过」和「驳回」都使用次按钮，系统保持中立。
在一些需要用户慎重决策的场景中，系统应该保持中立，不能替用户或者诱导用户做出判断。

总分关系对比

总分关系示例 1

总分关系示例 2
通过调整排版、字体、大小等方式来突出层次感，区分总分关系，使得页面更具张力和节奏感。

状态关系对比

静态对比示例
用不同颜色点，来表明不同状态。

动态对比示例
鼠标悬停时，该项和其他项呈现出明显不同的视觉效果，响应用户操作。

重复

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

重复元素

线框重复示例

设计要素重复示例

文案格式重复示例

直截了当

正如 Alan Cooper 所言：「需要在哪里输出，就要允许在哪里输入」。这就是直接操作的原理。eg：不要为了编辑内容而打开另一个页面，应该直接在上下文中实现编辑。

页内编辑

单字段行内编辑

当「易读性」远比「易编辑性」重要时，可以使用「单击编辑」。

单击编辑示例（交互说明案例教程）

状态一：普通的浏览模式，不区分可编辑行和不可编辑行；
状态二：鼠标悬停时，「指针」变为「手型」，编辑区域底色变黄，出现「Tooltips」提示单击编辑；
状态三：鼠标点击后，出现「输入框」、「确定」、「取消」表单元素，同时光标定位在「输入框」中。

文字链/图标编辑示例

当「易读性」为主，同时又要突出操作行的「易编辑性」时，可使用「文字链/图标编辑」。
状态一：在可编辑行附近出现文字链/图标；
状态二：鼠标点击「编辑」后，出现「输入框」、「确定」、「取消」表单元素，同时光标定位在「输入框」中。

多字段行内编辑示例

编辑模式在不破坏整体性的前提下，可扩大空间，以便放下「输入框」等表单元素；其中，在 Table 中进行编辑模式切换时，需要保证每列的不跳动。

多字段行内编辑
注：在「多字段行内编辑」的情况下，显示的内容和编辑时所需的字段会存在比较大的差异，所以更需要「巧用过渡」原则中的「解释刚刚发生了什么」来消除这种视觉影响。
**

利用拖放

拖放列表示例

状态一：鼠标悬停该行时，出现可移动的「图标」；
状态二：鼠标悬停在该「图标」时，指针变为「手型」，点击即可进行拖动；
状态三：拖动到可放置区块，出现蓝色描边，告知用户该区块可放置该对象。

拖放列表
只能限制在一个维度（上/下或者左/右）进行拖放。

拖放图片/文件示例

足不出户

能在这个页面解决的问题，就不要去其它页面解决，因为任何页面刷新和跳转都会引起变化盲视（Change Blindness），导致用户心流（Flow）被打断。频繁的页面刷新和跳转，就像在看戏时，演员说完一行台词就安排一次谢幕一样。

变化盲视（Change Blindness）：指视觉场景中的某些变化并未被观察者注意到的心理现象。产生这种现象的原因包括场景中的障碍物，眼球运动、地点的变化，或者是缺乏注意力等。——摘自《维基百科》
心流（Flow）：也有别名以化境 (Zone) 表示，亦有人翻译为神驰状态，定义是一种将个人精神力完全投注在某种活动上的感觉；心流产生时同时会有高度的兴奋及充实感。——摘自《维基百科》

覆盖层

用户点击「删除」后，直接操作；出现 Message 告知用户操作成功，并提供用户「撤销」的按钮；用户进行下一个操作或者 1 分钟内不进行任何操作， Message 消失，用户无法再「撤销」。

特例：在执行某些无法「撤销」的操作时，可以点击「删除」后，出现 Popconfirm 进行二次确认，在当前页面完成任务。

不推荐示例
滥用 Modal 进行二次确认，就像「狼来了」一样，既打断用户心流（无法将上下文带到弹出框中），也无法避免失误的发生。
二次确认覆盖层：避免滥用 Modal 进行二次确认，应该勇敢的让用户去尝试，给用户机会「撤销」即可。

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

输入覆盖层示例
鼠标「点击」图标触发；鼠标「点击」悬浮层以外的其他区块后，直接保存输入结果并退出。
输入覆盖层：在覆盖层上，让用户直接进行少量字段的输入。

嵌入层

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

标签页示例
标签页：将多个平级的信息进行整理和分类了，一次只显示一组信息。

虚拟页面

在交互过程中，「覆盖层」可以在当前页面上方显示附加内容和交互链接；「嵌入层」可以在页面内部实现同样效果；而「虚拟页面」不局限机械时代的「页面」，可以利用信息时代的特点构建一种新型「页面」。

流程处理

长期以来，Web 实现流程的方式就是把每个步骤放在一个单独的页面上。虽然这种做法是分解问题最简单的方式，但并不是最佳解决方案。对于某些「流程处理」而言，让用户始终待在同一个页面上则更有必要。

渐进式展现示例
渐进式展现：基于用户的操作/某种特定规则，渐进式展现不同的操作选项。

配置程序示例
配置程序：通过提供一系列的配置项，帮助用户完成任务或者产品组装。

弹出框覆盖层示例
弹出框覆盖层：虽然弹出框的出现会打断用户的心流，但是有时候在弹出框中使用「步骤条」来管理复杂流程也是可行的。

简化交互

根据费茨法则（Fitts’s Law）所描述的，如果用户鼠标移动距离越少、对象相对目标越大，那么用户越容易操作。通过运用上下文工具（即：放在内容中的操作工具），使内容和操作融合，从而简化交互。
费茨法则 ：到达目标的时间是到达目标的距离与目标大小的函数，具体：。其中：1.设备当前位置和目标位置的距离（D）；2.目标的大小（W）。距离越长，所用时间越长；目标越大，所用时间越短。

实时可见工具

实时可见工具示例 —摘自知乎
状态一：在文案中出现一个相对明显的点击区域；
状态二：鼠标悬停时，鼠标「指针」变为「手型」，底色发生变化，邀请用户点击。
状态三：鼠标点击后，和未点击前有明显的区分。
如果某个操作非常重要，就应该把它放在界面中，并实时可见。

悬停即现工具

悬停即现工具示例
鼠标悬停时，出现操作项。
如果某个操作不那么重要，或者使用「实时可见工具」过于啰嗦会影响用户阅读时，可以在悬停在该对象上时展示操作项。

开关显示工具

开关显示工具示例
用户点击「修改」后，Table 中「文本」变成「输入框」，开启编辑功能。
如果某些操作只需要在特定模式时显示，可以通过开关来实现。

可视区域 ≠ 可点击区域

文字链热区示例
当悬浮在 ID 所在的文字链单元格时，鼠标「指针」随即变为「手型」，单击即可跳转。
在使用 Table 时，文字链的点击范围受到文字长短影响，可以设置整个单元格为热区，以便用户触发。

按钮热区示例
鼠标移入按钮附近，即可激活 Hover 状态。

提供邀请

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

邀请就是引导用户进入下一个交互层次的提醒和暗示，通常包括意符（eg：实时的提示信息）和可供性，以表明在下一个界面可以做什么。当可供性中可感知的部分（Perceived Affordance）表现为意符时，人机交互的过程往往更加自然、顺畅。

意符（Signifiers）：一种额外的提示，告诉用户可以采取什么行为，以及应该怎么操作；必须是可感知（eg：视觉、听觉、触觉等）。——摘自《设计心理学 1 》
可供性（Affordance）：也被翻译成「示能」，由 James J. Gibson 提出，定义为物品的特性与决定物品用途的主体能力之间的关系；其中部分可感知（此部分定义为 Perceived Affordance），部分不可感知。——摘自《设计心理学 1 》

静态邀请

指通过可视化技术在页面上提供引导交互的邀请。

文本邀请示例

白板式邀请示例

未完成邀请示例
引导操作邀请：一般以静态说明形式出现在页面上，不过它们在视觉上也可以表现出多种不同样式。常见类型：「文本邀请」、「白板式邀请」、「未完成邀请」。

漫游探索邀请示例
在用户首次登录时出现少量「探索点」，当用户点击「我知道了」，能快速切换到下一个探索点。
漫游探索邀请：是向用户介绍新功能的好方法，尤其是对于那些设计优良的界面。但是它不是「创口贴」，仅通过它不能解决界面交互的真正问题。
注：保持漫游过程简单，让用户容易退出和重新启动；保持内容简明扼要，与功能密切相关。

动态邀请

指以响应用户在特定位置执行特定操作的方式，提供特定的邀请。

悬停邀请示例 1
鼠标「悬停」整个卡片时，可被点击部分变为蓝色的「文字链」。

悬停邀请示例 2
鼠标「悬停」时，出现「选择此模板」的按钮。
悬停邀请：在鼠标悬停期间提供邀请。

推论邀请示例
用户点击「赞」后，同时系统分析（既然用户喜欢这篇文章，那么可能对这一类文章都有兴趣）并提供开启「精打细算」的邀请。
推论邀请：用于交互期间，合理推断用户可能产生的需求。

更多内容邀请示例
在 Modal 中会出现前后切换的箭头。
更多内容邀请：用于邀请用户查看更多内容。