数据正在读取中...

您的位置: 设计资讯 > 网站设计

网站设计:从幽灵按钮到空心元素,如何用好这一设计趋势

www.shejinet.com 2018-05-08 16:48 设计.世界 浏览(5940)

摘 要:幽灵按钮和类似的空心元素,在诸多的设计趋势当中,还是显得颇为单薄的。它们的转化率看起来不够突出,和其他的固定形体相比,吸引力也一般,它们的视觉效果主要取决于周围的对比度和环境本身,一句话,缺点很多。即便如此,它们并没有很快消失,相反依然活跃在设计的一线。
它们能够如此,很大程度上是因为我们对于这些元素已经习以为常了。它们最初出现在 UI 界面上的时候,用户所感到的迷惑和混乱,已经逐步消失,我们都知道,它是一个按钮。

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

1.jpg

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

2.jpg

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

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

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

确保它本身要足够大;

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

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

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

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

3.jpg

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

4.jpg

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

5.jpg

数据正在读取中...

[优秀设计师] DESIGNERS

  • 红蚂蚁文化
    地区:天津 • 天津
    QQ:2284475163
    电话:qq2284475163
    邮箱:2284475163@qq.com
  • 博文
    地区:广东 • 深圳
    QQ:705434715
    电话:17875048743
    邮箱:705434715@qq.com
  • 久形设计
    地区:广东 • 佛山
    QQ:2926679497
    电话:18927776245
    邮箱:2926679497@qq.com
  • 蜂鸟创意
    地区:河北 • 石家庄
    QQ:2950464750
    电话:15930133486
    邮箱:2950464750@qq.com
  • 泉榕工作室
    地区:福建 • 福州
    QQ:5758429588
    电话:15980203576
    邮箱:5758429588@qq.com
  • 大巢设计
    地区:山西 • 晋中
    QQ:845183776
    电话:15536393968
    邮箱:845183776@qq.com
  • 邹剑
    地区:广东 • 广州
    QQ:810199288
    电话:18379067575
    邮箱:810199288@qq.com
  • 知鱼工作室
    地区:辽宁 • 沈阳
    QQ:1660150137
    电话:
    邮箱:1660150137@qq.com
  • 创龙轩设计
    地区:广东 • 广州
    QQ:1219427856
    电话:13790850808
    邮箱:1219427856@qq.com

[优秀设计公司] COMPANYS

联系我们| 免责声明| 设计师| 设计公司| 手机版| 设计知识