亲密性

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

本文以及后文示例图片均已后台布局做演示,手机端同理。

纵向间距关系

  • 通过『小号间距』、『中号间距』、『大号间距』这三种规格来划分信息层次。

goazWUHPXsGEDFIGsNlm

在本系统中,这三种规格分别为:8px(小号间距)、16px(中号间距)、24px(大号间距)。

  • 在这三种规格不适用的情况下,可以通过加减『基础间距』的倍数,或者增加元素来拉开信息层次。
    通过基础间距拉开层次的公式如下

    y=8+8*n。其中,n>=0,y 是纵向间距,8 是『基础间距』。

XNFCsupiYDBTJFQkmOmv

图例为通过分割线的方式拉开层次

横向间距关系

考虑到移动端屏幕较为狭小,故不做硬性要求,但在设计中应注意一下几点:

  1. 相同元素组件应保持一端对其(一般为左对齐);
  2. 横向扩展时,应使用栅格布局来排布组件,从而保证布局的灵活性;
  3. 栅格布局元素较少时,宜采用左右滑动但形式;较多时,宜采用下拉框的形式:
    image
    image

对齐

正如『格式塔学派』中的连续律(Law of Continuity)所描述的,在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线,使曲线继续成为曲线。在界面设计中,将元素进行对齐,既符合用户的认知特性,也能引导视觉流向,让用户更流畅地接收信息。

文案类对齐

  • 如果页面的字段或段落较短、较散时,需要确定一个统一的视觉起点。

lVDlIgxvuXSMQvJJVMnu__1_

推荐示例

标题和正文左对齐,使用了一个视觉起点。

DAhkAEIoXYdljmxsJTjl

不推荐示例

标题和正文使用了两个视觉起点,不推荐该种对齐方式,除非刻意强调两者区别。

表单类对齐

  • 冒号对齐(右对齐)能让内容锁定在一定范围内,让用户眼球顺着冒号的视觉流,就能找到所有填写项,从而提高填写效率。
    OaTkwGfGxRSFsvAlzZMq

冒号对齐示例

格式塔学派(德语:Gestalttheorie) :是心理学重要流派之一,兴起于 20 世纪初的德国,又称为完形心理学;主张人脑的运作原理是整体的,『整体不同于其部件的总和』。——摘自『维基百科』

直截了当

需要在哪里输出,就要允许在哪里输入

页内编辑

单字段行内编辑

当『易读性』远比『易编辑性』重要时,可以使用『单击编辑』。
image
单击编辑示例

  1. 状态一:普通的浏览模式,不区分可编辑行和不可编辑行;
  2. 状态二:鼠标悬停时,『指针』变为『手型』,编辑区域底色变黄,出现『Tooltips』提示单击编辑;
  3. 状态三:鼠标点击后,出现『输入框』、『确定』、『取消』表单元素,同时光标定位在『输入框』中。

当『易读性』为主,同时又要突出操作行的『易编辑性』时,可使用『文字链/图标编辑』。
image
文字链/图标编辑示例

  1. 状态一:在可编辑行附近出现文字链/图标;
  2. 状态二:鼠标点击『编辑』后,出现『输入框』、『确定』、『取消』表单元素,同时光标定位在『输入框』中。

多字段行内编辑

注:在『多字段行内编辑』的情况下,显示的内容和编辑时所需的字段会存在比较大的差异,所以更需要『巧用过渡』原则中的『解释刚刚发生了什么』来消除这种视觉影响。

image
多字段行内编辑示例
编辑模式在不破坏整体性的前提下,可扩大空间,以便放下『输入框』等表单元素;其中,在 Table 中进行编辑模式切换时,需要保证每列的不跳动。

利用拖放

拖放列表

只能限制在一个维度(上/下或者左/右)进行拖放。
image
拖放列表示例

  1. 状态一:鼠标悬停该行时,出现可移动的『图标』;
  2. 状态二:鼠标悬停在该『图标』时,指针变为『手型』,点击即可进行拖动;
  3. 状态三:拖动到可放置区块,出现蓝色描边,告知用户该区块可放置该对象。

拖放图片/文件

image
拖放图片/文件示例


简化交互

根据费茨法则(Fitts’s Law)所描述的,如果用户鼠标(移动端为手指移动)移动距离越少、对象相对目标越大,那么用户越容易操作。通过运用上下文工具(即:放在内容中的操作工具),使内容和操作融合,从而简化交互。

实时可见工具

如果某个操作非常重要,就应该把它放在界面中,并实时可见。
image
实时可见工具示例 –摘自知乎

  1. 状态一:在文案中出现一个相对明显的点击区域;
  2. 状态二:鼠标悬停时,鼠标『指针』变为『手型』,底色发生变化,邀请用户点击。
  3. 状态三:鼠标点击后,和未点击前有明显的区分。

