行为召唤按钮的功能都有哪些类型?

来源：千锋教育

发布人：xqq

时间： 2023-10-16 08:30:42

一、行为召唤按钮的功能的类型

1、诱导购买

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

美团外卖的结算按钮的颜色采用黑黄对比、形状采用具有亲和力的圆角，在样式上加入投影同时加入送餐员的元素，配上小红点，另外加入价格诱导，让你可直观看到优惠了多少钱，促使你进一步操作。淘宝详情的加入购物车和马上抢是一个组合按钮，作为行为召唤按钮我们可以明确的看到，不管从颜色、形状、样式都能够让我们快速注意到。

2、订阅关注

当行为召唤的目的是订阅关注时，其重要程度相比诱导购买低很多，但是在设计时我们仍然需要考虑一个问题，是用户关注更重要还是用户阅读内容更重要。当内容重要时，按钮的设计需要弱化处理，比如优酷星球;当点击关注重要时，按钮的设计需要强化处理。

优酷的星球主要引导用户去阅读内容，感兴趣你就关注，因此在设计时对关注按钮进行了弱化处理，让按钮和界面融合。土豆视频关注界面的目的就是引导用户关注。因此按钮设计较为明显，采用黄色填充加图标引导，在视觉上和产品内容形成强烈对比。

3、利益诱导

当行为召唤的目的是利益诱导时，可以考虑颜色、形状、加入图标、诱导文字等设计方法引导用户点击。

大众点评领奖按钮明显比赚积分的层级高，因此为了突出领奖按钮，采用了色块设计的样式，同时赚积分按钮采用描边设计进行弱化处理。腾讯doki打榜页面冲榜的重要层级高，因此在设计时不仅采用了色块、加入动效图标、同时还加入了诱导文字，让按钮更明显同时诱导用户点击，其他按钮则采用描边样式弱化处理。

4、文字诱导

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

以得到为例，当你还没有学习计划时，它会对你进行提示“开始制定学习计划”，同时其按钮采用重要程度较高的色块+投影的方式，诱导用户点击。以大众点评为例，当你还没有攻略时，它会对你进行提示“我也要创建攻略”，同时其按钮采用渐变填充的方式，诱导用户点击。

二、行为召唤按钮的设计规则

1、尺寸

结合CTA按钮的先前目标是吸引用户的注意，提高转化，因此按钮尺寸越大，它被用户发现和点击的概率就越高，但也不宜过大，以免破坏布局的视觉组合和层次结构。较好的按钮和按钮文字应该遵循页面的比例进行设计，以便用户更好识别。

2、色彩

除了通过尺寸差异来营造视觉吸引力外，一个能够激励用户点击的按钮需要具备的另外一个关键元素就是颜色的选择与运用。好的色彩运用能够从情绪与视觉上干预用户，吸引其注意力。所以设计师在进行按钮设计时，需要考虑到整体的配色方案，使CTA按钮能够在众多UI控件中脱颖而出。

3、按钮形状

我们常说艺术来源于模仿，设计来源于生活。这句话对于按钮外形的绘制非常适用，因为在现实生活中按钮的使用率也非常高，比如开关灯、开电脑、敲键盘等，所以设计师在设计过程中会吸取现实生活中按钮的形状，择优选择水平矩形或者圆角矩形来表示CTA按钮。另一方面，一些研究建议圆角矩形更能加强信息的传递并且能够将人的视线集中在中心位置上。

4、按钮样式

突出的按钮样式，特别是矩形或圆矩形按钮，利用投影等样式有效还原生活中按钮的模样，提示用户按钮是可以进行点击的。这与扁平化的按钮样式对比在空间维度上增加了一度，在复杂或宽裕的空间中更能起到强调的作用。

5、文本字体

文本内容的字体、大小、粗细等因素都会影响到CTA按钮的视觉权重。一般设计遵循高优先级按钮使用粗体文本，低优先级按钮使用细体文本的原则，以此来影响用户阅读它们时的优先级，因此CTA按钮文本尽量选择粗体文本，诱使用户进行点击，提高转化率。

6、添加图标

添加图标同样也可以给CTA按钮增加用户额外的视觉重量，提高用户在浏览页面时优先关注的概率，增加CTA按钮的转化效果。如下图的对比，视觉上会更加直观的注意到带有图标的按钮。

7、位置

CTA按钮的设计，可以说是整个页面转化的核心与灵魂，尤其决定了一些付费推广的转化成果。所以除去按钮本身的设计外，CTA按钮的位置摆放也尤为关键。

延伸阅读1：按钮简介

“按钮”在UI设计中是一种常用的UI控件，一个成功的按钮控件可以有效的提高交互体验，引导用户，提升产品转化率。目前我们所熟知的按钮按功能类型主要分为六大类，分别是行为召唤按钮（CTA）、悬浮按钮、标签按钮、表格按钮、命令按钮及开关按钮。

声明：本站稿件版权均属千锋教育所有，未经许可不得擅自转载。