我們?nèi)粘Ｋ�看到的絕大多數(shù)的網(wǎng)站，在基礎(chǔ)配色方案上，都是以淺色為主的，背景大多是白色或者淺色。有意思的是，近兩年，以黑色為主色調(diào)，或者大量運用深色背景的網(wǎng)站，逐漸流行開來。

這些深色系網(wǎng)站常常被設(shè)計的非常時髦，并且搭配了不少有趣的動效，比如懸停觸發(fā)的小特效和微妙的視差效果，這些特效讓網(wǎng)站擁有了近乎電影的視覺體驗。今天我們就來聊聊這一設(shè)計趨勢。

深色系配色+動效

Meida

Impero

深色系配色和動效的結(jié)合確實已經(jīng)悄然流行起來了：用黑色或者深色為主的配色方案，搭配一個炫酷的動效。兩種技巧的搭配，創(chuàng)造出層次分明的視覺，營造出微妙的情緒氛圍和令人著迷的神秘感。

雖然在具體實現(xiàn)上并不那么容易，在移動端上的體驗不如桌面端明顯，但是這種設(shè)計趨勢所營造的視覺體驗還是很能引人關(guān)注的。深色系的配色會讓前景的元素更聚焦，用戶會不由自主地關(guān)注設(shè)計師刻意營造的焦點。

在這種被營造出的神秘的氛圍之下，被動效加持的視覺焦點元素會讓用戶好奇，這個頁面之下還藏著什么，接下來會有怎樣的事情發(fā)生。

這種設(shè)計趨勢和其他的趨勢相似，僅僅是一個范圍而非規(guī)定嚴苛的規(guī)定，你可以使用黑色作為主色調(diào)也可以使用藏藍，搭配的動效也沒有固定的套路，它可以只是一個簡單的懸停動效，也可以是一種復(fù)雜而精致的動態(tài)效果，你可以根據(jù)實際狀況自行嘗試。

當然，這種設(shè)計趨勢的核心在于營造神秘感。

運作機制

Garden8

很難完全說清這種設(shè)計趨勢為什么會如此的有效，當你簡單腦補深色系配色+動效的時候，很難意識到這種效果實際效果是如此的出眾。回過頭來，我們可以仔細剖析這種設(shè)計趨勢的特征：

配色方案中不會有太多顏色

幾乎沒有太多明晰的對比

整體設(shè)計看起來極其簡單

不過，也可能正是這些看起來不復(fù)雜的設(shè)計，使得這種設(shè)計趨勢在用戶當中發(fā)揮了效果。它打破了規(guī)則，吸引了用戶。

另外一個促使它流行的因素應(yīng)該是它所營造的黑暗氛圍和神秘感。人總是充滿好奇心的，欲蓋彌彰總比開放的展示更加撩人。動畫和黑暗的氛圍搭配起來的時候，更容易勾起訪客的好奇心。

在許多設(shè)計作品當中，我們看到設(shè)計師并不僅僅營造出神秘感，他們還加入了更多的情緒上的引導(dǎo)。不同的情緒在這樣的神秘氛圍下發(fā)酵，用戶最終會身不由己地被這種視覺模式所吸引。

不一定非得是黑色的

FedEx-track

雖然絕大多數(shù)的設(shè)計師還是選擇了黑色為主的設(shè)計，但是實際上并不一定只有黑色適合這一設(shè)計趨勢。

其他的深色調(diào)同樣有效，這個時候就是考驗設(shè)計師調(diào)色和搭配的能力了。

除此之外，想要讓整個配色和動效能夠有效地搭配，還得讓色彩足夠豐富。確定主要的色彩之后，最好在配色方案中加入同色系不同明暗、不同飽和度的色彩，這樣能讓整個配色統(tǒng)一而又豐富。

雖然營造顯著的對比并不在這個設(shè)計趨勢之內(nèi)，但是它依然是不容忽視。這個深色系為主的配色方案應(yīng)該盡量貼近單色系配色，但是配色中色彩的對比度不夠明顯會讓人迷惑，對比度太強則不夠微妙。

這一是趨勢的局限性

深色系配色+動效這種設(shè)計趨勢并不適合每個人，也不會貼合每個項目的實際需求，它也有著局限性：

在移動端上的顯示效果一般

在可訪問性上或多或少有那么一點問題

對于一部分用戶而言吸引力不足

導(dǎo)航和CTA元素并不好安置

在環(huán)境光不足或者不好的情況下，頁面可能很難看清

部分用戶可能并不喜歡網(wǎng)站所呈現(xiàn)出的情緒

用戶可能會在較短的時間內(nèi)厭倦

使用時候的注意事項

Formigari

The Great

如果你覺得自己可以駕馭這種設(shè)計趨勢，那么你可以嘗試在自己的網(wǎng)頁當中使用它。不過，下面的事項一定要注意：

堅持使用單頁：太多先鋒的設(shè)計手法可能會讓用戶覺得不舒服，太多的元素也可能打破好不容易營造的感覺，所以，盡量限制其為單頁設(shè)計。

使用對比色：白色文本在深色背景上顯示效果很好。其他的元素也是同樣的道理。需要突出的按鈕、導(dǎo)航元素、信息等都可以采用對比色。

簡化動效：過于復(fù)雜的動效可能會讓用戶覺得難于接受。堅持使用簡單的動效能產(chǎn)生更好的效果。

分層結(jié)構(gòu)：由于需要結(jié)合動效，不同的元素需要處于不同的分層當中，這樣可以營造出有觸感的真實效果。分層還能讓設(shè)計師更好地創(chuàng)造對比，也更易于管理。

大膽的排版：文本元素不僅要包含對比，而且要通過大膽排版和字體設(shè)計，來創(chuàng)造出不落俗套的設(shè)計。在保證可讀性的前提之下，使用粗細不同、大小對比的字體，營造出形式感。

接下來會怎樣?

Blairwitch

和任何設(shè)計趨勢一樣，深色系配色+動效的設(shè)計趨勢會隨著時間的推移逐步演變，雖然我們無法確知變化的細節(jié)，但是我們總歸能夠看到一個方向。

深色系的配色和如今逐步崛起的VR和AR的沉浸式體驗有著一致的精神，動效的流行自是不必說，相比于復(fù)雜化的演化方向，它更有可能會越來越自然，越來越有意思。

結(jié)語

色彩對于設(shè)計的影響無疑是巨大的，深色系的配色常常會讓設(shè)計顯得深沉、神秘，它能夠承載的情緒總體會更加非常規(guī)一些。如果你希望你的設(shè)計更貼近大眾，淺色無疑會更合適一些，深色相對而言更加特立獨行。

另外，不同的設(shè)計技巧之間的組合搭配，或多或少能夠創(chuàng)造出一些新的效果，今天所聊的這種設(shè)計趨勢又何嘗不是如此呢?你也可以沿著這個思路繼續(xù)探索適合自己設(shè)計項目的視覺效果。