UI Color Guide
色彩一直是一個習(xí)慣被爭論的話題彬呻，設(shè)計(jì)師說是紅色的冤竹，CEO說是藍(lán)色的溶浴，CTO說是#2D88F3钉寝，CMO說為什么不是IOS7的梯度弧呐。
之前的文章《UI設(shè)計(jì)系統(tǒng)》中，提到了顏色是一個設(shè)計(jì)語言的關(guān)鍵基礎(chǔ)嵌纲，這是個有趣的主題泉懦，因?yàn)閁I的顏色系統(tǒng)不像品牌的色彩那么容易。UI中的色彩是活躍的疹瘦。一個顏色不僅僅是一個頁面上漂亮的點(diǎn)崩哩，更是一個信號，引導(dǎo)一些行為或者傳達(dá)一些想法言沐。
在我們開始選擇色彩之前邓嘹，先要運(yùn)用我們腦海中的設(shè)計(jì)原則：
誰是用戶？他們的特點(diǎn)险胰，習(xí)慣汹押，喜好是什么？
UI需要傳達(dá)怎么樣的信息和聲音起便？
這次的UI Guideline 我們要實(shí)現(xiàn)什么目標(biāo)棚贾？
當(dāng)你準(zhǔn)備好了窖维，就可以開始了：
1.Primary colors（主色）
通常的品牌顏色，主色是用戶看到的最多的顏色妙痹。人的大腦對接收顏色和數(shù)字有限铸史，我們不能說出可口可樂的紅色和Target的紅色的不同，但肯定的是怯伊，我們知道百事的藍(lán)色和可口可樂的紅色的區(qū)別琳轿。主色的數(shù)量控制在一個或兩個是最理想的狀態(tài)。
除了主色耿芹，設(shè)計(jì)師可以根據(jù)具體情況的需要崭篡，形成次要輔助的顏色集。
2. Accent Color（強(qiáng)調(diào)色）
用來強(qiáng)調(diào)動作和突出顯示信息：文字吧秕，喚起動作琉闪，浮動按鈕（MD Design），進(jìn)度條砸彬，選擇控件颠毙，特殊按鈕，滑塊拿霉，鏈接...? 根據(jù)主色吟秩，強(qiáng)調(diào)色可以通過色環(huán)選取咱扣，比如運(yùn)用：類似绽淘，單色，補(bǔ)充闹伪，分裂補(bǔ)充沪铭，三角形...等原則。
如果選取的強(qiáng)調(diào)色對于背景太深或者太淺偏瓤，應(yīng)該另外選一個杀怠。
強(qiáng)調(diào)色是活潑和有趣的，但是容易被忽視的是強(qiáng)調(diào)色只占整個產(chǎn)品的10%厅克，理想的色彩比例是6-3-1赔退。60%的主色，30%的輔助主色证舟，10%的強(qiáng)調(diào)色硕旗。正所謂如果所有人都是英雄，那就沒有英雄女责。然而現(xiàn)實(shí)的情況是多種多樣的漆枚，還是需要根據(jù)實(shí)際情況來定。
3.Semantic Colors（語義色）
失敗抵知，成功墙基，警告软族，信息提示。這些顏色是基于對信號心理學(xué)的一個堅(jiān)實(shí)的研究：
紅色代表了失敗残制，錯誤和危險(xiǎn)立砸。
綠色代表了成功，安全和正確痘拆。
黃色代表了警告仰禽，警戒和提醒。
藍(lán)色代表了信息纺蛆。
4.Neutrals（中性色）
白色吐葵，黑色或灰色。
這些顏色通常用于字體和背景桥氏。為了做到這一點(diǎn)温峭，MD Design 有一個黑科技，為了替代定義黑色和灰色的特殊代碼字支，他們使用了黑色的不透明度來用在排版上凤藏，也就是說，不需要去定義一個灰色的代碼堕伪，他們只是調(diào)整黑色的透明度為54%揖庄，81%或者其他。
但不管哪種方式欠雌，關(guān)鍵點(diǎn)是在對象和背景之間的對比蹄梢。檢查這些顏色的對比度是非常重要的。
5.Chart（圖表色）
設(shè)計(jì)一組10或者20個顏色富俄，以一個特定的順序?qū)?shù)據(jù)視覺化禁炒。數(shù)據(jù)的工程師可以輕松地應(yīng)用他們，然而霍比，這也是一項(xiàng)較為困難的工作幕袱。
1.分類（Categorical）：包含了許多顏色，彼此之間保持一定的對比度悠瞬，以一個特定的順序排列们豌，此集合呈現(xiàn)不同類型的數(shù)據(jù)（柱狀圖，折現(xiàn)圖...）
2.順序（Sequential）：固定浅妆，增量變更（熱點(diǎn)圖望迎，樹狀圖...）
3.偏振（Polarize）：一個序列的兩個極端（多用于熱點(diǎn)圖）
4.數(shù)據(jù)的特殊狀態(tài)：沒有數(shù)據(jù)，錯誤/空值/不正確的數(shù)據(jù)狂打，我們總是選擇灰色對應(yīng)空數(shù)據(jù)擂煞，白色對應(yīng)沒有數(shù)據(jù)。當(dāng)然趴乡，這兩種顏色又是彼此獨(dú)特的对省。
5.特殊元素（大多數(shù)應(yīng)用于中性的）：工具提示蝗拿，圖表標(biāo)題，數(shù)據(jù)點(diǎn)蒿涎，圖表軸哀托，線和數(shù)值...
在設(shè)計(jì)UI Guideline的時候最后一個注意事項(xiàng)：
KISS?—?Keep It Systematic Simple
關(guān)鍵詞：Design，Colors 劳秋，Guideline
原文鏈接：https://blog.prototypr.io/basic-ui-color-guide-7612075cc71a#.orksm2m1v
