设计与生活息息相关，人类心理学可以指导我们设计出用户更喜爱、体验更好的产品。作为设计师，我们要了解哪些心理学知识去指导我们更好的设计呢。《设计师要懂心理学》这本书犀利剖析用户心理，直接提炼设计要义。为了更好的学习吸收本书内容，本人融合日常设计经验及关联设计知识，与大家一起共读本书。

《设计师要懂心理学》概览

本书出自国际知名的设计心理学专家Susan weinschenk之手，以创造直观而又有吸引力的设计为宗旨，讨论了设计师必须知道的100个心理学问题，每个问题短小精悍，片刻即可读完，让人轻松理解设计背后的心理学动机。

我们总是在说设计要注重用户体验，而用户体验完全取决于你对用户的了解。用户是如何浏览阅读界面、如何思考、如何做决定的？什么样的内容可以引导用户做出你想要的操作？这些在这本书中都有答案。

本书从以下10个维度阐述心理学知识：

1、人如何观察

2、人如何阅读

3、人如何记忆

4、人如何思考

5、人如何集中注意力

6、人的动机来源

7、人是社会性动物

8、人如何感知

9、人会犯错

10、人如何决策

我按照这10个维度，分成10个专题。挑选出重点内容，逐个维度学习复盘。接下来我们一起共读第一个维度：人如何观察；从这个维度中，我提炼出6个设计师要懂的视觉心理学知识，一起看看吧～

你觉得你看到的，就是大脑看到的吗？一般我们认为是这样的。然而当眼睛把看到的信息传输给大脑，大脑会对信息进行解析，解析的结果并非和眼睛见到的完全一致。人的视觉是二维而非三维，在视网膜上，三维物体呈现出的影像也是二维的。这些影像被传送到大脑并被解析匹配我们日常的经验，才会重新转化为三维物体。

因为有这样的解析过程，我们眼睛看到的，大脑可能会判断“错误”。

案例：会动的静态图，请全神贯注的盯着下面这张图，是不是感觉有很多小黑点在跳动。难道这是一张动图？其实不是，这就是一张静态图。我们的大脑被骗啦！

配图：会动的静态图

对于大脑会“错误”解析这一特点，在这设计中合理利用可以创造出有意思的设计，也可以指导纠正错误的设计。

1、独特的错觉：卡尼萨三角

配图：卡尼萨三角&卡尼萨矩形

左图你看见了什么？一个黑边三角上面叠了个白色倒三角？其实图上什么三角形都没有，只有一些零碎的线条和3个缺口的圆。

右图呢？一个白色的矩形？其实只有4个缺口的圆。

这一独特的错觉由Gaetano Kanizsa发现，后来就将这种错觉命名为“卡尼萨三角”

设计指导：logo的负形设计

对于这种独特的错觉，我们可以巧妙的运用到logo设计中去，设计出独特的负形logo。

配图：有趣的负形logo

2、视错觉：缪勒—莱尔错觉

配图：缪勒-莱尔错觉图

👆上图的两条线一样长吗？是不是感觉左边的竖线比右边的长，其实两条线一样长。该图就是“缪勒—莱尔错觉”，是最早的错觉图案之一。

设计指导：图标绘制使用keyline保持“视觉”一致

大脑会把一样长的线条，“错误”解析成不一样长；也会把一样大小的形状，“错误”解析成不一样大。比如我们在画图标的时候，同样大小的方形图标和圆形图标，视觉传输到大脑，却觉得方形比圆形大。

配图：物理大小一致与视觉大小一致

所以在图标绘制的过程中，我们需要keyline辅助进行图标设计。让大脑将不一样大小的形状，解析成一样大，从而保持“视觉”一致。

配图：不同形状下的keyline辅助尺寸参考

人有两种视觉，中央视觉和周边视觉。
中央视觉：用来直视事物观察细节；
周边视觉：展现视野中的其他区域，人可以用余光观察事物。

配图：处理成黑白的中央视觉和周边视觉照片，你分别看到了什么场景？

上面两张图模拟了中央视觉和周边视觉，我们可以发现中间被遮住的照片依旧容易识别，而周围被遮住的照片，却不是很能分清楚是厨房还是客厅。由此可见，周边视觉的重要性，常被我们低估，人对整体场景的认知似乎都来自周边视觉。

利用周边视觉合理设计页面内容

用户在看页面时会用到周边视觉，虽然我们通常认为屏幕中央是重要的中央视觉区，但是用户会通过扫视周边视觉区域来判断整个页面的内容。所以我们在设计界面的过程中，需要合理设计周边元素以提升用户体验。

设计指导：避免让人分心的小广告

屏幕上的小闪动总是让人分心；对于一些需要沉浸阅读类的页面，如果屏幕边缘有无关动画广告不停闪烁，会很干扰用户，影响体验。
所以对于一些重要内容的页，我们应当避免放置让人分心的小广告。

