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

按钮设计看似简单，只需要画个矩形框然后填色即可，但是在设计时根据按钮的功能不同，设计方式也有差异，另外按钮的一些设计细节很容易被忽略。本文主要将从按钮功能类型和设计要点两个方面进行分析，从而对按钮设计进行全面的了解。
一、按钮功能类型
按钮功能类型主要包括行为召唤按钮、表格按钮、标签按钮、命令按钮、悬浮按钮、开关按钮。
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所有，转载文章仅为传播更多信息之目的，如有侵权，请联系我们删除；如作者信息标记有误，请联系我们修改。）

当前名称：网页制作如何做好按钮设计
链接分享：https://www.cdcxhl.com/news/113557.html

成都网站建设公司_创新互联，为您提供标签优化、App设计、商城网站、外贸网站建设、网站内链、建站公司

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联