有人說過，想要知道一個網頁設計師是否專業，就讓他設計一個黑色系網站。的確，真正漂亮的黑色系網站大多出自真正專業的設計師之手。黑色是經典的色彩，更是神秘的色彩，它蘊含著攻擊性，深藏著邪惡的種子，但他在邪魅中還隱藏著優雅，在沉穩中里還包含權威，它與力量密不可分。黑色中潛藏著善與惡，但是不管它表達著怎樣的情緒，它都是最具有表現力的色彩之一，強烈而鮮明。這也解釋了為什么黑色會廣泛應用于各個領域。那么，黑色系網站到底蘊含著怎樣的能量呢？

今天的文章就是為了探索這個問題，同時也在是戰中告訴你，到底怎樣的黑色系網站設計，才能讓人難忘。

當設計師在UI設計中使用黑色的時候，他們通常想營造優雅的氣質，或者權威的氣息，打造神秘或者力量感十足的效果。

所以，當黑色同銳利多變的排版結合起來，配合科技感十足的抽象動畫，輔以互補的對象，加上對比色和輔助色，頁面就會擁有獨特而鮮明的質感。黑色系的網頁設計往往可以順利隱藏一部分缺陷，并讓一些內容和效果突出展現。這種“沒有光線”的頁面設計會在日常使用的大量白色系為主的網站中脫穎而出。

那么，接下來我們來看案例吧。

Thomas Rhythm

非凡的細節設計和氣息獨特的個人風格從黑色的頁面中自然而然地逸散出來，整個頁面在沉穩的黑色中展現出令人著迷的節奏感，黑色的視覺吸引力在這個案例中得到了清晰的呈現。

Roidna

黑色的背景色是呈現鮮艷色彩的天然載體，它能讓這些元素成為視覺的焦點，抓住用戶全部的吸引力。Roidna 的頁面中許多元素都采用了霓虹綠，它成功地讓每個訪客都不得不盯著它們看。

This Was My Best

This Was My Best 是一個高端的作品展示網站，它展示了每個設計師最優秀的作品。傳統而經典的黑白系配色互相映襯，讓藝術家們的作品更加突出。整個網站的細節設計微妙而漂亮。

YnY

和前面幾個站的設計類似，YnY 的頁面也同樣是兩種基本色設計而成，優雅而精致。值得注意的是，設計師在網頁中加入了許多裝飾用的小橫線，它們很好將不同的元素串聯到了一起，讓不同的元素在視覺上產生了關聯。

Tim Brack

所有無用的信息都被Tim Brack 從首頁上移除了，讓用戶可以直接關注到黑色背景映襯下的設計作品。大量的留白讓黑色的背景也呈現出一種干凈的感覺。

Self-Destructing Book

Self-Destructing Book 是一個非常神奇的項目，它會在第一時間引起你的興趣。黑色的背景營造出充滿科技感的氛圍，配上清爽的小塊內容和有趣的動效，給人探索的欲望。

We Make Awesome

同樣沿襲這黑白強對比的設計，We Make Awesome 的頁面中黑色背景中使用了許多高透明度的文字疊加在黑色的背景中，視覺重心用的是大標題，粗糙銳利的白色筆刷字體加紅色的點綴，醒目又不單調。

Brio

Brio 的首頁被分為三個部分，歡迎訪客的文案區、郵件訂閱框和一組照片，黑色讓整個頁面顯得沉穩而安定。

Eau de Design

點綴在黑色背景和白色文字中的金色橫線點亮了整個頁面，黑色背景中若隱若現的圖案和漸變的文字讓頁面有了縱深和層次，不再單調。

Video Mapping Loops

深沉的黑色背景讓白色的文字非常顯眼，整個頁面的設計則采用了經典的單頁設計，視頻、圖片、文字、動畫等元素在頁面中大多以視覺中心的形式存在。

FS Millbank

FS Millbank 的頁面設計同樣也是以吸引用戶注意力見長，頁面設計的重心在于呈現新的字體族。黑白極簡風之下，設計師將全新的字體族以不同的尺寸、透明度錯落地呈現出來，打造出優雅而漂亮的布局。同樣的，設計師將箭頭用黃色標識出來，引導用戶點擊繼續查看。

Raphael Malka

Raphael Malka 在頁面的裝飾和配色上總的是更傳統的方式，他對于極簡風有著明顯的傾向。近年流行的幽靈按鈕、漢堡圖標和一些用戶體驗設計，都可以在這個看起來很簡單的網頁中找到。

Music

作為一個音樂網站，霸氣十足的字體效果在黑色的映襯下顯得更加突出，同時也突出了整體的神秘感。

Bind Film

黑色的背景不僅僅是讓網站的內容更突出了，巧妙的布局讓黑色作為留白的功能更加突出，黑色也使得導航欄中的內容顯得更加明顯了，換成白底效果會明顯差很多。

Dream and Reach

半透明的黑色圖層讓底部的圖片和內容能被看到，但是又不會造成干擾，在這種背景上，兩個明顯的動作召喚按鈕給用戶帶來了暢快的體驗。

Mix Event

活潑有趣的圖片疊加上了黑色半透明層作為背景，營造出與音樂相關的氛圍，華麗復雜而復古的黃色徽章在整個頁面中是最顯眼的元素，它與整個網站主題貼合而又足夠有氣場，獨特的色彩也使得它成為了頁面的中心焦點。

Authentic Form and Function

如畫的風景被制作成為黑白照片背景，金色和白色的文字在整個排版設計中起到了關鍵的作用。配合上動畫圖標和獨特的布局，頁面給人的印象非常深刻。

Trif

Trif 擁有一個另類而神秘的首頁，黑色系的頁面中白色的幾何圖案構成的短動畫不停地循環播放，突出的視覺設計讓訪客對這個頁面欲罷不能。

Romeo Fragt Julia

這個以視覺設計為導向的網站并沒有使用多種多樣的UI元素，一切設計都是圍繞著突出圖片內容。

Serapian

對于時尚圈而言，黑色的色調總能帶來神秘、奢華、低調的質感，不論是作為產品色還是襯托色。所以，在設計頁面的時候這位設計師為了突出這個深藍色的皮質手包，采用了黑色的背景，配合金色的紋理增加質感。

原文地址：designmodo

譯文地址：uisdc

譯者：@陳子木

======關于旺叫獸======

旺叫獸，發燒級玩家，關注互聯網科技，WeMedia自媒體聯盟成員。

個人博客：www.ActorZ.Me

微信公眾號：旺叫獸【ID:ActorZ-Me】

新浪微博：@旺叫獸；個人微信號：GeekMars

章來源于 優設，感謝作者 CARRIE COUSINS 給我們帶來經精彩的文章！

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

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

深色系配色+動效

Meida

Impero

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

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

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

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

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

運作機制

Garden8

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

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

幾乎沒有太多明晰的對比

整體設計看起來極其簡單

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

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

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

不一定非得是黑色的

FedEx-track

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

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

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

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

這一是趨勢的局限性

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

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

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

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

導航和CTA元素并不好安置

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

部分用戶可能并不喜歡網站所呈現出的情緒

用戶可能會在較短的時間內厭倦

使用時候的注意事項

Formigari

The Great

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

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

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

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

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

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

接下來會怎樣?

Blairwitch

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

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

結語

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

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

色就像黑白攝影一樣，相當有吸引力，2019年的項目便可考慮黑色、暗調的設計配色。