亲密性

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

  • 纵向间距关系：通过「小号间距」、「中号间距」、「大号间距」这三种规格来划分信息层次结构，在这三种规格不适用的情况下，可以通过加减「基础间距」的倍数，或者增加元素来拉开信息层次
  • 横向间距关系：为了适用不同尺寸的屏幕，在横向采用栅格布局来排布组件，从而保证布局的灵活性，在一个组件内部，元素的横向间距也应该有所不同

对齐

在界面设计中，将元素进行对齐，既符合用户的认知特性，也能引导视觉流向，让用户更流畅地接收信息

  • 文案类对齐：如果页面的字段或段落较短、较散时，需要确定一个统一的视觉起点
  • 表单类对齐：冒号对齐（右对齐）能让内容锁定在一定范围内，让用户眼球顺着冒号的视觉流，就能找到所有填写项，从而提高填写效率
  • 数字类对齐：为了快速对比数值大小，建议所有数值取相同有效位数，并且右对齐

对比

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

  • 主次关系对比：为了让用户能在操作上（类似表单、弹出框等场景）快速做出判断， 来突出其中一项相对更重要或者更高频的操作。注意：突出的方法，不局限于强化重点项，也可以是弱化其他项
  • 主分关系对比：通过调整排版、字体、大小等方式来突出层次感，区分总分关系，使得页面更具张力和节奏感
  • 状态关系对比：通过改变颜色、增加辅助形状等方法来实现状态关系的对比，以便用户更好的区分信息。常见类型有「静态对比」、「动态对比」

重复

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

  • 重复元素：重复元素可以是一条粗线、一种线框，某种相同的颜色、设计要素、设计风格，某种格式、空间关系等

直截了当

需要在哪里输出，就要允许在哪里输入：不要为了编辑内容而打开另一个页面，应该直接在上下文中实现编辑

足不出户

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

简化交互

通过运用上下文工具（即：放在内容中的操作工具），使内容和操作融合，从而简化交互

  • 实时可见工具：如果某个操作非常重要，就应该把它放在界面中，并实时可见
  • 悬停即现工具：如果某个操作不那么重要，或者使用「实时可见工具」过于啰嗦会影响用户阅读时，可以在悬停在该对象上时展示操作项
  • 开关显示工具：如果某些操作只需要在特定模式时显示，可以通过开关来实现
  • 可视区域 ≠ 可点击区域（即点击热区）：在使用 Table 时，文字链的点击范围受到文字长短影响，可以设置整个单元格为热区，以便用户触发

提供邀请

引导用户进入下一个交互层次进行提醒和暗示，很多富交互模式都有一个共同问题，就是缺少易发现性。所以「提供邀请」是成功完成人机交互的关键所在通常包括意符（eg：实时的提示信息）和可供性，以表明在下一个界面可以做什么。当可供性中可感知的部分表现为意符时，人机交互的过程往往更加自然、顺畅

巧用过渡

在界面中，适当的加入一些过渡效果，能让界面保持生动，同时也能增强用户和界面的沟通

  • 在视图变化时保持上下文——滑入与滑出：利用转场滑入与滑出效果，可以有效构建虚拟空间
  • 在视图变化时保持上下文——传送带：利用传送带转场效果，可极大地扩展虚拟空间
  • 在视图变化时保持上下文——折叠窗口：在视图切换时，利用折叠窗口有助于保持上下文，同时也能拓展虚拟空间
  • 解释刚刚发生了什么——对象增加：在列表/表格中，新增一条对象时，该行「高亮」告知用户这是新增项；几秒后「高亮」消失，以免过度干扰用户
  • 解释刚刚发生了什么——对象删除：在列表/表格中，删除了一个对象，提供淡出效果，模仿删除效果
  • 解释刚刚发生了什么——对象更改：在列表/表格中，更改了一个对象，修改项出现「黄底」，表明该对象发生了更改，底色持续几秒后，恢复正常
  • 解释刚刚发生了什么——对象呼出：点击页面中元素，呼出一个新对象，提供淡入或弹出效果，模仿呼出效果
  • 改善感知性能：当无法有效提升「实际性能」时，考虑适当转移用户的注意力，来缩短某项操作的感知时间，改善感知性能
  • 自然运动

及时反映

用户进行了操作或者内部数据发生了变化，系统就应该立即有一个对应的反馈，同时输入量级越大、重要性越高，那么反馈量级越大、重要性越高