为吸引用户而存在：界面中CTA按钮的设计有何讲究

APP网站这样的数字产品中所包含的效的交互系统，通常由包含不同任务功能的小元素组合到一起的。让整套交互系统无缝顺畅运行起，细节的把控非常必的。

在诸多交互控件，按钮是最常见，也是最核心交互元素，它概念自于现实世界，它存在历史几乎和GUI历史样长。按钮设计得好不好，对于整UX的转化率言，非常直接的影响。网页APP的界面设当中，影响用户体验转化率的CTA按钮，在很多情况，CTA按钮都被UX设计师和和UI设计师推崇，被视为许多UI/UX解决方案中的最佳实践。今天的章，我们来就来简单探讨一CTA按钮的相问题。

什么CTA按钮？它何如此重？
为吸引用户而存在：界面中CTA按钮的设计有何讲究

CTA 是 Call to action 的缩写，中通称之为行为召唤，CTA按钮即为行为召唤按钮。当设计师有意识地通设计去引导甚至诱导用户去执行特定的操，诸点击按钮、留下联络方式或者生购买行为，是行为召唤。

传统的CTA按钮很容易被注意到，设计师故意创这种“醒目”的面，要的就是户抑制住点击的冲。为了达到这样的目的，设计师通会在按钮上搭配特定的行为召唤语，如“了解更多”或者“现在购”，或明或暗地鼓励、推户执行操作。

行召唤这一UX设手段的主目的就催交互、行，提升转化，达业务目标。当一按钮设得足够吸引潜用户注意力的时候，它就具备了引导用户入下一阶段的可能性了。当用户选择点击按钮，填写表单，下单购买的时候，这CTA的目的就达到了。

为吸引用户而存在：界CTA按钮设计有何讲究

通过这一个一个行为召唤的计，用户在网站和APP中逐步入不同的阶段，进入不同的环节，了解产品，选择服，执行操作，完成任。即使是最专业最优质的内容也无法保证用户刻保持高度参，如果没有CTA按钮，用户可能只是简扫一眼，然后离开。正如同常说的，这个息爆炸的年代香也怕巷深。

有人能认为，一个够优的CTA按钮只需要尺寸够大彩够亮就行，际不，想要证行为召唤的转化率，需要考虑的方方面面并不少。

为吸引户而存在：界面中CTA按钮的设计有何讲究

哪些因素就了CTA按钮？
尺寸
过尺寸大小来划分元素要性是UI设计常用手段。元素越大，要性越高，这个逻辑很明晰。由于CTA 按钮目标是引起用户注意，此设计师常需要让它在和其他屏幕按钮、元素比时候足够突出，而增加按钮尺寸是个很显著法。

从机率上来说，大按钮通常会比按钮更容易被用户注，被点击。不过，按钮总不能无限制地放大吧？在放大按钮的同，你需要让它和整个布局之间保持协调，避免整体的层次结构被破坏。如果你不知道要如何控制大，那可以参考主流的计规范：苹果的HIQ中要求CTA按钮至少为 44×44 px，而软则建议至少为34×26 px。

为吸引用户而存在：界面中CTA按钮的设计有何讲究

色彩和形状
通过尺寸差异来营造视觉吸引力只是CTA能做做的一个方面。为了让按钮足够清晰显著，在色彩和形状上的选择，同重要。人类在色彩和形状上的知同是非常显著的，只不过在日常生活中往往不会注这些反馈。当的视觉知形状和色彩所构成的视觉号之，号传递大脑，大脑会向神经传递出不同的号，泌出荷尔蒙，在负责情绪和情的域作出不同的反馈。心理学认为，不同的色彩和形状对于大脑有着不同的响。在之前的文章中，对于这些内容有所涉及，下面是相关的总结：

彩的含义：

红色：自信，青春，热情，量
橙色：友善，力充沛，热情
黄色：乐，乐观，温暖，警告
绿：和平，成长，健，自
蓝色：信任，安全，稳定
紫色：豪华，创意，智慧，神秘
黑色：可靠，高贵，复杂，经验丰，专业
白色：简单，纯洁，冷静，纯粹
形状的含义：

