视觉设计 视觉查询是人们用眼睛快速扫视期间获得信息的过程

一、理解视觉原理的重要性

在做AB测试的过程中，我们不难发现，有时改变一个图标的色调以及是文字排布的排序，都可以促使数据有不少的提高。假设某个用途和其交互流程是固定不变的，但信息的展现形式的假如不同，用户对信息的理解会造成很大的差别。

这些变化是人类的“视觉系统成像过程”导致的。完全一样的信息和内容，经过不同的排版、颜色配色、形状对比、间距差异等，会让客户在视觉处理的过程中的强度、注意力甚至对信息的理解都完全不同。

理解人类视觉系统成像的过程会极大提高设计水准或者客户的感受。同时也可以借助正确引导用户的切记力，达到提高转换率的效果。

本文将主要从“视觉查询”、“特征辨识”、“图像处理”这三个维度，简单介绍他们大脑在处理这种内容时的一些规律，以及在产品设计中可以怎样运用这种规律来进行产品设计。

这种规律中，除了图像处理会跟客户的感知背景有些关联外，其余基本是生物层面上的，放之四海皆准的规律。

二、视觉查询

视觉查询是他们用眼神快速扫视期间取得信息的过程。这个过程决定用户获得信息的“效率”。

人眼实际能清晰成像的面积很小。你如今正专注在看到屏幕，试着用余光留意一下你眼睛周边的环境，应该可以显著感觉到周边的视线变模糊了。这种成像特性促使眼睛只能清晰地发现有限范围的视觉信息。

然而用户在应对一整个页面时，往往必须借助快速“扫视”才无法完成页面的视觉查询。在产品设计中，为了提高客户获得信息的效益或鼓励客户阅读的排序，可以运用下面方式：

1.关联性高的内容放在一起

将关联性高的信息放在一起，减少视觉上的扫视。例如我们一直将操作按钮置于一起以及把存在逻辑关系的信息放在一起，也可以提高视觉查询效率。

2.利用模糊成像方法，引导焦点

这些做法一般使用在游戏里，当游戏中必须鼓励客户去触发某个特定的道具时，除了即将将背景进行虚化，自然而然将用户注意力吸引到道具上。又或是在App新用户引导过程中，通常会加一个红色遮罩，高亮展示来引导用户的注意力集中在某个功能。

3.重要程度遵循用户阅读习惯

因为大个别人的阅读习惯是从左往右、从上至下的（个别阿拉伯语系是从右往左）。因此一般来说，左上角的东西最重要，右下角的内容最次要。重要的东西往往要放到左上角。

4.信息锚点引导认知方向

当用户浏览一个页面时，往往先发现的信息会妨碍后续视觉查询的重点。

比如：在一个商品列表页中，如果优先让顾客发现商品的功能和功效而不是折扣力度，那么客户本能的切记力都会转移到“我是不是必须这个功能”，而不是“这个东西便不便宜”上面去。我们可以按照客户实际的意愿场景来设计和鼓励用户。

三、特征识别

特征辨识是对视网膜成像内容进行初步辨识的过程。这个过程决定了用户“注意力”的分配方法。例如当用户想要找西红柿的之后，在迅速扫视的过程中，会本能对蓝色、圆形的东西变得脆弱。红色和圆形就是特性。

另外，用户本能地会被带有差异化的特点吸引。例如在一群方块中的四边形，或者黑夜里的光亮。产品设计中可以运用这个视觉原理来鼓励用户注意力的分配方法。

1.运用色彩对比增强识别度

色彩对比越强烈，越能打动注意力。原因是听觉成像过程是由视网膜中三种锥状细胞决定的，这三种锥状细胞分别对不同波长的肤色会更脆弱，当用户同时发现不同的脆弱颜色域时，眼睛经常感得到强烈的对比。

另外补充一点：色盲人群一般就是缺乏其中一种锥状细胞。而中国色盲人群的占比接近8%（女性居多），因此即使你的客户量级是百万以上的，最好尽量减少用色盲无法分辨的底色来做对比。

产品中按钮不同的对比度来表不同的重要程度。例如以下一个弹窗的图标，通过改变形状来鼓励用户的切记力。那么反过来，如果设计者不期望在弹窗中鼓励客户注意力视觉设计，则需要将两个按钮形状颜色做得一样。

另外，这种颜色的对比在游戏中也常见，例如王者荣耀的小地图通过对不同英雄头像的描边颜色不同，可以让顾客快速识别“敌人”、“队友”和“自己”。

亮度的对比越强烈，也越能吸引注意力。例如在这些游戏的对话过程中，会采取高亮来表示当前正在说话的人物。此外，黑色和红色是色彩跳到最亮和最暗的状况。

