藍(lán)藍(lán)設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供有效的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里

來源：優(yōu)設(shè)網(wǎng)

編者按：黑白灰的經(jīng)典配色是永恒不變的教父級色彩，也是含蓄內(nèi)秀的典范。今天@飛屋睿UIdesign挑選了13個優(yōu)雅的黑白灰配色網(wǎng)站，同學(xué)們也可以拿來作為網(wǎng)頁設(shè)計時色系風(fēng)格的參考 >>>

@飛屋睿UIdesign ：在經(jīng)典配色中，可能每個人都不會否認(rèn)黑白灰的永恒魅力。雖然人們總是想“outstanding”，眼球搶奪，注意吸引……但想要把用戶永遠(yuǎn)留住，除了第一印象，更多需要日后方方面面的細(xì)節(jié)。況且在我們的身邊已經(jīng)太多色彩大爆炸了，我們顏色識別系統(tǒng)也許到了某一峰值，總也想要有停下運(yùn)轉(zhuǎn)的時刻。這時，黑白灰的配色就從一大堆顏色中尤為突出，甚至能讓人心恢復(fù)平靜，這也是這兩年開始盛行極簡風(fēng)格的原因。

1、Aristo

裝潢建筑設(shè)計機(jī)構(gòu)以黑、白以及金色作為其主色調(diào)搭配，與其本身所傳達(dá)的設(shè)計哲學(xué)不無深沉的關(guān)系。頁面結(jié)構(gòu)簡單、干凈、簡約。主頁圖片都被抽去了色彩，只保留低調(diào)的灰色階，而輔助的其他顏色也依然保持低調(diào)、內(nèi)斂，突顯出另一種奢華。

2、Basic

以黑白灰配色，同時非常少量地運(yùn)用其他鮮明的色調(diào)，幾乎是黑白灰配色的秘籍之一，然而在整個構(gòu)圖上，還需要更多空間，才能表達(dá)出平靜、冷酷中的躍動感。這個網(wǎng)站的設(shè)計遵守了這一秘籍，但又增加了其他的圖片色，讓畫面略顯復(fù)雜。

3、Callens

以兩張隨意疊放式樣的圖片居于正中，足夠的留白給人以想象的空間，用色謹(jǐn)慎，讓人感覺這確實(shí)是高端品牌的氛圍。

4、Driftwoodeditions

獨(dú)立的小型出版社，成品選用黑白，整個網(wǎng)站也使用黑白，氛圍過于嚴(yán)肅。但卻能體現(xiàn)出出版行業(yè)的類似黑白影印的質(zhì)感。

5、Designembraced

以大圖全屏展示作品細(xì)節(jié)的網(wǎng)站來說，黑白灰似乎是唯一的選擇，但同時，設(shè)計師也安排了紅色。在大圖展示的交互上非常巧妙。黑色傳遞出一種酷，深色氛圍，更加凸顯細(xì)節(jié)中的閃光點(diǎn)。

6、Echo

頁面采用黑白線條，顯得大氣，但容易給人眼花繚亂的效果。往下拉的介紹中，文字都采用黑白，而在指向時又顯示為一種彩色。偏愛的豎線，在人物形象處用上給人以現(xiàn)代和時尚感。

7、Fixate

整個首頁采用黑色線條矢量圖組成一個密集式的豐富多彩的圖片，突出設(shè)計原創(chuàng)性。而字體也與此相稱，整個網(wǎng)站設(shè)計感很強(qiáng)，還適當(dāng)裝飾了動畫效果，不失為上乘之作。

8、Functionals

家居設(shè)計公司網(wǎng)站，主題依然讓渡給內(nèi)容，讓家居設(shè)計本身說話。在黑白配色基礎(chǔ)上，配以木質(zhì)的奶黃色，讓人聯(lián)想到木質(zhì)家居，營造一種輕松明快的氛圍。

9、Huntly

室內(nèi)設(shè)計工作室以白色作為其主色，給人以空間感，首頁對自我形象的表達(dá)和包裝，顯得流暢、簡潔。而在黑白的簡單配色中隱含了明黃色，作為強(qiáng)調(diào)色，在此讓整個網(wǎng)站顯得更加活潑、鮮明。

10、Johnson, B. C

科學(xué)家Johnson, B. C的個人博客，背景使用他的科研領(lǐng)域的自然圖片，配色為深黑，突出嚴(yán)謹(jǐn)、神秘以及酷的印象。

11、readcereal

灰色調(diào)背景的網(wǎng)站，讓整個氛圍趨于平淡，而配合使用高品質(zhì)的同樣色系的圖片，感覺非常雅致。

12、Taostudio

以一種米色粉作為底色，和傳統(tǒng)的黑白灰網(wǎng)站不同，它傳達(dá)出一種溫馨感。而主頁對縮略圖的排列和設(shè)計極富新鮮感以及整體感。運(yùn)用簡單的線條手繪圖搭配得恰到好處。

13、vincefrost

黑白的滿屏大圖，大型的文字，沉浸式的導(dǎo)航和內(nèi)容。在鼠標(biāo)經(jīng)過會有些許色差呈現(xiàn)。整個網(wǎng)站架構(gòu)清晰、操作流暢。

【飛屋同學(xué)的私家精品教程人氣榜】

TOP 1：教你快速搞定大受歡迎的多邊形背景！
《AI新手教程！教你簡單快速地將圖片變成多邊形背景》

TOP 2：手把手教你找到免費(fèi)優(yōu)質(zhì)的高清大圖！
《私家好貨！設(shè)計師的高清圖庫收藏夾（附使用技巧）》

TOP 3：讓配色變得特別方便簡單的新手教程！
《配色弱有救了！教你利用圖片創(chuàng)建獨(dú)有的色彩方案！》