•  編輯 : 陳子木
 
• 作者 : CARRIE COUSINS 
• 閱讀本文需 6 分鐘

• 如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

  
  

在設(shè)計(jì)中，情緒的傳達(dá)和氛圍的營(yíng)造通常是要看設(shè)計(jì)項(xiàng)目的目的是什么，而不同的配色和不同的元素組合，往往能夠呈現(xiàn)出截然不同的風(fēng)貌。相比之下，深色系網(wǎng)站常常會(huì)呈現(xiàn)出更為獨(dú)特的氛圍，傳達(dá)出更為復(fù)雜多樣的情緒。雖然這樣的情緒并不一定是正面和向上的，但是好設(shè)計(jì)總歸是讓人過(guò)目難忘的。

想要借助深沉的色調(diào)來(lái)創(chuàng)造情緒相對(duì)獨(dú)特的網(wǎng)站設(shè)計(jì)，是有一些可供遵循的常見(jiàn)的設(shè)計(jì)技巧，今天的文章，我們來(lái)分享一下這方面的內(nèi)容。

深色，并不定是黑色

首先這一點(diǎn)必須明確，深色并不一定是黑色。

在選取配色的時(shí)候，網(wǎng)明亮的色彩當(dāng)中添加黑色或者灰色所得出的色彩，通常會(huì)顯得更加深沉濃重，這樣的色彩中往往會(huì)包含之前的色調(diào)。

在上面的 Hooligan 這個(gè)網(wǎng)站當(dāng)中，設(shè)計(jì)師不僅采用了深沉的黑色背景，而且采用了和黑色背景相當(dāng)匹配的暗金色，兩種深色之間色彩明暗依然存在對(duì)比，和白色的標(biāo)題文本構(gòu)成了三個(gè)層次，不僅富有視覺(jué)吸引力，而且創(chuàng)造出了沉穩(wěn)厚重的氛圍。

陰影的使用

陰影和光線往往是相伴出現(xiàn)的，而陰影所帶來(lái)的舞臺(tái)劇般的效果則充滿了戲劇感和神秘感，這也是設(shè)計(jì)師喜歡它的原因，這樣的設(shè)計(jì)會(huì)讓用戶心中產(chǎn)生興趣和好奇心。

在上面的 Clear Motion 這個(gè)網(wǎng)站當(dāng)中，車輛周圍被陰影所包圍，文本內(nèi)容很容易吸引用戶的注意力。同時(shí)，用戶會(huì)好奇這輛車有什么特殊的地方，有什么地方看起來(lái)不太一樣，黑暗的氛圍下，用戶的好奇心會(huì)身不由己地高漲起來(lái)。

黑色疊加層

用黑色的半透明層疊加到圖像上，也是制造深色系背景的一種常見(jiàn)手法。在圖片的選取和不同的透明度之下，背景圖片所呈現(xiàn)出來(lái)的效果和氛圍，是非常不同的。

透明度較低的情況下，黑色疊加圖層會(huì)讓用戶看不清背景中的信息，這使得背景信息在整個(gè)設(shè)計(jì)中參與度較低。透明度較高的情況下，更多的背景元素會(huì)透過(guò)疊加層呈現(xiàn)出來(lái)，和前景元素產(chǎn)生交叉和互動(dòng)。但是總的來(lái)說(shuō)，黑色疊加層讓元素之間產(chǎn)生對(duì)比，也使得行為召喚元素更容易發(fā)揮作用。

在上面的 Fhoke 這個(gè)網(wǎng)站當(dāng)中，透明疊加層讓背景中的場(chǎng)景適當(dāng)?shù)赝嘎兑稽c(diǎn)出來(lái)，但是真正吸引人注意力的，還是在標(biāo)題和左側(cè)的行為指引上。

簡(jiǎn)陋的畫(huà)布

細(xì)節(jié)較多的背景讓人覺(jué)得信息豐富，而粗陋的畫(huà)布則更容易創(chuàng)造出一種虛無(wú)的感覺(jué)，相應(yīng)的，后者是會(huì)讓人更有探索的欲望。粗陋甚至赤裸的深色系畫(huà)布很好地將神秘感和探索的欲望結(jié)合到了一起。

Dubois 這個(gè)網(wǎng)站的背景同樣非常的簡(jiǎn)單，沒(méi)有紋理，只是通過(guò)均勻分布的小圓點(diǎn)來(lái)進(jìn)行裝飾，如果你仔細(xì)觀察會(huì)發(fā)現(xiàn)這些點(diǎn)的分布、色彩其實(shí)是有微妙變化的，會(huì)引導(dǎo)你去注意位于整個(gè)頁(yè)面底部的文本標(biāo)題，雖然絕大多數(shù)的網(wǎng)站并不會(huì)把標(biāo)題放在這樣的位置上。

