本文整理自Ant Design Documents文档，供个人参考学习使用。
- 自然
- 在行为执行中，利用行为分析、人工智能、传感器、元数据等一系列方式，辅助用户有效决策、减少用户额外操作，从而节省用户脑力和体力，让人机交互行为更自然；
- 在感知和认知中，视觉系统扮演着最重要的角色，通过提炼自然界中的客观规律并运用到界面设计中，从而创建更有层次产品体验；同时，适时加入听觉系统、触觉系统等，创建更多维、更真实的产品体验。
- 确定
- 保持克制：聚焦最有价值产品功能打磨，使用尽量少的设计元素表达；
- 面向对象的方法：探索设计规律，将其抽象成对象，增强界面设计的灵活性和可维护性，减少设计者的主观干扰；
- 模块化设计：将复杂或重复出现的局部封装成模块，提供有限接口与其他模块互动，减少系统复杂度，增强可靠性及可维护性。
1. 亲密性
信息之间关联性越高，距离就该越近，反之，距离应该越远。亲密性的根本目的是实现组织性，使页面结构和信息一目了然。
- 纵向间距关系：通过不同间距区分信息层次；
- 横向间距关系：为了适应不同尺寸屏幕，横向采用栅格布局排布，保证布局灵活性。
2. 对齐
在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线，使曲线继续成为曲线。在界面设计中，将元素进行对齐，既符合用户的认知特性，也能引导视觉流向，让用户更流畅地接收信息。
- 文案类对齐：页面字段或段落较短时，确定一个统一的视觉起点；
- 表单类对齐：冒号对齐能让内容锁定在一定范围内，提高填写效率。
- 数字类对齐：建议数值取相同有效位数，右对齐。
3. 对比
增强视觉效果，同时在不同元素之间建立有组织的层次结构，让用户快速识别关键信息。
- 主次关系对比：突出的方法不局限于强化重点项，也可是弱化其他项。
- 在一些需要用户慎重决策的场景中，系统应该保持中立，不能替用户做出诱导用户的判断。
- 总分关系对比：通过排版、字体、大小等方式突出层次感，区分总分关系，使页面更有张力和节奏感。
- 状态关系对比：通过改变颜色、增加辅助形状等方法实现状态关系对比。
- 静态对比
- 动态对比
4. 重复
相同的元素在整个界面中不断重复，不仅可以有效降低用户的学习成本，也可以帮助用户识别出这些元素之间的关联性。
5. 直截了当
正如 Alan Cooper 所言：『需要在哪里输出，就要允许在哪里输入』。这就是直接操作的原理。eg：不要为了编辑内容而打开另一个页面，应该直接在上下文中实现编辑。
- 页内编辑：
- 单字段行内编辑，当「易读性」比「易编辑性」重要时，可使用「单击编辑」。
- 当「易读性」为主，同时又要突出操作行为「易编辑性」时，可使用文字链/图标编辑。
- 多字段行内编辑。
- 拖放
6. 足不出户
能在这个页面解决的问题，就不要去其它页面解决，因为任何页面刷新和跳转都会引起变化盲视（Change Blindness），导致用户心流（Flow）被打断。频繁的页面刷新和跳转，就像在看戏时，演员说完一行台词就安排一次谢幕一样。
变化盲视（Change Blindness） ：指视觉场景中的某些变化并未被观察者注意到的心理现象。产生这种现象的原因包括场景中的障碍物，眼球运动、地点的变化，或者是缺乏注意力等。——摘自《维基百科》
心流（Flow） ：也有别名以化境 (Zone) 表示，亦有人翻译为神驰状态，定义是一种将个人精神力完全投注在某种活动上的感觉；心流产生时同时会有高度的兴奋及充实感。——摘自《维基百科》
- 覆盖层：二次确认覆盖层，避免滥用Modal进行二次确认，应该勇敢让用户尝试，给机会「撤销」即可。
- 详情覆盖层：列表中，通过「悬停」或「点击」某个区块，在当前页加载该条列表项的更多信息。
- 输入覆盖层：直接进行少量字段输入。
- 嵌入层：列表嵌入，显示某条列表的详情信息，保持上下文不中断；
- 流程处理：
- 渐进式展现
- 配置程序
- 弹出框覆盖层
7. 简化交互
根据费茨法则（Fitts’s Law）所描述的，如果用户鼠标移动距离越少、对象相对目标越大，那么用户越容易操作。通过运用上下文工具（即：放在内容中的操作工具），使内容和操作融合，从而简化交互。
- 实时可见工具：如果某个操作非常重要，就应该把它放在界面中，实时可见。
- 悬停即现工具：如果某个操作不那么重要，或者使用『实时可见工具』过于啰嗦会影响用户阅读时，可以在悬停在该对象上时展示操作项。
- 开关显示工具： 如果某些操作只需要在特定模式时显示，可以通过开关来实现。
- 可视区域≠可点击区域： 在使用 Table 时，文字链的点击范围受到文字长短影响，可以设置整个单元格为热区，以便用户触发。
当需要增强按钮的响应性时，可以通过增加用户点击热区的范围，而不是增大按钮形状，从而增强响应性，又不缺失美感。
8. 提供邀请
很多富交互模式（eg：『拖放』、『行内编辑』、『上下文工具』）都有一个共同问题，就是缺少易发现性。所以『提供邀请』是成功完成人机交互的关键所在。
邀请就是引导用户进入下一个交互层次的提醒和暗示，通常包括意符（eg：实时的提示信息）和可供性，以表明在下一个界面可以做什么。当可供性中可感知的部分（Perceived Affordance）表现为意符时，人机交互的过程往往更加自然、顺畅。
意符（Signifiers） ：一种额外的提示，告诉用户可以采取什么行为，以及应该怎么操作；必须是可感知（eg：视觉、听觉、触觉等）。——摘自《设计心理学 1 》
可供性（Affordance） ：也被翻译成『示能』，由 James J. Gibson 提出，定义为物品的特性与决定物品用途的主体能力之间的关系；其中部分可感知（此部分定义为 Perceived Affordance），部分不可感知。——摘自《设计心理学 1 》
- 静态邀请：
- 文本邀请
- 白板式邀请
- 未完成邀请
- 漫游探索邀请
- 动态邀请：以响应用户在特定位置执行特定操作的方式，提供特定的邀请。
9. 巧用过渡
人脑灰质（Gray Matter）会对动态的事物（eg：移动、形变、色变等）保持敏感。在界面中，适当的加入一些过渡效果，能让界面保持生动，同时也能增强用户和界面的沟通。
- Adding: 新加入的信息元素应被告知如何使用，从页面转变的信息元素需被重新识别。
- Receding: 与当前页无关的信息元素应采用适当方式移除。
- Normal: 指那些从转场开始到结束都没有发生变化的信息元素。
10. 即时反馈
『即时反应』的重要性体现在交互之后立即给出反馈。
就像『牛顿第三定律』所描述作用力和反作用一样，用户进行了操作或者内部数据发生了变化，系统就应该立即有一个对应的反馈，同时输入量级越大、重要性越高，那么反馈量级越大、重要性越高。
虽然反馈太多（准确的说，错误的反馈太多）是一个问题，但是反馈太少甚至没有反馈的系统，则让人感觉迟钝和笨拙，用户体验更差。
- 查询模式
- 自动完成：用户输入时，下拉列表随之匹配。
- 实时搜索
- 反馈模式
- 实时预览：在用户提交之前，先了解系统如何处理他的输入。
- 解决错误最好的办法，就是不让错误发生。
- 进度指示：当一个操作需要一定时间完成时，就需要即时告知进度，保持与用户的沟通。 常见的进度指示：『按钮加载』、『表格加载』、『富列表加载』、『页面加载』。可根据操作的量级和重要性，展示不同类型的进度指示。
- 点击刷新：告知用户有新内容，并提供按钮等工具帮助用户查看。
- 定时刷新：无需用户接入，定时展现新内容。