百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

按钮都设计不好,你还指望用户点击?

haoteby 2025-02-06 14:58 18 浏览

Call to action(行为召唤)按钮以其易于识别和理解的特性,能对你客户产品的用户转化率产生极大影响。当你在设计这些按钮时,有必要考虑许多因素,包括颜色、对比度、按钮文字,甚至包括是否在按钮旁设置方向引导信号。

简言之,对于这种在你网页中只占用极小面积的元素,你绝对是需要投入并不成正比的时间来思考将如何将其最好地呈现给你的用户。没错,call to action按钮就这么重要。拂去浮华,他们就是页面之星,无论他们旨在引导网站访客进行购物、注册还是仅仅只是点击。

他们代表了你页面的目的所在——每一个页面都得有个目的。以登录页为例,它的目的就是引导用户点击至主产品或主服务页面。一个设计过的明智的按钮必定深度考虑过用户需要如何购买或注册某一产品,这也是每一个设计师极致追求的结果。

1.方向引导

作为人类,我们天生就对眼神方向产生心理反应并以此作为有效的引导方式。试想一下:当你看见一个人正在注视着某一你看不见的区域的时候,你会不自觉地感到好奇他正在看什么。这一“方向引导信号”的原理也同样无缝适用于你为客户打造的网站。

是的,方向引导信号可以是明显得无与伦比的大箭头,甚至是直接戳在你call to action按钮上的几根手指,只是为了你网站访客的某种共鸣和独特的体验,你应该换一张某人望向你call to action按钮的照片试试,应该不会有错。

为了更清晰地表述这一点,让我们打开Salesforce的首页。Salesforce是一个来自美国旧金山的全球性的云计算公司。值得一提的是,你可以扫视一下他们首页的这张页头大图——看起来一位女性注视着她的智能手机,正要进行一项手机操作。

这肯定只是一种貌似真实的推测,但这图片还兼顾了另一职能:隐秘而伟大的“方向引导信号”。当网站访客看到图中女性凝视她手中的智能手机时,他们的眼睛也会自然而然地随着她地目光望向页面地右侧。如此一来,他们地目光不可避免地落在了三个位于她脸与手一侧的call to action按钮之上。

拜赐于她目光的指向,用户将更有可能注意到这些call to action按钮。当一天结束,这一设计为该网站带来了更多的用户转化和更高额的销售数字。

2.极简的按钮设计

当你将按钮设计得尽量简洁的时候,你需要消除网站访客、买者和读者将会迷惑的可能性。如果他们感到迷惑,他们通常就不会再按照你所希望的那样来点击按钮了。所以,保持用户按钮设计的极简化是所有网页设计师的目标。

让我们看看Twining的网站是如何用品牌设计来做到这一点的。

在这一首页上,我们可以看到一些用到了品牌颜色的简单按钮,他们简单明了地传达了用户在点击之后可以达成的目的。这些按钮看起来也是个按钮的样子,这归功于他们的圆角矩形设计,并且金底黑字的明确对比让他们达到了极简设计。

简言之,Twining网站的购物者会误解这些call to action按钮功能的可能性将是几乎为0。

3.明确的提示短语

“提示短语”是call to action的明星,因为它使用了行为导向动词来引导人们的行动。网页设计师为按钮设置智能标签的真正价值是十分有限的,因此提示短语一定要简短且直指重点。提示短语的首要目的就是让网站访客清楚地明白他们将要点击是什么,因为这才不会浪费大家的时间。

有时,提示短语会很不幸地被忽视掉。不管有多少关注度被集中在按钮的设计、颜色和功能性上,提示短语也不该轻视。一个网站,提示短语有多糟,用户转化率就有多糟。

你知道当你有彼此相邻而目的不一的call to action按钮时,只有成功设计的提示短语能让你的访客能立刻说出这些按钮的主旨分别是什么。

在 J. Crew的这页销售宽角领衬衫的产品页中可以找到这一有力说明。这里有两个按钮同时吸引买者的注意力:“Add To Bag”和“Add To Wishlist”按钮。

因为这两者都被十分清晰的短语标注了,因此买者才不会感到困惑并能明确无误地达成他们的目的。明确的按钮提示短语总能让用户的行为直达目标,毫无压力,它们是这件事永远的赢家。

4.颜色对比

线上买家是一个不靠谱的群体,这也是为何需要为他们量身定制用户体验设计。换言之,从你客户的电子商务网站中买点啥应该是地球上最简单最清晰的事情。一些类似于最基础的颜色对比设计能极大地为网站访客提高用户体验。

颜色对比设计能吸引你线上买家的眼球到call to action按钮上并让它们从一片喧嚣的页面背景中脱颖而出。当买家们能简单地分辨出在哪儿点击下单时,显而易见,网站的转化率将一路飙升。

在Target的Sony DVD播放器产品页面中,call to action按钮“add to cart”和“find in a store”就使用了颜色对比设计,带来了出色的效果。不光光是因为颜色对比更好分辨——分别有红底白字、蓝底白字,它的成功之处还在于将买家们的注意力拉到了按钮之上。事实是,页面背景中大量的留白让这种对比色设计跳脱得更淋漓尽致。

根本问题