方形和矩形：量，纪律，勇气，全，可靠
三角形：兴奋，风险，危险，衡，稳定
圆形椭圆：永恒，女性化，宇宙，魔法，神秘
抽象图形：双关，唯一，精心
传统CTA 按钮常都会选择矩形，为这样按钮更加符合们于按钮概念常规认知。而如今，更多设计规范会议使用圆矩形CTA按钮，为这样按钮会更加内化感觉，让更在意其按钮标签内容，从而提升按钮被击率。

色彩的选取则相对更复杂，这涉及整个计的方方面面。计需要考虑整体的配色方案、用户的潜在偏好和心理征等因素。当然，最关键的一点还是按钮的色彩要和背景有显著的对比，能让CTA按钮在UI控件中容易脱颖而出。

为吸引用户而存在：界面中CTA按钮的设计有何讲究

位置
位置的选择对于CTA 按钮同是至关重要的。因为不同的位置对于用户而言有着巨大的差别，地段不好，在骚的色彩，再漂亮的外形，一不会被注。

大量的研究表明，用户在浏览网页之前，通快速的扫视来寻找他们感兴趣的内容，考虑到一点，设计师以将最突出的、用户最容易扫视到的位置，放置上期望用户点击的CTA按钮。

户研究领域的先驱 Nielsen Norman Group 曾经针对这一户行为进行了深入的研究，为设计师和可性设计专们供了更好的素材和设计依据。

简言之，当人们访问某网站的时候，尤其初次访问网站的时候，他们通常不会特别仔细的查看所的内，速的扫视，找到能够吸引他们注意力的信息，这些内就他们继续停留这网站的理由。通过眼动测试不同实验，他们发访问者的视觉浏览模式，可以归结几种典型的模式。设师 Steven Bradley 自己的文章中，总结了这三种常见的模式：古腾堡式，Z图模式F图模式。

于信息结构层并不那么分明网页，用户常常会使用腾堡浏览模，用户大范围扫视页内容，个视线路径是个大号Z，其最开始两个视觉驻留在页头上。

Z图模式也不难理解，用户从上下，视线沿着Z字形来回扫视，用户会左右快速扫视，视线的起点首先是左上角，行跨顶部一栏右上角，然后向下延伸。

F图模式，或者说是F式局，我们就更加熟悉。在Nielsen Norman Group 的研究当中，种阅读模式最为典型：

户先会着水平方向浏览，优先浏览容的上，这个时候的眼构成了字母F 最上面一横。
下来视线会沿着屏幕左侧向下垂直扫视，寻找段落中能引起兴趣点的内容，当发现引起兴趣的内容之，继续横向仔细浏览，而通常这些内容对应的视线范围会比第一次横向浏览的范畴要更一些，而这个视线轨迹则构成了字母F 中间的一横。
接下用户会将视线移到屏幕左侧，继续向下浏览。
F图模式常见博客、新闻类信息量大的网站。

了解了户的阅读模式之后，CTA按钮的放置位置应该就难决定了。顶和都是户实现必经的位置，放置在页面的中央可，无论在F图模式、Z图模式还是古腾堡式中，户都会扫过这个位置。当然，你得他的UI元素要干扰到CTA按钮。

吸引用户存：界面中CTA按钮的设何讲究

微文案
微案在CTA按钮中的作，表现得越来越显著了。微案是UI中见的那些小的本，它们简练清晰地指明功，给予户示，驱交互。更具体地说，微案包括按钮上的标签，错误信息，全说明，术语和条款，及产中见的各种示。

微文案CTA按钮中绕不的组部分。设优秀的微文案让CTA按钮指向性明确，可以速吸引用户的注意力。

为吸引用户而存在：界CTA按钮设计有何讲究

结语
对于电商类的应用网站言，CTA按钮无疑强的售具之一，屏幕内的转化率 息息相关。意识到CTA按钮的重性，能针对性设。