按钮设计,看这篇文章就够了

按钮设计看似简单,只需要画个矩形框然后填色即可,但是在设计时根据按钮的功能不同,设计方式也有差异,另外按钮的一些设计细节很容易被忽略。本文主要将从按钮功能类型和设计要点两个方面进行分析,从而对按钮设计进行全面的了解。

按钮功能类型

按钮功能类型主要包括行为召唤按钮、表格按钮、标签按钮、命令按钮、悬浮按钮、开关按钮。

 

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.将主操作按钮固定在界面的底部,按钮组中希望用户点击的按钮置于右侧。 
 
参考链接:
学习按钮设计,看这篇就够了!http://t.cn/Rn86MOJ
7个按钮设计基本规则http://t.cn/Eq6mG8R

 

原文地址:海盐社(公众号)

作者:风筝KK

 

0

评论0

站点公告

 

AI创作与绘画大师,国内版chatGPT在线版本免费使用哦

点击打开: https://ai.uiya.cn

   
显示验证码
没有账号?注册  忘记密码?

社交账号快速登录

微信扫一扫关注
如已关注,请回复“登录”二字获取验证码