网页制作如何做好按钮设计

按钮设计看似简单，只需要画个矩形框然后填色即可，但是在设计时根据按钮的功能不同，设计方式也有差异，另外按钮的一些设计细节很容易被忽略。本文主要将从按钮功能类型和设计要点两个方面进行分析，从而对按钮设计进行全面的了解。
一、按钮功能类型
按钮功能类型主要包括行为召唤按钮、表格按钮、标签按钮、命令按钮、悬浮按钮、开关按钮。
1. 行为召唤按钮
行为召唤（CTA）按钮其目的是通过设计诱导或激励用户点击按钮，从而达到产品的目的。主要包括诱导购买、订阅关注、利益诱导、文字诱导四种。
1）诱导购买
当行为召唤的目的是诱导购买时，按钮的设计不管从颜色、形状、样式都需要突出。让按钮看上去可点击，让用户进来第一眼就能知道该按钮的用途，如下图所示。

美团外卖的结算按钮的颜色采用黑黄对比、形状采用具有亲和力的圆角，在样式上加入投影同时加入送餐员的元素，配上小红点，另外加入价格诱导，让你可直观看到优惠了多少钱，促使你进一步操作。
淘宝详情的加入购物车和马上抢是一个组合按钮，作为行为召唤按钮我们可以明确的看到，不管从颜色、形状、样式都能够让我们快速注意到。
2）订阅关注
当行为召唤的目的是订阅关注时，其重要程度相比诱导购买低很多，但是在设计时我们仍然需要考虑一个问题，是用户关注更重要还是用户阅读内容更重要。当内容重要时，按钮的设计需要弱化处理，比如优酷星球；当点击关注重要时，按钮的设计需要强化处理，比如土豆视频，如下图所示。
优酷的星球主要引导用户去阅读内容，感兴趣你就关注，因此在设计时对关注按钮进行了弱化处理，让按钮和界面融合。
土豆视频关注界面的目的就是引导用户关注。因此按钮设计较为明显，采用黄色填充加图标引导，在视觉上和产品内容形成强烈对比。
3）利益诱导
当行为召唤的目的是利益诱导时，可以考虑颜色、形状、加入图标、诱导文字等设计方法引导用户点击，如下图所示。
大众点评领奖按钮明显比赚积分的层级高，因此为了突出领奖按钮，采用了色块设计的样式，同时赚积分按钮采用描边设计进行弱化处理。
腾讯doki打榜页面冲榜的重要层级最高，因此在设计时不仅采用了色块、加入动效图标、同时还加入了诱导文字，让按钮更明显同时诱导用户点击，其他按钮则采用描边样式弱化处理。
4）文字诱导
文字诱导简单来说就是通过文字，诱导用户进行下一步操作，多用于空页面、活动页面中，因此在设计时采用简单的色块填充即可，如果该页面为活动页面也可增加渐变或投影样式，让按钮更有空间感，进而突出按钮，如下图所示。
得到的学习计划界面为空时，为了促进用户进行下一步操作，它的按钮文字“开始制定学习计划”直接诱导用户制定，同时其按钮采用重要程度较高的色块+投影的方式，诱导用户点击。
大众点评我的攻略界面为空时我想低价做一个网站？几百元可以做网站吗？，为了让用户创建攻略，它的按钮文字“我也要创建攻略”直接诱导用户创建，同时其按钮采用渐变填充的方式，诱导用户点击。
2. 悬浮按钮
悬按钮浮是Android应用中最常见的一个控件。不过随着Android和iOS规范的不断融合，在iOS中也经常会看到各种各样的悬浮按钮。在设计上悬浮按钮应该采用显眼的颜色，以抓住用户的注意力。同时它应该是积极正向的交互，比如创建、分享、探索等，如下图所示。
UC浏览器的悬浮按钮采用蓝色背景和添加图标，具有很强的提示作用，点击按钮即可呼出对应的发布图文或者视频的功能。
3. 标签按钮
标签按钮往往呈多个出现。在使用时可以将他看成一种筛选条件，采用该设计方式可减少用户操作步骤，提高操作效率。不过标签的重要程度仍然较低，在设计时需要弱化处理，如下图所示。
支付宝投保页面，为了帮助用户快速做出选择，采用了标签的设计方式，由于其重要程度不及我要投保高，因此在设计时默认用的描边处理；选中采用较浅的色块。
转转产品列表页，筛选条件下方也采用了标签设计，由于用户主要目的还是浏览商品，因此标签按钮样式默认采用浅灰色，选中效果为较浅的色块加描边。
4. 表格按钮
表格按钮是由一个白色网格加文字组成，从视觉上看和页面融为一体，特别不突出。因此多在个人中心设置页面想要弱化按钮的情况使用，如下图所示。
微信设置界面切换账号和退出登录由于不是核心操作按钮，同时为了和界面表格协调，设计时采用表格按钮将其弱化处理。
淘票票影院介绍页面底部设置了给影院提建议和信息纠错，很明显不需要引导用户操作，设计时采用表格按钮将其弱化处理。
5. 开关按钮
开关按钮是两种相互对立状态间的切换，多用于功能的开启和关闭。当按钮开启后可能还会带来其他的相应操作。开关按钮多用在设置界面，但是也有很多APP将其用到界面中使用，如下图所示。
美团外卖提交订单界面中的号码保护就采用了开关按钮建筑公司网站制作，相比其他滑动选择的交互状态来说，开关按钮无意可以减少操作步骤，提高操作效率。
小猪短租的提交订单界面中是否需要发票也采用了开关按钮，当开启按钮会展开提示你去填写信息，当关闭按钮提示信息隐藏，相比于其他选择控件，这里用开关按钮更为合适。
二、按钮设计要点
上面总结了五大功能按钮的表现形式和使用场景，当然要设计出一个引导性好的按钮，我们还需要掌握一些细节，比如颜色、形状、状态、位置等。
1. 颜色
颜色是最容易感知到的对比方式，不同的颜色会给用户不一样的心理预期，在设计时按钮颜色主要有主题色、强调色、辅助色。主题色多用于需要强调的行为召唤按钮、悬浮按钮、开关按钮中；强调色多用于需要拉开主次关系的按钮组中企业网站建设，一般采用主题色的对比色彩或者邻近色；辅助色多用于默认状态或不可点击的状态中，如下图所示。
Keep首页的查看计划按钮直接采用主题色，不仅可以起到很好的强调作用，同时和界面风格也比较协调；UC浏览器小视频的我来拍按钮采用了邻近色绿色渐变来强调，引导用户拍摄小视频。天猫购物选择尺码标签按钮默认状态采用灰色，突出当前选中状态。
2. 形状
在按钮设计时，需要根据整个界面风格设计合适的按钮，按钮样式主要有直角、小圆角、全圆角、异形四种样式。

