《设计师要懂的心理学》读书笔记(一)

(一)          人如何观察

²  视觉是一切感觉之首。人的大脑有一半的资源都用于接收和解析眼睛所见。但眼睛所见并非全部，因为视觉信息还要经过大脑转换和解析。真正用来“观察”的其实是大脑。

1)       眼见非脑见。

  在弱光环境下，使用余光观察会比直视看得更清楚。

  合理运用形状和色彩可以影响人们所见。图1-3 展示了色彩如何使人注意到特定的信息，通过变化颜色区域，传达出的两条信息截然相反。

  视错觉就是大脑错误解析视觉信息的现象。在图1-4 中，左边的竖线看上去比右边的长，但其实两条线一样长。该图被称为“缪勒- 莱尔错觉”（Müller-Lyer  illusion）。这是最早的视错觉图案之一。

  人的视觉是二维而非三维。

  Tips：

ü  别人在你的网站上看见的内容未必符合你的设想，他们的个人背景、文化水平、对眼前事物的熟悉度以及期待看到什么，都会影响他们的观察结果。

ü  你可以设计物体的展示方式，引导别人注意特定的内容。

2)       整体认知主要依靠周边视觉而非中央视觉。

  人有两种视觉，中央视觉和周边视觉。中央视觉用来直视事物观察细节，而周边视觉则展现视野中的其他区域，也就是人眼能看到的周边区域。

  周边视觉总是让人不禁注意到周围的动静。例如，你正在电脑上阅读文章，屏幕边缘附近有个小动画之类的东西闪个不停，那么你肯定忍不住要去看它。

  Tips：

ü  人们看电脑屏幕时会用到周边视觉，而且经常只扫一眼周边视觉区域便以此判断整个页面的内容。

ü  虽然屏幕中央是重要的中央视觉区，但别忽视周边视觉区域。一定要确保周边内容清晰地表现了网页的用途。

ü  如果你想让用户集中注意力观察屏幕某处，就别在周边视觉区域内放置动画和闪烁元素。

3)       人在识别物体时会寻找规律。

  发现规律有助于快速处理时刻接收的感官信息。即使本无规律，人眼和大脑也会尝试创造规律。以图3-1 为例，你看到的可能是4 组图案，每组2 个点，而不是8 个孤立的点。你把点间距的长短看成了一种规律。

  人观察物体时，会识别一些基本形状，并以此识别物体。这样的基本形状称为几何离子（geon），该理论由Irving  Biederman 于1985 年提出，如图3-2 所示。

  Tips：

ü  既然人会不由自主地寻找规律，那就尽量多使用规律，利用分组和间隔创造规律。

ü  要让某个物体（例如图标）易于识别，就用简单的几何图形来画它。让构成物体的几何离子更明显，从而使人更快、更轻松地识别该物体。

ü  多用二维元素，少用三维元素。大脑以二维形式接收人眼观察到的信息，因此屏幕上的三维图形可能会减慢识别和理解的速度。

4)       大脑有专门识别人脸的区域。

  在视觉皮质之外还有一处特殊区域，专门用来识别人脸，称为梭形脸部区（FFA，Fusiform Face Area）。这一区域由Nancy Kanwisher（1997）发现，可以让人脸识别绕过通常的视觉解析渠道，从而得到快速识别。而且，梭形脸部区距离掌控情绪的杏仁核也很近。

  我们会不由自主地看向别人的眼睛所看的方向（如图4-1 所示）。

  但是请注意，人们看着它并不代表关注它。设计网页时，你要确定是想和用户建立情感沟通（图片上的眼睛直视着用户）还是想引导用户的注意力（图片上的眼睛看向某一产品）。

  喜欢看脸是人的天性。

  看着眼睛，就能识别出真人假人。

  Tips：

ü  人在观看网页时，首先会对人脸作出识别和反应（至少没有自闭症的人都是如此）。

ü  在网页上直视用户的脸最具感染力，也许因为眼睛是面部最重要的 部分。

ü  如果网页上的人眼看着旁边的位置或产品，那么人们往往也会看向同一处，但未必关注，只是看而已。

5)       略微侧向俯视是想象物体的标准视角。

  人们从标准视角识别物体的速度总是最快的，即便平时未必总用标准视角看它们。

  Tips：

ü  标准视角的画像和物体更容易识别和记忆。

ü  如果你的网页或程序里包含一些图标，那么不妨把它们画成标准视 角的。

6)       人根据经验和预期浏览屏幕。

  人们并不是从顶部开始阅读的。因为早已习惯认为网页顶部都是无关内容，如留白和导航栏（如图6-1 所示），所以他们往往先看屏幕的中心位置，而非边缘。

  人们对想看的内容及其位置有先入为主的心智模型。比如，亚马逊购物网站的常客如果打算使用搜索功能，那么打开页面时就可能直接看向搜索栏的位置。

  发生错误或问题时，人们会聚焦视野。即，人们会停止浏览屏幕上的其他内容，集中精力到问题所在的区域。

  Tips：

ü  最重要的信息（或希望用户关注的内容）要放在屏幕的上面三分之一部分，或放在屏幕中间。

