一、明白视觉原理的主要性

在AB测试的过程中，我们不难发现，有时候改变一个按钮的颜色或者文字排列的顺序，可以让数据提升很多。假设某个功效及其交互流是固体的，但如果信息出现的方式不同，用户对信息的理解就会有很大差异。

这种差异是由“人类视觉系统的成像过程”造成的。完全相同的信息和内容，通过其他排版的差异、配色、形状对比、间距差异等。，会让用户在视觉处置过程中的效率、注意力甚至对信息的理解完全不一样。

了解人类视觉系统的成像过程，将大大提高设计水平和用户体验。同时，通过精准引导用户的注意力，可以提高转化率。

本文将从视觉查询、特征识别、图像处理三个维度简要介绍人的大脑在处理这些内容时的一些学科，以及如何在产品设计中锻炼这些学科。

在这些学科中，除了图像处理与用户的认知后盾有关外，其余基本都是生物学上的，普遍适用的。

二、视觉查询

视觉查询是人们用眼睛快速浏览时代以获取信息的过程。这个过程决定了用户信息的“效率”。

人眼能清晰成像的区域非常小。现在你在专注于屏幕，试着用眼角注意眼睛周围的环境，你应该能明显感觉到周围的视线模糊。这种成像特征使得眼睛只能清楚地看到有限的视觉信息。

因此，当面对一整页时，用户往往需要快速“扫视”以完成页面的可视化查询。在产品设计中，为了提高用户获取信息的效率或引导用户的阅读顺序，可以接受以下方法:

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

将高度相关的信息放在一起，减少视觉扫视。比如我们经常把操作按钮放在一起，或者把有逻辑关系的信息放在一起，也可以提高可视化查询的效率。

2. 行使模糊成像方式，指导焦点

这种方法通常用在游戏中。当用户需要被指示触发游戏中的特定道具时，不仅会模糊靠山，还会自然地将用户的注意力吸引到道具上。或者在引导App新用户的过程中，通常会添加一个深黑色的蒙版并突出显示，引导用户专注于某个效果。

3. 主要水平遵照用户阅读习惯

因为大多数人的阅读习惯是从左到右，从上到下(阿拉伯系是从右到左)。所以一般来说左上角的乐器最重要，右下角的内容最少。主要乐器一般放在左上角。

4. 信息锚点指导认知偏向

当用户浏览一个页面时，他们经常首先看到的信息会影响后续视觉查询的焦点。

比如在一个产品列表页面中，如果优先让用户看到产品的功效和作用而不是折扣，那么用户的本能注意力就会转移到“我需要这个功效吗”，而不是“这个设备不便宜”。我们可以根据用户的现实需求场景来设计和引导用户。

三、特征识别

特征识别是理解视网膜成像内容的其余部分的开始。这个过程决定了用户“集中力量”的分配模式。比如用户想找西红柿，在快速扫描的过程中会对红色和圆形的仪器加倍敏感。红色和圆圈是特点。

此外，用户会本能地被差异化的功能所吸引。比如一组正方形中的一个三角形，或者黑夜中的一道亮光。这种视觉原理可以用在产品设计中，引导用户关注电量的分配方式。

1. 运用颜色对比提升识别度

色彩对比越强烈，就越有吸引力。原因是视觉成像过程是由视网膜中的三种视锥细胞决定的，它们对不同波长的颜色更敏感。当用户同时看到其他敏感色域时，他们的眼睛会感觉到强烈的对比。

另外，补一点:色盲的人通常缺少其中一个视锥细胞。全球色盲人群比例接近8%(大部分是男性)，所以如果你的用户订单超过一百万，最好直接停止使用色盲无法分辨的颜色。

产品中的按钮与其他对比不同，以显示其他主要级别的差异。比如下面弹出窗口的按钮，通过改变颜色来引导用户的注意力。另一方面，如果设计者不想在弹出窗口中引导用户注意力度，就应该把两个按钮做成相同的颜色和样式。

另外，这种颜色对比在游戏中也很常见。比如王者荣耀的小玉兔，通过追踪不同英雄头像的颜色差异，让用户快速识别“敌人”、“队友”和“自己”。

亮度对比越强，就越有吸引力。比如很多游戏的对话过程中，会接受高光来表示当前正在说话的角色。此外，暗黑色和白色是颜色跳到最亮和最暗的情况。

