建站、小程序开发必备：CTA按钮设计学问

在网络上，如果说客户付款是一项交易的“里程碑”，那么，在付款之前，从设计角度而言，哪一个设计要素，对客户付款的作用最大？

我们认为——是CTA按钮。


什么是CTA按钮？

CTA的全称是call to action，直译过来就是“呼叫行动”，通用的翻译为“行动召唤”。即，点击这一按钮，意味着访客打算与服务商建立某种联系。

CTA按钮，随处可见。

在企业官网，有“在线咨询”按钮，点击进去，就能够与客服在线交流；在小程序商城，有加入购物车、付款等按钮，也是CTA按钮。

这样说，如果一个页面或者平台，没有CTA按钮，就好比超市或者商场没有大门或者是入口。

所以，为网站或者小程序，设计CTA就非常重要。


CTA按钮设计指南

如下，我们将从六个方面来介绍CTA按钮设计的一些的思路。


数量方面。

一个页面应该有几个CTA按钮，设计师往往遵循“单个页面不超过2个”的原则进行设计。

其实这一表述并不准确，准确的表述应该是这样的——针对单一决策的CTA按钮不超过2个。如果一个页面中，有多个事项需要决策，则可能超过2个。

例如，电商商铺，一个页面上的CTA按钮就包括“收藏”“加入购物车”“购买”“咨询客服”等CTA按钮。但是，当我们进入付款页面，CTA按钮就只有“购买”和“暂时放弃”两个。


位置方面。

CTA按钮的位置，应该放在用户视线必经之处。

例如，如果网站BABNER是左右构图，那么，阅读方式是从左至右，CTA应该放在最右边。但是，如果BANNER是上下构图，CTA按钮就应该放在最下方。

为了方便访客找到CTA按钮，可以使用“箭头”等元素，让CTA按钮更为突出。

如果是小程序或者手机网站，CTA按钮应该放拇指区域，方便拇指能够点击到，拇指区域通常是指右下方。


形状方面。

CTA的形状应该保持简单，同时，形状要以圆润设计。

为什么要保持简单呢？是为了避免访客在点击之前有较多的“思考”，进而产生犹豫。

为什么要圆润呢？圆润设计可以避免过于强势，访客更愿意点击。

所以，CTA的形状以圆角矩形为主。


颜色方面。

在颜色方面，为了让CTA的按钮更为醒目，CTA按钮的颜色应该与背景色有较为明显的对比。

但是，我们也发现这样的规律——红、绿、黄等颜色的转化率要高于黑、白、棕。

所以，CTA按钮颜色优先选择前者。


大小方面。

在设计上，有一个设计理念较为倒三角形，从上往下，越来越小。

所以，CTA按钮的大小至少要比上方的内容或图案小一些。

以方维网络的预约咨询页面为例，提交信息的按钮比输入框要小。

 

文字方面。

CTA上面的文字，应该遵循“必要”“简短”“硬气”三个原则。其一，文字是必要的，否则会让访客无所适从；其二，文字要简短，五个字以内。其三，语气要适当强硬一些，可以让用户坚定点击的信念。

综上，使我们在网站设计和小程序开发过程中，就CTA按钮设计总结出来的一些经验之谈，仅供参考。