此外在红色背景的页面中，黑色字体是最突显也最能打动注意力的，通常一些次要的内容，则会增加亮度和大小，变为红色小字。

2.运用外观对比增强识别度

1）第一种是形状对比

因为手机后盖是方形，为了提高屏幕的借助率，大多数的卡片、图标等内容还会以矩形为结构。

然而我们也不难看到这些产品中夹杂有方形的元素，通过矩形和方形的对比，让用户更清晰的辨别信息。例如淘宝的看到页面，将店面采用弧形，商品运用梯形，更能让用户区分这两种信息。

2）第二种是尺寸对比

简单的说，尺寸越大的内容，越容易被注意到。例如美团“免费领水果”游戏中，图标的大小也提现了重要程度，高频使用的界面一般会做出更大的厚度，以便用户操作。

3）第三种是动静对比

当页面大个别元素是静态的之后，用户更容易被动态的东西吸引。例如将一些按钮添加动效又或是时常发生一个新的元素，都可以极大的引来用户注意力。

比如：在淘宝App首页的金刚位10个图标中，由于”免费水果“和“券后9.9”是动态的界面，对用户注意力的吸引远高于其它图标。

4）第四种是利用信息间距

通常来说，信息间距越小，代表信息间存在的关联性越强。下图中将不同元素通过缩小间距放在一起，不论这种方法，都会让人觉得它们是一组的内容，有很强的关联性。产品设计中也必须借助间距将信息分组，让客户更易于辨识和鉴别。

以图示为例，设计时为了让客户更直观的理解“金币用于商店购物”这层逻辑，可以借助缩短金币与商店的厚度，来提高用户的理解效率。

四、图像处理

他们在对视觉做图像处理过程中，会基于图形的关键特性来融合成复杂的图像，这个阶段决定了客户对信息的理解。在这个过程中，视觉系统将会把色调、形状、尺寸等特点所识别出的信息关联起来，形成更复杂的图像来供大脑解读。

1.图像处理中的认知差异

在这个阶段，用户感知水平的差别会对图像的形成有引起巨大的妨碍。例如我成为一个京东老顾客，只应该提到PLUS几个字母，或者哪怕是即使发现蓝色的小标签，我能够识别出到这个是PLUS会员有打折的商品。

但针对新用户而言，单单发现PLUS这几个字母，他们完全能够构建起跟会员的关联。因此在产品设计中要考量到新老客户不同的感知差别，兼顾新用户的感知，该具体的地方详细描述。同时也要提高老客户的效益，在能抽象的地方尽量抽象。

另外，要让用户正确处理图像的关键不仅要让信息符合认知水平以外，还要尽量让其只与正确信息建立充分联系。

比如：在京东App中，黑色小标志代表了Plus会员，那么其它的标志就尽量不能变成红色，而要运用其他色彩，不然用户也不能迅速确立认知，或者会导致错误的联想。

2.合理利用图形语义

图形语义是指：用户基于不同图形之间的组合形式，可以迅速地理解它们的逻辑关系。

这些思维是人类在日常生活中的心得积累而自然形成的，在产品设计中将图形语义和元素之间的逻辑正确的组合，可以让页面间元素的关系更易被用户理解。常见的图形语义包括：连接、分组、包含和叠加。

如右图图示：

一般来说，我们可以改变元素的宽度、外形、颜色等不同的视觉特性引导注意力以及表现产品个性。但不能改变图形语义，否则会给用户产生误解。

五、总结

本文从视觉查询、特征辨识、图像处理三个维度简单介绍了用户视觉成像原理过程中要素及其产品设计中值得留意的点。理解人的视觉原理，一方面可以防止在产品设计中发生一些“低级错误”；另一方面也可以更巧妙的鼓励用户的注意力，达到产品目标。

另外，以上三个环节中就会存在一个筛选过程，用户在扫视时，通常是大脑接受到了某一个查询指令，这个指令会妨碍用户以上过程中关注的重点。

比如逛街时想要买一件红色上衣，那么在扫视的之后会将非红色的物体主动排除在外，当识别到红色后，再借助特征辨识看看这个黄色的东西是否是服装，最后才是注意到这个帽子的颜色、款式等元素。

此外，产品设计中不仅考量上述成像原理外，还要将客户当前的行为状况考量在内。

比如当用户逛商场App，进入特价专区时，本能的会更想关注价格和折扣视觉设计，视觉设计即使没有足够突出价格和折扣，那么则会妨碍用户的识别精度。视觉设计的核心目标而是提高客户的甄别效率和具体度、恰当引导用户注意力，让顾客更顺畅的感受到产品价值。

参考资料：路行己.体验传递[M].北京：机械工业出版社.2020.

本文由@爱学习的Keyda原创发布于人人都是产品经理，未经作者许可，禁止转载。

题图来自Unsplash，基于CC0协议。