#Ant Design# 设计规范设计原则

妖狐艹你老母 2021-09-28 04:18 689阅读 0赞

转载自：[https://www.douban.com/note/643930072/][https_www.douban.com_note_643930072]

# \#Ant Design\# 设计规范 01设计原则 #

![p46430838.webp][]

## 1. 亲密性 ##

距离近-关联高-统一视觉单元，亲密性根本目的：实现组织性，让用户对页面结构和信息层次一目了然。

1）纵向间距关系

通过8px『小号间距』、16px『中号间距』、24px『大号间距』这三种规格来划分信息层次；在 Ant Design 中，y=8+8\*n。其中，n>=0，y 是纵向间距，8 是『基础间距』。

2）横向间距关系

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

## 2. 对齐 ##

正如『格式塔学派』中的连续律（Law of Continuity）所描述的，在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线，使曲线继续成为曲线。在界面设计中，将元素进行对齐，既符合用户的认知特性，也能引导视觉流向，让用户更流畅地接收信息。

1）文案类：页面的字段或段落较短、较散时，需要确定一个统一的视觉起点。推荐示例 - 标题和正文左对齐，使用了一个视觉起点。

2）表单类：冒号对齐（右对齐）能让内容锁定在一定范围内，让用户眼球顺着冒号的视觉流，就能找到所有填写项，从而提高填写效率。

3）数字类：为了快速对比数值大小，建议所有数值取相同有效位数，并且右对齐。

## 3. 对比 ##

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

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

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

3）状态关系：通过改变颜色、增加辅助形状等方法来实现状态关系的对比。

## 4.重复 ##

相同的元素在整个界面中不断重复，不仅可以有效降低用户的学习成本，也可以帮助用户识别出这些元素之间的关联性。重复元素，可以是一条粗线、一种线框，某种相同的颜色、设计要素、设计风格，某种格式、空间关系等。

## 5. 直截了当 ##

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

1）页内编辑

a. 单字段行内编辑：当『易读性』远比『易编辑性』重要时，可以使用『单击编辑』[https://os.alipayobjects.com/rmsportal/PmVuUUKeamHdveT.png ][https_os.alipayobjects.com_rmsportal_PmVuUUKeamHdveT.png]；当『易读性』为主，同时又要突出操作行的『易编辑性』时，可使用『文字链/图标编辑』[https://os.alipayobjects.com/rmsportal/ZmRlahliUbCurhu.png][https_os.alipayobjects.com_rmsportal_ZmRlahliUbCurhu.png]

b. 多字段行内编辑：

在『多字段行内编辑』的情况下，显示的内容和编辑时所需的字段会存在比较大的差异，所以更需要『巧用过渡』原则中的『解释刚刚发生了什么』来消除这种视觉影响。编辑模式在不破坏整体性的前提下，可扩大空间，以便放下『输入框』等表单元素。

2）利用拖放

拖放列表：移动位置

拖放图片、文件：上传

## 6. 足不出户 ##

能在这个页面解决的问题，就不要去其它页面解决，因为任何页面刷新和跳转都会引起变化盲视（Change Blindness），导致用户心流（Flow）被打断。

1）覆盖层

a. 二次确认覆盖层：避免滥用 Modal 进行二次确认，应该勇敢的让用户去尝试，给用户机会『撤消』即可。[https://os.alipayobjects.com/rmsportal/woHOTIZeXCYmtkv.png][https_os.alipayobjects.com_rmsportal_woHOTIZeXCYmtkv.png]；特例：在执行某些无法『撤消』的操作时，可以点击『删除』后，出现 Popconfirm 进行二次确认，在当前页面完成任务。[https://os.alipayobjects.com/rmsportal/hDlhNscVtHdvvgu.png ][https_os.alipayobjects.com_rmsportal_hDlhNscVtHdvvgu.png]总之，不要大面积一惊一乍地进行跳转或弹出。

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

c. 输入覆盖层：在覆盖层上，让用户直接进行少量字段的输入。[https://os.alipayobjects.com/rmsportal/YehbrRkldqWsezo.png][https_os.alipayobjects.com_rmsportal_YehbrRkldqWsezo.png]

2）嵌入层

a. 列表嵌入：列表中各项详情展开不中断\*（看实际需要展开或折叠）

b. 标签嵌入：多个平级内容进行分类整理后，一次只显示一组内容（可灵活切换）

3）虚拟页面

4）流程处理

Web流程处理与其将每一步骤分到不同的单独页面，更需要用户留在同一个页面进行处理。

a. 渐进式展现：基于用户操作和特定规则，渐进展现不同操作步骤

b. 配置程序：通过一系列配置项，帮助用户完成任务或产品组装[https://os.alipayobjects.com/rmsportal/EBVLFAwHHjiXtIJ.png][https_os.alipayobjects.com_rmsportal_EBVLFAwHHjiXtIJ.png]

c. 弹出框覆盖层：虽然弹出框的出现会打断用户的心流，但是有时候在弹出框中使用『步骤条』来管理复杂流程也是可行的。[https://os.alipayobjects.com/rmsportal/xcYosQncDPuFxhS.png][https_os.alipayobjects.com_rmsportal_xcYosQncDPuFxhS.png]

5）简化交互

费茨法则（Fitts's Law）所描述的，如果用户鼠标移动距离越少、对象相对目标越大，那么用户越容易操作。通过运用上下文工具（即：放在内容中的操作工具），使内容和操作融合，从而简化交互。

a. 实时可见工具：如果某个操作非常重要，就应该把它放在界面中，并实时可见，每一个动作都有变化反馈。

b. 悬停即现工具：如果某个操作不那么重要，或者使用『实时可见工具』过于啰嗦会影响用户阅读时，可以在悬停在该对象上时展示操作项。[https://os.alipayobjects.com/rmsportal/AUiWMlbxCvpBFyA.png][https_os.alipayobjects.com_rmsportal_AUiWMlbxCvpBFyA.png]

c. 开关显示工具：如果某些操作只需要在特定模式时显示，可以通过开关（点击）来实现某功能。

d. 交互中的工具：如果操作不重要或者可以通过其他途径完成时，可以将工具放置在用户的操作流程中，减少界面元素，降低认知负担，给用户小惊喜。譬如，当鼠标悬停某区域后才出现下一步的操作提示，取代一开始就在界面区域内放置操作按钮或提示。

6）可视区域 ≠ 可点击区域

在使用 Table 时，文字链的点击范围受到文字长短影响，可以设置整个单元格为热区，以便用户触发。当需要增强按钮的响应性时，可以通过增加用户点击热区的范围，而不是增大按钮形状，从而增强响应性，又不缺失美感。注：在移动端尤其适用。

## 7. 提供邀请 ##

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

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

意符（Signifiers） ：一种额外的提示，告诉用户可以采取什么行为，以及应该怎么操作；必须是可感知（eg：视觉、听觉、触觉等）。——摘自《设计心理学 1 》

可供性（Affordance） ：也被翻译成『示能』，由 James J. Gibson 提出，定义为物品的特性与决定物品用途的主体能力之间的关系；其中部分可感知（此部分定义为 Perceived Affordance），部分不可感知。——摘自《设计心理学 1 》

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

a. 引导操作邀请：一般以静态说明形式出现在页面上，不过它们在视觉上也可以表现出多种不同样式。 常见类型：『文本邀请』[https://os.alipayobjects.com/rmsportal/pWnlJpbkCPIaKdP.png][https_os.alipayobjects.com_rmsportal_pWnlJpbkCPIaKdP.png]、『白板式邀请』[https://os.alipayobjects.com/rmsportal/DkOYgfJHDuzhyBg.png][https_os.alipayobjects.com_rmsportal_DkOYgfJHDuzhyBg.png]、『未完成邀请』[https://os.alipayobjects.com/rmsportal/cojQlWfINmsVDGd.png][https_os.alipayobjects.com_rmsportal_cojQlWfINmsVDGd.png]。

b. 漫游探索邀请：是向用户介绍新功能的好方法，尤其是对于那些设计优良的界面。但是它不是『创口贴』，仅通过它不能解决界面交互的真正问题。注：保持漫游过程简单，让用户容易退出和重新启动；保持内容简明扼要，与功能密切相关。[https://os.alipayobjects.com/rmsportal/TGnzYViseCoFBYL.png][https_os.alipayobjects.com_rmsportal_TGnzYViseCoFBYL.png]

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

a. 悬停邀请：在鼠标悬停期间提供邀请。

b. 推论邀请：用于交互期间，合理推断用户可能产生的需求。[https://os.alipayobjects.com/rmsportal/SyurwytfcvpbNLG.png][https_os.alipayobjects.com_rmsportal_SyurwytfcvpbNLG.png]

c. 更多内容邀请：用于邀请用户查看更多内容。

## 8. 巧用过渡 ##

人脑灰质（Gray Matter）会对动态的事物（eg：移动、形变、色变等）保持敏感。在界面中，适当的加入一些过渡效果，能让界面保持生动，同时也能增强用户和界面的沟通。

1）在视图变化时保持上下文

a. 滑入与滑出：可以有效构建虚拟空间。

b. 传送带：可极大地扩展虚拟空间。

c. 折叠窗口：在视图切换时，有助于保持上下文，同时也能拓展虚拟空间。

2）解释刚刚发生了什么

a. 对象增加：在列表/表格中，新增了一个对象。

b. 对象删除：在列表/表格中，删除了一个对象。

c.对象更改：在列表/表格中，更改了一个对象。

d. 对象呼出：点击页面中元素，呼出一个新对象。

3）改善感知性能

当无法有效提升『实际性能』时，可以考虑适当转移用户的注意力，来缩短某项操作的感知时间，改善感知性能。

4）自然运动：参见 Ant Motion 动画语言。

## 9. 即时反应 ##

『提供邀请』的强大体现在交互之前给出反馈，解决易发现性问题；『巧用过渡』的有用体现在它能够在交互期间为用户提供视觉反馈；『即时反应』的重要性体现在交互之后立即给出反馈。

虽然反馈太多（准确的说，错误的反馈太多）是一个问题，但是反馈太少甚至没有反馈的系统，则让人感觉迟钝和笨拙，用户体验更差。

1）查询模式

a. 自动完成：用户输入时，下拉列表会随着输入的关键词显示匹配项。 根据查询结果分类的多少，可以分为『确定类目』、『不确定类目』两种类型。[https://os.alipayobjects.com/rmsportal/fgQfkNakHrUiAun.png][https_os.alipayobjects.com_rmsportal_fgQfkNakHrUiAun.png]

b. 实时搜索：随着用户输入，实时显示搜索结果。[https://os.alipayobjects.com/rmsportal/OyJCVmOigyXKWCf.png][https_os.alipayobjects.com_rmsportal_OyJCVmOigyXKWCf.png]

c. 微调搜索：随着用户调整搜索条件，实时调整搜索结构。

2）反馈模式

a. 实时预览：在用户提交输入之前，让他先行了解系统将如何处理他的输入。注：解决错误最好的办法，就是不让错误发生。而『实时预览』就是有效避免错误的好设计。如：根据用户的输入，提供关于密码强度和有效性的实时反馈。[https://os.alipayobjects.com/rmsportal/jecYhRgfbHleGDJ.png][https_os.alipayobjects.com_rmsportal_jecYhRgfbHleGDJ.png]

b. 渐进式展现：在必要的时候提供必要的提示，而不是一股脑儿显示所有提示，导致界面混乱，增加认知负担。

c. 进度指示：当一个操作需要一定时间完成时，就需要即时告知进度，保持与用户的沟通。 常见的进度指示：『按钮加载』、『表格加载』、『富列表加载』、『页面加载』。可根据操作的量级和重要性，展示不同类型的进度指示。

d. 点击刷新：告知用户有新内容，并提供按钮等工具帮助用户查看新内容。[https://os.alipayobjects.com/rmsportal/DdmWqoqIFSCSAvq.png][https_os.alipayobjects.com_rmsportal_DdmWqoqIFSCSAvq.png]

e. 定时刷新：无需用户介入，定时展示新内容。如:新增的列表项『高亮』，持续几秒后恢复正常。[https://os.alipayobjects.com/rmsportal/guiuShsfpJzxZQx.png][https_os.alipayobjects.com_rmsportal_guiuShsfpJzxZQx.png]

[https_www.douban.com_note_643930072]: https://www.douban.com/note/643930072/
[p46430838.webp]: /images/20210923/39c345a89836400ba8070918d17f97a7.png
[https_os.alipayobjects.com_rmsportal_PmVuUUKeamHdveT.png]: https://os.alipayobjects.com/rmsportal/PmVuUUKeamHdveT.png
[https_os.alipayobjects.com_rmsportal_ZmRlahliUbCurhu.png]: https://os.alipayobjects.com/rmsportal/ZmRlahliUbCurhu.png
[https_os.alipayobjects.com_rmsportal_woHOTIZeXCYmtkv.png]: https://os.alipayobjects.com/rmsportal/woHOTIZeXCYmtkv.png
[https_os.alipayobjects.com_rmsportal_hDlhNscVtHdvvgu.png]: https://os.alipayobjects.com/rmsportal/hDlhNscVtHdvvgu.png
[https_os.alipayobjects.com_rmsportal_YehbrRkldqWsezo.png]: https://os.alipayobjects.com/rmsportal/YehbrRkldqWsezo.png
[https_os.alipayobjects.com_rmsportal_EBVLFAwHHjiXtIJ.png]: https://os.alipayobjects.com/rmsportal/EBVLFAwHHjiXtIJ.png
[https_os.alipayobjects.com_rmsportal_xcYosQncDPuFxhS.png]: https://os.alipayobjects.com/rmsportal/xcYosQncDPuFxhS.png
[https_os.alipayobjects.com_rmsportal_AUiWMlbxCvpBFyA.png]: https://os.alipayobjects.com/rmsportal/AUiWMlbxCvpBFyA.png
[https_os.alipayobjects.com_rmsportal_pWnlJpbkCPIaKdP.png]: https://os.alipayobjects.com/rmsportal/pWnlJpbkCPIaKdP.png
[https_os.alipayobjects.com_rmsportal_DkOYgfJHDuzhyBg.png]: https://os.alipayobjects.com/rmsportal/DkOYgfJHDuzhyBg.png
[https_os.alipayobjects.com_rmsportal_cojQlWfINmsVDGd.png]: https://os.alipayobjects.com/rmsportal/cojQlWfINmsVDGd.png
[https_os.alipayobjects.com_rmsportal_TGnzYViseCoFBYL.png]: https://os.alipayobjects.com/rmsportal/TGnzYViseCoFBYL.png
[https_os.alipayobjects.com_rmsportal_SyurwytfcvpbNLG.png]: https://os.alipayobjects.com/rmsportal/SyurwytfcvpbNLG.png
[https_os.alipayobjects.com_rmsportal_fgQfkNakHrUiAun.png]: https://os.alipayobjects.com/rmsportal/fgQfkNakHrUiAun.png
[https_os.alipayobjects.com_rmsportal_OyJCVmOigyXKWCf.png]: https://os.alipayobjects.com/rmsportal/OyJCVmOigyXKWCf.png
[https_os.alipayobjects.com_rmsportal_jecYhRgfbHleGDJ.png]: https://os.alipayobjects.com/rmsportal/jecYhRgfbHleGDJ.png
[https_os.alipayobjects.com_rmsportal_DdmWqoqIFSCSAvq.png]: https://os.alipayobjects.com/rmsportal/DdmWqoqIFSCSAvq.png
[https_os.alipayobjects.com_rmsportal_guiuShsfpJzxZQx.png]: https://os.alipayobjects.com/rmsportal/guiuShsfpJzxZQx.png