如何精进你的设计知识体系之—古腾堡原则!

如何提升自己的设计能力?首先要搭建好自己的知识体系,体现你的专业,让他人信服,感知你的价值。本文就设计中的三大视觉浏览模型之一:古腾堡原则展开分析,并对其应用进行了总结,一起来看看吧。

src=如果你不知道如何提升设计能力,那就先打好基础,搭建好知识体系,让你的设计有理可依,有据可引。体现你的专业,才能让人信服,让别人看到你的价值。

古腾堡原则是由 14 世纪西方活字印刷术发明人约翰 · 古腾堡提出,早在 20 世纪 50 年代在设计报纸的过程中,提出了一项原则,认为人的阅读方式应该是遵循某种习惯进行的,像读书一样,由左到右,从上到下。

src=经过研究,他最终得出了被后人熟知的「古腾堡原则」,古腾堡你可能觉得既难懂还陌生,它还有另外一个名字:对角线平衡法则。

这个原则的支撑点为「阅读重心」,由人们一直以来的阅读习惯形成。将页面的设计与阅读的重心相协调,能帮助读者梳理阅读的逻辑。据研究发现,这么做能提高读者阅读的节奏和理解能力。

src=古腾堡原则指人的阅读方式遵循从左到右的眼动规律,且画面显示的东西都分成四个象限:

1、第一视觉区(Primary Optical Area):处于左上方,读者首先注意到的位置。

无论用户在搜索内容、主动阅读或者快速浏览,这都是用户阅读的第一落点区域。因此在这个区域我们应放置一级内容或者核心功能。

2、最终视觉区(Final Optical Area):处于右下方,视觉流程的终点。

这个区域是用户浏览行为的最终落点区域,当用户浏览到这个部分时需要采取措施,我们可以在这里插入按钮或者行动点。这也就能解释为什么按钮都会在右下角出现。当用户的浏览行为结束后,可以进行操作反馈。

3、强休息区(Strong Follow Area):处于右上方,较少被注意到。

在这个阶段,我们不应该去设置一个重要的行动点,一方面用户容易忽视,另一方面,当用户浏览完中心区域的内容后,再返回到强休息区操作,视线会有个折回过程,用户体验并不太理想。

4、弱休息区(Weak Follow Area):处于左下方,最少被注意到。

遵循古腾堡法则,界面中的左上和右下是用户视觉最为重点关注的位置,设计师应该把界面的关键元素放在主视区,最终视觉区可以放按钮,休息区可以用来放一些相对次要的内容,如辅助图形、文字信息。

比如我们常用的页面弹窗、各种文件和合同文件等等就是采用这种原则进行设计的。

第一视觉区是用户浏览网页的起始点,最终视觉区是结束离开网页的终点。整体是根据人们从上到下、从左至右有规律的阅读习惯设计的。

1、根据起点第一视觉区的特性把 LOGO 和导航放在左上角,推荐的文章也以图片的形式放在这里进行曝光;

4、最终视觉区则是提供给用户相关推荐课程或者想要加入的社区入口,也是常见的放置广告的地方。

古腾堡图表应用最典型的例子就是商品详情页,在界面的顶部展示商品图片、名称、价格、快递和优惠等用户主要关心的信息;右上和左下通常是分享、客服和收藏等次要信息;右下角则放置最终促成用户交易的购买按钮。

结合古腾堡的视线强弱分析,我们可以得知左侧的首要视觉点一定是强视觉区,但是有时候简单的图片 + 文字的排列也会有很多设计思考。

比如:第一个图今日头条的布局,光看它的配图我们根本猜不出来整体条目所表达的内容,所以头条的图片元素传达信息的效率远不如文字,所以第一视觉区会留给文字信息;

而第二图中美团列表也图片所传达的信息效率更直观,会一眼告诉用户我这家是西餐还是中餐,是早点还是正餐,所以在美团的条目中图片会被放在第一视觉区。

src=这两种布局的目的都是让用户可以快速浏览,不让用户在接收信息时受阻造成体验打断。

此处还可以延伸一下,如上图第三个图,头条的视频条目也是先文字后视频,为什么呢?

按理说视频的传达信息效率要远大于配图,猜想一下,头条的设计是想将视频作为终端休息区进行视觉强化,第一,可以强化信息种类的分类让用户更好辨识,第二,让视频条目传达信息效率更快且满足整体使用 APP 时一致性的用户心智,让用户能快速上手并且顺畅体验浏览。

我们都知道引导用户操作的页面中,一般页面按钮都在界面底部是因为离手近,方便操作,但不仅仅如此还因为浏览是用户的第一行为,他们的视线会根据页面元素进行移动,最终停留在底部结尾的地方。

根据古腾堡原则,将标题和内容放在顶部即第一视觉区,引导用户浏览所有内容后注意到底部的按钮作为终端休息区,这样的摆放即符合用户由上到下的阅读习惯又达到了产品预期的目标。

垂直布局下,用户浏览时的眼动路径单纯向下,这种由上自下的浏览效率是最高的。

水平布局时,用户由左至右的浏览效率要明显低于垂直布局,但也同时避免了垂直布局下过快的决策造成风险。

这和表单布局方向类似,那些想要让用户快速浏览并完成的表单往往采用了垂直布局,而需要用户仔细阅读、认真填写的表单往往使用了水平布局。

如果产品希望用户对每个按钮都有足够的关注度,垂直摆放是最佳选择,且【重要按钮应该放在页面最底部】,虽然垂直双按钮在样式上做了区分,但用户同样会停留一段时间将按钮的内容进行对比思考。

那么,按照古腾堡原则,重要的按钮应该放在页面最底部,但是现实我们看到的垂直摆放按钮的主次反而是相反的,主要的 CTA 按钮往往被放置在了上方?

src=观察上图,有没有发现浅色按钮很容易被忽略掉,这样就违背了产品要保证每一个按钮都要有足够关注度的目的,所以我们要违背古腾堡原则来满足业务需求,正如我们所看到的微信授权页面一样。

为了保证「允许」与「拒绝」这两个独立的按钮能够被用户足够的重视,并且其中的任意一个按钮不会被轻易的忽略掉,这里将「允许」按钮颜色加重设定为主按钮,并且放在「拒绝」按钮之上,让眼睛原本垂直向下的运动轨迹产生回流的变化。

拒绝 按钮能让用户注意到,这样便起到了防错性,缺点是会对用户造成流程上较强的打断性,适用于需要用户思虑、审核信息的场景。

src=所以,这也提示我在设计中要思考:设计原则虽是设计的基础,并非一成不变,要合理权衡设计原则与产品目标之间的关系。

水平摆放的按钮,最典型的就是电商类型的详情页,【加入购物车】和【立即购买】按钮。

结合古腾堡原则的视觉重点说明,右下角视为视觉终端区域,即视觉最终停留的位置,所以他们将与转化率相关的【立即购买】按钮放在了界面的右下角,让用户更容易关注到。

src=再比如:比较常见的「确认」和「取消」弹窗样式,通常是在需要让用户确认某种操作行为时出。

如何精进你的设计知识体系之—古腾堡原则!

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

Scroll to top