“按钮”在UI设计中是一种常用的UI控件，一个成功的按钮控件可以有效的提高交互体验，勾引用户，提升产品转化率。目前我们所熟知的按钮按功能类型紧张分为六大类，分别是行为召唤按钮（CTA）、悬浮按钮、标签按钮、表格按钮、命令按钮及开关按钮。
个中，行为召唤按钮（Call To Action），简称CTA按钮，即用户在访问某页面后勾引用户去点击并且跳转至下一个流程（如购买、联系、关注等行为）的一类按钮控件，其紧张目的便是为了提高特定页面或屏幕的转化率，从而达到预期设定的结果。因此，CTA按钮也具有不同于其他种类按钮的特性。那么如何才能设计一个具有行为召唤能力的按钮呢?
尺寸
结合CTA按钮的先前目标是吸引用户的把稳，提高转化，因此按钮尺寸越大，它被用户创造和点击的概率就越高，但也不宜过大，以免毁坏布局的视觉组合和层次构造。最好的按钮和按钮笔墨该当遵照页面的比例进行设计，以便用户更好识别。
图1
其余，移动真个设计还须要考虑按钮与手指的适配度，为了担保按钮的最佳点击区域，设计师在绘制按钮时要担保其点击范围至少高度要在30px以上，例如主流的参考设计规范：苹果的HIQ中哀求CTA按钮至少为 44×44 px，而微软则建议至少为34×26 px。详细的大小还是会根据实际情形而变。
图2
色彩
除了通过尺寸差异来营造视觉吸引力外，一个能够勉励用户点击的按钮须要具备的其余一个关键元素便是颜色的选择与利用。好的色彩利用能够从感情与视觉上干预用户，吸引其把稳力。以是设计师在进行按钮设计时，须要考虑到整体的配色方案，使CTA按钮能够在浩瀚UI控件中脱颖而出。
介于文章篇幅缘故原由，简洁明了的来说，我们知道色彩经由色相、明度、纯度的变革与调和，可以产生丰富多样的层次变革，而能够吸引人目光的色彩特性我们可以称之为诱目性。
在能够使诱目性变高的色彩中，与无色彩比拟，有色彩的比较好；与低纯度色比拟，高纯度色的比较好；与低明度色比较，高明度色的较好。
所以为了让CTA按钮的颜色与整体页面形成和谐但又显著的比拟，目前采取最多的设计原则是遵照高反差度原则，即通过合理利用色彩的色相、明度、纯度的比拟办法，来凸显CTA按钮的主要性。
如下图（图3）案例所示，整体界面的色彩选择是白色，如果像左图中按钮依然选择纯度较低的蓝色，不仅会使全体页面显得“轻飘飘”，毫无着落点外，CTA按钮也无法凸显出来，而右图中的按钮不论是在色相还是纯度上都选择了与背景色反差较大的蓝色，直接勾引用户进行点击。
图3
按钮形状
我们常说艺术来源于模拟，设计来源于生活。这句话对付按钮形状的绘制非常适用，由于在现实生活中按钮的利用率也非常高，比如开关灯、开电脑、敲键盘等，以是设计师在设计过程中会吸取现实生活中按钮的形状，择优选择水平矩形或者圆角矩形来表示CTA按钮。
另一方面，一些研究建议圆角矩形更能加强信息的通报并且能够将人的视线集中在中央位置上。
当然我们有时也可以根据自己的创意去利用其他的形状，比如圆形，三角形或者自定义形，但是一定要确保统一性能够把控你的界面设计，以便用户能够识别出这个按钮元素。如下左图所示，在此处利用圆形按钮不仅冲破了页面设计的统一性，而且相较于右图示中的圆矩形按钮提示的浸染也被削弱了不少。
图4
按钮样式
突出的按钮样式，特殊是矩形或圆矩形按钮，利用投影等样式有效还原生活中按钮的样子容貌，提示用户按钮是可以进行点击的。这与扁平化的按钮样式比拟在空间维度上增加了一度，在繁芜或宽裕的空间中更能起到强调的浸染。
图5
但在追寻简洁设计的界面中，有些设计师也会首选扁平化的设计风格，来担保界面的内容设计不被打扰。以是，在这类扁平化的按钮设计中须要把稳的是颜色的筛选与利用，在即担保界面风格统一的情形下，也要担保用户能够顺利的找到按钮元素，担保页面转化的效果。
文本字体
文本内容的字体、大小、粗细等成分都会影响到CTA按钮的视觉权重。一样平常设计遵照高优先级按钮利用粗体文本，低优先级按钮利用细体文本的原则，以此来影响用户阅读它们时的优先级，因此CTA按钮文本只管即便选择粗体文本，诱利用户进行点击，提高转化率。
图6
添加图标
添加图标同样也可以给CTA按钮增加用户额外的视觉重量，提高用户在浏览页面时优先关注的概率，增加CTA按钮的转化效果。如下图的比拟，视觉上会更加直不雅观的把稳到带有图标的按钮。
图7
位置
CTA按钮的设计，可以说是全体页面转化的核心与灵魂，尤其决定了一些付费推广的转化成果。以是撤除按钮本身的设计外，CTA按钮的位置摆放也尤为关键。
一样平常来说按钮的位置与页面内容的繁简程度以及用户行动本钱存在着一定关联性，文本内容愈大略，用户无需理解更多信息或者用户的行动本钱很低乃至没有，用户就越随意马虎在页面浏览之前点击按钮，此时按钮可以放置在页面相对靠前的位置，相反如果用户须要为采纳的行动付出一定代价时，比如给出联系办法、关注、付款等情形下，用户采纳预期CTA行动的韶光就会推后，一样平常会浏览完页面后再进行考量，此时按钮的位置建议放置在浏览页面的下端。
以是CTA的位置随内容的大略到繁芜递降，即从页面上端到页面下端，如图所示：
图8
综上所述，关于如何设计一款真正具有行为召唤的按钮，实现详细的动态行为交互，设计师一方面须要理解CTA的主要性，另一方面更要着重把稳影响其表现的所有细节。
以上关于CTA按钮设计的干系规则，希望可以给大家带来一些参考。
本文由 @IQS开拓者社区 原创发布于大家都是产品经理。未经容许，禁止转载。
题图来自 Unsplash，基于CC0协议
