欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

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

发布时间:2018:01:17 17:05:08 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1591个文字,预计阅读时间4分钟
导语
逻辑上,虚拟按钮可能并不适合于Web设计;然而对用户来说,可能并不是那么回事。

 逻辑上,虚拟按钮可能并不适合于Web设计;然而对用户来说,可能并不是那么回事。

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

尽管是一个设计细节,但按钮设计确实起着举足轻重的作用。按钮是用户访问的最重要入口,也是转化的触发动作。如果在按钮设计上有明显的败笔,那基本要和老板说再见了。

尽管我们对全局按钮的设计已经有了很好的理解,但有时,仍会诧异于某些非常规按钮的巨大作用,比如虚拟按钮。

虚拟按钮并不神秘,尽管听起来怪怪的(Ghost Button)。对Web来说,虚拟按钮起到行为召唤(CTA)的作用。

虚拟按钮的最大特征就是外观。从下图Dropbox的案例中,我们能看出传统按钮和虚拟按钮的区别。

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

Dropbox的购买提醒页有两个虚拟按钮

中间的蓝色按钮是我们习惯了的标准的实心按钮,两侧的透明按钮就是虚拟按钮。

从逻辑上讲,虚拟按钮似乎并不适合于Web设计,因为它们并不是有形的或者明确可以点击的,它们还缺少传统按钮的那些引人注目的元素。然而研究表明,对用户来说,可能并不是这样。

这篇文章的目的,是想通过具体案例讨论虚拟按钮的优缺点,以给产品经理和交互设计师以帮助。

虚拟按钮是什么

Web设计博主们写了大量的文章来探讨如何设计更好用的按钮。在这些指导意见中,博主们试图回答那些困扰着产品经理、交互设计师和开发工程师的问题:

  • 哪种颜色最有吸引力?甚至什么才是真正有价值的注意力?
  • 按钮尺寸应该多大?尺寸的影响大吗?
  • 按钮里的文案该怎么写?
  • 放在按钮周围的文案应该是什么样的?
  • 移动端和M站的按钮设计是一样的吗?要根据拇指的操作区域进行调整吗?

不管你如何看待Web设计中的虚拟按钮,当你设计按钮时,都会问到以上问题。

先来看下虚拟按钮的优缺点。

虚拟按钮的缺点

简单

之所以行为召唤要使用醒目颜色,就是因为要引导用户的视觉流,让用户的视线聚焦在目标区域。但对于虚拟按钮,只有按钮轮廓和里面的文字有颜色。正因为有颜色的区域很少,所以虚拟按钮很难吸引用户注意力,动画或者醒目的图形等其他元素会让用户忽视虚拟按钮的存在。

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

Elevated Third的A/B测试

我认为Elevated Third做的A/B测试是一个很好的例子,它证明了无论在网页还是电子邮件中,虚拟按钮都无法给人留下深刻印象。

用户习惯

当用户想进入下一页或者进行下一个操作步骤时,他们已经习惯于寻找传统的填充醒目颜色的按钮,有时这些按钮还会带有阴影和3D效果,以便更像可以按下的样子。虚拟按钮不符合这种用户习惯,用户不得不改变惯性思维去寻找它们。

可读性

根据传统的行为召唤准则,按钮使用深色字体,文本使用浅色字体;而虚拟按钮却不具备这种灵活性。相反,虚拟按钮的文本依赖于深色和更高的可读性,这限制了颜色选择。

透明度

如果用户没有习惯于按钮位置,那么透明度会是个棘手问题。尽管在测试时,虚拟按钮看上去还不错;但在实际使用中,可能有大幅图片在虚拟按钮的周围,也可能电脑屏幕较小,这都会降低按钮的可读性。视差滚动时也同样如此,如果图片在按钮的底层,那就很难找到按钮或者辨识按钮的内容。

位置

传统按钮的好处之一,是适用于页面的大多数位置。然而使用虚拟按钮时,,不得不考虑到用户迷路的风险,这意味着设计师要提前预测用户视觉流,然后把按钮放在指定位置上。

在后面提到的例子中能看到,虚拟按钮的位置很大程度取决于内容。虚拟按钮最常见的位置是主页的banner下方,有时也会在简短的简介文案下方。

虚拟按钮的优点

很明显,以上的缺点都在意料之内。当使用这样的设计元素时,必然会权衡利弊。

极简主义

有没有想过虚拟按钮的来源?大多数人都把虚拟按钮归结于2013年底iOS 7的发布。由于iPhone决定采用更简单的界面设计准则,虚拟按钮的出现和广泛使用也就再自然不过。

极简主义的要点是尽可能的减少网页承载的信息,利用干净、简单的界面设计,凸出有效内容的展示和信息传递。

Bootstrap使用的虚拟按钮是极简主义优点的范例。

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

Bootstrap网页上极简的虚拟按钮

专业性

有一些不仅合乎逻辑,看上去还很专业的虚拟按钮,比如Neil Patel。

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

Neil Patel网站上的所有行为召唤按钮都是虚拟按钮

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:今日头条算法原理(全文)

下一篇:2018年LOGO流行设计趋势

  • 18893 文章总数
  • 2300036访问次数
  • 建站天数
  • 专业建站优化Jimmy Zhu
    男,从事互联网服务行业10年,专业建站优化,快速建站上排名。欢迎中小型企业朋友一起来交流!!
    相关专题
    • 网站建设咨询
    • 同行价格

      统一报价,无隐形消费

    • 金牌服务

      一对一专属顾问,7*24小时金牌服务

    • 售后无忧

      完善售后,客服经理全程跟进

    建站优化二维码
    建站优化二维码

    截屏,微信识别二维码

    微信号:13825575516

    (点击微信号复制,添加好友)

    优化二维码打开微信