按钮设计原则之一——古腾堡原则

一流设计网提示古腾堡图第一视觉区,强休息区,弱休息区,终端视觉区

原则是设计的基础,并非一成不变,要合理权衡设计原则与产品目标之间的关系

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

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

古腾堡图将画面所呈现的内容分成四个象限:

第一视觉区(POA):左上方,用户首先注意到的地方


强休息区(SFA):右上方,较少被注意到

弱休息区(WFA):左下方,最少被注意到

终端视觉区(TA):右下方,视觉流终点


1. 底部按钮分析

底部单个按钮

这种形式在引导用户操作的页面中最为常见,为了能够保证用户对内容进行阅读,所以将按钮摆放在页面底部,内容放在顶部。

按照古腾堡原则,重要的按钮应该放在页面最底部,原则上它应该是这样的:


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


2. 顶部按钮分析

由于顶部导航栏空间有限,导致按钮相对较小,并且不便于点击操作,所以这类顶部按钮适用于修改内容的编辑页面,即可以避免误触,又可以让用户关注内容本身。关键按钮至于顶部,还可以缩短用户眼睛的运动路径,让用户更容易注意到其状态的变化状态。

3. 水平按钮分析

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


推荐阅读更多精彩内容