页面中按钮位置思考

一、概述

本文结合菲茨定律与古腾堡原则做原理分析，通过理解原理提取出了对应的方法论，探究按钮在页面中的摆放位置，结合个人理解总结出了按钮位置结论。

二、菲茨定律

1.内容和原理

费茨定律是在1954年由保罗·费茨（Paul M. Fitts）博士，在对人类操作过程中的运动特征、运动时间、运动范围和运动准确性进行研究之后提出的，该定律被用来预测从任意一点到目标中心位置所需时间的数学模型，在人机交互和设计领域的影响却最为广泛和深远。

费茨定律内容：使用指点设备到达一个目标的时间，与当前设备位置和目标位置的距离和目标大小有关。

用数学公式表达为：时间 T = a + b log2(D/S+1)   T=移动设备所需时长；a,b是经验常量，D=设备起始位置和目标位置的距离；S=目标的宽度大小。

一句话描述：任意一点移动到目标中心位置所需时间与该点到目标的距离和大小有关，距离越大时间越长，目标越大时间越短。

2.提取方法论

a.重要/常用功能：放大可点击区域、缩短目标距离

b.非重要/常用功能：放置边角区域

c. 需要连续操作的控件尽可能接近

3.在物理世界中的应用

a.灯的开关按钮

开关按钮是生活中很常用的工具，如下图：舒适的开关一定是手指可操作范围较大，而操作范围小的开关使用体验并不好。

b.汽车油门与刹车踏板

汽车上的刹车踏板和油门踏板相距很近，并且刹车踏板的物理面积要比油门踏板大，这样可以使驾驶员能在相对最短的时间内把脚从油门踏板移动到刹车踏板上，从而最快最准确的触发刹车踏板，确保事故的发生率和减少事故的损伤。

4.在设计中的应用

在按钮功能上来说，主要按钮的可点击区域在合理的范围之内越大越容易点击，反之，可点击区域越小，越不容易操作。

比如在各APP的主要界面的重点功能：

滴滴出行将打车页面的确认呼叫、美团买菜在产品详情页的加购物车、摩拜单车首页的扫码开锁都是当前页面的最主要功能，主要功能的可点击区域最大比重展示。

将一些非重要的操作可置于边角，比如下图的美团抗疫的运营活动关闭按钮、支付宝的理财运营弹窗关闭按钮、百度网盘开屏广告关闭按钮都置于不方便触碰的边角位置。

当一个入口点击需支持多个操作选项时，需要进行连续操作，比如苹果系统的3Dtouch操作反馈、微博点击发布按钮、微信聊天页里面的加号键、 PC/Mac 中的菜单反馈都遵循着这一原则。

点击这类按钮之后一定会有后续的任务和操作，所以这些任务都被安排在了距离所点击区域更近的菜单中。

三、古腾堡原则

1.内容和原理

古腾堡图将显示介质分为四个象限：左上角的「第一视觉落点区」，也叫「主光学区域」，类似自然光的落点；右下角的「终端区域」；右上角的「强休区」和左下角的「弱休区」。

整个阅读方式由左向右方向前进，用户倾向于关注整个页面的开始与结束区域，至于段落的起始与结尾则较少被关注到，也就是休闲区。这个原则的支撑点为「阅读重心」，由人们一直以来的阅读习惯形成。

2.提取方法论

a.关键决策信息置于右下角

b.若两个按钮并行，把重要的放在右侧

3.在物理世界的应用

左上角优先，从左到右、从上到下的阅读习惯是视线最自然的移动轨迹，平面设计也是遵循这一原则，重要的信息或往往放在左上方的位置，这样可以让读者更加容易接收到主要以及主旨信息。

如各种书面文档会将主要参与方、主要描述对象置于左上方，重要确认信息盖章签字置于右下角。

4.在设计中的应用

根据古腾堡原则，在用户查看并不熟悉的界面时，浏览是用户的第一行为。他们的眼睛会根据界面元素进行移动，最终停留在结尾的行动点上。

这时候，按钮的位置至关重要。如果界面是需要用户阅读完并进行操作的话，按钮的最佳位置放在右下角可以保证用户阅读完了整个界面的内容。

这在购买页面上最为常见，比如游戏页面的按钮、淘宝产品详情页的立即购买按钮、每日优鲜购物车页的结算按钮都置于右下角。

比较常见的弹框按钮样式，类似“取消”和“确认”，设计师通常用它来让用户确认某种操作行为。有可能是提交表单，弹框内容是对表单内容的再次展示，方便用户用于确认。

当两个操作需同时存在时，如果推荐操作在左侧，用户的眼睛会想要向右下方移动，而想要回到推荐操作需要视线移动，增加用户的阅读时间。

将推荐操作置于右侧，非推荐操作置于左侧可以为用户提供更高效的任务流程。

如规则说明提示弹窗，将推荐的同意按钮置于右侧；每日优鲜的换购提醒，将换购按钮置于右侧；余额宝的首页将转入按钮置于右侧。

四、金融场景下按钮位置分析

1.顶部按钮

顶部按钮尺寸较小，因为它所占空间有限，因此在操作上相对来说不便于点击。所以这类顶部按钮更适用于对当前页面的更多操作行为，作为不常用的功能入口。

常用与更多操作、常见问题等。

2.居中按钮

结合人机交互习惯与费茨定律分析，页面中部的按钮位于用户使用移动端机器时最不费力的触碰范围，如下图在使用过程中，蓝色区域为最方便点击区域，用户操作不需要付出额外的动作。

居中按钮更适用于用户认知门槛低，不需过多思考来方便操作型页面。如金融场景下现在更加年轻化的借贷产品门槛降低，借呗的界面设计中将借钱按钮居中放大展示，京东白条运营活动中将参与按钮居页中显示，低风险低门槛类型理财产品不同于专业基金或股票型产品，也适用于按钮居中显示。

3.底部按钮

根据古腾堡原则在实际案例应用中的结论，为保证用户阅读完整个界面的内容再进行操作的话，按钮的最佳位置放在右下角，而根据菲茨定律的设计应用结论，重要功能按钮需放大可点击区域。

所以居底部的按钮推荐类型为：需阅读整个页面内容后，谨慎决策型按钮。

如各类专业型基金需谨慎操作，页面上会有诸多收益与风险相关信息，这关系到用户的资金切身利益的页面行动按钮需置于页面底部，确保对当前页面内容完整阅读后进行操作，如按钮置于页面中部会导致中断阅读，可能引起判断失误。

五、总结与应用结论

原理1：

人的眼球移动规律趋向于从上到下，从左到右，在视觉区域中，左上角通常为是视觉的起始点，右下角为视觉的重点，而右上和左上是视觉的休息区。

应用结论：顶部按钮不可作为页面关键页面行为召唤按钮。

原理2：

操作按钮放在底部，这样用户既不会错过它，也保证了用户在这之前浏览到了所有的信息。

应用结论：谨慎决策型按钮居于页面底部。

原理3：

当主要动作在左侧时，用户的眼睛想要向右下方移动，而左边的主按钮需要用户的视线来回移动，增加用户的阅读时间。

应用结论：产品希望用户进行什么操作时，就把主按钮放在右边。

原理4：

手指移动到目标位置距离越小，判断时间越小，操作成本越低。

应用结论：在希望快速获取用户参与的页面，将重点信息放在上半屏，操作按钮居于页面中部。