Call to action按钮是你客户的网站能赚多少钱的制胜法宝。所有的网页设计师需要意识到自己的设计目标是应当带来更多转化率。对于电子商务网站,转化率可能来自“Sale”(特卖)活动;对于新闻网站,可能是某事件(如简讯)的签到率,或是“like”(喜欢)按钮。关键是,转化率才是最关键的,所以call to action按钮必须始终以此为重中之重。

这也是为何在call to action 按钮的设计上需要投入大量的深度思考。尽管它们在页面中真的只占用了极小的空间,但其重要性却是不可估量的。任何有关按钮的细节,从颜色、短语到其周遭的引导提示,都将带来或破坏其有效性。

为了更好地为客户着想,设计师有必要不光是专注在这些按钮的外观或版式设计上,而是需在事物实用性的一面看得更深一些:这些设计过的按钮会增加游客点击的可能性并转化为实质操作吗?为客户设身处地着想的设计师应当是被推崇备至的,而那些没能考虑更深的设计师,则需要在每一设计项目中尽力满足客户需求的同时,改善自己的优先考虑顺序。

作者 | Marc Schenker

翻译 | 郭瑽

相关推荐

如何随时清理浏览器缓存_清理浏览器缓存怎么弄

想随时清理浏览器缓存吗?Cookieformac版是Macos上一款浏览器缓存清理工具,所有的浏览器Cookie,本地存储数据,HTML5数据库,FlashCookie,Silverlight,...

Luminati代理动态IP教程指南配置代理VMLogin中文版反指纹浏览器

介绍如何使用在VMLogin中文版设置Luminati代理。首先下载VMLogin中文版反指纹浏览器(https://cn.vmlogin.com)对于刚接触Luminati动态ip的朋友,是不是不懂...

mac清除工具分享,解除您在安全方面的后顾之忧

想要永久的安全的处理掉重要数据,删除是之一,使用今天小编分享的mac清除工具,为您的操作再增一层“保护”,小伙伴慎用哟,一旦使用就不可以恢复咯,来吧一起看看吧~mac清除工具分享,解除您在安全方面的后...

取代cookie的网站追踪技术:”帆布指纹识别”

【前言】一般情况下,网站或者广告联盟都会非常想要一种技术方式可以在网络上精确定位到每一个个体,这样可以通过收集这些个体的数据,通过分析后更加精准的去推送广告(精准化营销)或其他有针对性的一些活动。Co...

辅助上网为啥会被抛弃 曲奇(Cookie)虽甜但有毒

近期有个小新闻,大概很多小伙伴都没有注意到,那就是谷歌Chrome浏览器要弃用Cookie了!说到Cookie功能,很多小伙伴大概觉得不怎么熟悉,有可能还不如前一段时间被弃用的Flash“出名”,但它...

浏览器指纹是什么?浏览器指纹包括哪些信息

本文关键词:浏览器指纹、指纹浏览器、浏览器指纹信息、指纹浏览器原理什么是浏览器指纹?浏览器指纹是指浏览器的各种信息,当我们访问其他网站时,即使是在匿名的模式下,这些信息也可以帮助网站识别我们的身份。...

那些通用清除软件不曾注意的秘密_清理不常用的应用软件

系统清理就像卫生检查前的大扫除,即使你使出吃奶的劲儿把一切可能的地方都打扫过,还会留下边边角角的遗漏。随着大家电脑安全意识的提高,越来越多的朋友开始关注自己的电脑安全,也知道安装360系列软件来"武装...

「网络安全宣传周」这些安全上网小知识你要知道!

小布说:互联网改变了人们的衣食住行,但与之伴生的网络安全威胁也不容忽视。近些年来,风靡全球的勒索病毒、时有发生的电信诈骗、防不胜防的个人信息泄露时时刻刻都威胁着我们的生活。9月18日-24日是第四届...

TypeScript 终极初学者指南_typescript 进阶

在过去的几年里TypeScript变得越来越流行,现在许多工作都要求开发人员了解TypeScript...

jQuery知识一览_jquery的认识和使用

一、概览jQuery官网:https://jquery.com/jQuery是一个高效、轻量并且功能丰富的js库。核心在于查询query。...

我的第一个Electron应用_electronmy

hello,好久不见,最近笔者花了几天时间入门Electron,然后做了一个非常简单的应用,本文就来给各位分享一下过程,Electron大佬请随意~笔者开源了一个Web思维导图,虽然借助showSav...

HTML5 之拖放(Drag 和 Drop)_html拖放api

简介拖放是一种常见的特性,即抓取对象以后拖到另一个位置。在HTML5中,拖放是标准的一部分,任何元素都能够拖放。先点击一个小例子:在用户开始拖动<p>元素时执行JavaScrip...

如何用JavaScript判断输入值是数字还是字母?

在日常开发中,我们有时候需要判断用户输入的是数字还是字母。本文将介绍如何用JavaScript实现这一功能。检查输入值是否是数字或字母...

图形编辑器开发:快捷键的管理_图形编辑工具

大家好,我是前端西瓜哥。...

浏览器原生剪贴板:原来它能这样读取用户截图!

当我们使用GitHub时,会发现Ctrl+V就能直接读取用户剪贴板图片进行粘贴,那么它是如何工作的?安全性如何?...