UI设计中强大的CTA按钮设计
作者：优漫动游设计部
2023-06-01 17:45
查看: 333
数字产品的有效交互系统由具有其任务和功能的小元素组成。为了制作一个足够的系统，关注所有细节是至关重要的。
按钮是用户界面的核心交互组件，在质量UX以及网站和应用程序的转换率方面发挥着重要作用。用户界面按钮根据它们的特点而有所不同，可以分为不同的类型。一篇新文章专门介绍了称为号召性用语(CTA)按钮的类型，涵盖了它们的本质、在直观中的作用导航，以及的重要性商业目标.让我们看看是什么让号召性用语设计从从最佳实践中学习的人群中脱颖而出。
什么是CTA按钮，为什么它很重要？
号召性用语(CTA)按钮是任何Web和移动用户界面的交互元素：其主要目的是促使人们采取某些行动转换对于特定页面或屏幕，例如购买、联系、订阅等。
传统上，有效的号召性用语按钮很容易被注意到，更重要的是，设计师故意以这种方式创建它们，以便人们无法抗拒点击。这就是为什么它们通常是包含带有特定号召性用语（例如“了解更多”或“立即购买”）的缩微文案的粗体按钮，鼓励我们推动它。
潜在客户生成和购买增加是可以创建号召性用语的基本业务目标。当按钮设计足够引人注目以立即吸引潜在客户的注意力时，它可以吸引他们点击并进入下一阶段，例如填写简短的联系表格或预订产品。
通过这种方式，网站访问者和应用程序用户可以通过销售渠道从一个阶段进入另一个阶段，帮助他们了解有关产品或服务的详细信息。即使是专业制定的内容也可能无法保证高水平的用户参与。如果没有CTA按钮，人们更有可能快速浏览内容而保持原样。
有些人可能认为，足够的号召性用语按钮设计仅适用于大尺寸和明亮的颜色来实现其所有目标。尽管如此，确保CTA的有效性还有很多方面。让我们看看它们是什么以及它们适当用法的实际示例。
是什么造就了强大的CTA按钮设计？
尺寸
大小是帮助根据重要性划分UI组件的最常用工具之一。一个元素越大，它就越引人注目。由于CTA的先前目标是吸引用户的注意力，因此设计师通常会尝试使它们在屏幕上的其他按钮中脱颖而出，尤其是通过明显的尺寸。
大按钮有很高的机会被注意到并被点击，你仍然必须保持一些限制。一个引人注目的号召性用语按钮通常足够大，可以快速找到，但又不会太大，以免破坏布局的视觉组成和层次结构。市场领导者经常在其指南中提供有关按钮有效尺寸的建议。例如，Apple表示移动UI中的CTA至少应为44Х44像素，而Microsoft建议使用34Х26像素。
颜色和形状
具有视觉吸引力的尺寸只是强大的号召性用语按钮设计的一方面。为了使按钮更加引人注目，选择足够的按钮至关重要颜色和形状.问题是人类的情绪和行为与视觉环境高度相关。我们的大脑会对颜色和形状做出反应，而我们通常不会注意到它。当我们的眼睛感知颜色时，它们会与大脑连接，大脑会向内分泌系统发出信号，释放负责情绪和情绪变化的激素。心理学有专门的分支专门研究不同颜色的影响并塑造我们的意识。在我们之前的文章中，我们描述了这种影响对设计解决方案的作用。以下是关于颜色和形状具有的共同含义的简要指南。
颜色含义：
红色。自信、青春和力量。
橙色。友好、温暖、充满活力。
黄色。幸福、乐观和温暖。
绿色。和平、成长和健康。
蓝色。信任、安全和稳定。
紫色。奢华、创意、智慧。
黑色。可靠、成熟且经验丰富。
白色。简单，平静，干净。
形状含义：
正方形和长方形的含义：纪律、力量、勇气、安全、可靠。
三角形含义：兴奋、风险、危险、平衡、稳定。
圆形、椭圆形和椭圆形的含义：永恒、女性、宇宙、魔法、神秘。
抽象塑造意义：意义的二重性、独特性、精致性。
传统上，CTA按钮看起来像水平矩形，因为人们习惯于将这种形状视为可点击的按钮。此外，建议设计带有圆角的CTA，因为它们被认为是指向按钮内部，从而引起对副本的注意。
颜色选择取决于使过程更加复杂的各个方面。设计师需要考虑构图的基本色彩以及目标受众的潜在偏好和心理特征等因素。在为CTA选择颜色时，必须牢记一个条件：按钮和背景颜色应具有足够的对比度，以便CTA从其他UI组件中脱颖而出。
放置
CTA按钮的位置对其功能至关重要。如果它们位于用户眼睛无法看到的区域，则其他视觉方面（例如颜色和大小）可能无法有效工作。但是如何理解什么位置比较旺呢？
许多研究表明，在阅读网页之前，人们会先浏览网页以了解他们是否感兴趣。考虑到这一事实，设计人员可以了解最突出的可扫描区域并将号召性用语放在用户的路径中。
根据不同的研究，包括NielsenNormanGroup、UXPin团队等的出版物，有几个流行的扫描模式用于网页，其中“F”和“Z”图案。
F模式最常见于具有大量内容的网页，例如博客、新闻平台。用户首先扫描屏幕顶部的水平线，然后稍微向下移动页面并阅读水平线，水平线通常覆盖较短的区域。最后一个是副本左侧的垂直线，他们在段落的初始句子中寻找关键字。
Z-pattern是一种典型的扫描着陆页或网站的模型，没有加载副本并且不需要向下滚动页面，这意味着所有核心数据都在预滚动区域可见。用户首先从左上角开始扫描页面顶部，寻找重要信息，然后以对角线向下到对角线，以页面底部的水平线结束，再次从左到正确的。
这些模式允许设计师将CTA放置在最受关注的位置，例如顶角，并将其他需要关注的点放在顶部和底部线。此外，将CTA按钮放置在布局的中心是一个好主意，尤其是当它没有被其他UI元素过载时。
显微镜
微文案在号召性用语的效率方面发挥着重要作用。它被定义为文本作为用户的提示。更具体地说，微文案包括按钮和菜单副本、错误消息、安全说明、条款和条件，以及有关产品使用的任何类型的说明。
CTA微文案实际上是一个调用，告诉用户如果点击按钮他们将采取什么行动。强大的CTA微文案通常简短但一致，因此可以快速吸引用户的注意力。
号召性用语按钮是电子商务中最强大的销售工具之一，也是页面或屏幕良好转换的影响因素。设计人员需要了解CTA的重要性，并深入关注影响其性能的所有细节。
广州优漫动游教育UI培训，系统学习，融会贯通，直奔主流技术，节省时间，老师督促指导，学习效率高，随堂练习，及时解决问题，企业IT大牛指导实战落地项目，与企业需求无缝连接，签订就业协议，诸多合作名企，4个月后直接走向工作岗位，避免工作后的水土不服。高薪名企有增加！
预约申请试听课
填写下面表单即可预约申请试听！怕钱不够？可就业挣钱后再付学费！ 怕学不会？助教全程陪读，随时解惑！
担心就业？一地学习，可全国推荐就业！
-
上一篇：
-
下一篇：
IT培训问答
开班时间
