关灯
开启左侧

CTA按钮的设计技巧

[复制链接]
Chloe 发表于 2018-6-4 17:07:33 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
 
按钮是用户界面的核心交互组件,它在用户体验以及网站和应用程序的转换方面发挥着重要的作用。UI按钮根据其功能而有所不同,可以分为不同的类型。今天我们来讲讲 CTA(Call to Action)按钮的设计技巧,里面涵盖了他们的本质。在直观导航中的作用以及业务目标的重要性。让我们看看是什么让CTA按钮脱颖而出,从中学习最好的做法。

附件1

附件1


什么是CTA按钮?
用户响应行动(CTA)按钮是web网络和移动用户界面的互动元素:其主要目标是诱使用户采取某些操作,为特定页面或屏幕提供转换,例如购买,联系,订阅等。
传统上,CTA按钮很容易被注意到。设计师故意以这种方式创建它们,以至于人们忍不住点击它。这就是为什么他们按钮通常是大胆的,其中包含特定的号召性用语(例如“了解更多”或“立即购买”),它鼓励我们推动它。
潜在客户的生成和购买是可以创建号召性行动的基本业务目标。当一个按钮设计足够吸引潜在客户的注意力时,它可以吸引他们点击并进入下一个阶段,比如填写一个简短的联系表单或进行预定的一个产品。

图片20.jpg

尺寸
大小是帮助按照其重要性划分UI组件的最常用工具之一。元素越大,它变得越明显。由于CTA的先前目标是吸引用户的注意力,因此设计师通常会试图让它们在屏幕上相比其他按钮中脱颖而出,尤其是通过显着的尺寸。
大按钮有很高的机会被发现和点击,但你必须保持一些限制。一个引人注目的号召性用语按钮通常足够大,可以快速找到,但不会太大,以免布局的视觉组合和层次结构受到破坏。市场领导者通常会在其准则中提供有关按钮有效大小的建议。例如,苹果公司表示,移动用户界面中的CTA应至少为44×44像素。

图片21.jpg

颜色和形状
视觉上有吸引力-尺寸只是强大CTA的一个方面。为了让按钮更明显,选择颜色和形状也非常重要。人的情绪和行为与视觉环境高度相关。我们的思维对颜色和形状也有反应,但我们通常不会注意到它。当我们的眼睛感觉到一种颜色时,它们与大脑相连,这个大脑向内分泌系统发出信号,释放荷尔蒙,负责情绪和情绪的转变。心理科学有不同的颜色和形状影响我们意识的具体分支。以下是关于颜色和形状的常见含义。

图片22.jpg

颜色含义:
红色:自信,青春和力量。
橙色:友善,温暖,充满活力。
黄色:幸福,乐观和温暖。
绿色。和平,成长和健康。
蓝色:信任,安全和稳定。
紫色:豪华,富有创意,明智。
黑色:可靠,复杂,经验丰富。
白色:简单,冷静,干净。

形状含义:
正方形和矩形:纪律,力量,勇气,安全性,可靠性。
三角形:兴奋,风险,危险,平衡,稳定。
圆圈,椭圆和椭圆:永恒,女性,宇宙,魔法,神秘。
抽象形意义:意义的二重性,唯一性,精心制作。

图片23.jpg

传统上,CTA按钮看起来像水平矩形,因为人们习惯将这种形状视为可点击的按钮。此外,建议设计具有圆角的CTA,因为它们被认为是指向按钮内部的注意力的复制。
颜色的选择取决于使过程更加复杂的各个方面。设计师需要考虑这些因素,如作品的基本色彩,以及目标受众的潜在偏好和心理特征。在为CTA选择颜色时有一个条件非常重要:按钮和背景颜色应该足够对比,以便CTA能够从其他UI组件中脱颖。

图片24.jpg

位置
CTA按钮的放置位置对其性能至关重要。如果他们位于用户眼睛无法捕捉到的区域,则其他视觉方面(如颜色和尺寸)可能无法有效工作。但是如何理解什么样的位置更加妥当?
许多研究表明,在阅读网页之前,人们会扫描它以了解他们是否感兴趣。考虑到这一事实,设计人员可能会了解最突出的可扫描区域,并将呼叫行为置于用户的路径中。

图片25.jpg

根据包括Nielsen Norman Group,UXPin团队等在内的不同研究报告,网页上有几种流行扫描模式,其中包括“F”和“Z”模式。
对于包含大量内容的网页,例如博客,新闻平台,F-模式是最常见的。用户首先扫描屏幕顶部的水平线,然后向下移动页面并读取,通常覆盖较短区域的水平线。最后一个是在副本左侧的垂直线,在段落的初始句子中查找关键字。
Z-模式是一种典型的扫描着陆页或未加载副本的网站的模型,并且不需要向下滚动页面,这意味着所有核心数据在预滚动区域中都可见。用户首先从左上角开始扫描页面顶部,寻找重要信息,然后下到相反的对角,结束页面底部的水平线,再从左到右对。
这些模式允许设计师将CTA放置在最受关注的位置,如顶角,并将其他要点注意的点放在顶部和底部线上。另外,将CTA按钮放置在布局的中心是一个好主意,尤其是当它不与其他UI元素过载时。

图片26.jpg

界面
号召性用语按钮是电子商务中功能最强大的销售工具之一,也是影响页面或屏幕转换效果的重要因素之一。设计师需要了解CTA的重要性,并深切关注影响其表现的所有细节。

文章转自网络,如有侵权,请联系删除。


图片19.jpg
 

精彩评论1

正序浏览
得尧美 发表于 2018-9-16 20:35:02 | 显示全部楼层
 
回不回呢,考虑再三,还是不回了吧。












专注源码:www.kubuku.net
 
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


0关注

4粉丝

23帖子

排行榜
关闭

站长推荐上一条 /1 下一条

官方微信

全国服务热线:

400-0708-360

公司地址:国家西部信息安全产业基地(成都市高新区云华路333号)

邮编:610000    Email:2908503813@qq.com

Copyright   ©2015-2016  EOIT论坛Powered by©Discuz!    ( 蜀ICP备11000634号-7 )