2015年最優秀的20款網站配色方案

編者按：網頁設計領域的業界良心Awwwards除了每天推薦好網站，定期做評比之外，還會在博客里面推薦各種網頁設計的技巧和總結，今天的這篇文章最初是源于一個探索性的項目，項目結果炫酷然而乍一看并沒有什么卵用，不過，如果將這個項目同最近選出的20個配色優秀的網站相互印證，足以看出時下配色的大趨勢。當然，好人做到底，作者干脆把時下流行的基于Material Design 的配色工具連同常用而經典的配色工具一同推薦給你，這也構成了今天文章的三大部分。OK，正文開始~

幾周以前，供職于 Jam 3 的圖像開發者 Matt DesLauriers （@mattdesl）向我們展示了Awwwards 平臺上的一個有趣的發展趨勢。正如同你所看到的，Awwwards 從 2009 年開始就專注于搜集網絡上最有修的網站，而這些網站就是網頁設計趨勢分析的重要素材和來源。

“這個項目始于一個實驗：當時我剛剛開始學習Node，正打算在Awwwards上挖掘一些數據可視化的案例?！?/p>

Matt 開發了一個工具，它可以抓取每一個Awwwards的獲獎網站的元數據，比如站點名稱、開發者、日期、URL、縮略圖，等等等等。這個工具還會分析每個網站縮略圖的配色，生成一套相對粗略、包含三個主色的配色方案。

如果將其按照日期和亮度來進行排序的話，會得到下面的圖：

獲取配色方案的數據之后，工具將每個網站的三色配色方案用餅狀圖呈現出來，在Canvas2D的渲染下生成上方的圖片。在這個過程中，Matt還使用了Node.js、d3.js、Cheerio，Browserfy 等開源工具。

由于采樣巨大，信息量驚人，想一眼洞見規律并不容易，但是仔細觀察你會看到配色方案演進還是隱隱遵循著某種趨勢和規律的。

1、20個配色最佳的“每日一站”

Awwwards 每天推薦的網站都是設計技術俱佳的優質案例，由于評選過程中網站的不同屬性都會被打分，因此配色優劣在這里也是被量化的。所以，文章這一部分是從最近幾個月的每日一站中精選的20個配色頂尖的優質網站。如果你需要現成的配色方案，直接借鑒下面的方案吧。

Créations Namale?By Phoenix The Creative Studio

LEVEL?By Vide Infra

Brdr. Krüger?By Relax, we are the good guys

Dream Team Katarzyna Konkowska?By BrightMedia

L’Avenir, Dental Clinic?By Phoenix The Creative Studio

QED Group?By madeo

Quay Restaurant?By Pollen

Teye?By denkwerk

Weber – BBQ Cultures?By UncleGrey & MediaMonks

Tens Sunglasses?By Elegant Seagulls

Helbak Ceramics?By Anders Bergh

Crea Carte?By Dataveyes

Suspended Animations 2015?By Baptiste Briel & Flavinsky

Pablo The Flamingo?By Pascal van der Haar & Nathan Gordon

Baku 2015 – Follow the flame?By Steven Delcourt

Bonhomme?By Bonhomme

Austrian Summer Moments?By Loop

Reebok: Be More Human Experience?By Venables Bell & Partners, welikesmall

BRANDTS – Museum For Art & Visual Culture?By Stupid Studios

Anton & Irene?By Anton & Irene, Oleg Chulakov Studio

? ? ?

(編輯：小酷)