寫給所有網頁設計師：陰影效果已經重返主流設計陣營中了

+ 查看更多

 

在《滿血復活！重新回歸網頁潮流前線的漸變設計》中，小飛就提到過隨著時代發展和網頁設計潮流的不斷變化，扁平化設計也開始尋求自身的突破，積極吸納采用一些有用的元素或技巧（比如漸變）。很多"老牌"的設計技巧都是借這個契機回歸的，陰影效果就是其中一種，陰影效果曾是擬物化設計時期的元老級"功臣"（幫助營造3D視覺效果），當然后來也曾是設計師們最唯恐避之不及的設計元素。而如今，它以全新的姿態重新進入大眾的視野之中，現在的它已經能和極簡主義設計風格、扁平設計元素等很好地搭配使用。為了讓大家對網頁中的陰影設計有更加直觀的認識，小飛將在這篇文章中展示8個優秀的設計實例。

 

 

 

Julian Buehler這個網站有點粗野主義的味道，有關粗野主義大家可以查看《粗野主義，冉冉升起的網站設計新趨勢》。Julian Buehler在網站主頁上使用了一個帶有陰影效果的3D圖形，以呈現給用戶獨特的視覺深度體驗。當然，這個3D圖形也不會一直停留在主頁上，妨礙網站信息的傳遞；當你向下滾動鼠標進行瀏覽時，它就會逐漸退到屏幕之外。這種形式的陰影設計很是別致，能輕松地將這個網站與其他網站區別開來。

 

 

 

 

元素疊加設計是Ustwo網站的一大特色，它是指將兩個不同元素的某塊區域相互疊加（常見于圖片），以實現用戶視線的自然轉移（見下圖）。在這里陰影效果的設計是一大助力，它讓兩個元素之間的劃分更為清晰，頁面的分層更加明顯。對了，當你將鼠標移到單個圖片上，它會稍微放大浮動在另一張圖片上面，這還會出現二級描述文本，圖片的單側也會出現陰影效果，用戶可以在這感受到非同尋常的視覺體驗。

 

 

 

 

在ATOLYE15的主頁上，主圖位置沒有放置任何圖片，而是鋪滿了陰影效果，當它與白色背景搭配使用，很容易讓人產生主圖透明的錯覺。總的來說，ATOLYE15是陰影效果設計與極簡主義風格完美融合的一個典型。盡管這里的陰影效果很微妙，但它卻是非常有效的，能夠顯著提升網站的設計感。

 

 

 

 

Better網站的陰影設計也十分微妙。在這個網站上，陰影效果主要用在頁面圖片的各個物體上了（比如電腦、鬧鐘、盆栽等）。乍一看，各個物體好像被穩穩當當地放在桌面上了。也許這種設計方法并不夠突出，但它卻能讓頁面元素的細節更加豐富。

 

 

 

 

Plasso的陰影設計也很值得借鑒。這個網站上的陰影運用比較分散，僅用在重點元素上：一級CTA按鈕和卡片式內容區域。這種設計方法是有其深意的，在CTA按鈕設置陰影效果可以讓這個行為號召的可交互性更強，吸引用戶快速進行點擊；而在卡片式內容區域使用陰影設計可以將重要內容從背景中獨立出來，牢牢抓住用戶的視線。當然，這個網站也充分證明了：陰影效果是可以用來創建獨具一格的極簡主義網站的。

 

 

 

 

相比前面幾個網站來說，Stripe在網站中大篇幅地應用了陰影效果。隨著網站產品和特點的一一展開，這會出現很多令人印象深刻的陰影設計，不管是用在網頁背景上、不同區塊上還是菜單選項上。對了，這里陰影設計的類型也十分豐富，有投影式的、長陰影式的、漸變式的。不過，小飛在這要提醒大家一句，如果你對陰影設計并不擅長的話，還是不要輕易在網頁中使用大篇幅的陰影設計。

 

 

 

 

Smallchat也是個極簡主義風格的網站，但其中色彩的應用讓其豐富不少。這個網站的陰影效果主要用在了產品圖片上，幫助突出產品特點。首頁的CTA按鈕也使用了陰影設計。總的來說，它給頁面帶來了有趣的分層設計，能讓著陸頁更顯魅力。

 

 

 

 

Scaphold，和上面的Better有點類似，都借助陰影來營造一種類似桌子的感覺。不過，這個網站陰影效果的類型各有不同，有邊緣銳利清晰的，也有柔和一點的，這會給人插畫中各種物體懸浮在半空中的錯覺。

 

 

 

從上面這些示例中，我們可以看出陰影對于網站設計是有一定積極意義的，比如它可以增加元素深度、突出重要元素等。當然，這需要我們在設計時要把握一個度，不能過于追求重陰影、極端漸變和復雜的光照效果（避免用戶注意力的分散），切實考慮設計的實用性（最好符合用戶的自然感知）。你覺得陰影設計怎么樣？快來和大家一起分享分享你的看法吧！