按钮设计看似简单，只需要画个矩形框然后填色即可，但是在设计时根据按钮的功能不同，设计方式也有差异，另外按钮的一些设计细节很容易被忽略。本文主要将从按钮功能类型和设计要点两个方面进行分析，从而对按钮设计进行全面的了解。
按钮功能类型
按钮功能类型主要包括行为召唤按钮、表格按钮、标签按钮、命令按钮、悬浮按钮、开关按钮。
1. 行为召唤按钮
1）诱导购买
美团外卖的结算按钮的颜色采用黑黄对比、形状采用具有亲和力的圆角，在样式上加入投影同时加入送餐员的元素，配上小红点，另外加入价格诱导，让你可直观看到优惠了多少钱，促使你进一步操作。
淘宝详情的加入购物车和马上抢是一个组合按钮，作为行为召唤按钮我们可以明确的看到，不管从颜色、形状、样式都能够让我们快速注意到。
3）利益诱导
大众点评领奖按钮明显比赚积分的层级高，因此为了突出领奖按钮，采用了色块设计的样式，同时赚积分按钮采用描边设计进行弱化处理。
4）文字诱导
文字诱导简单来说就是通过文字，诱导用户进行下一步操作，多用于空页面、活动页面中，因此在设计时采用简单的色块填充即可，如果该页面为活动页面也可增加渐变或投影样式，让按钮更有空间感，进而突出按钮，如下图所示。
2. 悬浮按钮
悬按钮浮是Android应用中最常见的一个控件。不过随着Android和iOS规范的不断融合，在iOS中也经常会看到各种各样的悬浮按钮。在设计上悬浮按钮应该采用显眼的颜色，以抓住用户的注意力。同时它应该是积极正向的交互，比如创建、分享、探索等，如下图所示。
3. 标签按钮
标签按钮往往呈多个出现。在使用时可以将他看成一种筛选条件，采用该设计方式可减少用户操作步骤，提高操作效率。不过标签的重要程度仍然较低，在设计时需要弱化处理，如下图所示。
支付宝投保页面，为了帮助用户快速做出选择，采用了标签的设计方式，由于其重要程度不及我要投保高，因此在设计时默认用的描边处理；选中采用较浅的色块。
转转产品列表页，筛选条件下方也采用了标签设计，由于用户主要目的还是浏览商品，因此标签按钮样式默认采用浅灰色，选中效果为较浅的色块加描边。
4. 表格按钮
表格按钮是由一个白色网格加文字组成，从视觉上看和页面融为一体，特别不突出。因此多在个人中心设置页面想要弱化按钮的情况使用，如下图所示。
淘票票影院介绍页面底部设置了给影院提建议和信息纠错，很明显不需要引导用户操作，设计时采用表格按钮将其弱化处理。
5. 开关按钮
开关按钮是两种相互对立状态间的切换，多用于功能的开启和关闭。当按钮开启后可能还会带来其他的相应操作。开关按钮多用在设置界面，但是也有很多APP将其用到界面中使用，如下图所示。
美团外卖提交订单界面中的号码保护就采用了开关按钮，相比其他滑动选择的交互状态来说，开关按钮无意可以减少操作步骤，提高操作效率。
小猪短租的提交订单界面中是否需要发票也采用了开关按钮，当开启按钮会展开提示你去填写信息，当关闭按钮提示信息隐藏，相比于其他选择控件，这里用开关按钮更为合适。
按钮设计要点
上面总结了五大功能按钮的表现形式和使用场景，当然要设计出一个引导性好的按钮，我们还需要掌握一些细节，比如颜色、形状、状态、位置等。
1. 颜色
Keep首页的查看计划按钮直接采用主题色，不仅可以起到很好的强调作用，同时和界面风格也比较协调；UC浏览器小视频的我来拍按钮采用了邻近色绿色渐变来强调，引导用户拍摄小视频。天猫购物选择尺码标签按钮默认状态采用灰色，突出当前选中状态。
2. 形状
在按钮设计时，需要根据整个界面风格设计合适的按钮，按钮样式主要有直角、小圆角、全圆角、异形四种样式。
直角的含义：严谨、力量、高端。适用于金融类、奢品类产品中，让产品给人严谨安全、高端的感觉。比如寺库的按钮设计。
全圆角的含义：活泼、年轻、安全。适用于儿童类、年轻化、娱乐类、购物类的产品中，提升亲和力，拉近用户的距离。比如土豆的按钮设计。
异形按钮的含义：不稳定、活泼、另类。适用于需要用户做出选择的场景中，比如招商银行话题PK的按钮设计。
3.状态
在部分界面设计中需要考虑按钮的状态设计，从而提高用户操作流畅度。移动端完整的系统按钮可以分为正常状态、按压状态、禁用状态。
其中，正常状态和加载状态展示的是APP的主色；按压状态在正常态的基础上叠加15%的黑色；禁用状态一般是灰色或者将正常态降低45%的透明度，该状态多用于提交表单按钮，比如登陆注册、转账等，如下图所示。
京东金融转账页面，当未输入转账金额时，按钮禁用为灰色，当输入金额时按钮为正常状态，在操作中大家发现京东金融没有按压状态，这是因为随着网络的发展，宽带速度越来越高，按压状态显得没有必要。
3.位置
根据费茨定律可知，按钮位置越近用户所需的时间就越短，因此Keep的开通会员按钮置于底部离用户手指最近。
淘宝详情的立即购买按钮置于界面右侧，其一是为了视觉平衡，其二是人的使用习惯是先点右侧按钮。
画重点
3.提交表单按钮可设计按钮正常、禁用状态，避免用户错误操作。
参考链接：
学习按钮设计，看这篇就够了！http://t.cn/Rn86MOJ
7个按钮设计基本规则http://t.cn/Eq6mG8R
更多内容可查看我的新书《UI那些事儿》，书中有更多的组件分析技巧~
