一、按钮的几种布局
按钮的布局大致分为四种，分别为：导航栏布局、跟随内容布局、偏向底部布局和底部悬浮布局。
二、导航栏布局
我们平时看到的导航栏布局有很多，如发朋友圈和发QQ动态。
为什么要将「发表」按钮放在导航栏右侧？
以微信朋友圈举例，在发送动态时，核心操作是为照片配文字或继续添加照片。
其他操作例如选择所选位置、提醒谁看、谁可以看，同步到朋友圈，都是次要操作且不会调起键盘。
用户输入文字之后，直接可以点击附近的「发表」按钮，快捷方便。
能否将「发表」按钮放在页面中呢？答案是：不行！
将「发表」按钮放在页面，当输入文字时，会导致键盘遮挡操作按钮，无法快速点击「发表」操作。
除非是「发表」按钮附近有很多需要键盘输入的必填表单，不然不能这么做。目前来看，微信的「发表」按钮的位置设计是最优解。
三、跟随内容布局
常见于表单字段填写时，如下图所示。
那么能不能将操作按钮放在导航栏右侧呢？答案是不行！因为放在导航栏右侧的话，操作路径不顺畅。
放在表单下方是正常的从上往下操作流。
有些设计觉得将按钮底部区域，离大拇指更近，更方便操作，如下图。
但是因为是表单填写，会调起键盘，将提交按钮给挡住，所以按钮跟随表单之后，更加科学。
四、偏向底部布局
偏向底部的操作按钮通常是内容区域不需要调起键盘的使用场景。常见的如引导页或结果页。
五、底部悬浮布局
底部悬浮布局，常用于非填写内容超过一屏或审批等使用场景，特点是操作按钮优先级高，方便用户实时操作。
如下图电商购买按钮。
六、布局总结：
1、填写内容为必填项、需要调起键盘且均集中在页面头部，则操作按钮放在导航栏右侧较合理。
2、填写内容在头部，且调起键盘不会挡住操作按钮，则按钮紧随内容较合理。
3、不需要调起键盘来填写内容，则按钮放在偏向底部比较合理。
4、按钮非常重要，且非填写内容超过一屏时，用底部悬浮布局比较合理。
后记
从这篇文章开始，我尝试写一些工作中很实用且基础的文章。
争取每一篇文章都可以给大家一些收获，这样有助于在工作中使用。
由于每个人的基础不同，基础类和进阶类我尽量都覆盖。
作者：Echo
转载请注明：学UI网》按钮位置如何合理设计？看这篇文章足够了。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
