赞助商
立即赞助

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

UI设计3年前 (2021)更新 流光
1.8K 0 0

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按钮的重性,能针对性设。

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

为空页,简单理解就是当前页面内容为空白,分别会在初次使用、完成或清空内容、出错的情况下出现。本文将简要阐述关于「腾讯...
ui设计
设计师的主要职责之一,就是为产品定制合理的视觉,基于目标用户的特征和产品的设计目标,给用户特定的感觉。UI和UX设计师需...
ui设计
大家好,这里是 TCC 翻译情报局,我是李泽慧。2020 年,新冠疫情席卷全球,后疫情时代的需求也促使设计师们不断提出更有意义...
ui设计
最近支付宝变更了主色,将本来的天蓝色变更成了深蓝色,相信大家都已经在各个平台的推送新闻中关注到这个消息,我们来看看色...
logo设计
编者按:完整的 UI 设计流程到底是怎样的?从需求到产品上线,要经历多少个阶段,每个阶段有哪些应该掌握的基础知识,本次优...
ui设计
图标在产品中的应用非常重要,不同位置的图标有不同的设计思路。本文将从产品和设计两个角度对底部导航栏的图标进行分析。阅...
ui设计
通过APP来构建面向用户的解决方案,是目前企业常见的思路。相比于移动端网站,APP有着功能更加强大的框架和针对性更强的特点...
App设计
9月4日,Google 终于发布了Android 10的正式版本。此前的内测阶段它一直以 Android Q 的名字示人,无论是交互、使用体验的优...
Android 10