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