在做APP页面的时候，我们通常会遇到很多地方关于按钮的摆放位置，列表中、弹框中、页面全局中等等，今天就这三大类常见的按钮我们展开分析一下它们应该怎样摆放更合适。
本文要点：
一、列表中的按钮位置
二、弹框中的按钮位置
三、页面中全局按钮的位置
一、列表中的按钮位置
页面列表中我们经常会遇到很多的操作按钮，之所以称为列表中的按钮，是因为此处的按钮是针对单个列表中的内容进行操作的。
1.1、功能操作按钮
如电商应用历史订单里列表中的按钮，根据订单的状态展示相应的操作按钮，按钮数量可能不固定；位置上一般都是遵循了靠右展示的原则（大众用户单手操作时一般用右手，按钮位置居于右侧易点击）；当按钮数量多时，类似淘宝中以“..."icon（更多）收起的处理方式。
点击可查看大图
1.2、查看详情
列表中我们也经常遇到查看列表内容详情的按钮，很多产品经理在做需求设计的时候，会特地要求设计师把 “查看详情” 作为按钮摆放在列表中，原因是不这么放怕用户不知道点进去可以查看详情。其实很多时候都是我们自己 “以为的”，表单点击进去可以查看详情这个操作已经是很常见的操作了，基本上没有什么理解成本，很多用户体量较大的应用也都是这么做的，在用户心里已经形成了一个通用的共识——信息列表是可以点进去查看详情的，如果还是怕用户不知道的情况下可以增加列表的“可点击”感，如列表做成卡片的形式，再或者列表信息右侧加上 “>" （向右）的箭头标识。
当我们把我们 “自以为” 的都搬到产品界面上，每增加一个功能，都以最重、最明显的形式展示，那么页面会越来越臃肿，也就越来越没有重点，导致用户看到这样的页面会产生烦躁的心理，也无形中增加了用户的心理负担。
点击可查看大图
二、弹框中的按钮位置
弹框中的按钮位置，一般是把重要或鼓励操作的放于右侧，因为也是遵循了居右展示的原则（大众用户单手操作时一般用右手，按钮位置居于右侧易点击）。加之再结合突出按钮形式（按钮样式做区别），更突出右侧重要按钮，从而引导用户去点击操作。
下图中（1）爱奇艺提示升级的弹框，为了引导用户前去升级，特意把 “抢先体验” 的升级按钮放在了右侧，并在形式上做凸显展示。
下图中（2）唯品会在删除购物车里的商品时做的提示，虽说是想要用户留下商品，但用户毕竟是点击的 “删除”，在设计上可以做引导但在产品功能上不要违背用户的决定。故这里还是把 "删除" 按钮放在了用户易点击的右侧，而左侧的 ”先留着“ 在文字样式上做了加粗展示，隐形引导用户留下商品。
下图中（3）KEEP提示升级的弹框，弹框中的按钮是上下排列的，此类排列是为了顾及大屏幕手机的用户，上下按钮都可以轻松点击到，没有点击距离上的成本。之所以把重要的 “立即升级“ 按钮做了样式凸显并放在了上面，是因为用户在浏览完上面的升级说明后，随即就可以点击升级按钮进行升级，遵循了大众的从上往下的浏览习惯，整个过程比较流畅。
点击可查看大图
三、页面中全局按钮的位置
在APP页面中，全局按钮一般分为三种形式出现：在顶部导航、固定于页面底部、跟随页面内容的多少往下排放。下面就这三种常用的形式做一下分析：
3.1、按钮跟随页面内容的多少往下排放
这类按钮布局适合于操作类页面（内容多或内容多少不确定），需要用户编辑完任务所需要的内容后才可操作到达下一步。页面内容与按钮之间有着明确的前后顺序关系，如不操作完内容无法进行下一步。遵循从上往下的视觉浏览习惯，整个页面比较流畅。如“提交”、“下一步”等等。此类页面不适合把按钮放于顶部导航右上角或固定在页面底部。
如放于页面右上角，试想一下当编辑完页面内容后，还需要用户把视觉移到页面右上角，随之手也要移到上面去点击按钮，违背了视觉流的浏览习惯，整个流程显得不够流畅和高效。（如下图中3，不建议这么放置）
如固定在页面底部，试想一下此页面需要填写的内容项超过了一屏，且是必填项信息，此时当用户被固定在页面底部的按钮所干扰注意力，看起来和页面内容没有明确的先后关系，此时当用户去点击的时候，还要提示用户“你还没有填写xx项内容”，我们在设计页面的时候，首先是要用合适的方式避免用户犯错，接下来才是针对错误的提示、反馈措施。
只有避免用户犯错的时候才能让用户任务完成的更顺畅，也就是在提高用户效率。
点击可查看大图
3.2、按钮放于顶部导航两侧
此类按钮一般为页面辅助功能按钮，如分享、客服、等。功能与页面内容关联性不强，比较独立。既一目了然又不占页面位置，一般以icon的形式展示，但如果功能icon识别性不强时最好以文字按钮显示，最多不要放超过两个icon的按钮，如果只是是文字按钮的话，建议不要超过1个，不然会显得页面臃肿。当需要的辅助功能多时，可以以集合的形式收起来，点击集合icon以浮层形式全部展示出来。
一般把常使用的按钮放于右侧，虽说右侧对用户来说已经增加了点击的成本，但相对于放在左侧来说还算是易点击的区域。
点击可查看大图
3.3、页面固定在页面底部位置
此类一般是页面比较重要的按钮，有强烈意向想要用户去点击的，大多把主要按钮以抢占视觉焦点的形式展示，让用户在该页面一眼就能注意到它。引导用户点击去完成产品任务。如电商应用里的商品详情页，“加入购物车” 和 “立即购买” 按钮；再如电商购物车页面 “去结算” 按钮；
点击可查看大图
3.4、悬浮在页面右侧
此类按钮一般与该页面内容相关性不强，大多作为重要功能或营销活动入口放于首页中，不受页面滚动影响，一直显示在页面中，以吸引用户视觉焦点的形式引导用户去点击。
再一种用的比较多的就是当页面往下滚动到一定距离时，为了便于用户回到首屏的操作，在页面右侧出现的回到顶部悬浮按钮。
点击可查看大图
总结
在做页面设计的时候，按钮的位置要根据具体的使用场景和功能属性进行合适的展示方式。多使用一些优秀的、大客量的产品应用，结合自身产品多思考、多总结，不要只埋头做一些 “我以为” 的设计。
网友评论