圍觀|深沉有范兒的暗色系網站都是怎么設計出來的？

+ 查看更多

優秀的網站設計總是能夠快速觸動用戶情緒，引起他們的情感共鳴。今天小飛就特意整理了一些氛圍獨特情緒深沉的暗色系網站，希望可以給大家帶來一些啟示。盡管大部分暗色系網站看上去可能有點"喪"，但并不是所有網站都是這樣的（當然這也與用戶對暗色的認知有關）。快來一起看看吧！

在了解暗色系網站設計之前，我們一定要首先明確暗色并不是單單指黑色，它還包括調過色（疊加黑色）的其他顏色或陰影色（疊加陰影）。以這個網站為例，它使用了黑色的背景營造出了昏暗的氛圍。但這里真正出彩的元素還是調過色的金黃色（暗金色），它既符合背景視頻的基調，還讓頁面在視覺呈現上足夠有趣。

下面我們來看看暗色系設計在網站中的不同應用實例：

將黑色透明層疊加到圖像上是營造深沉氛圍、創建暗色系設計最常見的一種方法。當然，疊加的黑色不同，網站的呈現也會有所不同。你是想要疊加深一點的黑色還是淺一些的黑色？你希望用戶透過疊加層看見圖片或背景嗎？一般來說，透明度低的黑色疊加層幾乎會遮蓋住背景上的所有元素，它在整個設計中的參與度會比較低；而透明度高的黑色疊加層既可以讓視覺元素透過其呈現出來，還能與前景元素（如文本或CTA按鈕）產生互動。就在自己的網站上使用了透明度高的黑色疊加層。一方面，用戶可以透過疊加層看到背景視頻中的動作；另一方面，黑色疊加層同前景中的白色字體、橙色滾動欄都形成了一定的反差，更能抓住用戶的視線。

陰影效果幾乎是所有暗色系網站設計的標配，它可以給網站帶來一種獨特的神秘感，幫助激發用戶的好奇心，引導用戶在網站上進行探索。這也是為什么設計師們喜歡在網站中使用暗色系設計。在這個網站首頁上，籠罩在汽車周圍的陰影就起到了很大的作用。當用戶看到這樣的頁面時，他們會不由自主地進行文本閱讀，因為他們想了解會想知道：為什么這輛車看起來是這樣的？它有什么特殊之處？

相比那些放滿各種元素的網站，毫無修飾的暗色布局反而是通過營造空無一物的氛圍來吸引用戶探索網站。當然，這里的暗色背景也助力不少（可幫助營造神秘感）。這個網站，雖然不是毫無修飾暗色布局的典型代表，但它的頁面上也沒有多少元素，只有很多個小點，這些小點和黑色背景一起讓頁面的神秘感更強了。仔細觀察，你還會發現這些點是有顏色的，這是為了引導用戶去注意網站的文本，因為Dubois網站的品牌信息和導航菜單設計不同于常規，它們是位于第一屏滾動頁的下方（也就是第二屏的上方）。

看到的首頁，你會有什么樣的感覺？這個網站風格鮮明，視覺上很吸引人，是一種獨特的暗色系設計。這主要歸功于網站的字體選擇，它奠定了整個網站的基調、如果網站字體換成普通的，網站感覺就會截然不同了。另外，字體的尖銳、不規則邊緣和并不那么友好的可讀性也讓它與網站的主題"朋克"保證了高度一致。當然，這里的黑色背景和明亮字體色彩也為網站添色不少。

黑白配色是暗色系設計中很常見的一種配色方案。盡管黑白配色設計不像全黑設計有那么強烈的戲劇感，但它也是非常有趣的，因為黑白兩色可以和其他各種元素形成反差和對比。黑白配色的強烈對比通常會促使用戶視線快速移動。就像用戶在看這個網站一樣，他們的視線可能首先會停留在頁面上方的黑色、白色圖片，然后快速跳轉到其他雜志風格的區塊。當然，這種設計有時會用戶覺得信息負載。

圖片的選取對于暗色系設計中的氛圍營造也有很大的影響。就在自己的"關于"頁面上使用一張輪廓分明的黑色圖片，這里圖片的顏色、光線和選擇成就了網站的整體情緒，風格獨樹一幟。相反，如果這張圖片是多彩的，比如上衣是淺黃色，下身是灰色，整個感覺就會完全不同了。

盡管這大部分暗色系設計看上去都比較深沉，但暗色并不就等同于陰郁，它也可以用來創建輕松、活力一點的設計。就使用了黑色背景，但頁面上的卡通風格人物讓網站顯得十分歡快。

說實話，相比明亮色系設計，暗色系設計的用戶接受度可能沒有那么高，但這并不意味在網站中使用暗色系設計不可取，它同樣可以用來傳遞特定的情緒信息，營造獨特的氛圍效果。如果你想要嘗試這種類型的設計，不妨勇敢嘗試一下吧！