优界网

首页 > 教程经验 > 知根知底的趋势!2014年最值得掌握的趋势”幽灵按钮”

知根知底的趋势!2014年最值得掌握的趋势”幽灵按钮”

134

0

1

2015-04-23 15:23:25

金龙

分享一下,又不会怀孕!

本作品为转载作品,版权为作品原作者所有,感谢上传者的分享!

rise-ghost-button-1

2014年即将过去,在已经过去的大半年中,一些全新的设计趋势逐渐成熟,并且会在即将到来的2015年成为主流。在这些设计趋势当中,令人印象最深刻的,应该是“幽灵按钮”。

曾在过去的文章《网页设计新趋势!你听说过“幽灵按钮”吗?》中对幽灵按钮进行过详细的描述,也搜集过许多高大上的设计案例《向高手学习!20个使用“幽灵按钮”的优秀网站案例》。没错,幽灵按钮已经成熟,今天我们就好好总结这一设计趋势。

2009年重启的的新《星际迷航》中,企业号中控系统的UI就使用了近似幽灵按钮的设计元素

那么先温故一下,什么是幽灵按钮

幽灵按钮,也就是Ghost Buttons,是一个透明的按钮,通常是矩形或者圆角矩形,仅保留基本的形制,使用细线来标识边界;按钮内的文字通常使用纤细的非衬线体字体的纯文本,来指明按钮功能。

幽灵按钮有时候也被称为“空按钮”,通常会被设计得比普通的按钮更大一些。而它们之所以被命名为“幽灵”,是应为这种按钮如同鬼魂一样透明,但是独特的造型会立刻吸引用户的注意力——正如同故事中鬼魂一样抓人眼球。

虽然你可能在大量的网站中看到幽灵按钮,但是并非所有的网站都和幽灵按钮相得益彰。真正适合幽灵按钮的是那些使用极简风和扁平风的网站和APP,使用大图背景的网站也与之非常搭。

幽灵按钮的起源

虽然很难为幽灵按钮找到单一起源,但是我们能够为之确定几个具有重要影响意义的源头。由于幽灵按钮的广泛应用,甚至有用户在Tumblr上单独为之开了个博客,专门搜集相关的设计作品。

HUD

Head-Up Display,也就是HUD,是利用光学反射原理,将信息投射在玻璃上,高度大概与眼睛平齐。早在60年代就已经开始运用,当时是应用在飞机上,现在很多汽车上也有这一功能。随着HUD走进大众,这一功能也在影视和游戏中,成为了流行文化的排头兵。

ironman

由于HUD中所展示的信息需要借助透明的材质与视野相交叠,所以信息的呈现风格应该是轻量级的,通常是单色的或者几种简单的色彩。尽管许多HUD的UI并没有严格意义上的按钮,但是你会发现其中使用的元素大多线条清晰,边界明了,并且以文本为主。

好莱坞的FX团队就特别着迷于这种幽灵风格的UI。《少数派报告》中手势操作和透明屏幕上的界面,《钢铁侠》中MK系列盔甲头盔中的HUD交互界面,《安德的游戏》中战舰的操作界面,《星际迷航》中每一个控制面板,都将这种隐喻未来的界面风格发挥到极致。在我看来,这种一脉相承的科幻风为今天幽灵按钮的流行奠定了基调,提供了灵感。

IOS

如果是电影中炫酷的展示和日常网页中的偶尔运用是开始的话,iOS7和苹果式扁平化的推进,就是让幽灵按钮这样的设计趋势流行开来的催化剂。尽管一开始,iOS7并未得到广泛的认可,但是随着用户接受度的提高,其中使用简约线条的图标和高对比度的幽灵按钮逐渐为大众所接受,并且逐渐“传染”到越来越多的界面中去了。

随后,Google这样的巨头也开始使用幽灵按钮。虽然Android的设计指南中并为将其标准化(Well,Material Design本身也扁平的很有性格不是么),但是2013年Nexus 7的官方网站中也开始运用幽灵按钮。下图中,幽灵按钮的白色线条与黑色的背景对比强烈又没有喧宾夺主。

