2015-12-8 用心設計
如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里
雖然如今好的配色方案已經唾手可得，但為數據可視化找到合適的配色方案，卻仍是一項巨大挑戰。
在Graphiq，事情甚至更加棘手，因為我們要通過上千種各不相同的數據集合來傳遞信息，它們有著各自迥異的視覺表現。
我們沒有立刻開始建立自己的配色表，而是發起了一些調查，研究網絡上已存在的配色方案。令人驚訝的是，我們發現其中只有少數是為復雜的圖表和數據可視化而設計的。我們發現一些不能使用現有配色的原因。
我們看過的許多配色方案都不適用于數據可視化。不僅由于顏色的明度差異不大，其實它們在創造時就沒有考慮過辨識度。Flat UI配色是最廣泛使用的配色之一，原因顯而易見：它非常優秀。但是，正如它名字所述，這是為界面而設計的。使用Flat UI配色的話，色盲者就難以辨認出數據圖像。
Flat UI配色的完整色彩、紅色盲模式、灰度模式。
另一個問題是，許多現有配色方案沒有足夠的顏色。創造Graphiq的數據可視化時，我們需要至少6種顏色的配色方案，甚至有時需要8到12種顏色，才能滿足所有的應用場景。我們看過的許多配色方案都沒有足夠多的色彩供選擇。
下面是Color Hunt里的一些例子：
雖然這些都是很棒的配色，但它們都不夠靈活，無法提供豐富的色系。
不過等一下，還有一些配色方案看起來像是漸變——理論上說可以創造出任意數量的顏色，對吧？
不幸的是，它們明度差異通常不大，其中許多顏色很容易變得無法區分，就像這一組，同樣來自Color Hunt：
我們試著選第一組，把它擴展為10級色彩：
如果普通用戶能正確的區分出這些顏色，并與相應的數據項對應起來，我就服了，尤其是能區分出左邊的4種綠色。
在Graphiq，我們以數據為生命，并且投入了大量時間尋找能夠用于數據可視化的配色方案，不是一組，而是許多組。我們在這個過程中受益良多，并且打算分享這些能夠創造出靈活配色的準則：
要確保配色非常容易辨識與區分，它們的明度差異一定要夠大。明度差異需要全局考慮。選擇一種單色系的配色，并且測試它在紅色盲、綠色盲與灰度模式下的表現。你就能迅速了解這個配色的辨識度水平。
Google Material配色中的淺藍色的完整色彩、紅色盲模式與灰度模式。
但是，有一組明度跨度大的配色還不夠。配色越多樣，用戶越容易將數據與圖像聯系起來。如果能善加利用色調的變化，就能使非色盲用戶更加輕松。
對于明度與色調，跨度越大，就能承載越多的數據。
設計師都知道一個小秘密，對于理性派們而言這似乎不符合常識：并非所有顏色都是均等的。
從純數學的角度來看，淡紫到深黃的過渡，與淡黃到深紫的過渡，感覺大概相似。但我們在下面可以看到，前者感覺很自然，后者則不是。
這是由于我們已經習慣于那些長期存在于自然界中的漸變。在華麗的日落中，我們就能看到明黃色向深紫色的漸變，但卻沒有哪里能看到淡紫色向深黃色的過渡。
漸變配色結合不同色調，對兩者都最好。無論你需要2種顏色還是10種，漸變中都能提取出這些顏色，讓可視化圖表感覺自然，同時保有足夠的色調與明度差異。
改用漸變的思維并不容易，不過有個好方法，可以在Photoshop中拉輔助線到斷點位置，與數據的數量對應上，然后持續對漸變進行測試與調整。以下是我們在修正漸變時產生的屏幕截圖。
可以看到，我們將配色表緊挨著頂部的灰度漸變，調整漸變疊加（之后就能得到的漸變色值），然后從那些斷點處選取顏色，測試配色在實際運用中的效果。
我們對最終成果感到興奮。下面是我們使用的部分配色，它們都有從純白到純黑的漸變，以達到最大限度的明度差異。
冷色、暖色和霓虹色。
盡管優秀的配色方案越來越多，但并非所有都適用于圖表和數據可視化。我們的配色方法就是創建色調與明度變化都足夠大的自然漸變。這么做能使我們的配色便于色盲辨識，對其他人則更明顯，并且可以滿足1到12種數據。
這個過程中，我們發現了一些很棒的資源和文章，與我們得出的結論類似，但他們采用了更的方法，甚至鉆研了色彩理論。我們覺得應該分享出來，供大家深度閱讀：
我們還找到一些其他愛不釋手的配色資源。雖然它們并非專為數據可視化而設計，不過我們覺得或許對你有幫助。
希望本文對你有所幫助！你建立配色方案的過程是怎樣的？你還用到其他的工具嗎？我們想聽聽你在配色與可視化圖表方面的經驗。
想了解更多我們的工作流程，請訂閱我們的刊物：Graphiq Engineering。
原文鏈接：medium
作者：Samantha Zhang
譯文地址：可樂橙
藍藍設計( www.lapeinture.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供有效的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
每一個扁平化界面設計，都是我們的心靈碰撞致力于最棒的 metro ui 設計
來源：莫貝網