产品经理要懂的视觉心理学

为什么要懂视觉心理学

页面的排版布局，离不开基本的视觉心理学知识，现在大多数互联网公司并没有交互设计师岗位，很多时候需要产品经理充当交互设计师的角色，所以懂点视觉心理学，有助于产品经理更好的出原型。

1、理解用户心理才能设计出用户满意的产品

诺曼在他的设计心理学中特意强调过这种门，这还好，显示一个拉，有的时候门连“拉”和“推”都不跟你说，你得自己尝试过以后才知道如何操作。

还有像上面那种，数据线老是插不进去，日常生活中充满了大量这种不美好的设计，这些往往是由一些错误的视觉设计引起的，完全不符合人类认知和操作行为规范，所以只有掌握用户观察和思考规律，才能设计出符合用户预期的产品。

2、掌握视觉心理学可以指导设计

用户能感受到的体验分为两个：一个是视觉体验，一个是操作体验。良好的视觉设计可以让用户对产品有一个直观的感觉。比如下图网易云信是一个工具型的产品，你放一个美女望向远方的背景图片，明显透露出一种孤独的气息，而社交型产品就是解决用户孤独的，所以这样的视觉设计给用户的心理感知就是社交型产品，但是这样的设计明显又和产品本身的定位不符，所以经过优化以后，变成2中的设计稿。

3、创造沉浸式体验

探探的左滑右滑让你有一种和美女偶遇的感觉；网易云音乐有一种让你在听黑胶唱片的感觉；滴滴打车可以清晰的让你看到司机距离你的远近，尤其是当你看到司机一点点向你靠近的时候，也可以缓解你在心理上的焦躁情绪，这些都是设计师通过具体的页面来构建一个用户的使用场景和用户体验。

视觉心理学在实战中的应用

1、接近性

下图中我们会错误的认为标题2和内容是对应的关系，但实际上标题1是和内容对应起来的，因为间距的关系造成了我们的误解，如果把间距和内容调整成图2的那样，给人的感觉会不会好很多？ 那么为什么会有这样的错觉呢？这就是接近性原理的应用，所谓的接近性就是依据间距来判断彼此间的关系，空间上的亲近暗示关系上的亲近，这一设计原则经常应用在大量的分组中。

2、相似性

下图是密码找回的邮件，当我们看到图中蓝色字体的时候，期望得到的反馈是一样的，当我们点击重新发送密码找回邮件的时候，系统会触发发送邮件的一个程序，当点击下面数字的时候，却没有任何反馈，但是我们通过视觉信息会判断，同样的蓝色字体，同样的下划线，往往是一样的反馈，那么我们为什么会有这样的预期呢？这就是相似性的应用，就是往往如果其他因素相同，相似的物体看起来是一组的。

比如下图中的图1，如果根据我们讲过的接近性，我们往往倾向于认为这些原点是纵向排列的，但如果改变其中一组的颜色呢？（如图2），是不是给人的感觉又像是横向进行排列了？

这就是相似性的应用，颜色上的相似会强烈的引导我们视觉，促使我们认为这些圆点是横向排列的，那么这些又怎样应用到我们页面设计中呢？

看到上图的时候，我们往往倾向于纵向阅读信息，实际上我们希望用户横向阅读，于是我们给他增加一个阴影（如下图），就能够引导用户去横向阅读。

除了可通过颜色制造形似性，还可以通过大小、形状、方向来制造相似性。

3、对比性

有相似就会有对比，相似可以帮助我们识别那些是同类，做出快速的判断；

对比可以表明彼此之间的差异，做出适当的引导，

这些对比被我们应用到大量的导航设计里面，

比如闲鱼这款产品，它有4个导航页，这4个导航的icon具有相同的视觉信息，让用户快速判断它是导航页，这是相似性原理的运用，同时为了让用户知道当前处在的页面，比如闲鱼的icon，把icon的颜色做一些变化，让用户感知到他当前处于闲鱼的页面；

但是用户也会看到，中间有一个黄色的发布入口，它的设计和其他的table页是不一样的，它作为一个快速入口，通过与其它table页的一个区别，让用户快速识别到它和其它是不一样的，这就是对比原理在设计中的应用。

再比如当想获得用户手机权限的时候，通过颜色的对比来引导用户进行授权，这些都是对比原理的应用。

4、封闭性

视觉系统自动尝试将敞开的图形关闭起来，从而将其感知为完整的物体而不是分散的碎片。

比如下面的图形，虽然圆和三角形被分割的支离破碎，我们依然能感受到他们是一个圆或者是一个三角形。下面我们通过例子来说明封闭性原理在实际中的应用。

正在上传...取消

上图的阅读指南，虽然有间距的调整，但是依然看起来不是很清晰，也很难判断上下的一个组别关系，如果我们给他加一个边框，这样看起来效果是不是很明显了？