配图：负面案例-网页上让人分心的小广告

设计指导：别忽略角落的重要运营位置

如果合理的运用周边位置，设计精美的视觉样式及动效，会有很棒的运营效果，甚至比中央页面头部的banner更有效。很多电商类产品运用这个原理在周边投放广告活动。

配图：正面案例-京东和好省的悬浮小广告

发现规律有助于快速处理时刻接收的感官信息。即使本来没有规律，人眼和大脑也会尝试创造规律。David Hubel和Torsten Wiesel(1959)研究表明，大脑中的不同细胞会对不同形状产生反应，分别对横线、竖线、边线和特定角度的线作出反应。

例如下图，你可能看到的是4组图案，每组2个点，而不是8个孤立的点。此时，你把点间距的长短看成了一种规律。

配图：人眼和大脑将看到的点，分成了四组图案

利用分组和间隔创造规律

既然人会不由自主地寻找规律，所以我们在设计的过程中应尽量多使用规律来满足大脑的倾向。可以利用分组和间隔来创造规律。

设计指导：利用规律的图形打造超级视觉语言

利用重复、具有规律的图形，可以进行系列banner设计、海报设计以及品牌的打造，构建超级视觉语言。

配图：利用重复、有规律的图形设计系列banner

配图：提取品牌logo元素，利用重复、有规律的图形构建超级视觉语言

设计指导：利用规律的布局，打造界面的节奏，让页面更精致

页面设计需要有节奏感，小到文字排布，大到页面布局。利用规律，比如同样的元素、间距、留白、形态等设计手法，形成规律，可以使规整页面，使页面更精致。

案例一：新闻的资讯详情页面，对于段落间距及图片与段落的间距，可以使用了基础间隔整数倍的留白。使所有留白都有规律可循，减少间隔对用户干扰，提升文章的易读性。

配图：资讯页面的韵律留白，让页面具有呼吸感

案例二：栅格系统的应用，可以在页面排版布局、尺寸设定方面给了设计者直观的参考，它让页面设计变得有规律。

配图：应用栅格体系使页面信息对齐规整

用户阅读浏览网页具有一定的习惯规律，主要体现在以下两点：

1、先入为主的心智模型

用户浏览网页的过程中第一眼落在哪里，取决于用户在做什么、希望看到什么。

例如：用户在浏览网页的时候不从顶部开始阅读，因为用户对于想看的内容和位置有先入为主的心智模型，大量的网页设计布局让人们早已习惯网页顶部都是些“非重要”内容，如商标、留白、导航栏等，所以用户会根据习惯去看自己想看的内容。例如下图，优设、站酷、UI中国顶部的结构布局就是一样的，符合用户心智模型的布局，更有利于用户找到自己想看的内容。

配图：优设、站酷、UI中国相同的顶部布局

设计指导：不要随意更改常用功能的位置

用户对于每个网站具有特定的心智模型，会预先设想各内容在电脑屏幕和使用的特定应用、网站上应该出现的位置，并且会带着这样的心智模型去浏览网页。

例如购物网站的常客，如果想要搜索一款商品，打开页面的时候会直接看向搜索栏的位置。如果我们打破常规，更改了搜索栏的位置，用户可能会无从下手。

所以对于一些常用场景、成熟布局的网站，我们在迭代优化的过程中，需要慎重考虑常用功能位置的变化，如无必要，不要打破用户的心智模型。

2、和语言文字习惯一致的阅读顺序模型

用户在浏览网页的过程中，会有着和语言文字习惯一致的阅读习惯。大部分人的阅读习惯是从左向右、自上而下。我们可以将阅读分为沉浸式阅读(immersive reading)与扫视(scanning)，前者的目的在于了解，后者在于定位。

配图：沉浸式阅读模式与扫视阅读模式的视觉动线

浏览网页时，用户通常会沉浸在目标任务中，所以扫视是最常运用的阅读模式，只有在确信必要时用户才会细心阅读详细内容。

设计指导：针对用户的阅读模型来设计布局

对于页面中内容元素的摆放，应当依照任务逻辑与用户的浏览习惯来设计恰当的视觉流，避免用户视线流转。好的视觉流应该清楚、合理、顺畅、自然。

配图：凌乱的视觉流和顺畅的视觉流场景

在生活中，如果两个人同时行走在空旷的马路上并且靠得很近，人们就会觉得他们之间是认识的、有关联的。同样的，如果两个东西距离很近，那么人们就会认为他们之间有联系。

配图：你觉得上图的两个人是否存在关系？

物理位置的接近就意味着存在关联。在设计中亦是有着这样的心理学暗示，这样的暗示指导了Robin亲密性原则。

Robin亲密性原则是指将相关的项组织在一起，移动这些项，使它们的物理位置相互靠近，这样一来相关的项将被看作凝聚为一体的一个组，而不再是一堆彼此无关的片段。

配图：颜色相同的表情可以排布组织在一起

