APP页面中按钮位置的解析

在做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、悬浮在页面右侧

此类按钮一般与该页面内容相关性不强,大多作为重要功能或营销活动入口放于首页中,不受页面滚动影响,一直显示在页面中,以吸引用户视觉焦点的形式引导用户去点击。

再一种用的比较多的就是当页面往下滚动到一定距离时,为了便于用户回到首屏的操作,在页面右侧出现的回到顶部悬浮按钮。

点击可查看大图

总结

在做页面设计的时候,按钮的位置要根据具体的使用场景和功能属性进行合适的展示方式。多使用一些优秀的、大客量的产品应用,结合自身产品多思考、多总结,不要只埋头做一些 “我以为” 的设计。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342