字體的選取

Punk is Not Dead 這個(gè)網(wǎng)站給你的感覺(jué)是否很獨(dú)特？網(wǎng)站的設(shè)計(jì)非常清晰，識(shí)別度極高，網(wǎng)站本身還有音頻組件，它的設(shè)計(jì)從視頻到音頻一應(yīng)俱全，整體充滿了朋克的風(fēng)格。

黑暗的背景和明亮的字體色彩有助于實(shí)現(xiàn)這樣的效果，但是字體的選取才是最關(guān)鍵的。想象一下使用普通的字體，是完全達(dá)不到這樣的效果。尖銳粗糙的邊緣和并不那么友好的可讀性，讓他在視覺(jué)上和朋克的精神保持了一致。

黑白配色

當(dāng)設(shè)計(jì)完全失去色彩，僅僅保留黑白兩色的情況下，會(huì)給人什么樣的感覺(jué)呢？如果整個(gè)設(shè)計(jì)是以黑白兩色為主，搭配少量其他的顏色，體驗(yàn)和氛圍又是什么樣的呢？

黑白配色和純黑為主的配色一樣，很容易創(chuàng)造出戲劇化的效果，這兩種色彩本身所構(gòu)成的沖突和對(duì)比就是原因。

黑白的強(qiáng)烈對(duì)比，常常會(huì)促使訪客在瀏覽過(guò)程中忙于注意不同的細(xì)節(jié)，面對(duì) Super Rebel 這個(gè)網(wǎng)站的時(shí)候，這種感覺(jué)就非常明顯。打開(kāi)頁(yè)面之后，注意力會(huì)迅速被右上角的圖片吸引，隨后便忍不住把對(duì)比強(qiáng)烈的所有模塊都掃視一遍。黑白色搭配大量信息很容易創(chuàng)造出信息過(guò)載的效果和體驗(yàn)。

圖片的選取

Jimmy Chin 在他的作品集網(wǎng)站的「關(guān)于」頁(yè)面當(dāng)中，他將自己的照片直接放了進(jìn)去，色彩采用了單純的黑色。

色彩的明暗和飽和度的選取，直接影響著整個(gè)設(shè)計(jì)的情緒，在這里，單純的黑色讓整個(gè)頁(yè)面的形式感更強(qiáng)，而所呈現(xiàn)出來(lái)的感覺(jué)也非常的銳利。想想看，他穿著黃色的襯衫和綠色的褲子，那么整個(gè)圖片所呈現(xiàn)出來(lái)的感覺(jué)是完全不同的，浮夸而醒目。

圖片的選取對(duì)于情緒的表達(dá)和氛圍的營(yíng)造有著巨大的影響。

也可以營(yíng)造輕松的氛圍

許多深色系的網(wǎng)站都給人以深沉、怪異的感覺(jué)，但是深色并不完全代表著負(fù)面的情緒。深色系的網(wǎng)站同樣可以被設(shè)計(jì)得輕松而富有活力，這主要取決于你如何將元素組合到一起。

在 Atom 這個(gè)網(wǎng)站當(dāng)中，整個(gè)背景都采用了典型的深灰，但是卡通角色和輕盈的色調(diào)讓網(wǎng)站凸顯出一種可愛(ài)而有趣的感覺(jué)。這樣的設(shè)計(jì)也能帶來(lái)視覺(jué)奇觀，并且不會(huì)讓用戶感覺(jué)到負(fù)面的感受。

這種設(shè)計(jì)讓用戶和網(wǎng)站之間的情感聯(lián)系更輕松，讓服務(wù)更容易為用戶所接受。

結(jié)語(yǔ)

那些帶有負(fù)面情緒和獨(dú)特氛圍的網(wǎng)站，你喜歡嗎？帶有這樣情緒和氛圍的網(wǎng)站，需要設(shè)計(jì)師花費(fèi)更多的時(shí)間和精力來(lái)拿捏程度，來(lái)達(dá)成相應(yīng)的設(shè)計(jì)目標(biāo)，而且這樣的設(shè)計(jì)并非不好。情緒化的設(shè)計(jì)，有趣而神秘的氛圍，帶有負(fù)面情感的表達(dá)，躁動(dòng)甚至暴躁的設(shè)計(jì)，這些都有其獨(dú)特的作用。

藍(lán)藍(lán)設(shè)計(jì)( www.skdbbs.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)