设计指导：在设计中运用亲密性原则

1、将你希望用户认为相关的元素相邻放置

2、优先使用间距划分内容，不能满足再使用线或框

3、无关内容间距要大，相关内容间距要小。不同属一组的元素之间不要建立关系！如果元素彼此无关，要把他们分开。

1、9%的男性和0.5%的女性是色盲

据统计，世界上9%的男性和0.5%的女性是色盲，也就是大约每20人中就有1人有某种颜色视力缺陷。这些人的世界看起来不同。其中最普遍的是红绿色盲，患者无法分辨红、黄和绿色。蓝黄色盲和全色盲的情况比较罕见。许多图片、文档和网页对色盲人来说很难阅读理解，是因为设计它们的人没有想到这样的问题。

配图：不同色盲人群看到的色彩

设计指导：使用颜色代表特定意义时，需要有另外一种区分方案

其实除了色盲，人随着年龄的增长，对色彩的识别能力也会对应的减弱。所以根据无障碍设计的原则，我们在设计的过程中，不应该仅仅依靠颜色去传达重要信息。我们还可以这样做：

• 使用下划线表示链接，或使用粗体突出显示文本
• 图标和文本结合使用传达成功或失败的信息
• 使用线条粗细、纹理或图案区分图标样式
• 使用不同的图案传达信息等等

配图：地图标识的设计，使用线条粗细、纹理区分样式

（案例来源：为视色障碍者设计地图Bernhard Jenny和Nathaniel Vaughn Kelso制图师协会SoC公报，41页）

配图：输入框状态设计，使用图标和文本结合传达成功或失败的信息

设计指导： 选择所有色盲都能识别的配色方案

除了使用前文所述的辅助区分方案，我们还可以使用所有色盲都能识别的配色方案。例如，红绿色盲患者对红色和绿色的分辨能力很差，但是对黄、蓝的辨别没有问题。因此，我们在设计的过程中，可以尽量避免红绿对比，更多的使用黄蓝对比。在ggplot2中常用的viridis色板就是一个很好的色盲友好色板。详细案例，可查看viridis彩色地图简介https://cran.r-project.org/web/packages/viridis/vignettes/intro-to-viridis.html

我们可以使用以下方式检查色盲所见效果：

• 色盲网页过滤工具网站：colorfilter.wickline.org

• 一款适用于Windows、Mac和Linux的免费色盲模拟器Color Oracle：https://colororacle.org

• 色盲模拟窗口软件：https://michelf.ca/projects/mac/sim-daltonism/

• 使用Adobe系列软件中的针对色盲的校样颜色选项。在【视图】的【校样设置】菜单中选择查看即可。

2、色彩含义因文化而异

在不同的国家，不同色彩所代表的含义不一样。所以当你为不同国家的人做设计的时候，必须考虑颜色在其文化中的含义，以免表达错误造成误解。例如：

在国外，红色代表赤字，也可以代表危险或停止；绿色代表金钱，也可以代表通行（因为美元纸币是绿色的）。

而在中国，红色代表金钱收入，绿色代表赤字（因为人民币是红色的）。

所以我们在设计股票界面的时候，对于营亏的表达，就需要针对不同的国家使用不同的颜色。

配图：中外股票页面设计颜色表达出来的不同含义

设计指导：多考虑色彩可能具有的含义

在为不同国家或人群设计时候，请找出你的设计可能涉及的几大文化或国家，并参考david mccandless色轮，查看相关色彩的文化含义，以避免出现不当的理解。网站地址：https://informationisbeautiful.net/visualizations/colours-in-cultures/

配图：david mccandless色轮

总结

以上我们学习了六个设计师要懂的视觉心理学，一起再来回顾强化下：

• 人眼看到的并非大脑看到的
• 人对事物的整体认知主要依靠周边视觉
• 人在识别物体时会寻找规律
• 人根据经验和预期浏览屏幕
• 人们认为相邻物体必然关联
• 不同人群对色彩的感知不一样

以上这些知识点可能只是“很小”一个概述，我也是按照自己的理解将阅读到的其他知识进行了串联解读。但其实每个点拿出来都值得深入学习，不知道你对哪个知识点最感兴趣。欢迎留言，一起交流～

参考文章：

《设计师要懂心理学》——Susan weinschenk

Mapping: Methods & Tips——Bernhard Jenny、Nathaniel Vaughn Kelso

《R Graphics Cookbook》——https://r-graphics.org/

超全面！「无障碍设计」指南——https://mp.weixin.qq.com/s/1a4BqvbIf94kZH2ayB9SLw

欢迎点赞、分享，关注"Youki的设计星球"，回复888获取《设计师要懂心理学》电子版～
喜欢纸质书的，也推荐大家买一本，书里知识点都是以很轻量的方式去进行表达，读起来不费劲却又能收获很多。
还剩9个专题期待与您一起共读学习本书。