「CTA行为召唤按钮」设计规则解析

UI栏目  撰稿： Jing（微信公众号：IQS开发者社区）

“按钮”在UI设计中是一种常用的UI控件，一个成功的按钮控件可以有效的提高交互体验，引导用户，提升产品转化率。

目前我们所熟知的按钮按功能类型主要分为六大类：行为召唤按钮（CTA）、悬浮按钮、标签按钮、表格按钮、命令按钮及开关按钮。

 

其中，行为召唤按钮（Call To Action），简称CTA按钮，即用户在访问某页面后引导用户去点击并且跳转至下一个流程（如购买、联系、关注等行为）的一类按钮控件。其主要目的就是为了提高特定页面或屏幕的转化率，从而达到预期设定的结果。

因此，CTA按钮也具有不同于其他种类按钮的特性。那么如何才能设计一个具有行为召唤能力的按钮呢?

 

1. 尺寸

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

 

图1

 

另外，移动端的设计还需要考虑按钮与手指的适配度，为了保证按钮的最佳点击区域，设计师在绘制按钮时要保证其点击范围至少高度要在30px以上，例如主流的参考设计规范：苹果的HIQ中要求CTA按钮至少为44×44px，而微软则建议至少为34×26px。具体的大小还是会根据实际情况而变。