交互重思考之 【视觉偷懒】

 

 之前加上最近，看了很多关于提高产品体验度的书籍，也翻阅了一些相关的人类行为学的文章和书籍。看的越多，了解的越多，就越觉得在交互以及用户体验方面的水越深，涉及的学科非常的多。这篇文章严格来说，不属于什么经验，仅仅是本人最近学习的一些笔记与总结。如果是有经验的UE或是交互师，看完之后，觉得写的不好或是不齐全的地方，欢迎来狠虐我。

 

【此路甚远，共勉同行】

***********************************************************************************************

                         偷懒的眼睛

 当一个用户接触一个新的移动产品，视觉是主要的信息来源渠道。用户通过视觉进行产品理解和产品探索，但用户看在眼睛里的并非大脑所接收的信息。

 人的眼睛会偷懒。针对视觉偷懒，解决方案可以是什么？

1. 视觉错觉 与 视觉惯性

 视觉错觉与视觉惯性，简单来说，就是人眼在识别到图形信息后，信息沿着视神经进入大脑，大脑依据习惯或是常识认知进行思考后，得出了与客观界面不同的结论。

 具体例子：

 

 

 

 第一张图，人下意识会因为【颜色】，对相同间距的物体进行分类；第二张图，会因为【形状】，对相同属性的物体进行分类；第三张图，是因为【间距】而对物体进行分类。

 思考：在进行页面布局时，可以将【相同属性或者功能相近】的板块与入口，在距离上拉近（列表导航常常可以看到这种做法）；或是在入口颜色上进行分类（在桌面导航和列表导航中这种方法更为常用），可以帮助用户的眼睛进行偷懒，节省用户对产品的理解成本。

 （其实目前，应用市场上，常常是在一个应用中，有多少种功能图标，就多少种颜色，十几个功能入口，使用列表导航进行紧密排列，没有逻辑感。用户不会去思考这几个功能入口之间是什么关系，他们只会使用有需要的功能入口，有时用户甚至不能很好的找到对应的入口。其实在颜色或者间距等小细节上，对功能入口进行处理，说不定会很好的提高功能模块的使用渗透率，也可以向用户更加清晰地展示产品的功能逻辑。）

 实例：

     

 微信在间距上做了处理，很多应用也采取了这种做法。

 支付宝app首页的桌面式导航，在入口颜色上应该是有区分的，例蓝色是生活服务类。它的桌面式导航分成两大板块（图中是第二板块），按功能优先级，将最常用的第一板块放在屏幕的上方，第二版块接在下方。但是我不是很明白，为什么各个功能入口的摆放是这个顺序，猜想可能是按使用率或者是从商业利益上去考虑的吧（有想法的站友留言指导一下?）

2. 二维、三维和功能可见性

 扁平化的崛起是有其原因的。从视觉心理上看，人的视觉对于二维的东西远远比三维的东西更加敏感。人眼看到三维的东西后，进入视网膜的信息其实还是二维的，这些二维的图像信息传进大脑，大脑依赖原有的认知进行分析，得出一个结果：这个图像原来是三维的！所以，三维的图像，比起二维的图像来说，在认知上，多了一个思考的过程。

 （在此说明，并没有想表示扁平化优于拟物化之类的意思。这是两种不同的设计风格，仅从视觉上去比较优劣是很浅显的。）

 但在扁平与拟物的更迭浪潮中，即使扁平化省略了很多画面元素，但有一个在产品体验上十分重要的因素却不能被忽略，那就是功能元件的【功能可见性】。

 简单来说，就是一个功能元件（按键、滑条等），在用户看到它的第一眼，能不能辨别出它的功能（是按下去？还是滑动？还是其实是一个不能操作的图片？）

 来看个例子：

 

 三个同样的按钮，第一个按钮是简单的纯色图层，第二个带阴影效果，第三个带高光。相比之下，第三个比较有让人按下去的冲动。这就是功能可见性。

 这种功能可见性随着扁平化的流行，被逐渐减弱，但它的重要性依旧不言而喻。功能可见性在扁平化元件上的体现，可以总结为一下几类：

 带阴影

 带渐变

 带动画

 如今呢，针对扁平化产品，我们已经形成了一种比较成熟的元件功能适应性以及新的使用惯性，即使扁平功能元件已经没有了像拟物功能元件一般较强的功能可见性，我们依旧可以看到按键就能反应过来它的操作属性。所以说，这一点，还是和人所形成的使用习惯有关。那么，相应的，如果是并不熟悉扁平化产品的老年人，估计看到一个扁平化按键的时候，就很难体会到这个元件的使用方法了。

3.动态视觉也会偷懒

 在观看一个页面时，突然哪里跳出一行之前没有的文字，或者闪现出一个新的图标，这些动态变化往往很容易吸引人眼的焦点。很多网页与移动端界面在一些特殊的元件上也运用了动画，企图抓住用户的眼球。

 但有些情况下，突然出现的动态变化，也会被人眼“偷懒”地忽略掉。

 就我本人来说，偶尔会遇到这样的问题：

 在注册一个新的网站时，好不容易终于把一大排的注册信息填写完整之后，我如愿以偿按下了“提交”键，奇怪的是，按下之后却没有什么变化，反复按了几遍，才反应过来：“哦，原来上面的信息有一个地方填写不规范。”

 网站对应的填写错误提示其实在我按下第一下的时候，就出现了。

 但我没有注意到。因为我的焦点，在鼠标的“提交”键上。

 当视觉焦点固定在一个位置不变时，周围小的变化就会被不知觉地忽略。例如：在通过某个验证时，注册表过长导致的提交时容易忽略（离注册键较远的）提示信息；或者，在对某个页面进行刷新时，刷新完成后，如果太多的新载入内容一下子突然出现（页面瞬间变化），用户可能会觉得晕头转脑，找不到之前浏览到的位置了，而当载入内容很少时，例如一个新的访问好友、一条新的评论等，这些小的变化信息很可能被直接忽略。

 针对这个问题，有两种建议：

（1）新的页面变化，可以选择较为流畅的过渡动画来呈现。使用户明白，这一块区域发生了变化，并且是变多了/便少了 等；

（2）较小的提示变化，可以在填写过程中针对填写信息，及时给予合格或出错提示，此时用户的焦点还集中在填写区域内，很直接就注意到了；或者，在“提交”按键的附近显示出错提示，并引导用户，找到指定位置进行修改；