ü  既然人们不看屏幕边缘，就不要把重要信息放在那儿。

ü  按照正常阅读顺序合理设计界面，避免让人来回跳着阅读内容。

7)       物体会提示人应该如何使用。

  “感知功能可见性”（perceivedaffordance）：无论是在生活中还是在电脑屏幕上，如果想让用户使用一个物体，就要保证能够让他们轻易地察觉并理解它是什么，明白应该怎么用。

  人在试图完成开门或者网上购书之类的任务时，总会自动寻找周围可以使用的物体和工具，而自己往往不会意识到这一点。如果你负责为该任务设计周边环境，一定要确保环境里的物体一目了然并具有清晰的功能可见性。

  屏幕上带阴影边沿的按钮让人知道，它可以像真实的按钮一样按下去。

  在网页上你也可以制作这样的阴影，如图7-4 所示，按钮边缘不同颜色的阴影产生的立体感使它看上去是凹陷的。试试把书上下颠倒，再看这个按钮。是不是就变成突出可点的按钮了？

  有一类功能可见性暗示众所周知：蓝色带下划线的文字是超链接，点击就跳转到新页面。不过现在很多超链接不再设计得这么明显，只有鼠标悬停时才会出现点击的提示。

  Tips：

ü  设计时要考虑功能可见性的提示。给用户操作提示后，他们就更容易正确使用物体。

ü  用阴影来表现对象已选定或对象可用。

ü  避免给出错误的功能可见性提示。

ü  设计触摸设备界面时，请慎用悬停可见的提示。

8)       人可能会对变化视而不见。

  如果人把注意力集中在一件事物上，没有预期可能发生其他改变，就很容易忽略实际发生的变化。

  Tips：

ü  不要认为物体出现在屏幕上就一定会被用户看见，特别是刷新页面出现改变时，用户很可能完全意识不到页面前后的区别。

ü  如果你要保证用户注意到界面上的某处改变，应该增加视觉提示（如使之闪烁）或听觉提示（如“哔”的一声）。

ü  对眼动跟踪数据进行分析要谨慎，别过于重视它，也别把它作为设计决策的主要依据。（因为眼动仪显示用户“注视”了哪些东西，但并不意味着他们“注意”到了它们）

9)       人们认为相邻物体必然相关。

  如果两个东西距离很近，那么人们就会认为它们之间有联系。其中，左右相邻的东西之间的关联最为密切。（如图9-1）

   Tips：

 

ü  你如果希望读者认为某些图片、照片、标题或文字是相关的，就将这些内容相邻放置。

ü  如果想使用线或框分隔内容，先尝试能否只调整间距就达到效果。有时，调整间距足以划分内容，还能使页面具有简洁的视觉效果。

ü  无关内容间距要大，相关内容间距要小。这听起来是常识，但很多网页布局都忽视了这一点。

10)    红蓝搭配难以阅读。

  不同的颜色会产生不同的立体效果。有的颜色似乎向外凸起，有的则向内凹陷。这种效果称为“色彩实体视觉”（chromostereopsis）。红蓝搭配的效果最为强烈。

  Tips：

ü  在同一页面内，避免使用红蓝或红绿搭配。

ü  红色背景上不要使用蓝色或绿色文字，蓝色背景上不要使用红色或绿色文字。

11)    9%的男性和0.5%的女性是色盲。

  色盲多数是遗传的，也有些是疾病或受伤所致。与识别颜色有关的基因大多在X 染色体上，男性仅有一条X 染色体，而女性有两条，因此色盲在男性中的发病率更高。

  在众多不同类型的色盲中，最普遍的是红绿色盲，患者无法分辨红、黄和绿色。蓝黄色盲（无法分辨蓝色和黄色）和全色盲（所有颜色看上去都是灰色）的情况很罕见。

  有一种经验原则，就是在使用颜色代表特定意义时，应当同时使用另一种区分方案，例如同时使用颜色和线条粗细来代表不同内容，这样色盲者即使无法辨认特定颜色，也能看懂图的含义。

  另一种方法则是选择所有色盲都能识别的配色方案。

  色盲通常能更好地识破迷彩伪装。

  Tips：

ü  设计图片和网站时，用www.vischeck.com、colorfilter.wickline.org检查一下，看看色盲所见的效果如何。

ü  如果使用颜色来代表特定含义（如绿色代表需要紧急处理的东西），应该同时使用另一种区分方案（需要紧急处理的东西不但应该设为绿色，还要在周围加上方框）。

ü  设计配色方案时，请考虑使用所有人都能正常识别的颜色，如不同色度的褐色和黄色。避免使用红色、蓝色、绿色。

12)    色彩含义因文化而异。

  想用某种色彩影响人的情绪，必须让人所在的环境里充满了这种颜色。对计算机用户而言，只是看到屏幕上有某种色彩，则达不到这种效果。

  Tips：

ü  谨慎选用颜色，多考虑色彩可能具有的含义。

ü  为多国设计时，请找出你的设计可能涉及的几大文化或国家，并在http://www.informationisbeautiful.net/visualizations/colours-in-cultures/上查看相关色彩的文化含义，以避免出现不当的理解。