《设计师要懂心理学》读后联想——第一章：人如何观察
100 Things Every Designer Needs to Know About People
人如何观察
—— 眼见非脑见 ——
- 别人在你的网站上看见的内容未必符合你的设想，他们的个人背景、文化水平、对眼前事物的熟悉度以及期待看到什么，都会影响他们的观察结果。
- 你可以设计物体的展示方式，引导别人注意特定的内容。
案例一：【优设网址导航】最主要想告诉我：想要找你想要的类型，请看左侧；想要找你想要的网站，请看网址名称和介绍；想要进入某个网站，点击蓝色文字即可。
每个类型的推荐我只显示最新、最热的前12个，想要查看更多可以点”更多“；找不到你要的网站？可以输入关键字搜索，百度谷歌都可。
问题分析：
1、搜索区域如果百度只点击一下，谷歌要点击两下？实际上，都只需要点击一下，不明白“谷歌两下”命名的初衷；
2、第一次浏览该网页，不明白红色H和绿色N什么意思，每个类型两种标识、未标识的内容看不出规律，从【热门推荐】开始浏览到页面底部并未找到标识说明，然后再仔细看了顶部区域后才找到“最新、最热”说明，不明白为什么要跟其他外部网站并列放在左边；
3、看到“更多”两种不同颜色，第一感觉更希望我点击橙色的“更多”，不明白重点让我点击这个“更多”的初衷；
4、为什么只有前三类有“更多”？
5、为什么要把类型的第一个字特意放大？并没有对我理解该类型有实质的作用。
相关的建议：
1. 如果你想让我更依赖你的网站查找导航，就不要醒目地告诉我百度、谷歌也可以，可以放在页面最底部，当我浏览一遍都还没发现我所需要的网址时，给予友情链接；
2. 如果你想让我点击橙色的“更多”，那现在已经做到了，如果不是，那就建议像其他“更多”一样灰色即可。
案例二：【优设】官网，一个内容运营网站，更多的是想让我阅读文章。最新的文章推荐“字体设计、配色文章、设计方法、生存法则、实用干货、职场困惑、C4D教程”一个类型一篇；想要其他文章，可按照时间顺序看中间，可按照类别/时间先后顺序看右边，可按照热门（点击量？）看右下，可通过关键字搜索；这里有设计素材【免费下载】，请看左边；想要设计软件教程，请看左下；想要了解其他版块的内容，可点击顶部导航、左侧导航。
问题分析：
1. 为什么热门推荐文章固定了7个分类，每个类别只推荐一篇文章？
2. 为什么右侧区域的文章与中间区域的文章顺序大同小异？
相关的建议：
1. “字体设计、配色文章、设计方法、生存法则、实用干货、职场困惑、C4D教程”和轮播banner同样吸引了我的注意，但由于banner上并没有显著的文字，所以我更倾向于通过文字辨别我想要点击哪篇文章，如果你是希望通过文章本身吸引我的注意，建议取消分类，banner图用醒目的标题提醒我即可，毕竟每个类型的文章推送应该不会一直只有这7类，每个类别应该不会一直只能推送一篇，就像这样：
2. 中间区域文字+图片的区域，右侧列表区域同样吸引了我的注意，但当我发现两边文章相同的时候，我会更偏向于浏览中间区域，这样右侧列表区域的位置就有点浪费了，那为什么不把右下热门文章按照类别分类放在右边，然后显示排行榜和总浏览量呢？如果你告诉我这篇文章首屈第一，那我应该会摒弃中间区域的文章，然后把排行榜上所有文章都看一遍。
—— 整体认知主要依靠周边视觉而非中央视觉 ——
- 人们看电视屏幕时会用到周边视觉，而且经常只会扫一眼周边视觉区域便以此判断整个页面的内容。
- 虽然屏幕中央是重要的中央视觉区，但别忽视周边视觉区域，一定要确保周边内容清晰地表现了网页的用途。
- 如果你想让用户集中注意力观察屏幕某处，就别再周边视觉区域内放置动画和闪烁元素。
案例一：【站酷】利用周边视觉吸引注意力
案例二：【产品100】利用周边视觉吸引注意力
—— 人在识别物体时会寻找规律 ——
- 既然人会不由自主地寻找规律，那就尽量多使用规律，利用分组和间隔创造规律；
- 要让某个物体（例如图标）易于识别，就用简单的几何图形来画它。这会让构成物体的几何离子更明显，从而使人更快、更轻松地识别该物体。
- 多用二维元素，少用三维元素。大脑以二维形式接收人眼观察到的信息，因此屏幕上的三维图形可能会减慢识别和理解的速度。
案例一：推荐一个搜索icon的网站http://www.iconfont.cn/
案例二：验证了我在“眼见非脑见”案例一中提到的“第2点疑问” ，第一次浏览该网页，不明白红色H和绿色N什么意思，每个类型两种标识、未标识的内容看不出规律。
相关的建议：如果“红色”都在每个类别的最前面，可能大家会一致认为，这些就是最热门的。
—— 大脑有专门识别人脸的区域 ——
- 人在观看网页时，首先会对人脸做出识别和反应（至少没有自闭症的人都是如此）。
- 在网页上直视用户的脸最具感染力，也许因为眼睛是面部最重要的部分。
- 如果网页上的人眼看着旁边的位置或产品，那么人们往往也会看向同一处，但未必关注，只是看而已。
案例一：【天猫】产品海报，现在产品如涉及到代言人的，关注度更多依赖于代言人本身名气，并不能体现原文观点。目前大多数电商网站上的产品海报涉及到代言人的偏少，而且基本上都是面对镜头的视角，同样无法体现原文观点。
—— 略微侧向俯视是想象物体的标准视角 ——
- 标准视角的画像和物体更容易识别和记忆。
- 如果你的网页或程序里包含一些图标，那么不妨把它们画成标准视角的。
案例一：标准视角的icon
—— 人根据经验和预期浏览屏幕 ——
- 最重要的信息（或希望用户关注的内容）要放在屏幕的上面三分之一部分，或放在屏幕中间。
- 既然人们不看屏幕边缘，就不要把重要信息放在那儿。
- 按照正常阅读顺序合理设计界面，避免让人来回跳着阅读内容。
案例一：验证了我在“眼见非脑见”案例一中提到的“第2点疑问” 。第一次浏览该网页，不明白红色H和绿色N什么意思，每个类型两种标识、未标识的内容看不出规律，从【热门推荐】开始浏览到页面底部并未找到标识说明，然后再仔细看了顶部区域后才找到“最新、最热”说明，不明白为什么要跟其他外部网站并列放在左边。
相关的建议：可以将“最新、最热”icon+文字标识放在【热门推荐】右边第一格【UI-Cloud】附近，让人第一次阅读时即可看到。
案例二：打断我阅读的反例，为什么标题和正文中间隔着那么多不相关的信息？
相关的建议：如果你想利用周边视觉引起我对“交互设计师特训营”的注意，可以将banner放置在标题上方；如果你想利用中间视觉引起我对“变体美术字设计手册”的注意，可以参照左侧“免费下载”的效果，也许更能吸引我的注意，这里应该留给标题信息，这样阅读才不会被打断。
—— 物体会提示人应该如何使用 ——
- 设计时要考虑功能可见性的提示，给用户操作提示后，他们就更容易正确使用物体。
- 用阴影来表现对象已选定或对象可用。
- 避免给出错误的功能可见性提示。
- 设计触摸设备界面时，请慎用悬停可见的提示。
案例一：推荐一个在线绘制界面原型工具：https://modao.cc/
案例二：功能更新时的操作提示。
—— 人可能会对变化视而不见 ——
- 不要认为物体出现在屏幕上就一定会被用户看见，特别是刷新页面出现改变时，用户很可能完全意识不到页面前后的区别。
- 如果你要保证用户注意到界面上的某处改变，应该增加视觉提示（如使之闪烁）或听觉提示（如“哔”的一声）。
- 对眼动跟踪数据进行分析要谨慎，别过于重视它，也别把它作为设计决策的主要依据。
案例一：如果页面刷新，显示更新提示。
案例二：如果页面刷新成功，用声音提示。（本人已经习惯不开消息提醒音效很多年，所以不建议太重视听觉上的提醒）
—— 人们认为相邻物体必然相关 ——
- 你如果希望读者认为某些图片、照片、标题或文字是相关的，就将这些内容相邻放置。
- 如果想使用线或框分隔内容，先尝试能否只调整间距就达到效果。有时，调整间距足以划分内容，还能使页面具有简洁的视觉效果。
- 无关内容间距要大，相关内容间距要小。这听起来是常识，但很多网页布局都忽视了这一点。
案例一：验证我在“人根据经验和预期浏览屏幕”案例二中提到的疑问，为什么标题和正文中间隔着那么多不相关的信息？
相关的建议：正文部分不要融入不相关的内容。
案例二：通过间距、线条和背景色划分内容，背景色＞间距＞线条。
—— 红蓝搭配难以阅读 ——
- 在同一页面内，避免使用红蓝或红绿搭配。
- 红色背景上不要使用蓝色或绿色文字，蓝色背景上不要使用红色或绿色文字。
案例一：举一个并没有觉得不合适的反例，适当应用还是可以的。
—— 9%的男性和0.5%的女性是色盲 ——
- 设计图片和网站时，用www.vischeck.com 或者colorfilter.wickline.org 检查一下，看看色盲所见的效果如何。
- 如果使用颜色来代表特定含义（如绿色代表需要紧急处理的东西），应该同时使用另一种区分方案（需要紧急处理的东西不但应该设为绿色，还要在周围加上方框）。
- 设计配色方案时，请考虑使用所有人都能正常识别的颜色，如不同色度的褐色和黄色。避免使用红色、蓝色、绿色。
案例一：最近接触的一款教育产品，在初期确定风格的时候，决策方明确表示不能以红色、绿色作为主色，需要考虑色盲情况。
—— 色彩含义因文化而异 ——
- 谨慎选用颜色，多考虑色彩可能具有的含义。
- 为多国设计时，请找出你的设计可能涉及的几大文化或国家，并在informationIsBeautiful.net 上查看相关色彩的文化含义，以避免出现不当的理解。
案例一：通常红色表示警示、提醒，常用于“删除、新消息”；黄色表示预警，常用于“错误提示”；蓝色、绿色表示友好，按钮常用色；灰色表示低频，常用于“取消”等。
案例二：色彩含义很重的股票走势，红色涨，绿色跌。
