赞助商
立即赞助

用超多案例,帮你掌握交互设计心理学的古腾堡原则

交互设计3年前 (2021)发布 流光
1.9K 0 0

写在前面

程,否疑惑?APP,按钮按钮存,按钮页右呢?按钮左问题呢?按钮右呢?它论依据呢?疑问,始今介绍:互心理学古腾堡原则

用超多案例,帮你掌握交互设计心理学的古腾堡原则

古腾堡原则的起源

古腾堡原则是由14世纪西方活字印刷术的发明人约翰·古腾堡提出,早在20世纪50年代,他在设计报纸的过程中,提出了一项原则,认为人的阅读方式应该是遵循某种习惯进行的,就像读书一样,由左到右,从上到下。这其中蕴含着什么信息呢?经过研究最终得出被后人所熟知的结论:古腾堡原则,并附上了一张图,名为「古腾堡图」。古腾堡图将画面所呈现的内容分成四个象限:

  • 第一视觉区(POA):左上方,用户首先注意到的地方
  • 强休息区(SFA):右上方,较少被注意到
  • 弱休息区(WFA):左下方,最少被注意到
  • 终端视(TA):右,视流终

用超多案例,帮你掌握交互设计心理学的古腾堡原则

△ 古腾堡图

从图中可以看出,用户视线很自然的会从第一视觉区开始,逐渐移动到终端休息区。整个阅读过程视线都会沿着一条方向轴开始从左到右浏览。用户会更容易关注到页面的开始与结束区域,而中间的段落则很少被关注到。古腾堡揭示了一个实用的视觉轨迹规律:阅读引力是从上到下,从左到右。

遵循腾堡则把键息左、右,够素。例:页弹、各证件件。

用超多案例,帮你掌握交互设计心理学的古腾堡原则

腾堡图素素组,指导眼睛轨迹。户迅速获取息,户息熟悉程响眼睛轨迹素。

而随着互联网的兴起,古腾堡原则也逐渐被应用到APP设计和网页设计当中。接下来让我们来看看他在界面中的实际应用。

在设计中的应用

根据古腾堡原则,当用户浏览一个陌生的界面时,浏览是用户的第一行为。他们的视觉焦点会从左上角一直到右下角。并停留在结尾的行动点上,也就是前面所提到的终端休息区。接下来,就是如何摆放按钮了,这也是至关重要的一步。如果是需要用户阅读完后进行操作的话,按钮摆放的最佳位置应该是页面底部。这样可以保证用户对内容进行了阅读。

1. 底部按钮分析

按钮

形引导户操页见,够证户阅读,将按钮摆页,顶,摆即符户由阅读习惯预目标。

用超多案例,帮你掌握交互设计心理学的古腾堡原则

底部垂直双按钮

上面我们提到了单个按钮的摆放思路,接下来看一下垂直双按钮的摆放思路是怎么样的。如果一个界面上同时存在两个优先级不同的按钮,并且产品希望用户对每一个按钮都有足够的关注度,那么垂直摆放是最佳选择,虽然垂直双按钮在样式上做了区分,但用户同样会停留一段时间将按钮的内容进行对比思考。

,按照腾堡则,按钮应该页,则它应该:

用超多案例,帮你掌握交互设计心理学的古腾堡原则

仔细观察图,浅按钮易被忽略掉,违背证按钮够注初衷,违背腾堡则需求,授权页,

用超多案例,帮你掌握交互设计心理学的古腾堡原则

证「」「拒绝」独立按钮够被户够视,并任按钮被轻易忽略掉,将「」按钮颜,并「拒绝」按钮,眼睛垂轨迹流变。

结

则基础,并变,权衡则目标系。

2. 顶部按钮分析

由顶导航栏空,导致按钮相,并击操,类顶按钮改编辑页,即避免误触,户注身。键按钮至顶,缩短户眼睛径,户易注状变状。

用超多案例,帮你掌握交互设计心理学的古腾堡原则

小结

顶部按钮更关注可编辑的内容区域,并非按钮。而底部按钮则更关注按钮本身。并非内容。

3. 水平按钮分析

除了上面提到的顶部按钮和底部按钮,还有水平摆放的按钮,比如淘宝详情页、京东详情页、网易严选详情页的「加入购物车」和「立即购买」按钮,界面中的「立即购买」按钮都放在了右下角,结合古腾堡原则的视觉终点说明,右下角为视觉终端区域,即视觉最终停留的位置,所以他们都将与转化率密切相关的「立即购买」按钮放在了界面的右下角,让用户更容易关注到。

用超多案例,帮你掌握交互设计心理学的古腾堡原则

再比如比较常见的「取消」和「确认」弹窗样式,通常是在需要让用户确认某种操作行为时出现,有可能是提交表单、协议授权、获取用户信息等等,为了防止用户误操作,这也是提升产品体验的小细节。

弹,按钮右,将按钮左怎?图示:

用超多案例,帮你掌握交互设计心理学的古腾堡原则

难按钮右,视轴流。

弹窗的目的是想让用户点击「确认」按钮,如果将「确认」放在左侧,根据古腾堡原则,用户的视线会不由自主的向右侧移动,也就是「取消」按钮的位置,想要回到左侧「确认」按钮位置就需要移动视线,并且眼睛的运动轨迹会在水平方向轴上来回的往复运动,无形中增加了用户选择时长。如果将「确认」放在右侧,「取消」放在左侧则可以为用户提高操作效率。

在实际产品中的应用案例:

用超多案例,帮你掌握交互设计心理学的古腾堡原则

小结

当产品想要让用户进行某种操作时,主要按钮放在右边

总结

  • 古腾堡图第一视觉区,强休息区,弱休息区,终端视觉区
  • 则基础,并变,权衡则目标系
  • 顶部按钮更关注可编辑的内容区域,并非按钮。而底部按钮则更关注按钮本身。并非内容
  • 当产品想要让用户进行某种操作时,主要按钮放在右边
© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

一. 智能后视镜时代背景 随着社会的发展和科技水平的提高,人们对驾驶汽车的安全性、娱乐性提出了更高的要求。汽车的中央后视...
交互设计
@某个呆Sir: 众所周知,移动设备的触摸键盘相比于电脑的实体键盘而言,易用性较差。原因有很多,比如使用习惯,人机工程原理...
交互设计
为什么大爷大妈们总对排队情有独钟,为什么平常不想要的东西一打折就买一堆……震惊!原来套路你的竟然都是自己的大脑! 如今...
产品
推荐算法出现之前,寻找信息的主场景是通过搜索获取。 用户通过搜索框,输入目标的关键词进行查询。这一过程是用户的主动行...
交互设计
最近的工作一直在和筛选打交道,为公司 B 端系统做了一次设计调整,去解决目前系统中筛选功能交互繁琐的问题。 首先我们先从...
B端设计
各位好,我是呆呆,今天这篇文章,是「交互问答」专栏的第一篇文章。文章的内容主要来自于读者提的问题。 这些文章原本可...
交互
随着用户体验被愈发的重视,更多的 App 偏向于使用多手势优化用户的操作流程,降低使用阻力。点击某个确定的按钮的手势操作虽...
交互设计
在互联网产品圈里,用户体验一直是被格外推崇,几乎每一个产品经理都会把用户体验挂在嘴上。即便是一个产品菜鸟也会在言谈间...
交互设计