用戶體驗設計師的必備顏色工具

07-10

用戶體驗設計師的必備顏色工具

以下內容由Mockplus團隊翻譯整理，僅供學習交流，Mockplus是更快更簡單的原型設計工具。

顏色是設計工具包中最有利的工具之一。同時，顏色是一個易混概念——無數種顏色均可組合，因而很難決定使用什麼顏色在你的網站或應用程序上。為了讓事情更容易, 我已創建了一個可選擇調色板的最佳工具列表。我想他們會幫你節省大量時間。本文中列舉的工具將會幫助您:

1、找到靈感

2、創建自己的配色方案

3、共享配色方案

1、找到靈感

大自然

其實很多靈感早已圍繞身邊，而你只需要環顧四周即可獲得靈感。出版設計，室內設計，時尚等等，大自然中聚集了如此多鼓舞人心的地方。最好的顏色組合也來自於自然——簡單拍下美麗的瞬間，並從圖片中創造你的配色方案。

最好的顏色組合來自大自然。你可以從照片中創建一個配色方案。

Behance

Behance發現並展示了來自各個行業的創意專業人士的最新組合的在線作品集。這也是靈感的源泉，要找到新鮮有趣的創意作品，只需按顏色過濾即可。

DribbbleColors

Dribbble是用戶界面靈感最好的地方之一。它有用於搜索顏色的工具，所以當你想要對其他設計師使用的特定顏色進行視覺研究時，請點擊 dribbble.com/colors ，並選擇一種滿意的顏色即可。

您還可以指定包含顏色的最小鏡頭百分比（例如，鏡頭是30％藍色）。

指定包含顏色的鏡頭的最小百分比

Designspiration

當你對你的調色板有一個想法的時候，Designspiration是一個很棒的工具，但你要看看組合的例子。您最多可以選擇5種顏色並搜索與您查詢相匹配的圖像。

配色方案最多選擇5種顏色

Designspiration將根據您選擇的顏色提供相關示例

Tineye Multicolr

Tineye將幫助您在照片中搜索混合顏色，甚至可以指定每個顏色的比例（色彩比例）。本網站使用Flickr提供的2000萬張CreativeCommons圖片資料庫。這可能是完美的色彩組合獲得免費圖像的最快方式。

Colorzilla

ColorZilla是Google Chrome和Mozilla Firefox的一個擴展，包括一系列與顏色相關的工具，含有顏色選擇器，滴眼器，css漸變生成器和調色板瀏覽器。

ColorZilla適用於Chrome和Firefox

Shutterstock Spectrum

有時看到色彩方案是否有效的最佳方法是通過選擇儲存圖像。所有主要的圖像服務都提供這種工具，但Shutterstock Spectrum有一個特別好的大型預覽圖像界面。你甚至不需要訂閱，因為具有水印的預覽圖像將足以生成調色板。

2.創建配色方案

Material Design Color Tool

材質設計顏色的工具可以創建、共享和應用調色板到用戶界面，以及衡量所有顏色組合的可訪問性級別。

Coolors.co

Coolors是創建多色方案的強大工具。您可以簡單地鎖定選定的顏色，然後按住空格鍵就能生成新的調色板。這個工具很棒的是不會僅局限於一個結果——只需要修改參考點就可以得到一些配色方案。

使用這個工具也可以上傳一個圖像，並從中製作一個調色板。

Coolors使您能夠上傳圖像並從中製作調色板。

Adobe Color CC

我們熟知的Kuler工具已經陪伴我們很久了。網站和桌面版本均可使用，使用該工具的Web版本，可以使用色輪創建配色方案：

Color CC可讓您創建並保存各種配色方案，每種配色方案都由一組五種顏色組成。

從現有圖像創建配色方案：

從現有的圖像創建配色方案。

或瀏覽「探索」Kuler社區的數千種顏色組合：

如果您使用桌面版本，則可以將配色方案直接導出到Photoshop，Illustrator和InDesign中。

Paletton

Paletton類似於Adobe Color CC。其不同之處在於，您不限於5個色調，還可以使用其他色調演示。

3.顏色共享：

視覺問題比我們大多數人意識到的更為普遍，全世界有2.85億以上的人有視力障礙，還有更多的人有低或中等的視覺困難，因此確保為視力受損用戶提供特定的配色方案至關重要。

WebAIM Color Contrast Checker

一些顏色互相配合，而另一些則會發生衝突，令人詫異的是，很多網站和應用不能通過AA測試，切不可成為他們中的一員！當和文本一起使用時，檢查UI顏色以獲得顏色對比度的可訪問性至關重要，記得使用WebAIM顏色對比檢查器來測試顏色組合。

WebAIM顏色對比度檢查器是一個基於瀏覽器的工具，用於測試以十六進位值指定的顏色代碼。

Coolors

Coolors可以測試色盲患者的配色方案，你需要做的就是在界面中選擇顏色。

選擇一組反映您的配色方案的顏色。

將模式從「正常」更改為您要測試的模式。

選擇一種色盲模式。

一個有色差的人將會看到你的配色方案。

一個紅色色盲患者看到的配色方案

NoCoffee Vision Simulatorfor Chrome

NoCoffeeVision Simulator可用於模擬在谷歌瀏覽器中色盲患者查看到的頁面上的顏色視覺缺陷和低視力的狀況。例如，使用「顏色不足」設置「紅色色覺弱視」，您可以查看灰度網頁。

紅色色盲患者看到的CNN網站

總結

上面提到的工具將會讓你更輕鬆的找到正確的顏色組合。要牢記，想創建令人耳目一新的配色方案的最佳方法是多多練習。

作者： Nick Babich

地址：https://uxplanet.org/essential-color-tools-for-ux-designers-530036eaf9ae

用戶體驗設計師的必備顏色工具

相關閱讀：