Bootstrap

另外一个为幽灵按钮的流行作出巨大贡献的就是来自Twitter的Bootstrap (http://getbootstrap.com/)。2013年8月,Bootstrap 3 发布,当时官网首页上所展示的网页设计原型就正好使用了幽灵按钮。

由于Bootstrap在网站开发上的简单易用,越来越多的网站开发者和设计师开始使用它,连带着扁平化风格和幽灵按钮越来越流行。

Bootstrap 简单自然,单色背景为幽灵按钮留下了足够的施展空间。

相关阅读《利用Bootstrap教你快速构建一个美观且高品质的网站》

接下来,我们总结一下幽灵按钮的优缺点:

幽灵按钮的优缺点

优点

幽灵按钮有许多优势,能为你的设计加分不少:
?诸如PS和AI这样的绘图软件可以轻松绘制幽灵按钮
?尽管设计幽灵按钮很容易,但是它并不会显得过于单薄或者易被忽视,事实上,它们往往能让设计更加优雅成熟。
?幽灵按钮常常显得清晰而微妙,它总能让浏览者感觉自由而放松。使用幽灵按钮的页面常常不会让人觉得沉重,它能让设计视觉更加轻量,同时唤起秩序感。
?由于幽灵按钮通常是中空的,所以它也很容易与其他的设计元素来搭配使用,白搭随心。
?毫无疑问,幽灵按钮是2014年的热门设计趋势,如果你巧妙运用能让你的网站看起来更加时尚。

事物总需要一分为二来看,幽灵按钮自然也有它的局限性,当你设计的时候需要仔细考虑一下这些因素。

缺点

?虽然幽灵按钮已经非常流行了,但是它们并非是万金油。使用它们可能会分散按钮应有的聚焦感,你需要精心设计,让按钮不被埋没,也不喧宾夺主。
?幽灵按钮的存在已经打破了传统网页设计中按钮固有的形象和体验,你让它产生类似现实中按钮的体验是不可能的,尤其是当你没有用好它的时候,这种存在感和体验会更加薄弱。
?幽灵按钮的透明度会导致可读性降低的问题。大图背景和不合理的配色会让这种糟糕体验雪上加霜。我们会在后续看到反例。

幽灵按钮的使用实例

Bilderphoto.com

第一个例子就是 Bilderphoto.com,典型的大图背景设计。

幽灵按钮置于网站正中央,吸引用户去点击,以发现更多的内容。但是在我看来,幽灵按钮并没有得到很好的安置。为了对比度,幽灵按钮的边框和文字均使用了白色,可是背景中的女孩也是一身白,这使得按钮中的单词“imagemaking”并不完全符合对比度的需求,影响了可读性。当然,积极的一面在于,你可以通过刷新看到其他的图片。

UnionRoom

接下来的这张图片来自于UnionRoom的网站,这是一家网页设计和开发公司。

比起简单设置一个图片背景,他们选择了更有逼格的方式——使用半色调的视频来作为背景。他们的服务展示是通过网页中的这套扁平风的动效和界面来实现的。如果你想对他们的服务了解更多的话,点击底部的幽灵按钮就可以了。

不同于上一个例子,UnionRoom的网站背景色调更暗,使得内容显得更加突出。这个幽灵按钮符合它该有的所有特色,不突兀也不多余,合理和均衡。

Worldbackupday

最后这个案例是worldbackupday.com,使用了典型的扁平化设计。

这个与文件备份有关的网站是通过简单的蓝白双色来呈现的,对比强烈。其中使用了两个椭圆形的幽灵按钮。两个按钮识别度也做的非常不错,没有与背景混淆也易于被发现,这个网站的设计师还是非常称职的。

结语

文章不长内容不多,但是句句是干货。当然,最重要的还是在实践中掌控幽灵按钮,不是么?

已有1人赞过

+1赞

认真评论的都成大咖了

还可输入1000个字

  • 刚刚
  • 登录优界网 ×