QQ截图20180428090655.jpg

幽灵按钮和类似的空心元素,在诸多的设计趋势当中,还是显得颇为单薄的。它们的转化率看起来不够突出,和其他的固定形体相比,吸引力也一般,它们的视觉效果主要取决于周围的对比度和环境本身,一句话,缺点很多。即便如此,它们并没有很快消失,相反依然活跃在设计的一线。

它们能够如此,很大程度上是因为我们对于这些元素已经习以为常了。它们最初出现在 UI 界面上的时候,用户所感到的迷惑和混乱,已经逐步消失,我们都知道,它是一个按钮。

现在的幽灵按钮和类似的元素,已经被市场和用户所接受,在商业设计当中并不鲜见,甚至承担着行为召唤的功用,已经足够吸引用户的视线了。

从幽灵按钮到空心元素,它们一直在流行

从幽灵按钮到空心元素,它们一直在流行

△ Ignite Online

Ignite Online 网页中幽灵按钮的用法,在过去是一种非常典型的方式,现在它的使用策略得到了不小的改进,看看下面 Adidas 的 Climazone 页面。

从幽灵按钮到空心元素,它们一直在流行

△ Climazone by Adidas

在这里,幽灵按钮有了更多的释放控件,不仅有良好的悬停效果,而且通过排版让组件之间关系更加明确、稳固,左侧的圆形元素则强化了设计上的一致性。

基于这几个案例,我们想要用好这一设计趋势,需要考虑下面的几个小点:

确保它的周围要有足够的留白;

确保它本身要足够大;

幽灵按钮和背景要构成足够的对比;

使用适当的图形来承载它;

采用悬停特效,强化视觉上的指引性。

虽然这么说确实有点奇怪,但是幽灵按钮这种线性风格的按钮设计确实是能够提升用户体验的。看看下面 Pholc 这个网站,设计师采用了分屏式的设计,两个巨大但是不那么显著的幽灵按钮分别置于两个区块的中心,通过交叠带来沉浸式的体验。对于用户而言,整个设计是清晰而直观的,两种并行的探索方式,摆在他们面前。

从幽灵按钮到空心元素,它们一直在流行

△ Pholc

线性艺术的回暖

幽灵按钮带有线性艺术的特征,但是它不是唯一的线性元素。在整个设计当中,运用中空的线性元素隐约成为了一个流行趋势。这种设计趋势所包含的内容是丰富而多样的。比如在标题周围加上一圈纤细的和背景有微妙对比的边框,不仅让整个设计显得更加优雅,而且让标题获得了额外的视觉关注度,就像下方的 Drawlight 和 Domaine Direct 两个网站的设计。

从幽灵按钮到空心元素,它们一直在流行

△ Drawlight

从幽灵按钮到空心元素,它们一直在流行

△ Domaine Direct

Feudi di San Gregorio 这个网站的设计也尤其值得注意,虽然同样是使用了细线边框来封装标题,但是它背后的设计团队通过优秀的视觉设计,让标题层拥有了真实的层次感,独特的设计更容易俘获用户的关注。

从幽灵按钮到空心元素,它们一直在流行

△ Feudi di San Gregorio

只需要在视觉上做微妙的调整,就能达到突出的效果,这一点非常值得学习。接下来,看看 ContraryCon 这个网站。

从幽灵按钮到空心元素,它们一直在流行

△ ContraryCon

网站首屏中心的字体部分采用了相对比较夸张的故障效果,周围的边框仿佛将夸张的效果限制在这个范围以内,它巧妙的抑制了故障效果的范畴,又让用户注意到这个区块的关键信息,比如菜单、CTA 和 LOGO。