图形化按钮设计教程（你还差份最全的场景分析）

本篇文章从按钮功能类型和设计要点两个方面进行分析，教大家如何设计好按钮。

按钮在UI设计中是一种常用的UI控件，在界面中作为主要的行动点，引导用户进行相应的操作，它在用户和产品的交互中承担着重要的作用。

按钮设计看似简单，但是如果想要更好的交互体验，引导用户进行相应的操作，提升产品的转化率这仍是我们需要研究的问题。

下面文章将从按钮功能类型和设计要点两个方面进行分析：

一、按钮功能类型

按钮的功能类型往往决定了一个按钮的设计方式，是需要强调还是需要弱化；文案是需要强引导，还是直接阐述功能；按钮上是放图标还是不放图标等。

按钮根据功能的不同，可以分为不同的类型，主要有行为召唤按钮、悬浮按钮、表格按钮、标签按钮、命令按钮、开关按钮这六大类型。

1. 行为召唤按钮

行为召唤（CTA）按钮其目的是诱使用户采取某些操作， 从而提高产品的转行率。

简单来说就是通过设计诱导或激励用户点击按钮，例如立即购买、订阅关注、利益诱导、文字诱导等。

诱导购买

当行为召唤的目的是诱导购买时，按钮的设计不管从颜色、形状、样式都需要突出。让按钮看上去可点击，让用户进来第一眼就能知道该按钮的用途。

以美团外卖为例，该按钮的颜色采用黑黄对比、形状采用具有亲和力的圆角，在样式上加入投影同时加入送餐员的元素，配上小红点，能够清晰的给用户传递出可点击部分有去结算、送餐员。

另外加入价格诱导，让你可直观看到优惠了多少钱，促使你进一步操作。以淘宝详情为例，该按钮是一个组合按钮，由加入购物车和马上抢以及店铺、客服、收藏等组成，作为行为召唤按钮我们可以明确的看到，不管从颜色、形状、样式都能够让我们快速注意到。

订阅关注

当行为召唤的目的是订阅关注时，其重要程度相比诱导购买低很多，但是在设计时我们仍然需要考虑一个问题，这个问题可直接决定该按钮大小、样式等，这个问题就是需要根据产品目的判断是诱导用户订阅关注重要还是让用户阅读内容重要。

如下图所示：

当内容重要时，按钮的设计需要弱化处理，以优酷视频的发现页和星球页为例，这两个页面很明显是以内容为主的界面，在设计时直接弱化了按钮形式，让按钮和整个界面相融合，但是按钮设计的原则是让其看上去像按钮，因此当按钮只是文字时可以加图标进行引导比如优酷视频发现页，也可以加入弱底纹进行引导还能让界面看上去整洁，比如优酷视频星球页面。

当订阅关注重要时，按钮的设计需要强化处理，以橘子娱乐和土豆视频为例，橘子娱乐采用粗描边渐变按钮，同时加入图标进行引导，具有较强的视觉引导作用，很容易唤起用户的关注。土豆视频采用黄色填充加图标引导，在视觉上和产品内容形成强烈对比，明显的以关注为主的界面。

利益诱导

当行为召唤的目的是利益诱导时，该按钮设计根据重要程度较高，因此在设计时可以考虑颜色、形状、加入图标、诱导文字等设计方法。

如下图所示：

以大众点评为例，其领奖按钮明显比赚积分的层级高，因此为了突出领奖按钮采用了色块设计的样式，同时赚积分按钮采用描边设计进行弱化处理。

以腾讯doki为例，其打榜页面冲榜的重要层级较高，因此在设计时不仅采用了色块、加入动效图标、同时还加入了诱导文字，让按钮更明显同时诱导用户点击，其他去浏览按钮则采用描边样式弱化处理。

文字诱导

文字诱导简单来说就是通过文字，诱导用户进行下一步操作，多用于空页面、活动页面中，因此在设计时采用简单的色块填充即可，如果该页面为活动页面也可增加渐变或投影样式，让按钮更有空间感，进而突出按钮。

如下图所示：

以得到为例，当你还没有学习计划时，它会对你进行提示“开始制定学习计划”，同时其按钮采用重要程度较高的色块 投影的方式，诱导用户点击。

以大众点评为例，当你还没有攻略时，它会对你进行提示“我也要创建攻略”，同时其按钮采用渐变填充的方式，诱导用户点击。

2. 悬浮按钮

悬按钮浮是 Android 应用中最常见的一个控件。不过随着Android和iOS规范的不断融合，在iOS中也经常会看到各种各样的悬浮按钮。

在设计上悬浮按钮应该采用显眼的颜色，以抓住用户的注意力。同时它应该是积极正向的交互，比如创建、分享、探索等，同时并不是所有页面都需要加悬浮按钮。

如下图所示：

以UC浏览器为例，悬浮按钮在订阅页面的右下角出现，将按钮和界面结合很容易看出创建内容的意思，同时点击按钮还可呼出图文、视频等操作图标。

3. 标签按钮

标签按钮往往呈多个出现，多使用在二级导航或条件筛选下面；以及表单页面作为切换条件选中。

因此在设计样式上有选中状态和默认状态，同时其重要程度较低，在设计时不能喧宾夺主，需要弱化处理。

如下图所示：

以支付宝为例，它主要用在投保的表单页面，其主要目的就是一个切换条件，重要程度远不及我要投保按钮，因此在设计时默认用的描边处理；选中采用淡淡的色块。

以转转为例，它主要用在导航下方，其主要目的也是切换条件，用户主要操作是看下方筛选出的内容，因此在设计时也进行弱化处理。

4. 表格按钮

表格按钮也就是由一个白色网格加文字组成的按钮，从视觉上看和页面融为一体，特别不突出。

因此多用在个人中心中不太重要信息或者不想让用户操作的退出登录界面中。

如下图所示：

以爱奇艺为例，在我的界面中，关于我们和退出登录都是用的表格按钮，由于关于我们是不太重要信息，退出登录又是不想让用户操作的内容，因此采用表格按钮最为合适。

5.命令按钮

命令按钮也就是该按钮具有明确的指令，多出现在弹框中，通常会有一个文字或2个文字出现的情况。

其要求是文字语义要明确，尽量不要用确定、好的、要等词汇，同时根据用户右手操作习惯居多，因此将重要的按钮放在右侧。

如下图所示：

以京东金融为例，左图是京东金融退出的二次确认页面，右图是我调整文字之后的页面。

我们说到文字需要表意明确，因此将确定换成退出后表意更加直白，降低用户理解度。

6. 开关按钮

开关按钮也是我们很常见的一个组件。表示两种相互对立的状态间的切换，多用于表示功能的开启和关闭。

当按钮开启后可能还会带来其他的相应操作。开关按钮最常见的就是手机设置中，但是也有很多APP将其用到界面中使用。如下图所示：

,