按钮位置如何合理设计?看这篇文章足够了。

2022-9-16    seo达人


一、按钮的几种布局

按钮的布局大致分为四种,分别为:导航栏布局、跟随内容布局、偏向底部布局和底部悬浮布局。

图片图片

 

二、导航栏布局

我们平时看到的导航栏布局有很多,如发朋友圈和发QQ动态。

图片

为什么要将「发表」按钮放在导航栏右侧?

以微信朋友圈举例,在发送动态时,核心操作是为照片配文字或继续添加照片。

其他操作例如选择所选位置、提醒谁看、谁可以看,同步到朋友圈,都是次要操作且不会调起键盘。

用户输入文字之后,直接可以点击附近的「发表」按钮,快捷方便。

能否将「发表」按钮放在页面中呢?答案是:不行!

图片

将「发表」按钮放在页面,当输入文字时,会导致键盘遮挡操作按钮,无法快速点击「发表」操作。

除非是「发表」按钮附近有很多需要键盘输入的必填表单,不然不能这么做。目前来看,微信的「发表」按钮的位置设计是最优解。

 

三、跟随内容布局

常见于表单字段填写时,如下图所示。

图片

那么能不能将操作按钮放在导航栏右侧呢?答案是不行!因为放在导航栏右侧的话,操作路径不顺畅。

放在表单下方是正常的从上往下操作流。

有些设计觉得将按钮底部区域,离大拇指更近,更方便操作,如下图。图片

但是因为是表单填写,会调起键盘,将提交按钮给挡住,所以按钮跟随表单之后,更加科学。

 

四、偏向底部布局

偏向底部的操作按钮通常是内容区域不需要调起键盘的使用场景。常见的如引导页或结果页。

图片

 

五、底部悬浮布局

底部悬浮布局,常用于非填写内容超过一屏或审批等使用场景,特点是操作按钮优先级高,方便用户实时操作。

如下图电商购买按钮。

图片

 

六、布局总结:

1、填写内容为必填项、需要调起键盘且均集中在页面头部,则操作按钮放在导航栏右侧较合理。

2、填写内容在头部,且调起键盘不会挡住操作按钮,则按钮紧随内容较合理。

3、不需要调起键盘来填写内容,则按钮放在偏向底部比较合理。

4、按钮非常重要,且非填写内容超过一屏时,用底部悬浮布局比较合理。

 

后记

从这篇文章开始,我尝试写一些工作中很实用且基础的文章。

争取每一篇文章都可以给大家一些收获,这样有助于在工作中使用。

由于每个人的基础不同,基础类和进阶类我尽量都覆盖。


作者:Echo

转载请注明:学UI网》按钮位置如何合理设计?看这篇文章足够了。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



分享本文至:

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档