干货!不得不知的UI界面中“行为召唤按钮”设计秘诀

熵桥潮汐
• 阅读 2177

以下内容由Mockplus团队翻译整理,仅供学习交流。

干货!不得不知的UI界面中“行为召唤按钮”设计秘诀

数字产品的有效交互系统由具有其任务和功能的小元素组成。为了建立丰富的交互系统,关注所有小元素的设计细节至关重要。

按钮是用户界面的核心交互组件,它在质量用户体验以及网站和应用程序的转换率方面发挥着重要作用。UI按钮根据其功能的不同,可以分为不同的类型。本篇文章致力于讲解“行为号召(CTA)按钮”,涵盖了他们的本质,在直觉导航中的角色以及它在业务目标中的重要性。让我们一起来看看是什么让CTA按钮从最佳实践中脱颖而出。

干货!不得不知的UI界面中“行为召唤按钮”设计秘诀

Photo App

什么是行为号召按钮?为什么它如此重要?

行为号召(CTA)按钮是网页和移动用户界面中的常见互动元素:其主要目标是诱使用户采取某些操作,为特定页面或屏幕呈现转化,例如购买,联系 ,订阅等。

传统上,CTA按钮很容易被注意到,甚至有很多,设计者故意这样创建它们,以使人们无法抗拒点击它。这也是为什么它们通常都是以粗体字体呈现的原因,按钮中包含了一种特殊的行为召唤(例如:“学习更多”或“现在购买”),这就鼓励我们主动去点击它。

潜在客户的生成和购买是创建号召性行动的基本业务目标。当一个按钮设计足够吸引潜在客户的注意力时,它可以吸引他们点击并进入下一个阶段,比如填写一个简短的联系表单或提交产品的预订。

干货!不得不知的UI界面中“行为召唤按钮”设计秘诀

数字机构的着陆页

通过这种方式,网站访问者和应用用户可以通过销售渠道从一个阶段引导到另一个阶段,帮助他们了解有关产品或服务的详细信息。即使是专业制作的内容也可能无法保证用户的高度参与度。如果没有CTA按钮,人们更有可能只是快速扫描内容,然后置之不顾。

有些人可能认为足够的“行为号召按钮”设计仅适用于大尺寸和鲜艳的颜色,以实现其所有目标。不过,事实并非如此,确保CTA的有效性还有很多其它方面。让我们看看他们适当使用的实际例子。

干货!不得不知的UI界面中“行为召唤按钮”设计秘诀

Urban Sketcher App

是什么造就了强大的CTA按钮?

尺寸

尺寸大小是帮助按照其重要性划分UI组件的最常用工具之一。元素尺寸越大,它就变得越明显。由于CTA的先前目标是引起用户的注意,因此设计师通常会试图让它们在屏幕上的其它按钮中脱颖而出,特别是通过显著的尺寸差别。

尺寸大的按钮有很高的机会被发现和点击,但你也必须保持一些限制。一个引人注目的“行为号召按钮”通常是足够大,可以被快速找到,但不能太大,以免布局的视觉组合和层次结构受到破坏。市场领导者通常会在其准则中提供有关按钮有效大小的建议。例如,苹果公司表示,移动用户界面中的CTA按钮应至少为44×44像素,而微软推荐至少为34×26像素。

干货!不得不知的UI界面中“行为召唤按钮”设计秘诀

Tasty Burger App

颜色和形状

视觉上有吸引力的尺寸只是强大CTA的一个方面。为了让按钮更明显,选择丰富的颜色和形状至关重要。事实表明人的情绪和行为与视觉环境是高度相关的。我们的思维对颜色和形状有反应,但我们通常不会注意到这些细节。当我们的眼睛察觉到某一种颜色时,它们与大脑相连,同时大脑向内分泌系统发出信号,释放荷尔蒙,负责心情和情绪的变化。心理科学对不同的颜色和形状是如何影响我们的意识有着具体的分支研究。在我以前的文章中,我描述了这种影响对设计解决方案的作用。以下是关于颜色和形状具有的常见含义的简要指南。

颜色含义:

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

正方形和矩形的含义:纪律,力量,勇气,安全性,可靠性。
三角形含义:兴奋,风险,危险,平衡,稳定。
圆形,卵形和椭圆形的含义:永恒,女性,宇宙,魔法,神秘。
抽象形意义:二重性,唯一性,精心制作。
传统上,CTA按钮看起来像水平矩形,因为人们习惯将这种形状视为可点击的按钮。此外,建议设计具有圆角的CTA,因为它们被认为是具有吸引内部注意力的按钮。

颜色的选择取决于使设计过程更复杂的各个方面。设计师需要充分考虑以下这些因素,如作品的基本色彩,以及目标受众的潜在偏好和心理特征。在为CTA选择颜色时有一个条件非常重要:那就是按钮和背景颜色应该足够鲜明,以便CTA可以从其他UI组件中脱颖而出。

干货!不得不知的UI界面中“行为召唤按钮”设计秘诀

约会APP着陆页

放置

CTA按钮的放置对他们的性能至关重要。如果他们位于用户眼睛无法捕捉到的区域,则其他视觉方面(如颜色和尺寸)可能无法有效工作。但是如何理解什么样的位置更加有效呢?

大量研究表明,在阅读网页内容之前,人们会扫描它以了解他们是否感兴趣。考虑到这一事实,设计人员可能会了解最突出的可扫描区域,并将行为号召按钮置于用户的可视路径中。

