1、亲密性（Proximity）

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

启示：

• 有关联的内容要放一起展示；

2、对齐(Alignment)

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

启示：

• 页面中的内容基本不能独立存在，总要跟页面某个元素对齐；

3、对比(Contrast)

对比是增加视觉效果最有效方法之一，同时也能在不同元素之间建立一种有组织的层次结构，让用户快速识别关键信息。

启示

• 突出的方法，不局限于强化重点项，也可以是弱化其他项；
• 如果要表达有区别，就大胆运用对比，不要让用户花心思去找那细微的差别；
• 大小对比、颜色明暗深浅对比；
• 不需要区分主次的场景：在一些需要用户慎重决策的场景中，系统应该保持中立，不能替用户或者诱导用户做出判断；

4、重复(Repetition)

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

启示

• 重复可以降低用户学习成本，加深用户的认知；
• 重复元素可以是一条粗线、一种线框，某种相同的颜色、设计要素、设计风格，某种格式、空间关系等。

5、直截了当(Make it Direct)

需要在哪里输出，就是允许在哪里输入，就是直接操作的原理。
启示

• 不要为了编辑内容而打开另一个页面，应该直接在上下文中实现编辑；
• 文本框输入内容时也要支持修改或删除；
• 某些排序页面的拖拽交互；

6、简化交互(Keep it Lightweight)

根据费茨法则，如果用户鼠标移动距离越少，对象相对目标越大，那么用户越容易操作。
启示

• 通过运用上下文工具，使内容和操作融合，从而简化交互；
• 店铺专修等所见即所得；
• 系统可点击区域适当扩大，便于操作，特别是移动端；
• PC端不重要内容鼠标hover时显示；

7、足不出户(Stay on the Page)

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

启示

• 可以使用覆盖层进行短时间的覆盖输入，提示等。也可以使用嵌入层，展示详细信息；
• PC端删除时二次确认小弹窗直接当前位置显示；
• 需要输入内容时，异常信息直接当前页面展示；

8、提供邀请(Provide Invitation)

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

启示

• 交互之前给出的反馈，解决易发现性问题；
• PC端订单号鼠标hover提示复制；
• 移动端订单号后面直接显示复制按钮；

9、巧用过渡-使用变换(Use Transition)

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

启示

• 交互期间为用户提供视觉反馈；
• 保持生动，增强页面的沟通，例如：出现异常的提示页；

10、即时反应(React Immediately)

交互之后立即给出反馈。就像牛顿第三定律所描述作用力和反作用一样，用户进行了操作或者内部数据发生了变化，系统就应该立即有一个对应的反馈，同时输入量级越大、重要性越高，那么反馈量级越大、重要性越高。

启示

• 交互后提供的反馈；