前端的UI设计与交互之设计原则篇

1、亲密性

a)纵向间距示例
这三种规格分别为：8px（小号间距）、16px（中号间距）、24px（大号间距）。

b)在这三种规格不适用的情况下，可以通过加减『基础间距』的倍数，或者增加元素来拉开信息层次。
注：
A、y=8+8*n。其中，n>=0，y 是纵向间距，8 是『基础间距』。
B、增加元素示例，通过增加『分割线』来拉开层次。
c)横向间距关系
为了适用不同尺寸的屏幕，在横向采用栅格布局来排布组件，从而保证布局的灵活性。
在一个组件内部，元素的横向间距也应该有所不同。

2、对齐
a)文案类对齐
如果页面的字段或段落较短、较散时，需要确定一个统一的视觉起点。如标题和正文左对齐。
表单类对齐
b)表单类对齐
冒号对齐（右对齐）能让内容锁定在一定范围内，让用户眼球顺着冒号的视觉流，就能找到所有填写项，从而提高填写效率。
c)数字类对齐
为了快速对比数值大小，建议所有数值取相同有效位数，并且右对齐。
3、对比
a）主次关系对比：
为了让用户能在操作上（类似表单、弹出框等场景）快速做出判断， 来突出其中一项相对更重要或者更高频的操作。
在一些需要用户慎重决策的场景中，系统应该保持中立，不能替用户或者诱导用户做出判断，如：不区分主次的示例
『通过』和『驳回』都使用次按钮，系统保持中立。
b）总分关系对比
通过调整排版、字体、大小等方式来突出层次感，区分总分关系，使得页面更具张力和节奏感。
c）状态关系对比
通过改变颜色、增加辅助形状等方法来实现状态关系的对比，以便用户更好的区分信息。
如『静态对比』用不同颜色点，来表明不同状态。
『动态对比』鼠标悬停时，该项和其他项呈现出明显不同的视觉效果，响应用户操作。
4、重复
相同的元素在整个界面中不断重复，不仅可以有效降低用户的学习成本，也可以帮助用户识别出这些元素之间的关联性。
a）重复元素
重复元素可以是一条粗线、一种线框，某种相同的颜色、设计要素、设计风格，某种格式、空间关系等。
5、直截了当
a）页内编辑
单字段行内编辑：当『易读性』远比『易编辑性』重要时，可以使用『单击编辑』
当『易读性』为主，同时又要突出操作行的『易编辑性』时，可使用『文字链/图标编辑』。
多字段行内编辑
注：在『多字段行内编辑』的情况下，显示的内容和编辑时所需的字段会存在比较大的差异，所以更需要『巧用过渡』原则中的『解释刚刚发生了什么』来消除这种视觉影响。
b）利用拖放
拖放列表
只能限制在一个维度（上/下或者左/右）进行拖放。
拖放图片/文件
6、足不出户
能在这个页面解决的问题，就不要去其它页面解决，因为任何页面刷新和跳转都会引起变化盲视（Change Blindness），导致用户心流（Flow）被打断。频繁的页面刷新和跳转，就像在看戏时，演员说完一行台词就安排一次谢幕一样。
a)覆盖层：避免滥用 Modal 进行二次确认，应该勇敢的让用户去尝试，给用户机会『撤消』即可
详情覆盖层：一般在列表中，通过用户『悬停』/『点击』某个区块，在当前页加载该条列表项的更多详情信息。
输入覆盖层：在覆盖层上，让用户直接进行少量字段的输入。
b)嵌入层
列表嵌入层：在列表中，显示某条列表项的详情信息，保持上下文不中断。
标签页：将多个平级的信息进行整理和分类了，一次只显示一组信息。
c)虚拟页面
d)流程处理
渐进式展现：基于用户的操作/某种特定规则，渐进式展现不同的操作选项。
配置程序：通过提供一系列的配置项，帮助用户完成任务或者产品组装。
弹出框覆盖层：虽然弹出框的出现会打断用户的心流，但是有时候在弹出框中使用『步骤条』来管理复杂流程也是可行的。
7、简化交互
a)实时可见工具
如果某个操作非常重要，就应该把它放在界面中，并实时可见。
b)悬停即现工具
c)开关显示工具
d)交互中的工具
如果操作不重要或者可以通过其他途径完成时，可以将工具放置在用户的操作流程中，减少界面元素，降低认知负担，给用户小惊喜。
e)可视区域 ≠ 可点击区域
在使用 Table 时，文字链的点击范围受到文字长短影响，可以设置整个单元格为热区，以便用户触发。当需要增强按钮的响应性时，可以通过增加用户点击热区的范围，而不是增大按钮形状，从而增强响应性，又不缺失美感.
8、提供邀请
很多富交互模式（eg：『拖放』、『行内编辑』、『上下文工具』）都有一个共同问题，就是缺少易发现性。所以『提供邀请』是成功完成人机交互的关键所在。
邀请就是引导用户进入下一个交互层次的提醒和暗示，通常包括意符（eg：实时的提示信息）和可供性，以表明在下一个界面可以做什么。当可供性中可感知的部分（Perceived Affordance）表现为意符时，人机交互的过程往往更加自然、顺畅。
a）静态邀请
指通过可视化技术在页面上提供引导交互的邀请。
漫游探索邀请：是向用户介绍新功能的好方法，尤其是对于那些设计优良的界面。但是它不是『创口贴』，仅通过它不能解决界面交互的真正问题。
b)动态邀请
悬停邀请：在鼠标悬停期间提供邀请。
推论邀请：用于交互期间，合理推断用户可能产生的需求。
更多内容邀请：用于邀请用户查看更多内容。
9、巧用过渡
人脑灰质（Gray Matter）会对动态的事物（eg：移动、形变、色变等）保持敏感。在界面中，适当的加入一些过渡效果，能让界面保持生动，同时也能增强用户和界面的沟通。
a)在视图变化时保持上下文
滑入与滑出：可以有效构建虚拟空间。
传送带：可极大地扩展虚拟空间。
折叠窗口：在视图切换时，有助于保持上下文，同时也能拓展虚拟空间。
b)解释刚刚发生了什么
对象增加：在列表/表格中，新增了一个对象。
对象删除：在列表/表格中，删除了一个对象。
对象更改：在列表/表格中，更改了一个对象。
对象呼出：点击页面中元素，呼出一个新对象。
c)改善感知性能
当无法有效提升『实际性能』时，可以考虑适当转移用户的注意力，来缩短某项操作的感知时间，改善感知性能。
d)自然运动
10、即时反应
a)查询模式
自动完成：用户输入时，下拉列表会随着输入的关键词显示匹配项。 根据查询结果分类的多少，可以分为『确定类目』、『不确定类目』两种类型。
实时搜索：随着用户输入，实时显示搜索结果。『自动完成』、『实时建议』的近亲。
c)反馈模式
实时预览：在用户提交输入之前，让他先行了解系统将如何处理他的输入。
渐进式展现：在必要的时候提供必要的提示，而不是一股脑儿显示所有提示，导致界面混乱，增加认知负担。案例详见『足不出户／渐进式展现』。
进度指示：当一个操作需要一定时间完成时，就需要即时告知进度，保持与用户的沟通。 常见的进度指示：『按钮加载』、『表格加载』、『富列表加载』、『页面加载』。可根据操作的量级和重要性，展示不同类型的进度指示。
点击刷新：告知用户有新内容，并提供按钮等工具帮助用户查看新内容。
定时刷新：无需用户介入，定时展示新内容。如：新增的列表项『高亮』，持续几秒后恢复正常。