开关显示工具

如果某个操作不那么重要,或者使用『实时可见工具』过于啰嗦会影响用户阅读时,可以在悬停在该对象上时展示操作项。
image
悬停即现工具示例
鼠标悬停时,出现操作项。
交互中的工具
如果操作不重要或者可以通过其他途径完成时,可以将工具放置在用户的操作流程中,减少界面元素,降低认知负担,给用户小惊喜。

此处也可以运用『提供邀请』 相关的知识点。
image
推荐示例
鼠标悬停时,出现 Tooltips 进行提示,用户点击内容直接复制。
image
推荐示例
鼠标滑选/双击时,系统自动复制该部分内容。通过大胆猜测用户的行为,并帮助完成,给用户小惊喜。
image
不推荐示例
在可复制内容的附近出现『图标』,点击后复制。

可视区域 ≠ 可点击区域

在使用 Table 时,文字链的点击范围受到文字长短影响,可以设置整个单元格为热区,以便用户触发。
image

文字链热区示例
当悬浮在 ID 所在的文字链单元格时,鼠标『指针』随即变为『手型』,单击即可跳转。

当需要增强按钮的响应性时,可以通过增加用户点击热区的范围,而不是增大按钮形状,从而增强响应性,又不缺失美感。

注:在移动端尤其适用。

image
按钮热区示例
鼠标移入按钮附近,即可激活 Hover 状态。

足不出户

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

变换盲视(Change Blindness) :指视觉场景中的某些变化并未被观察者注意到的心理现象。产生这种现象的原因包括场景中的障碍物,眼球运动、地点的变化,或者是缺乏注意力等。——摘自《维基百科》
心流(Flow) :也有别名以化境 (Zone) 表示,亦有人翻译为神驰状态,定义是一种将个人精神力完全投注在某种活动上的感觉;心流产生时同时会有高度的兴奋及充实感。——摘自《维基百科》

覆盖层

二次确认覆盖层:避免滥用 Modal 进行二次确认,应该勇敢的让用户去尝试,给用户机会『撤消』即可。
image
推荐示例
用户点击『删除』后,直接操作;出现 Message 告知用户操作成功,并提供用户『撤消』的按钮;用户进行下一个操作或者 1 分钟内不进行任何操作, Message 消失,用户无法再『撤消』。
image
推荐示例
特例:在执行某些无法『撤消』的操作时,可以点击『删除』后,出现 Popconfirm 进行二次确认,在当前页面完成任务。
image
不推荐示例
滥用 Modal 进行二次确认,就像『狼来了』一样,既打断用户心流(无法将上下文带到弹出框中),也无法避免失误的发生。
详情覆盖层:一般在列表中,通过用户『悬停』/『点击』某个区块,在当前页加载该条列表项的更多详情信息。

注:使用『悬停』激活时,当鼠标移入时,需要设置 0.5 秒左右的延迟触发;当鼠标移出时,立刻关闭覆盖层

image
详情覆盖层示例
通过『点击』图标查看更多详情信息。
输入覆盖层:在覆盖层上,让用户直接进行少量字段的输入。
image
输入覆盖层示例
鼠标『点击』图标触发;鼠标『点击』悬浮层以外的其他区块后,直接保存输入结果并退出。

嵌入层

列表嵌入层:在列表中,显示某条列表项的详情信息,保持上下文不中断。
image
列表嵌入层示例
标签页:将多个平级的信息进行整理和分类了,一次只显示一组信息。
image
标签页示例

虚拟页面

在交互过程中,『覆盖层』可以在当前页面上方显示附加内容和交互链接;『嵌入层』可以在页面内部实现同样效果;而『虚拟页面』不局限机械时代的『页面』,可以利用信息时代的特点构建一种新型『页面』。

流程处理

长期以来,Web 实现流程的方式就是把每个步骤放在一个单独的页面上。虽然这种做法是分解问题最简单的方式,但并不是最佳解决方案。对于某些『流程处理』而言,让用户始终待在同一个页面上则更有必要。

image
渐进式展现示例
配置程序:通过提供一系列的配置项,帮助用户完成任务或者产品组装。
image

配置程序示例
弹出框覆盖层:虽然弹出框的出现会打断用户的心流,但是有时候在弹出框中使用『步骤条』来管理复杂流程也是可行的。
image

弹出框覆盖层示例

重复

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

重复元素

重复元素可以是一条粗线、一种线框,某种相同的颜色、设计要素、设计风格,某种格式、空间关系等。
image
线框重复示例
image
设计要素重复示例
image
文案格式重复示例

文档更新时间: 2018-09-29 15:10   作者:admin