164743elbagpzrlqa81p3d.png
(540.86 KB, 下载次数: 0, 售价: 4 U点)
from Behance | yuanzi 0410作者 | Luca Longo译文 | ConineAcademy使用户“上钩”的第一步，就是让用户有欲望行动，对产品产生兴趣。但一般人不会轻易对一件不了解的东西有什么反应，这时，CTA转换率就显得很重要。CTA（Call to Action），即用户响应行动或叫用户行为召唤，下面就是行为召唤的一些栗子：
164819bnfzoz7fank616zn.png
(410.47 KB, 下载次数: 0, 售价: 3 U点)
互联网中看不到这些赤果果的召唤文字，但它们隐藏在一个链接、一个图标、一个按钮之中，而正确地设计、使用CTA，会给网站或APP带来很高的转换率。今天，社长就给小伙伴们带来一篇来自Luca Longo的文章，他会告诉大家一个简单到荒谬地提升CTA转换率的界面按钮设计方式。----------今天，我将向你展示我的两个客户：一个电子商务网站和一个手机分析应用，这两个项目使用我的诀窍，在6个月内平均提高了30％的CTA转换率。这里面涉及了很多色彩心理学的东西，但在今天我不会写那些刻板“规则”，我只想向大家展示出我对于这两个CTA按钮项目的一些想法。|| 界面按钮类的用户体验如果我们看一下Gmail的用户体验设计，会发现它的界面风格非常简单，并且看起来像是线框图的第一个阶段。它的设计非常简单，颜色使用也很单一，但很有效。这样极致的用户体验，很难用语言形容。
164842wxlunzlmnnezynze.png
(17.87 KB, 下载次数: 0, 售价: 4 U点)
你看到了那个漂亮的蓝色“Send”按钮吗？在这种情况下，按钮的颜色和位置往往比按钮本身的文本重要。设计师们完全可以使用一个通用符号来代替按钮上的文本，这对用户的操作没有任何的影响。
164904ve6cblppfzcdnluc.png
(54.5 KB, 下载次数: 0, 售价: 3 U点)
事实上，Gmail的移动端版本中，设计师们没有在按钮上添加文本，而是用一个简单的蓝色纸飞机箭头标志与整个页面的剩余部分形成鲜明对比（看上去就像一个按钮），让用户毫无疑问的将其看作主要互动点。|| 如何用按钮抓住用户的注意力在网页界面上设计CTA按钮需要进行一些评估规划，它们必须是你原型设计过程中的一部分，以确保你的设计能够起到有效作用。你可以通过结合色彩研究和设计原则的方法设计CTA按钮来提升网站的转化率。在我的实践中，我经常会从6个关键点出发去完成有效果的设计：❶ 位置（Position）将你的按钮放置在一个突出的位置是非常重要的，因为位置是吸引用户眼球的关键点。在突出位置（分隔出的区域、页面顶端或者中心、页面的边角）放置可以形成网站的高转化率，因为用户有很大几率注意到CTA而采取行为互动。
164920u9oi686vhw6vf62h.jpg
(92.5 KB, 下载次数: 0, 售价: 1 U点)
▲ Dribbble | Josh Hemsley❷ 简化信息或移动端的图标（Clear message or icons for mobile devices）使用正确的语言，用最原始的动词去鼓励行为（例如：购买、观看、下载、测试等等）。根据以往经验，与用户建立信任往往是最大的问题。为了提升点击转化率并建立信任，需要推测用户的疑惑点，并向他们呈现你想表达的元素来告知他们在操作后会得到什么。❸ 形状（Shape）矩形的按钮往往会优于圆形的按钮。
164932f3lb1hbhbgzoo3fe.gif
(79.96 KB, 下载次数: 0, 售价: 3 U点)
▲ Dribbble | Gleb Stroganov❹ 尺寸（Size）某个元素相比其周围元素的大小可以凸显其重要性。记住：尺寸越大，就越重要。区分不同元素的重要性，然后依据它在进行尺寸的规划。❺ 颜色（Coloring）我觉得按钮的颜色是最重要的，因为颜色是直接与用户的心理去互动的。我觉得在按钮设计中理应选择与周围元素和背景高对比度的颜色以达到效果。
164949qpal7dtdu33hhuha.gif
(25.61 KB, 下载次数: 0, 售价: 2 U点)
▲ Dribbble | Gleb Stroganov❻ 提供备选操作选项（Offer alternative actions）网页中一般的会存在多个互动，而为用户提供一些备选的操作方案有的时候是很有必要的，这样可以更有效的说服用户在后续的使用中采取更方便的主要操作方案。
165012xow9rmrz5cwj9e9i.png
(72.13 KB, 下载次数: 0, 售价: 1 U点)
▲ Dribbble | Andrew Lucas|| 色彩心理学现在我有个问题想问你：色彩真的会影响网站转化率吗？有一个众所周知的事实是：不同的颜色会给人带来不同的情绪，因此，看到不同的颜色，人们也会有不同的反应（当然，不同文化中的颜色所带来的也是不一样的），所以，要依据你想表达的情感为你的设计选择颜色。例如：红色：力量、激情、爱情、消极绿色：成长、金钱、环境、积极蓝色：信任、和平、忠诚、安全、积极黑色：正式、奢华、复杂、中性灰色：不完整棕色：户外、食物、地球橙色：信心、快乐、友善紫色：忠诚、神秘、灵性另外记住：颜色的对比很重要！如果你想让某个元素突出，就填充背景的颜色吧！我认为针对较大的按钮尽量不要选择过于突出的颜色（相比较周围的元素和背景），而对于小一点的按钮则最好选择明亮一些的色彩。但是无论你选择哪一种色彩都请记住不要让它影响你的整体设计。
165029ibvr83fq6m1b3v6t.jpg
(16.54 KB, 下载次数: 0, 售价: 6 U点)
记住，对比度不仅仅是色轮上的补充色，它体现的更多是价值。一个亮色调的按钮不会从像暗色调的按钮那样一样亮色调的背景中凸显出来。Bad example:
165040y0wz06o00kvo9z0a.png
(67.36 KB, 下载次数: 0, 售价: 1 U点)
Good example:
165048fjqg27kusx0xgpux.png
(290.01 KB, 下载次数: 0, 售价: 2 U点)
|| 最有效的实践方法现在，我来展示一个简易的按钮设计指导，在为客户制作CTA按钮、表单、弹出窗口等案例中我曾运用过这种方法。就像我之前说过的那样，我将一些颜色归纳到我们最主要的四种情感中去：❶ 积极的（CTA：存储、发送、下载） ➤ 蓝色、绿色❷ 消极的（CTA：删除、组织、重置） ➤ 红色❸ 中性的（CTA：查看更多、备选、寻找） ➤ 黑色❹ 不完整的 ➤ 灰色如果我们在一个白色背景板上呈现这些颜色的按钮，你就更能理解我所说的了：
165106ii2e57uvvl2iwiey.png
(34.07 KB, 下载次数: 0, 售价: 2 U点)
如果屏幕上两个非常相近的按钮相对背景的对比度相同，用户的注意力就将会被混淆。正如你所看到的，色彩在用户体验中扮演了一个关键的角色，因为它可以引导用户进行操作。
165117auuuwtjwb9bouojb.png
(87.86 KB, 下载次数: 0, 售价: 3 U点)
Luca Longo所说的这种简单到荒谬的界面按钮设计方法你get到了吗？现在就行动起来，试试看吧，你能让你的用户行动吗？另：5月17日本周三下午14:00，在酷九公司总部，我们会有一场面向全体UI设计爱好者的线下分享会哦~主讲人：傅译熳老师分享内容：❶ 台上这个人 - 走近设计师傅译熳 ❷ 酷到久的团队 - 了解酷九设计团队 ❸ 故事时间 - 十年经验与你分享 ❹ 职场潜规则 - 未来演习 ❺ 神秘SG计划活动流程：14:00~14:30 公司参观 14:30~15:30 分享会主场 15:30~16:00 交流互动报名地址：https://jinshuju.net/f/Tfx4kR线下地址：江苏省南京市雨花台区花神大道17号华博智慧园B1层酷九设计
165148a3puxr64fud36fdr.png
(151.43 KB, 下载次数: 0, 售价: 1 U点)
|
