无论是设计网站、医疗设备，还是某些类似的产品，你都要让用户从设计中受益。而用户的体验完全取决于你对他们的了解。用户是如何思考、如何做决定的？什么促使他们点击网站、购买产品或者做出其他如你所愿的行为？
在《设计师要懂点心理学》这本书中，有100个小贴士非常有用，你会学到什么会吸引用户注意，用户会犯哪些错误以及为什么，还有其他有助于你提高设计水平的知识。我找了相关的网页及APP界面进行分析，希望有助于大家理解。（小贴士较多因此选择其中我认为比较有帮助的几点进行分析）
1.眼见非脑见
•别人在你的网站上看见的内容未必符合你的设想，他们的个人背景、文化水平、对眼前事物的熟悉度以及期待看到什么，都会影响他们的观察结果。
•你可以设计物体的展示方式，引导别人注意特定的内容。
例：饿了么，美团，百度外卖的移动端界面在想要引导用户点击的内容做了设计。
饿了么，美团，百度移动端界面
2.整体认知主要依靠周边视觉而非中央视觉
•人们看电脑屏幕时会用到周边视觉，而且经常只扫一眼周边视觉区域便以此判断整个页面的内容。
•虽然屏幕中央是重要的中央视觉区，但别忽视周边视觉区域。一定要确保周边内容清晰地表现了网页的用途。
例如：苹果中国的官网设计，所要展示的内容在视觉中心，并且周边没有多余的信息，确保了网页的用途。
苹果中国官网设计
如果你想让用户集中注意力观察屏幕某处，就别在周边视觉区域内放置动画和闪烁元素。
周边视觉总是让人不禁注意到周围的动静。网站侧边的广告总是做成闪烁效果就是因为这个道理。这样很不招人待见，但确实会吸引我们的注意力。
360首页左下角跳出的小广告
3.人在识别物体时会寻找规律
发现规律有助于快速处理时刻接收的感官信息。即使本无规律，人眼和大脑也会尝试创造规律。例如：你看到的可能是 4 组图案，每组2个点，而不是8个孤立的点。你把点间距的长短看成了一种规律。
大脑倾向于发现规律
•既然人会不由自主地寻找规律，那就尽量多使用规律，利用分组和间隔创造规律。
例如：微信“我”页面、QQ动态页面利用分组和间隔来创造规律，也让用户更方便查找和触达。
•要让某个物体（例如图标）易于识别，就用简单的几何图形来画它。这会让构成物体的几何离子更明显，从而使人更快、更轻松地识别该物体。
•多用二维元素，少用三维元素。大脑以二维形式接收人眼观察到的信息，因此屏幕上的三维图形可能会减慢识别和理解的速度。
例如：滴滴打车的新图标，图标简洁且容易识别，能帮助用户在APP繁多的屏幕中快速识别出来。
4.大脑有专门识别人脸的区域
•人在观看网页时，首先会对人脸作出识别和反应（至少没有自闭症的人都是如此）。
•在网页上直视用户的脸最具感染力，也许因为眼睛是面部最重要的部分。
•如果网页上的人眼看着旁边的位置或产品，那么人们往往也会看向同一处，但未必关注，只是看而已。
例如：如果在网页上有一张图片，图上的眼睛不看我们，而是看向网页上的一个产品，我们也会不由自主地看向那个产品。
我们会不由自主地看向她所看的东西
设计网页时，你要确定是想和用户建立情感沟通（图片上的眼睛直视着用户）还是想引导用户的注意力（图片上的眼睛看向某一产品） 。
5.略微侧向俯视是想象物体的标准视角
•标准视角的画像和物体更容易识别和记忆。
•如果你的网页或者APP里包含一些图标，那么不妨把它们画成标准视角。
6.人根据经验和预期浏览屏幕
•重要的信息（或者希望用户关注的内容）要放在屏幕上三分之一部分，或者放在屏幕中间。
•既然人们看不到屏幕边缘，就不要把重要信息放在那里。
•按照正常阅读顺序合理设计界面，避免让人来回跳着阅读内容。
大众点评网页
人们早已习惯认为网页顶部都是无关内容，如商标，留白，导航栏，所以他们往往先看屏幕中心位置，而非边缘。
7.人可能会对变化视而不见
•不要认为物体出现在屏幕上就一定会被用户看见，特别是刷新页面出现变化时，用户可能完全意识不到页面前后的区别
•如果你要保证用户注意到界面上的某处变化，应该增加视觉提示（如使之闪烁）或听觉提示（如“哔”的一声）
8.人们认为相邻物体必然相关
•你如果希望读者认为某些图片，照片，标题，文字是相关的，就将这些内容相邻放置。
•如果想使用线或者框分割内容，先尝试能否只调整间距就达到效果。有时调整间距就足以划分内容，还能使页面具有简洁效果。
•无关内容间距要大，相关内容间距要小。这听起来是常识，可是很多网页布局都忽视这点。
9.9% 的男性和 0.5% 的女性是色盲
•设计配色方案时，请考虑使用所有人都能正常识别的颜色，如不同色度的褐色和黄色，避免使用红色、蓝色、绿色。可以用www.vischeck.com或者colorfilter.wickline.org来检查色盲所见效果如何。
有一种经验原则，就是在使用颜色代表特定意义时，应当同时使用另一种区分方案，例如同时使用颜色和线条粗细来代表不同内容，这样色盲者即使无法辨认特定颜色，也能看懂图的含义。
另一种方法则是选择所有色盲都能识别的配色方案。
10.色彩含义因文化而异
谨慎选用颜色，多考虑色彩可能具有的含义。
研究表明色彩会影响情绪。例如：在美国，橙色使人焦虑不安，因此顾客不会久待（这对快餐馆有用）；褐色和蓝色使人平静，因此人们会长时间待在这里（对酒吧有用）
例：Uber 在网页端也启用了有各个国家自己特色的颜色和底纹网站，例如中国，就是以红色为主色，还有两种不同的蓝色和金色，纹路像是中国的砖瓦。
Uber 网页端
Uber 网页端颜色底纹分析图
11.大写单词难读之谜
•人们认为全大写是大声强调的语气，也不习惯阅读，因此请尽量少用。
•仅在写头条标题或需要引起用户注意时，才用全大写，例如用户删除重要文件前给他的提示。
12.电子阅读比纸质阅读更难
•计算机屏幕上要用较大的字体，以减轻眼疲劳。
•应该把文字分成几块，并且使用着重号、短段落和图片。
•加大字与底色的对比度，白底黑字最易读。
•确保内容值得一读。阅读问题归根结底取决于文章本身是否让读者感兴趣。
白底黑字是最易读的
13.人一次只能记住四项事物
•能把展示给用户的信息限制在4条固然好，但也不必强求。可以用归类或分组的方法展示更多信息。比如电话号码分组：150 8755 1234
•注意，用户喜欢使用辅助的记忆手段，比如笔记、名单、日历、日程表，以减少对大脑记忆的依赖。
14.回忆会重构记忆
•如果你正在就某个产品测试或者采访客户，那么你的用词会影响对方回忆的结果
•别依靠人们对各自经历的回忆，人无法准确记忆过去的言行和见闻。
•最好在现场观察用户如何使用你的产品，酌情采信客户事后说的话，比如他们事后回想的产品使用经验。
15.忘记是好事
设计时，请考虑遗忘因素。不要指望用户能记住重要信息，而应该在设计时提供此类信息或提供便捷的查找方式。
16.人更擅长处理小块信息
渐进呈现 （progressive disclosure） 即每次只展示用户当前需要的信息。下面几幅图展示了渐进呈现的设计思路，图片来自 MailChimp（http://www.mailchimp.com，MailChimp 商标归 Rocket Science Group 有限责任公司所有） 。
网站首页没有详细描述服务的内容和功能，而是简单列出了各项功能，并附上了相应的图片。用户点击其中一个功能后，会得到更多信息，然后还可以进一步详细了解。通过每次只提供少量信息，就可以避免信息过量给用户带来不适，同时还能满足不同用户的需要，因为有些用户希望得到整体概览，有些则需要全部详情。
渐进呈现的第一步
第二步给出少量细节
最后一步展示更多详情给需要的用户
•使用渐进呈现，仅在用户需要时才展示他们需要的信息。用链接引导用户获得更多详情。
•如果不得不在让用户点击和让用户动脑之间做出取舍，那么多几次点击，少一点动脑思考吧。
•在你使用渐进呈现之前，务必做足调研，搞清楚多数用户需要什么信息，且在什么时候需要。
今天的小贴士先分析到这里，里面举得例子如果有不同意见的可以留言给我，我们一起学习成长，谢谢啦。
网友评论