我們日常所看到的絕大多數的網站，在基礎配色方案上，都是以淺色為主的，背景大多是白色或者淺色。有意思的是，近兩年，以黑色為主色調，或者大量運用深色背景的網站，逐漸流行開來。

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

深色系配色+動效

Meida

Impero

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

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

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

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

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

運作機制

Garden8

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

• 配色方案中不會有太多顏色
• 幾乎沒有太多明晰的對比
• 整體設計看起來極其簡單

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

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

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

不一定非得是黑色的

FedEx-track

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

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

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

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

這一是趨勢的局限性

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

• 在移動端上的顯示效果一般
• 在可訪問性上或多或少有那么一點問題
• 對于一部分用戶而言吸引力不足
• 導航和CTA元素并不好安置
• 在環境光不足或者不好的情況下，頁面可能很難看清
• 部分用戶可能并不喜歡網站所呈現出的情緒
• 用戶可能會在較短的時間內厭倦

使用時候的注意事項

Formigari

The Great

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

• 堅持使用單頁：太多先鋒的設計手法可能會讓用戶覺得不舒服，太多的元素也可能打破好不容易營造的感覺，所以，盡量限制其為單頁設計。
• 使用對比色：白色文本在深色背景上顯示效果很好。其他的元素也是同樣的道理。需要突出的按鈕、導航元素、信息等都可以采用對比色。
• 簡化動效：過于復雜的動效可能會讓用戶覺得難于接受。堅持使用簡單的動效能產生更好的效果。
• 分層結構：由于需要結合動效，不同的元素需要處于不同的分層當中，這樣可以營造出有觸感的真實效果。分層還能讓設計師更好地創造對比，也更易于管理。
• 大膽的排版：文本元素不僅要包含對比，而且要通過大膽排版和字體設計，來創造出不落俗套的設計。在保證可讀性的前提之下，使用粗細不同、大小對比的字體，營造出形式感。

接下來會怎樣？

Blairwitch

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

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

結語

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

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

【這些趨勢好文，能讓你的設計更走心】

1. 《這3種獨特的趨勢，能讓網頁設計增色不少》
2. 《2017年最后幾個月，網頁設計師值得注意的趨勢》
3. 《這3個流行趨勢雖然好，但依然要注意這些細節》
4. 《看了那么多的設計趨勢，你知道怎么落地實踐嗎？》

本文由優設網原創翻譯，請尊重版權和譯者成果，轉摘請附上優設鏈接，違者必究。謝謝各位編輯同仁配合。

================明星欄目推薦================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備：http://hao.uisdc.com