作者：CARRIE COUSINS
我們日常所看到的絕大多數的網站，在基礎配色方案上，都是以淺色為主的，背景大多是白色或者淺色。有意思的是，近兩年，以黑色為主色調，或者大量運用深色背景的網站，逐漸流行開來。
這些深色系網站常常被設計的非常時髦，並且搭配了不少有趣的動效，比如懸停觸發的小特效和微妙的視差效果，這些特效讓網站擁有了近乎電影的視覺體驗。今天我們就來聊聊這一設計趨勢。
深色系配色+動效
Meida
Impero
深色系配色和動效的結合確實已經悄然流行起來了：用黑色或者深色為主的配色方案，搭配一個炫酷的動效。兩種技巧的搭配，創造出層次分明的視覺，營造出微妙的情緒氛圍和令人著迷的神秘感。
雖然在具體實現上並不那麼容易，在移動端上的體驗不如桌面端明顯，但是這種設計趨勢所營造的視覺體驗還是很能引人關注的。深色系的配色會讓前景的元素更聚焦，用戶會不由自主地關注設計師刻意營造的焦點。
在這種被營造出的神秘的氛圍之下，被動效加持的視覺焦點元素會讓用戶好奇，這個頁面之下還藏著什麼，接下來會有怎樣的事情發生。
這種設計趨勢和其他的趨勢相似，僅僅是一個範圍而非規定嚴苛的規定，你可以使用黑色作為主色調也可以使用藏藍，搭配的動效也沒有固定的套路，它可以只是一個簡單的懸停動效，也可以是一種複雜而精緻的動態效果，你可以根據實際狀況自行嘗試。
當然，這種設計趨勢的核心在於營造神秘感。
運作機制
Garden8
很難完全說清這種設計趨勢為什麼會如此的有效，當你簡單腦補深色系配色+動效的時候，很難意識到這種效果實際效果是如此的出眾。回過頭來，我們可以仔細剖析這種設計趨勢的特徵：
配色方案中不會有太多顏色
幾乎沒有太多明晰的對比
整體設計看起來極其簡單
不過，也可能正是這些看起來不複雜的設計，使得這種設計趨勢在用戶當中發揮了效果。它打破了規則，吸引了用戶。
另外一個促使它流行的因素應該是它所營造的黑暗氛圍和神秘感。人總是充滿好奇心的，欲蓋彌彰總比開放的展示更加撩人。動畫和黑暗的氛圍搭配起來的時候，更容易勾起訪客的好奇心。
在許多設計作品當中，我們看到設計師並不僅僅營造出神秘感，他們還加入了更多的情緒上的引導。不同的情緒在這樣的神秘氛圍下發酵，用戶最終會身不由己地被這種視覺模式所吸引。
不一定非得是黑色的
FedEx-track
雖然絕大多數的設計師還是選擇了黑色為主的設計，但是實際上並不一定只有黑色適合這一設計趨勢。
其他的深色調同樣有效，這個時候就是考驗設計師調色和搭配的能力了。
除此之外，想要讓整個配色和動效能夠有效地搭配，還得讓色彩足夠豐富。確定主要的色彩之後，最好在配色方案中加入同色系不同明暗、不同飽和度的色彩，這樣能讓整個配色統一而又豐富。
雖然營造顯著的對比並不在這個設計趨勢之內，但是它依然是不容忽視。這個深色係為主的配色方案應該儘量貼近單色系配色，但是配色中色彩的對比度不夠明顯會讓人迷惑，對比度太強則不夠微妙。
這一是趨勢的局限性
深色系配色+動效這種設計趨勢並不適合每個人，也不會貼合每個項目的實際需求，它也有著局限性：
在移動端上的顯示效果一般
在可訪問性上或多或少有那麼一點問題
對於一部分用戶而言吸引力不足
導航和CTA元素並不好安置
在環境光不足或者不好的情況下，頁面可能很難看清
部分用戶可能並不喜歡網站所呈現出的情緒
用戶可能會在較短的時間內厭倦
使用時候的注意事項
Formigari
The Great
如果你覺得自己可以駕馭這種設計趨勢，那麼你可以嘗試在自己的網頁當中使用它。不過，下面的事項一定要注意：
堅持使用單頁：太多先鋒的設計手法可能會讓用戶覺得不舒服，太多的元素也可能打破好不容易營造的感覺，所以，儘量限制其為單頁設計。
使用對比色：白色文本在深色背景上顯示效果很好。其他的元素也是同樣的道理。需要突出的按鈕、導航元素、信息等都可以採用對比色。
簡化動效：過於複雜的動效可能會讓用戶覺得難於接受。堅持使用簡單的動效能產生更好的效果。
分層結構：由於需要結合動效，不同的元素需要處於不同的分層當中，這樣可以營造出有觸感的真實效果。分層還能讓設計師更好地創造對比，也更易於管理。
大膽的排版：文本元素不僅要包含對比，而且要通過大膽排版和字體設計，來創造出不落俗套的設計。在保證可讀性的前提之下，使用粗細不同、大小對比的字體，營造出形式感。
接下來會怎樣?
Blairwitch
和任何設計趨勢一樣，深色系配色+動效的設計趨勢會隨著時間的推移逐步演變，雖然我們無法確知變化的細節，但是我們總歸能夠看到一個方向。
深色系的配色和如今逐步崛起的VR和AR的沉浸式體驗有著一致的精神，動效的流行自是不必說，相比於複雜化的演化方向，它更有可能會越來越自然，越來越有意思。
結語
色彩對於設計的影響無疑是巨大的，深色系的配色常常會讓設計顯得深沉、神秘，它能夠承載的情緒總體會更加非常規一些。如果你希望你的設計更貼近大眾，淺色無疑會更合適一些，深色相對而言更加特立獨行。
另外，不同的設計技巧之間的組合搭配，或多或少能夠創造出一些新的效果，今天所聊的這種設計趨勢又何嘗不是如此呢?你也可以沿著這個思路繼續探索適合自己設計項目的視覺效果。
往期精華文章導讀：
他離開了騰訊，總結了８年經驗給新人寫了一本UI書。