曾有人說過,想要知道一個網(wǎng)頁設(shè)計師是否專業(yè),就讓他設(shè)計一個黑色系網(wǎng)站。的確,真正漂亮的黑色系網(wǎng)站大多出自真正專業(yè)的設(shè)計師之手。黑色是經(jīng)典的色彩,更是神秘的色彩,它蘊含著攻擊性,深藏著邪惡的種子,但他在邪魅中還隱藏著優(yōu)雅,在沉穩(wěn)中里還包含權(quán)威,它與力量密不可分。黑色中潛藏著善與惡,但是不管它表達著怎樣的情緒,它都是最具有表現(xiàn)力的色彩之一,強烈而鮮明。這也解釋了為什么黑色會廣泛應用于各個領(lǐng)域。那么,黑色系網(wǎng)站到底蘊含著怎樣的能量呢?
今天的文章就是為了探索這個問題,同時也在是戰(zhàn)中告訴你,到底怎樣的黑色系網(wǎng)站設(shè)計,才能讓人難忘。
當設(shè)計師在UI設(shè)計中使用黑色的時候,他們通常想營造優(yōu)雅的氣質(zhì),或者權(quán)威的氣息,打造神秘或者力量感十足的效果。
所以,當黑色同銳利多變的排版結(jié)合起來,配合科技感十足的抽象動畫,輔以互補的對象,加上對比色和輔助色,頁面就會擁有獨特而鮮明的質(zhì)感。黑色系的網(wǎng)頁設(shè)計往往可以順利隱藏一部分缺陷,并讓一些內(nèi)容和效果突出展現(xiàn)。這種“沒有光線”的頁面設(shè)計會在日常使用的大量白色系為主的網(wǎng)站中脫穎而出。
那么,接下來我們來看案例吧。
非凡的細節(jié)設(shè)計和氣息獨特的個人風格從黑色的頁面中自然而然地逸散出來,整個頁面在沉穩(wěn)的黑色中展現(xiàn)出令人著迷的節(jié)奏感,黑色的視覺吸引力在這個案例中得到了清晰的呈現(xiàn)。
黑色的背景色是呈現(xiàn)鮮艷色彩的天然載體,它能讓這些元素成為視覺的焦點,抓住用戶全部的吸引力。Roidna 的頁面中許多元素都采用了霓虹綠,它成功地讓每個訪客都不得不盯著它們看。
This Was My Best 是一個高端的作品展示網(wǎng)站,它展示了每個設(shè)計師最優(yōu)秀的作品。傳統(tǒng)而經(jīng)典的黑白系配色互相映襯,讓藝術(shù)家們的作品更加突出。整個網(wǎng)站的細節(jié)設(shè)計微妙而漂亮。
和前面幾個站的設(shè)計類似,YnY 的頁面也同樣是兩種基本色設(shè)計而成,優(yōu)雅而精致。值得注意的是,設(shè)計師在網(wǎng)頁中加入了許多裝飾用的小橫線,它們很好將不同的元素串聯(lián)到了一起,讓不同的元素在視覺上產(chǎn)生了關(guān)聯(lián)。
所有無用的信息都被Tim Brack 從首頁上移除了,讓用戶可以直接關(guān)注到黑色背景映襯下的設(shè)計作品。大量的留白讓黑色的背景也呈現(xiàn)出一種干凈的感覺。
Self-Destructing Book 是一個非常神奇的項目,它會在第一時間引起你的興趣。黑色的背景營造出充滿科技感的氛圍,配上清爽的小塊內(nèi)容和有趣的動效,給人探索的欲望。
同樣沿襲這黑白強對比的設(shè)計,We Make Awesome 的頁面中黑色背景中使用了許多高透明度的文字疊加在黑色的背景中,視覺重心用的是大標題,粗糙銳利的白色筆刷字體加紅色的點綴,醒目又不單調(diào)。
Brio 的首頁被分為三個部分,歡迎訪客的文案區(qū)、郵件訂閱框和一組照片,黑色讓整個頁面顯得沉穩(wěn)而安定。
點綴在黑色背景和白色文字中的金色橫線點亮了整個頁面,黑色背景中若隱若現(xiàn)的圖案和漸變的文字讓頁面有了縱深和層次,不再單調(diào)。
深沉的黑色背景讓白色的文字非常顯眼,整個頁面的設(shè)計則采用了經(jīng)典的單頁設(shè)計,視頻、圖片、文字、動畫等元素在頁面中大多以視覺中心的形式存在。
FS Millbank 的頁面設(shè)計同樣也是以吸引用戶注意力見長,頁面設(shè)計的重心在于呈現(xiàn)新的字體族。黑白極簡風之下,設(shè)計師將全新的字體族以不同的尺寸、透明度錯落地呈現(xiàn)出來,打造出優(yōu)雅而漂亮的布局。同樣的,設(shè)計師將箭頭用黃色標識出來,引導用戶點擊繼續(xù)查看。
Raphael Malka 在頁面的裝飾和配色上總的是更傳統(tǒng)的方式,他對于極簡風有著明顯的傾向。近年流行的幽靈按鈕、漢堡圖標和一些用戶體驗設(shè)計,都可以在這個看起來很簡單的網(wǎng)頁中找到。
作為一個音樂網(wǎng)站,霸氣十足的字體效果在黑色的映襯下顯得更加突出,同時也突出了整體的神秘感。
黑色的背景不僅僅是讓網(wǎng)站的內(nèi)容更突出了,巧妙的布局讓黑色作為留白的功能更加突出,黑色也使得導航欄中的內(nèi)容顯得更加明顯了,換成白底效果會明顯差很多。
半透明的黑色圖層讓底部的圖片和內(nèi)容能被看到,但是又不會造成干擾,在這種背景上,兩個明顯的動作召喚按鈕給用戶帶來了暢快的體驗。
活潑有趣的圖片疊加上了黑色半透明層作為背景,營造出與音樂相關(guān)的氛圍,華麗復雜而復古的黃色徽章在整個頁面中是最顯眼的元素,它與整個網(wǎng)站主題貼合而又足夠有氣場,獨特的色彩也使得它成為了頁面的中心焦點。
如畫的風景被制作成為黑白照片背景,金色和白色的文字在整個排版設(shè)計中起到了關(guān)鍵的作用。配合上動畫圖標和獨特的布局,頁面給人的印象非常深刻。
Trif 擁有一個另類而神秘的首頁,黑色系的頁面中白色的幾何圖案構(gòu)成的短動畫不停地循環(huán)播放,突出的視覺設(shè)計讓訪客對這個頁面欲罷不能。
這個以視覺設(shè)計為導向的網(wǎng)站并沒有使用多種多樣的UI元素,一切設(shè)計都是圍繞著突出圖片內(nèi)容。
對于時尚圈而言,黑色的色調(diào)總能帶來神秘、奢華、低調(diào)的質(zhì)感,不論是作為產(chǎn)品色還是襯托色。所以,在設(shè)計頁面的時候這位設(shè)計師為了突出這個深藍色的皮質(zhì)手包,采用了黑色的背景,配合金色的紋理增加質(zhì)感。