本期翻譯的文章來自?Zack Gehin第献，通過這篇文章瘦黑，你將會了解到創(chuàng)建色板的技巧往弓，從而幫助你成功的向用戶傳達(dá)你的產(chǎn)品性格态兴。

設(shè)計師們通常會在用戶界面上使用高亮的顏色和吸引眼球的調(diào)色板笛坦，從而使得產(chǎn)品看起來更加現(xiàn)代和清新区转。但是有沒有人停下來想一想：自己創(chuàng)建的色板是不是很好的支撐了用戶體驗，符合用戶模型版扩，以及符合用戶使用應(yīng)用時的場景废离？

最近的新聞

上周，Atlasssian團隊發(fā)布了充滿生機的全新UI和品牌設(shè)計礁芦。Atlasssian和它的產(chǎn)品“Confluence”目前正以新的風(fēng)格和調(diào)色板呈現(xiàn)在人們面前蜻韭，文字則使用了Airbnb的字體“circular”。

明亮顯眼宴偿，令人尖叫的藝術(shù)范湘捎，自然風(fēng)格，幾何型窄刘。但是這些對于開發(fā)者來說真的合適嗎窥妇？

很明顯，設(shè)計團隊充分遵循了Spotify的設(shè)計系統(tǒng)娩践，這本身沒有什么錯活翩，但也不意味著就是正確的選擇烹骨。在這個事件中，就像一個小丑打扮成一個書呆子和一個書呆子打扮成一個小丑材泄。我很抱歉引用了一些老套的東西沮焕，但是真的。這難道不像是萬圣節(jié)的打扮嗎 ?

這是一個開發(fā)人員在網(wǎng)上調(diào)侃的反饋

“這顏色亮瞎了我的鈦合金眼……”

我們不要總是想著讓人眼前一亮拉宗，不要再為日常生活帶來過多的色彩刺激峦树，也不要讓人感到不舒服。

讓我們開始在顏色的選取上花一些時間旦事，這是絕對值得的魁巩。 讓我們給設(shè)計過程留足夠的時間，以設(shè)計出一個和諧一致姐浮，并且可以通過實驗檢驗的的調(diào)色板 谷遂。幫助人們可以正常使用我們的應(yīng)用程序，并幫助人們使用我們的應(yīng)用程序時感覺良好卖鲤。

一個故事

上周肾扰，我和一位用戶體驗領(lǐng)導(dǎo)進行了聊了聊，我告訴他我是如何創(chuàng)建一個源自藍(lán)色主色調(diào)的調(diào)色板的故事 蛋逾。我發(fā)現(xiàn)最重要的是在應(yīng)用程序被使用的環(huán)境中對調(diào)色板進行壓力測試集晚， 以驗證調(diào)色板的可用性和情感吸引力。

下面是他告訴我的故事：

幾年前换怖，我們聘請了一個機構(gòu)來升級我們的軟件設(shè)計甩恼。 該機構(gòu)帶回來了一個和Spotify相似的驚人的暗黑主題。 團隊中的每個人都很興奮沉颂，感覺非常高大上条摸，堪稱完美。 公司慶祝用戶界面更新的發(fā)布時铸屉，我們非常高興钉蒲，直到一個電話進來。在電話中彻坛，客戶說：

“嘿顷啼，你的新顏色主題真的很絲滑......但是......你試過在外面用嗎？”

建筑軟件的用戶環(huán)境是：辦公大樓昌屉，建筑區(qū)外钙蒙，甚至車輛中。 缺少在室外對調(diào)色板的測試導(dǎo)致了糟糕的體驗间驮。 該產(chǎn)品在用戶最需要的環(huán)境中卻完全無法使用躬厌， 真是一個漂亮的“三不沾”球。

不用說竞帽，這是一個昂貴的錯誤扛施，這本可以通過環(huán)境測試而避免鸿捧。

如何確保您的調(diào)色板實際上是真實醒目以及抓住重點的？

1.保證你的顏色通過可用性對比標(biāo)準(zhǔn)

WCAG 2.0可以幫助我們的設(shè)計師創(chuàng)造最佳體驗疙渣。 讓我們不要再忽略那些行業(yè)大神們投入了時間去創(chuàng)造的標(biāo)準(zhǔn)匙奴。 這種對比度檢查器使你可以快速，輕松地驗證您的顏色選擇妄荔。 如果驗證不能通過泼菌，那么就重新設(shè)計！

2.選擇相同色系的不同深淺和色調(diào)

定義你的主色啦租，比如藍(lán)色

采取這種顏色灶轰，并生成其色階和色調(diào)。 Colllor使這非常容易做到刷钢。

生成之后截圖，然后找出一個色調(diào)來生成你的深色乳附。 基于該顏色生成新的色調(diào)内地。

現(xiàn)在，在sketch中打開你的屏幕截圖赋除，并從每個刻度上的相同位置挑選顏色阱缓。

現(xiàn)在，你將會得到你的色板的第一個版本举农。

這將花費你很多時間荆针。 當(dāng)我為Widen Enterprises創(chuàng)建一個調(diào)色板時，花了40個小時來創(chuàng)建颁糟，測試和迭代航背。 最終結(jié)果很好的達(dá)到了我們的目標(biāo)，準(zhǔn)確的情感表達(dá)和可用性標(biāo)準(zhǔn)相匹配棱貌。 這是多么棒玖媚！一開始我們可能不會注意到這些，但是如果發(fā)現(xiàn)錯誤了婚脱，就會這樣做今魔。

說真的，這個過程非常簡單障贸。 以下是使用Colllor為應(yīng)用程序系列創(chuàng)建的調(diào)色板示例错森。

從這里，我用主色藍(lán)色創(chuàng)建一個了混合顏色的家族篮洁。 可以Adobe Color之類的工具來完成涩维， 雖然這不是完美的 ，有多次的試錯嘀粱，但它會讓你遙遙領(lǐng)先激挪。

3.在多個環(huán)境中測試您的調(diào)色板

這是設(shè)計過程中最重要的步驟之一辰狡。 確定你的用戶使用你應(yīng)用程序的環(huán)境。

環(huán)境測試很簡單垄分，只需要將設(shè)備放在室外宛篇，白天或黑暗的房間里，任何人使用你的應(yīng)用程序并自行測試薄湿！

如果有什么不對勁的叫倍，就去改正你的設(shè)計凤跑！

4.在不同的顯示器上查看你的顏色

雖然我們中的許多人有幸使用最好的工具工作冈绊，但世界上大多數(shù)人不是。 對于我們來說抄瓦，習(xí)慣使用視網(wǎng)膜和5k顯示器是非常容易的坐求。 讓我們退后一步蚕泽，拿出一個Windows筆記本電腦 ，低質(zhì)量的顯示器桥嗤， 你可能會驚訝于你所看到的须妻。

識別要測試的機器和顯示器的一個好方法是從Google Analytics或您有權(quán)訪問的分析工具中提取數(shù)據(jù)。

自己動手試試吧

留出充足的時間去設(shè)計一個合適的調(diào)色板泛领， 帶給你的用戶一個舒適荒吏，合身，愉快的應(yīng)用程序渊鞋，使他們感到幸福绰更，這是多么美妙的事情！