写给所有网页设计师:阴影效果已经重返主流设计阵营中了

发布日期:2018-03-06
浏览次数:77
  
undefined
 
在《满血复活!重新回归网页潮流前线的渐变设计》中,小飞就提到过随着时代发展和网页设计潮流的不断变化,扁平化设计也开始寻求自身的突破,积极吸纳采用一些有用的元素或技巧(比如渐变)。很多"老牌"的设计技巧都是借这个契机回归的,阴影效果就是其中一种,阴影效果曾是拟物化设计时期的元老级"功臣"(帮助营造3D视觉效果),当然后来也曾是设计师们最唯恐避之不及的设计元素。而如今,它以全新的姿态重新进入大众的视野之中,现在的它已经能和极简主义设计风格、扁平设计元素等很好地搭配使用。为了让大家对网页中的阴影设计有更加直观的认识,小飞将在这篇文章中展示8个优秀的设计实例。
 
 
 

Julian Buehler

Julian Buehler这个网站有点粗野主义的味道,有关粗野主义大家可以查看《粗野主义,冉冉升起的网站设计新趋势》。Julian Buehler在网站主页上使用了一个带有阴影效果的3D图形,以呈现给用户独特的视觉深度体验。当然,这个3D图形也不会一直停留在主页上,妨碍网站信息的传递;当你向下滚动鼠标进行浏览时,它就会逐渐退到屏幕之外。这种形式的阴影设计很是别致,能轻松地将这个网站与其他网站区别开来。
 
undefined
 
 
 

Ustwo

元素叠加设计是Ustwo网站的一大特色,它是指将两个不同元素的某块区域相互叠加(常见于图片),以实现用户视线的自然转移(见下图)。在这里阴影效果的设计是一大助力,它让两个元素之间的划分更为清晰,页面的分层更加明显。对了,当你将鼠标移到单个图片上,它会稍微放大浮动在另一张图片上面,这还会出现二级描述文本,图片的单侧也会出现阴影效果,用户可以在这感受到非同寻常的视觉体验。
 
undefined
 
 
 

ATOLYE15

在ATOLYE15的主页上,主图位置没有放置任何图片,而是铺满了阴影效果,当它与白色背景搭配使用,很容易让人产生主图透明的错觉。总的来说,ATOLYE15是阴影效果设计与极简主义风格完美融合的一个典型。尽管这里的阴影效果很微妙,但它却是非常有效的,能够显著提升网站的设计感。
 
undefined
 
 
 

Better

Better网站的阴影设计也十分微妙。在这个网站上,阴影效果主要用在页面图片的各个物体上了(比如电脑、闹钟、盆栽等)。乍一看,各个物体好像被稳稳当当地放在桌面上了。也许这种设计方法并不够突出,但它却能让页面元素的细节更加丰富。
 
undefined
 
 
 

Plasso

Plasso的阴影设计也很值得借鉴。这个网站上的阴影运用比较分散,仅用在重点元素上:一级CTA按钮和卡片式内容区域。这种设计方法是有其深意的,在CTA按钮设置阴影效果可以让这个行为号召的可交互性更强,吸引用户快速进行点击;而在卡片式内容区域使用阴影设计可以将重要内容从背景中独立出来,牢牢抓住用户的视线。当然,这个网站也充分证明了:阴影效果是可以用来创建独具一格的极简主义网站的。
 
undefined
 
 
 

Stripe Sigma

相比前面几个网站来说,Stripe在网站中大篇幅地应用了阴影效果。随着网站产品和特点的一一展开,这会出现很多令人印象深刻的阴影设计,不管是用在网页背景上、不同区块上还是菜单选项上。对了,这里阴影设计的类型也十分丰富,有投影式的、长阴影式的、渐变式的。不过,小飞在这要提醒大家一句,如果你对阴影设计并不擅长的话,还是不要轻易在网页中使用大篇幅的阴影设计。
 
undefined
 
 
 

Smallchat

Smallchat也是个极简主义风格的网站,但其中色彩的应用让其丰富不少。这个网站的阴影效果主要用在了产品图片上,帮助突出产品特点。首页的CTA按钮也使用了阴影设计。总的来说,它给页面带来了有趣的分层设计,能让着陆页更显魅力。
 
undefined
 
 
 

Scaphold

Scaphold,和上面的Better有点类似,都借助阴影来营造一种类似桌子的感觉。不过,这个网站阴影效果的类型各有不同,有边缘锐利清晰的,也有柔和一点的,这会给人插画中各种物体悬浮在半空中的错觉。
 
undefined
 
 
从上面这些示例中,我们可以看出阴影对于网站设计是有一定积极意义的,比如它可以增加元素深度、突出重要元素等。当然,这需要我们在设计时要把握一个度,不能过于追求重阴影、极端渐变和复杂的光照效果(避免用户注意力的分散),切实考虑设计的实用性(最好符合用户的自然感知)。你觉得阴影设计怎么样?快来和大家一起分享分享你的看法吧!

登录后即可发表评论,立即登录.