如何设计界面?我来告诉你!(上)

无论是设计网站、医疗设备,还是某些类似的产品,你都要让用户从设计中受益。而用户的体验完全取决于你对他们的了解。用户是如何思考、如何做决定的?什么促使他们点击网站、购买产品或者做出其他如你所愿的行为?

在《设计师要懂点心理学》这本书中,有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 有限责任公司所有) 。

网站首页没有详细描述服务的内容和功能,而是简单列出了各项功能,并附上了相应的图片。用户点击其中一个功能后,会得到更多信息,然后还可以进一步详细了解。通过每次只提供少量信息,就可以避免信息过量给用户带来不适,同时还能满足不同用户的需要,因为有些用户希望得到整体概览,有些则需要全部详情。

渐进呈现的第一步


第二步给出少量细节


最后一步展示更多详情给需要的用户

•使用渐进呈现,仅在用户需要时才展示他们需要的信息。用链接引导用户获得更多详情。

•如果不得不在让用户点击和让用户动脑之间做出取舍,那么多几次点击,少一点动脑思考吧。

•在你使用渐进呈现之前,务必做足调研,搞清楚多数用户需要什么信息,且在什么时候需要。

今天的小贴士先分析到这里,里面举得例子如果有不同意见的可以留言给我,我们一起学习成长,谢谢啦。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,454评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,553评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,921评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,648评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,770评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,950评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,090评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,817评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,275评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,592评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,724评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,409评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,052评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,815评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,043评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,503评论 2 361
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,627评论 2 350

推荐阅读更多精彩内容