第一站 - 轻松上网从此开始!

上网第一站

当前位置: > SEO >

虚拟按钮设计:真的还要怀疑它的价值吗?(2)

时间:2018-01-17 14:59来源:我来投稿获取授权
以下内容来自网络或网友投稿,www.swdyz.com不承担连带责任,如有侵权问题请联系我删除。投稿如果是首发请注明‘第一站首发’。如果你对本站有什么好的要求或建议。那么都非常感谢你能-联系我|版权认领
笔者认为,虚拟按钮最适合于专业的商业网站。商业网站的价值是展现公司信息,而不在于大色块、吸引眼球的功能按钮。虚拟按钮在用户浏览信息时并不

笔者认为,虚拟按钮最适合于专业的商业网站。商业网站的价值是展现公司信息,而不在于大色块、吸引眼球的功能按钮。虚拟按钮在用户浏览信息时并不碍眼,一旦用户决定进行某项操作,就能通过虚拟按钮触达。

 尺寸

当在Web设计中引入行为召唤时,一定要考虑到最理想的尺寸,尤其是在M站。是不是太小了,用户看不到?是不是太大了,太突兀了?是否适合点击呢?如果使用传统按钮,则很难找到一个安全尺寸,因为可能会给用户带来不必要的干扰。

但对于虚拟按钮,尺寸就不是个头疼的问题了,比如Samsung。

虚拟按钮设计:真的还要怀疑它的价值吗?

Sansung的M站上大大的虚拟按钮

看这个按钮多大!但它影响到你阅读信息和观看有趣的底图了吗?LG使用的是实心按钮。

LG使用的是实心按钮。

虚拟按钮设计:真的还要怀疑它的价值吗?

LG的M网上小小的实心按钮

由于要填充醒目颜色,因此相比于Samsung,LG的按钮在尺寸上明显缩减很多。

 减少与其他元素的冲突

有时,你可能不希望行为召唤元素过于醒目。当然,根本目标是让用户点击按钮完成转化,但在这之前,我们可能希望用户先阅读按钮周围的信息。比如Asana的例子。

虚拟按钮设计:真的还要怀疑它的价值吗?

Asana网站上的虚拟按钮

按钮并不是必须在最醒目的位置,特别是当文字和图片给出明确指引的情况下。

动画

如果页面看上去死板,那选择动画总是明智的。动画既能给用户带来小惊喜,还能保证页面逻辑的一致性。虚拟按钮和动画细节结合,常常事半功倍。

虚拟按钮设计:真的还要怀疑它的价值吗?

Smashing Magazine将动画和虚拟按钮结合使用

正如示例中展示的,动画为用户提供了操作确认和反馈,好像在说“看哪,这确实是个按钮,点一下试试,会出现什么”。

Haruki的网站,也是虚拟按钮和动画结合的范例。

虚拟按钮设计:真的还要怀疑它的价值吗?

Haruki Murakami使用动画激励用户

这个设计方案的目的不在于操作反馈,而是在页面切换时自然过渡,让用户保持注意力。

多节点的行为召唤

通常,我不建议多节点的行为召唤,尤其在移动端设计上,空间已经很局限了,给用户过多选择会有问题。然而,虚拟按钮就不会造成拥挤和选择困难,因为他们占用的空间很小,通常不会干扰页面其他元素。

虚拟按钮设计:真的还要怀疑它的价值吗?

Turbo Tax的多节点行为召唤

看看顶级网站是如何使用两个行为召唤的呢?橘黄色的按钮是第一个行为召唤,虚拟按钮是第二个。

Google Maps也提供了好的示范。

虚拟按钮设计:真的还要怀疑它的价值吗?

Google Maps的持续行为召唤

本例中的两个并排按钮不一定是主选项和副选项,但当两个外观相似的按钮并排放置时,虚拟按钮的作用是作为对比,凸出另一个按钮。

Apple也经常使用虚拟按钮,在下面这个例子中,虚拟按钮的功能是切换tab。

虚拟按钮设计:真的还要怀疑它的价值吗?

Apple使用虚拟按钮作为tab标题

当页面或tab非选中时,虚拟按钮能指示非选中状态。

虚拟按钮测试

已经分析了虚拟按钮的优势和劣势,但在实际中,要如何应用虚拟按钮呢?虚拟按钮能产生实际的转化吗?有如下几个相关的测试:

测试1:SEEK的测试

用户体验设计师兼研究员Kayla J. Heffernan测试虚拟按钮是否真如设计师认为的那么糟糕。SEEK针对虚拟按钮作为再次召唤按钮,进行了如下的A/B测试:

虚拟按钮设计:真的还要怀疑它的价值吗?

SEEK在再次召唤按钮上的测试

在这次测试中,她惊奇的发现,蓝色的实心按钮和虚拟按钮的转化效果在前两名。排除了紫色和灰色方案后,她做了第二组A/B测试。

虚拟按钮设计:真的还要怀疑它的价值吗?

SEEK对比蓝色实心按钮和蓝色虚拟按钮

在测试最后,Kayla和她的团队再次发现蓝色的实心按钮和蓝色的虚拟按钮的转化效果基本相同,分别为14%和13.1%。

测试2:TruConversion的着陆页按钮

在着陆页上有如下三种不同的行为召唤按钮:

一个大的、绿色的“Claim Your Free Copy”按钮;

一个小的、黑色的“Claim Your Free Copy”按钮;

一个小的、黑色轮廓、红色文本的“Look Inside”按钮;

虚拟按钮设计:真的还要怀疑它的价值吗?

TruConversion对三个按钮进行测试

TruConversion想知道这些按钮的转化效果,它利用热点地图来确定哪个按钮受关注最多。

虚拟按钮设计:真的还要怀疑它的价值吗?

TruConversion使用热点地图确定结果

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发布者资料
第一站编辑 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2012-05-22 19:05 最后登录:2014-08-08 03:08
栏目列表
推荐内容
分享按鈕