2024年网页最值得掌握的按钮设计趋势

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

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

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

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

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

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

幽灵按钮的起源

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

HUD

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

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

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

IOS

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

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

Bootstrap

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

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

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

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

幽灵按钮的优缺点

优点

幽灵按钮有许多优势，能为你的设计加分不少：

诸如PS和AI这样的绘图软件可以轻松绘制幽灵按钮

尽管设计幽灵按钮很容易，但是它并不会显得过于单薄或者易被忽视，事实上，它们往往能让设计更加优雅成熟。

幽灵按钮常常显得清晰而微妙，它总能让浏览者感觉自由而放松。使用幽灵按钮的页面常常不会让人觉得沉重，它能让设计视觉更加轻量，同时唤起秩序感。

由于幽灵按钮通常是中空的，所以它也很容易与其他的设计元素来搭配使用，白搭随心。

毫无疑问，幽灵按钮是2014年的热门设计趋势，如果你巧妙运用能让你的网站看起来更加时尚。

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

缺点

虽然幽灵按钮已经非常流行了，但是它们并非是万金油。使用它们可能会分散按钮应有的聚焦感，你需要精心设计，让按钮不被埋没，也不喧宾夺主。

幽灵按钮的存在已经打破了传统网页设计中按钮固有的形象和体验，你让它产生类似现实中按钮的体验是不可能的，尤其是当你没有用好它的时候，这种存在感和体验会更加薄弱。

幽灵按钮的透明度会导致可读性降低的问题。大图背景和不合理的配色会让这种糟糕体验雪上加霜。我们会在后续看到反例。

幽灵按钮的使用实例

Bilderphoto.com

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

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

UnionRoom

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

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

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

Worldbackupday

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

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

结语

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