比如下图的58同城设计页面，就是封闭性原理在app设计上应用的例子。

用白色的背景或者边框，将同一个主题的内容框在一起，让我们很轻易的感知到组与组之间的关系。

常见的分组模式：

点线面分组（如下图中的微信）

依靠接近性的原则来实现分组，我们称之为点

没有用间距的方式，依靠线来实现组与组之间的差异，我们称之为线

依靠背景色来进行分组，我们称之为面。（利用了闭合性设计原理）

三个方式各有千秋，根据使用场景应用到不同的设计。

封闭性本质上是我们对完整状态的认知倾向，比如：操作闭环。

那产品经理也有创造流程上和体验上的闭环。本质上是对完整状态的认知倾向，比如我们点击删除的时候，系统就要给我们反馈说有没有删除成功，这些都是我们对完整状态的一个倾向而已，所以说我们在做流程设计的时候，也要考虑流程的封闭性。

封闭性不仅可以应用到页面布局里面，也可以应用到流程设计里面。

5、连续性

这个是快手的视频，以前我还能看到自己发布的视频有多少观看量，后来改版成这样以后，我实在纳闷，怎么就看不到自己的视频有多少人观看了？后来上拉才发现这些消息是隐藏在底部的，当时我就想吐槽这个设计，哪怕你留出来点，让别人感觉可以上拉，也比这个要好啊，毕竟大家发布视频，是想获得更多人点赞和关注，而不是看自己发布的视频内容。

露出来一点的设计就是利用连续性的原理，连续性是指凡是具有连续性或者共同运动方向的物理很容易被看做一个整体。

即便是有些信息我们看不到，但是我们通过它外周的信息帮助我们或让我们觉得这里还有很多信息存在，在ui设计里称之为视觉流，具体可以看一下下面的例子，图片太多，但是这个区域终究是有限的，所以这里采用了播放滚动的效果，以此来暗示用户你还有很多东西没有看到。

那在移动端设计上有哪些应用呢？

比如探探通过模拟现实中图片叠加的效果，给用户的感知是在翻相册。

腾讯视频左右半遮挡，让用户意识到左右滑动可以查看观看历史

今日头条的内容列表露出部分内容，暗示用户还有大量的信息没有展示出来。

三种方式没有好坏之分，根据用户的使用场景或者你的目的，来展现相应的设计方式。

6、对称性

大家有没有感觉到下图整个页面在向左下角进行倾斜？有没有什么方式让整个页面看起来更加舒服点？

尝试一下移动按钮的位置（如下图），当把下一步按钮从左边移动到右边的时候，有没有感觉整个视觉更加平衡，因为这个时候的视觉流是“Z”型，给人的感觉就是一个平衡的状态。

那我们为什么觉得这样视觉看起来就舒服呢？因为这就是我们要讲的对称性，因为视觉元素是有重量的，我们会赋予视觉物体不同的重量，我们会根据重量的不同来营造整个视觉页面的平衡。

并不是每个页面都需要平衡，我们可以做到不平衡。依靠视觉重量引导用户的视觉流。那什么叫做视觉的重量呢？这个杠杆上有一个大球和一个小球的示例（如下图），大球被小球翘了起来，感觉怪怪的，因为大众的意识中，同样颜色的两个球，体积更大的重量会更大，但是重量大的反而被小球翘了起来。

如果我们把大球的颜色变淡，那么现在打球被小球翘起来，是不是感觉就合理一些呢？（如下图）

这种视觉流如何应用到我们具体页面设计中呢？

在很多官网里面我们会利用这种视觉流，如下图，我们视觉流往往是”Z“字型。

7、情感性

如上图，当用户想要拨打电话的时候，因为通信问题，无法提供服务，其实我们需要向用户表达歉意，安抚用户急躁的情绪，现在的页面是啥样呢，很悠闲的坐在那里，好像整件事情都和他没关系一样，这种设计形式会让用户更加急躁，这也不一定是视觉设计师的问题，有可能是产品经理没有把整个页面所需要传递的情感表达清楚。

色彩有助于营造网站的整体氛围，色彩都有一定的情感在里面，比如下图fibit这个网站，通过这种色调传递出积极健康的氛围，并不需要产品经理要告诉设计师用什么颜色，但是要告知清楚整个页面所要传达出的情感。

比如在交互稿中做配图需求说明，将页面需要传达的情感以文字说明的形式告诉视觉设计师，当设计师拿到这样交互稿的时候，就知道最终的配图是啥样的，最终产出良好的视觉设计。

上面就是我们讲到的设计心理学知识，掌握这些知识可以让我们的用户体验变得更好，希望大家在实践中多多应用。

更多干货可关注微信公众号：chanpinliu880，关注后可获得第一手干货。

私人微信号：yw5201a1，有问题也可找我交流。