原则
亲密性
如果信息之间关联性越高，它们之间的距离就应该越接近，也越像一个视觉 单元；反之，则它们的距离就应该越远，也越像多个视觉单元。亲密性的根本目 的是实现组织性，让用户对页面结构和信息层次一目了然。
纵向间距关系
通过『小号间距』、『中号间距』、『大号间距』这三种规格来划分信息层 次。在这三种规格不适用的情况下，可以通过加减『基础间距』的倍数，或者增 加元素来拉开信息层次。
横向间距关系
为了适用不同尺寸的屏幕，在横向采用栅格布局来排布组件，从而保证布局 的灵活性。
对齐
正如『格式塔学派』中的连续律（Law of Continuity）所描述的，在知觉过程 中人们往往倾向于使知觉对象的直线继续成为直线，使曲线继续成为曲线。在界 面设计中，将元素进行对齐，既符合用户的认知特性，也能引导视觉流向，让用 户更流畅地接收信息。
文案类对齐
如果页面的字段或段落较短、较散时，需要确定一个统一的视觉起点。
表单类对齐
冒号对齐（右对齐）能让内容锁定在一定范围内，让用户眼球顺着冒号的视 觉流，就能找到所有填写项，从而提高填写效率。
数字类对齐
为了快速对比数值大小，建议所有数值取相同有效位数，并且右对齐。
对比
对比是增加视觉效果最有效方法之一，同时也能在不同元素之间建立一种有 组织的层次结构，让用户快速识别关键信息。
主次关系对比
为了让用户能在操作上（类似表单、弹出框等场景）快速做出判断， 来突 出其中一项相对更重要或者更高频的操作。注意：突出的方法，不局限于强化重 点项，也可以是弱化其他项。在一些需要用户慎重决策的场景中，系统应该保持 中立，不能替用户或者诱导用户做出判断。
总分关系对比
通过调整排版、字体、大小等方式来突出层次感，区分总分关系，使得页面 更具张力和节奏感。
状态关系对比
通过改变颜色、增加辅助形状等方法来实现状态关系的对比，以便用户更好 的区分信息。
重复
相同的元素在整个界面中不断重复，不仅可以有效降低用户的学习成本，也可以帮助用户识别出这些元素之间的关联性。
重复元素可以是一条粗线、一种线框，某种相同的颜色、设计要素、设计风格，某种格式、空间关系等。
直截了当
正如 Alan Cooper 所言：『需要在哪里输出，就要允许在哪里输入』。
这就是直接操作的原理。
eg：不要为了编辑内容而打开另一个页面，应该直接在上下 文中实现编辑。
页内编辑
当『易读性』远比『易编辑性』重要时，可以使用『单击编辑』。
当『易读性』为主，同时又要突出操作行的『易编辑性』时，可使用『文字链/图标编辑』。
利用拖放
拖放列表只能限制在一个维度（上/下或者左/右）进行拖放。
足不出户
能在这个页面解决的问题，就不要去其它页面解决，因为任何页面刷新和跳转都会引起变化盲视（Change Blindness），导致用户心流（Flow）被打断。
频繁的页面刷新和跳转，就像在看戏时，演员说完一行台词就安排一次谢幕一样。
覆盖层
二次确认覆盖层：避免滥用 Modal 进行二次确认，应该勇敢的让用户去尝 试，给用户机会『撤销』即可。
详情覆盖层：一般在列表中，通过用户『悬停』/『点击』某个区块，在当前页加载该条列表项的更多详情信息。
输入覆盖层：在覆盖层上，让用户直接进行少量字段的输入。
嵌入层
列表嵌入层：在列表中，显示某条列表项的详情信息，保持上下文不中断。
标签页：将多个平级的信息进行整理和分类了，一次只显示一组信息。
虚拟页面
在交互过程中，『覆盖层』可以在当前页面上方显示附加内容和交互链接；『嵌入层』可以在页面内部实现同样效果；而『虚拟页面』不局限机械时代的『页面』，可以利用信息时代的特点构建一种新型『页面』。
流程处理
长期以来，Web 实现流程的方式就是把每个步骤放在一个单独的页面上。
虽然这种做法是分解问题最简单的方式，但并不是最佳解决方案。对于某些『流程处理』而言，让用户始终待在同一个页面上则更有必要。
渐进式展现：基于用户的操作/某种特定规则，渐进式展现不同的操作选项。 配置程序：通过提供一系列的配置项，帮助用户完成任务或者产品组装。
弹出框覆盖层：虽然弹出框的出现会打断用户的心流，但是有时候在弹出框 中使用『步骤条』来管理复杂流程也是可行的。
简化交互
根据费茨法则（Fitts's Law）所描述的，如果用户鼠标移动距离越少、对象相对目标越大，那么用户越容易操作。通过运用上下文工具（即：放在内容中的操作工具），使内容和操作融合，从而简化交互。
实时可见工具
如果某个操作非常重要，就应该把它放在界面中，并实时可见。
悬停即现工具
如果某个操作不那么重要，或者使用『实时可见工具』过于啰嗦会影响用户阅读时，可以在悬停在该对象上时展示操作项。
开关显示工具
如果某些操作只需要在特定模式时显示，可以通过开关来实现。
可视区域 ≠ 可点击区域
在使用 Table 时，文字链的点击范围受到文字长短影响，可以设置整个单元格为热区，以便用户触发。
当需要增强按钮的响应性时，可以通过增加用户点击热区的范围，而不是增大按钮形状，从而增强响应性，又不缺失美感。
提供邀请
很多富交互模式（eg：『拖放』、『行内编辑』、『上下文工具』）都有一个共同问题，就是缺少易发现性。所以『提供邀请』是成功完成人机交互的关键所在。
邀请就是引导用户进入下一个交互层次的提醒和暗示，通常包括意符（eg：实时的提示信息）和可供性，以表明在下一个界面可以做什么。当可供性中可感知的部分（Perceived Affordance）表现为意符时，人机交互的过程往往更加自然、顺畅。
静态邀请
指通过可视化技术在页面上提供引导交互的邀请。
引导操作邀请：一般以静态说明形式出现在页面上，不过它们在视觉上也可以表现出多种不同样式。常见类型：『文本邀请』、『白板式邀请』、『未完成邀请』。
漫游探索邀请：是向用户介绍新功能的好方法，尤其是对于那些设计优良的界面。
但是它不是『创口贴』，仅通过它不能解决界面交互的真正问题。
动态邀请
指以响应用户在特定位置执行特定操作的方式，提供特定的邀请。
悬停邀请：在鼠标悬停期间提供邀请。
推论邀请：用于交互期间，合理推断用户可能产生的需求。
更多内容邀请：用于邀请用户查看更多内容。
巧用过渡
人脑灰质（Gray Matter）会对动态的事物（eg：移动、形变、色变等）保持敏感。在界面中，适当的加入一些过渡效果，能让界面保持生动，同时也能增强用户和界面的沟通。此章节请参见在线文档。
即时反应
『提供邀请』的强大体现在交互之前给出反馈，解决易发现性问题；『巧用过渡』的有用体现在它能够在交互期间为用户提供视觉反馈；『即时反应』的重要性体现在交互之后立即给出反馈。
就像『牛顿第三定律』所描述作用力和反作用一样，用户进行了操作或者内部数据发生了变化，系统就应该立即有一个对应的反馈，同时输入量级越大、重要性越高，那么反馈量级越大、重要性越高。
虽然反馈太多（准确的说，错误的反馈太多）是一个问题，但是反馈太少甚至没有反馈的系统，则让人感觉迟钝和笨拙，用户体验更差。
查询模式
自动完成：用户输入时，下拉列表会随着输入的关键词显示匹配项。根据查询结果分类的多少，可以分为『确定类目』、『不确定类目』两种类型。
实时搜索：随着用户输入，实时显示搜索结果。『自动完成』、『实时建议』的近亲。
反馈模式
实时预览：在用户提交输入之前，让他先行了解系统将如何处理他的输入。
渐进式展现：在必要的时候提供必要的提示，而不是一股脑儿显示所有提示，导致界面混乱，增加认知负担。
进度指示：当一个操作需要一定时间完成时，就需要即时告知进度，保持与用户的沟通。
常见的进度指示：『按钮加载』、『表格加载』、『富列表加载』、『页面加载』。可根据操作的量级和重要性，展示不同类型的进度指示。
点击刷新：告知用户有新内容，并提供按钮等工具帮助用户查看新内容。
定时刷新：无需用户介入，定时展示新内容。