直角的含义：严谨、力量、高端。适用于金融类、奢品类产品中，让产品给人严谨安全、高端的感觉。比如寺库的按钮设计。
小圆角的含义：稳定、中性。适用于用户跨度较大的常规类产品中，比如微信的按钮设计。
全圆角的含义：活泼、年轻、安全。适用于儿童类、年轻化、娱乐类、购物类的产品中，提升亲和力，拉近用户的距离。比如土豆的按钮设计。
异形按钮的含义：不稳定、活泼、另类。适用于需要用户做出选择的场景中，比如招商银行话题PK的按钮设计。
寺库奢侈品类电商，它的按钮采用直角设计，刚好可体现奢侈品的高端性；微信的用户群体上到七八十岁，下到几岁其年龄范围广，因此采用稳重的小圆角较为稳妥。土豆短视频用户群体较为年轻活泼，因此采用全圆角较为适合；招商银行话题PK采用异形的设计，会给用户不稳定和另类的感觉，从而引导用户参与。
3.状态
在部分界面设计中需要考虑按钮的状态设计，从而提高用户操作流畅度。移动端完整的系统按钮可以分为正常状态、按压状态、禁用状态。

其中，正常状态和加载状态展示的是APP的主色；按压状态在正常态的基础上叠加15%的黑色；禁用状态一般是灰色或者将正常态降低45%的透明度，该状态多用于提交表单按钮，比如登陆注册、转账等，如下图所示。
京东金融转账页面，当未输入转账金额时，按钮禁用为灰色，当输入金额时按钮为正常状态，在操作中大家发现京东金融没有按压状态，这是因为随着网络的发展，宽带速度越来越高，按压状态显得没有必要。
4.位置
按钮位置往往对主操作按钮较为重要，在设计时需要考虑以引导用户、方便用户点击为目的。主操作按钮的主要主要有三种，即固定在底部、页面跟随、将希望用户操作的按钮置于按钮组右侧。
根据费茨定律可知，按钮位置越近用户所需的时间就越短，因此Keep的开通会员按钮置于底部离用户手指最近。
饿了么的新增地址界面按钮跟随在信息后面，用户看完信息即可点击保存，需要注意当表单信息较多时，也推荐采用固定到底部的方式减短用户操作成本。
淘宝详情的立即购买按钮置于界面右侧，其一是为了视觉平衡，其二是人的使用习惯是先点右侧按钮。
三、画重点
1.当行为召唤的目的是诱导购买时，按钮的设计不管从颜色、形状、样式都需要突出。让按钮看上去可点击，让用户进来第一眼就能知道该按钮的用途。
2.当行为召唤的目的是点击按钮为主时，按钮需要强调处理，比如采用主题色、强调色、添加图标等方式；当目的是浏览内容为主时，按钮可弱化处理，比如按钮采用浅色、灰色。
3.提交表单按钮可设计按钮正常、禁用状态，避免用户错误操作。

4.将主操作按钮固定在界面的底部，按钮组中希望用户点击的按钮置于右侧。

（郑重声明：本文版权归原作者海盐社风筝KK所有，转载文章仅为传播更多信息之目的，如有侵权，请联系我们删除；如作者信息标记有误，请联系我们修改。）

，