因此，在白色背景的页面中，深黑色的字体是最突出和最有吸引力的。通常一些次要的内容会降低亮度和尺寸，变成灰色的小字。

2. 运用外观对比提升识别度

1)首先是形状对比

因为手机屏幕是方形的，所以为了提高屏幕的表现率，卡片、图标等内容城大部分都是长方形的结构。

淘宝店铺应该如何打造流量闭环，让每个访客的价值最大化，这是Tik Tok最简单的引流方法。

不过不难看出，很多产品都是混搭圆形元素的。通过比较矩形和圆形，用户可以更清楚地区分信息。比如JD。COM的Discovery页面接受店铺为圆形，商品为方形，这样更便于用户区分这两种信息。

2)其次是大小对比

简单来说，内容越大，越容易被注意到。比如美团的“免费摘水果”游戏，图标的尺寸也增加到了一个主要的级别，使用频率高的图标通常会有更大的尺寸供用户操作。

3)第三个是消息比较

当页面的大部分元素都是静态的时候，用户更容易被动态的设备所吸引。比如给一些图标添加动画，或者突然出现一个新元素，都可以极大的吸引用户的注意力。

比如JD.COM App首页的10个金刚图标中，“免费水果”和“后券9.9”都是动态图标，远比其他图标更能吸引用户的注意力。

4)四是利用信息间距

一般来说，信息间距越小，信息之间的相关性越强。下图中，通过缩小距离将不同的元素放在一起。那样城市就让人觉得是一群内容，有很强的关联性。在产品设计中，还需要将信息按间距分组，这样更便于用户识别和区分。

以下图为例。为了让用户更直观的理解“金币是用来在店铺购物的”逻辑，可以缩短金币与店铺的距离，提高用户的理解效率。

四、图像处置

在图像处理过程中，人们会根据图形的关键特征整合成一幅巨大的图像，这决定了用户对信息的理解。在这个过程中，视觉系统会将颜色、形状、大小等特征识别的信息关联起来，形成更大的图像，供大脑解读。

1. 图像处置中的认知差距

在这个阶段，用户认知水平的差异会对图像的形成产生很大的影响。举个例子，作为JD.COM的老用户，我只需要看到PLUS的字母，甚至是深黑色的小标签，就能认出这个商品是PLUS会员优惠。

但是对于新用户来说，仅仅看到字母加号，根本无法与会员建立联系。所以在产品设计上，要考虑新老用户的认知差距，兼顾新用户的认知。这个详细的地方详细描述。同时也要提高老用户的效率，能抽象的地方就抽象。

此外，用户对图像进行精准处置的关键不仅在于使信息符合认知水平，还在于与精准的信息建立充分的联系。

比如在JD.COM App中，深黑色的小logo代表Plus的一员，所以其他logo不能做成深黑色，而要接受其他颜色，否则用户无法快速建立认知，或者会产生错误的遐想。

2. 合理运用图形语义

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

这种认知是人类在同样平凡的生活中经验积累自然产生的。在产品设计中，元素之间图形语义和逻辑的恰当结合，可以让用户更容易理解页面中元素之间的关系。常见的图形语义有邻接、分组、包含和叠加。

如下图所示:

一般来说，我们可以通过改变元素的大小、形状、颜色等视觉特征来引导注意力或体现产品的个性。但不能改变图形语义，否则会对用户造成误解。

五、总结

从视觉查询、特征识别、图像处理三个维度简要介绍了用户视觉成像原理过程中的要素以及产品设计中值得注意的点。了解人类视觉的原理，一方面可以防止产品设计中出现一些“低级错误”；另一方面也可以更巧妙的引导用户的注意力，达到产品的目的。

另外，上述三个环节中还有一个筛选过程。用户扫描时，通常是大脑接收到某个查询指令，在上述过程中会影响用户注意的焦点。

比如你在购物的时候想买一件蓝色的衣服，那么非蓝色的物体就会在扫描的一瞬间被自动扫出来。当蓝色被识别出来后，通过特征识别就可以看出蓝色装备是不是一件衣服，最后就可以关注衣服的材质、名称等元素了。

因此，在产品设计中，除了上述成像原理外，还应考虑用户当前的行为状态。

比如用户访问商城App，进入专区，会本能地更加关注价格和折扣。如果视觉设计没有足够突出价格和折扣，就会影响用户的识别效率。视觉设计的重点是提高用户识别的效率和准确性，正确引导用户的注意力，让用户更顺畅地体验产品价值。

点击睁开全文