根据不同的研究,包括尼尔森诺曼集团,UXPin团队等发表的文章表明,网页有几种流行的扫描模式,其中包括“F”和“Z”模式。

对于包含大量内容的网页,例如博客,新闻平台,F模式是人们最常见的扫描模式。用户首先扫描屏幕顶部的水平线,然后向下移动页面并读取通常覆盖较短区域的水平线。 最后一个是在左侧的垂直线,在那里,用户在段落的初始句子中查找自己感兴趣的关键字。

Z模式是一种典型的扫描着陆页或未加载副本的网页的模式,并且不需要向下滚动页面,这意味着所有的核心数据在预滚动区域中都可见。用户首先从左上角开始扫描页面顶部,寻找重要信息,然后下到另一侧的对角,结束在页面底部的水平线,然后再次从左到右开始。

这些模式允许设计师将CTA放置在用户最受关注的位置,例如顶角,并将其他要点注意力放在顶部和底部。另外,将CTA按钮放置在布局的中心也是一个好方法,尤其是当它不与其他UI元素信息过载的时候。

干货!不得不知的UI界面中“行为召唤按钮”设计秘诀

Gourmet 网页

Microcopy

Microcopy在行为号召的效率方面发挥着重要作用。它被定义为帮助用户做某些操作的小段文字文本提示。更具体地说,它包括按钮和菜单副本,错误消息,安全说明,条款和条件,以及任何类型的产品使用说明。

CTA Microcopy实际上是一个可以迅速让用户豁然开朗的被小看的元素,它告诉用户如果点击按钮他们将触发什么。强大的CTA Microcopy通常很短但一致,因此可以快速吸引用户的注意力。

干货!不得不知的UI界面中“行为召唤按钮”设计秘诀

Bright Vibe 日历

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

原文作者:Tubik Studio

原文地址:https://uxplanet.org/call-for...

点赞
收藏
评论区
推荐文章
blmius blmius
4年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
雷厉风行 雷厉风行
2年前
Mac系统最佳原型设计软件:Axure RP 9,让您的想法变为现实,完美下载
AxureRP9forMac是一款全功能的原型设计工具,由AxureSoftwareSolutions公司开发。该软件主要用于设计和创建交互式的原型和文档,支持团队协作,在MacOS系统上使用。AxureRP9forMac具有丰富的视觉化和交互性设计功能,可以帮助设计师、产品经理和开发者更快地创建高质量的原型和文档。
Stella981 Stella981
4年前
JavaScript
Javascript简介web前端有三层:HTML:从语义的角度,描述页面的结构CSS:从审美的角度,描述样式(美化页面)Javascript:从交互的角度,描述行为(提升用户体验)JavaScript的组成ECMAScript5.0:定义了js的语法标准:包含变量、表达式、元素符、函数、i
Stella981 Stella981
4年前
Duang,HUAWEI DevEco IDE全面升级啦
想感受全新UI带来的视觉及交互体验、HiKey970开发板调测、HiAIAPI推荐和收藏、深度AI模型分析等新功能,体验高清晰度和流畅度的远程AI真机调测吗?!(https://oscimg.oschina.net/oscnet/f4e1bb24ff00b8c6ea27f75370a53bfbacd.jpg)全新的UI设计
绣鸾 绣鸾
2年前
Principle for Mac动画交互设计工具
Principle是一款Mac平台上的动画和交互设计工具,主要用于创建高质量的用户界面和用户体验。它提供了直观的界面和易于使用的操作方式,可以让设计师快速创建复杂的动态原型和交互式应用程序,并实现精美的动画效果。Principle支持多种常见的设计元素,如
绣鸾 绣鸾
2年前
Experience Design for Mac( XD ) v57.1.12.2 中文版
是Adobe公司推出的一款专业的用户体验设计软件。XD旨在帮助用户创建交互式的原型、用户界面和用户体验设计。XD提供了一个直观的界面,让用户可以轻松地设计和布局网页、移动应用和其他数字界面。它具有强大的设计工具,包括画板、图层、文本和形状工具,使用户可以创
想天浏览器 想天浏览器
2年前
信息搜索:全文搜索功能是网站运营的助力点
产品界面通常采用高信息密度和高交互密度的设计,这是为了满足用户对多功能和复杂业务的需求。为了使用户能够快速获取所需信息并完成任务,产品中广泛使用各种搜索功能,无论大小都会有搜索功能,以提高用户的信息获取和消费效率。而全文搜索是搜索功能中体验更好的一种模式。
体验问题哪里找?点击链接获取答案~ | 京东云技术团队
用户体验(UserExperience,简称UX)是指用户在与产品、系统或服务进行交互的过程中所产生的主观感受和情感反应。它涵盖了用户对产品或服务的使用过程中所体验到的方方面面,包括界面设计、交互流程、功能性、易用性、可靠性、响应速度、视觉美感等。
铁扇公主 铁扇公主
2年前
Mac上好用的原型设计软件Axure RP 9介绍
AxureRP9是一款功能强大的原型设计工具,它可以帮助用户创建交互式原型、流程图、线框图等,以便于设计和测试网页和移动应用程序。AxureRP9的主要功能包括:1.创建原型设计:该软件提供了丰富的用户界面元素、交互动画和效果,用户可以使用这些元素创建交互