在UI設(shè)計(jì)中，我一直都是自學(xué)成才的训堆，我總想知道為什么這么多文章和書(shū)籍談?wù)撋世碚摵驼{(diào)色板。根據(jù)我的經(jīng)驗(yàn)，使用“分割補(bǔ)色調(diào)色板”對(duì)于我制作漂亮外觀設(shè)計(jì)的預(yù)測(cè)大約為0%央拖。
對(duì)于這種事我還有另一個(gè)詞：無(wú)效的
因此，如果色彩理論不能為UI設(shè)計(jì)中的顏色提供堅(jiān)實(shí)的基礎(chǔ)充包，那么會(huì)發(fā)生什么呢娃善？
讓我對(duì)你拋出一個(gè)意見(jiàn)：顏色修改。這是對(duì)顏色的調(diào)整奶是，而不是從顏色理論中挑選出來(lái)楣责。
或者，另一種說(shuō)法:著色界面設(shè)計(jì)的基本技能是能夠?qū)⒁环N基本顏色修改成許多不同的變體聂沙。
我知道這聽(tīng)起來(lái)優(yōu)點(diǎn)奇怪秆麸。聽(tīng)我說(shuō)，我將給你一個(gè)調(diào)整UI設(shè)計(jì)顏色的框架
該框架將：
允許你修改一個(gè)主題顏色逐纬，基本上可以用于您的用戶界面的任何目的（這是非常強(qiáng)大的蛔屹，而且，正如我們將看到的豁生，像facebook這樣的應(yīng)用程序已經(jīng)在做什么）
·幫助你預(yù)測(cè)什么顏色的變化會(huì)看起來(lái)很好兔毒。
·讓顏色看起來(lái)不那么主觀
我們很酷嗎漫贞？我們很酷？
酷
深和淺的變化
我注意到一個(gè)很好到界面是育叁，它們?cè)谔囟ǖ街黝}上經(jīng)常有深和淺的變化
你不認(rèn)為這個(gè)搜索欄只是一個(gè)半透明的黑色疊加迅脐，是嗎？劇透警告：事實(shí)并非如此豪嗽。黑色疊加在藍(lán)色上的不透明度會(huì)給你搜索欄的顏色谴蔑。這是一種魔法的變化。
快龟梦，現(xiàn)在看看Swell Grid隐锭，美麗的沖浪預(yù)測(cè)應(yīng)用程序。
我們剛剛遇到了一大堆變化计贰。那里有多少钦睡？去網(wǎng)站，并自己數(shù)一數(shù)躁倒。實(shí)際上荞怒，此頁(yè)面上的所有內(nèi)容都是最初藍(lán)色的變體。
或者秧秉，這里是另一個(gè)簡(jiǎn)單的例子：
即使元素狀態(tài)也是顏色的變化褐桌。這不是最好的描述為“3藍(lán)調(diào)”。這是一個(gè)藍(lán)色的變化象迎。
但是這引出了一個(gè)問(wèn)題：你如何修改顏色以獲得良好的變化荧嵌？
我們會(huì)講到那里，但我希望你從頭開(kāi)始理解這些東西挖帘。所以這里是我們的2個(gè)可靠的原則來(lái)解決這個(gè)問(wèn)題：
1.我們將在真實(shí)的世界尋找參照線索完丽。盡管我們的界面是“假的”，但我們?nèi)匀幌瘳F(xiàn)實(shí)世界中的瘋狂一樣復(fù)制拇舀，因?yàn)樵诂F(xiàn)實(shí)世界中經(jīng)過(guò)幾十年的觀察逻族，我們只希望光線和顏色在某些方面起作用。
2.我們將使用HSB顏色系統(tǒng)骄崩。它的缺點(diǎn)是：它是最直觀的顏色系統(tǒng)聘鳞，具有廣泛的用途（Sketch和Photoshop）。如果你不知道是什么色相要拂，飽和度和亮度抠璃，讓我們休息一下。10分鐘之后見(jiàn)面脱惰。
真實(shí)世界的顏色變化
好吧搏嗡，環(huán)顧四周。什么“顏色變化”，你無(wú)疑每次看到你的房間周?chē)吹蕉畮讉€(gè)實(shí)例采盒？
陰影旧乞。
你可以將陰影想象成基本顏色上深的變化。
跟著我
現(xiàn)在磅氨，讓我們跳到sketch并獲取我們的拾色器尺栖，并確切了解當(dāng)陰影落在我們的珊瑚墻上時(shí)發(fā)生的情況。
就像我剛才提到的那樣烦租，我們將在HSB中進(jìn)行分析延赌。
亮度下降 - 好吧，這很明顯叉橱。但是挫以，堅(jiān)持下去 - 在我們推斷太多之前，讓我們看看另一個(gè)例子窃祝。
這幅圖的陰影效果如何屡贺？我們即將發(fā)現(xiàn)。
好的锌杀，現(xiàn)在我們可以比較和對(duì)比。注意到一個(gè)模式泻仙。
當(dāng)有一個(gè)顏色的陰影變化糕再，你可以期望亮度下降和飽和度上升。我們只是在兩個(gè)例子中看到了這一點(diǎn)玉转，但就我所見(jiàn)突想，這是一條可靠的規(guī)則。
現(xiàn)在的色調(diào)有點(diǎn)瘋狂-它向下延伸到珊瑚墻的陰影處究抓，然后向上延伸猾担，形成了一層墻的陰影。對(duì)此有一個(gè)解釋?zhuān)蕊柡投?亮度更不重要刺下，也更深?yuàn)W一些——所以我們稍后會(huì)回到色相绑嘹。
讓我們?cè)俳忾_(kāi)一下這些概念。
深的顏色變化=較高的飽和度+較低的亮度
如果你回頭看看我們的Facebook搜索欄例子橘茉，你會(huì)發(fā)現(xiàn)這正是發(fā)生了什么工腋。
隨著亮度下降擅腰，飽和度上升。搜索欄不能是覆蓋在基本藍(lán)色上的不透明度的原因是因?yàn)樵贖SB中翁潘，添加黑色等同于降低亮度趁冈。相反，我們希望在減少亮度的同時(shí)增加飽和度拜马。黑色不會(huì)為我們的顏色添加任何飽和度渗勘！
為什么在現(xiàn)實(shí)世界中沐绒，深顏色與較高的飽和度有關(guān)系？我一點(diǎn)都不知道呀邢。但我總是可以有一些想法：這是因?yàn)殡S著光線強(qiáng)度（亮度）超過(guò)顏色強(qiáng)度（飽和度）洒沦，顏色必然變得更加清晰 - 反之亦然。
這可能是完整的BS价淌，但它那種是有道理的申眼，對(duì)不對(duì)？
淺的顏色變化=更低的飽和度+更高的亮度
現(xiàn)在蝉衣，作為你是挑剔的括尸，博學(xué)的讀者，你可能會(huì)猜到病毡，相反的變化給了我們更深的變化濒翻，會(huì)給我們更淺的變化。
你真高興地釘上了它啦膜。
當(dāng)然有送，我們可以更進(jìn)一步。如果我們繼續(xù)降低飽和度并提高亮度直到頂部僧家，我們最終會(huì)在哪里結(jié)束雀摘？
這里：
我們以白色結(jié)束。
你可以考慮做更淺的變化八拱，因?yàn)樵黾影咨笤Ｔ赟ketch中，有兩種非常簡(jiǎn)單的方法可以將白色添加到顏色中：
1.減少元素的不透明度（如果它在白色背景上）
2.在元素頂部添加一層半透明的白色
最重要的事情
如果您只記得本文中的一件事肌稻，請(qǐng)記住這一點(diǎn)：
通過(guò)降低亮度和增加飽和度來(lái)實(shí)現(xiàn)較深的顏色變化清蚀。通過(guò)增加亮度和降低飽和度來(lái)實(shí)現(xiàn)更淺的顏色變化。
有了這個(gè)簡(jiǎn)單的想法爹谭，你將能夠用一種顏色做出令人驚嘆的事情枷邪。
事實(shí)是，元素之間顏色的多種變化 - 甚至是相同元素的狀態(tài) - 只是簡(jiǎn)單的顏色修改旦棉。
這里是收獲齿风，對(duì)愛(ài)的時(shí)間跟蹤應(yīng)用程序。
看看標(biāo)題绑洛。懸停狀態(tài)較淺救斑。所選狀態(tài)較深。
或者看看綠色的New Entry按鈕真屯。
懸停狀態(tài)是一個(gè)較深的變化 - 較高的飽和度脸候，較低的亮度。
你會(huì)一次又一次地使用它。
公平地說(shuō)运沦，并非所有的設(shè)計(jì)都100％的遵循這個(gè)規(guī)則泵额。在上面的Harvest標(biāo)題中，所選狀態(tài)只是較低的亮度（飽和度不變）携添，懸停狀態(tài)只是較低的飽和度（亮度不變）嫁盲。但是我們已經(jīng)研究過(guò)現(xiàn)實(shí)世界中的顏色是如何運(yùn)作的，而且我們知道為什么這些設(shè)計(jì)看起來(lái)不錯(cuò)烈掠，因?yàn)樗鼈兣c這里列出的原則相近似羞秤。
關(guān)于色相？
說(shuō)到這里所說(shuō)的原則左敌，我們應(yīng)該談?wù)勆囫啊Ｎ乙彩沁@樣說(shuō)過(guò)的，但需要重申的是：色相在整個(gè)飽和度和亮度方向上都是次要的矫限，因此在進(jìn)行顏色調(diào)整時(shí)哺哼，通常可以完全忽略它叼风。
這里是最簡(jiǎn)單的解釋取董。
首先，每種顏色都有一種“感知亮度”无宿。這就是所謂的光度甲葬。
即使這個(gè)藍(lán)色和這個(gè)黃色都是100％HSB亮度，看起來(lái)更亮懈贺？
我的意思是，像在街上問(wèn)任何人：哪個(gè)更明亮坡垫？
“嗯梭灿。黃色。黃色冰悠？”
謝謝堡妒。你剛剛發(fā)現(xiàn)光度。
“所以我是對(duì)的溉卓？”
是的皮迟，是的，你是桑寨。即使你保持亮度和飽和度不變伏尼，只是變化色調(diào)，你也會(huì)得到一系列亮度或感知亮度尉尾，我們測(cè)量的亮度值在0到100之間爆阶。
這些是我們的色相，間隔30°，全部在100％飽和度和100％亮度辨图。
而這里是我們的色調(diào)復(fù)制班套，投入光度混合模式（在白色背景上-這是至關(guān)重要的，如果你沿著sketch以下添加）故河，并用所得灰色的亮度覆蓋吱韭。這給了我們一個(gè)原始顏色亮度的度量。
在亮度混合模式下鱼的，明亮的灰色意味著高亮度理盆，深灰色意味著低亮度。如果你想一下鸳吸，這是非常合理的熏挎。
現(xiàn)在，我已經(jīng)為您打印了這些數(shù)字晌砾，但圖表值得一千個(gè)數(shù)字坎拐，對(duì)吧？
看养匈，Sherlock哼勇，一種模式。
這個(gè)特定的模式呕乎。請(qǐng)記住我們剛看到的上面的案例积担，如果有影子，色調(diào)會(huì)向下移動(dòng)猬仁，有時(shí)它會(huì)向上移動(dòng)帝璧？它為什么這樣做？
那么湿刽，首先請(qǐng)注意的烁，這個(gè)圖有三個(gè)最大點(diǎn)和三個(gè)最小點(diǎn)。低點(diǎn)是紅色诈闺，綠色和藍(lán)色渴庆。高點(diǎn)是青色，品紅色和黃色雅镊。
這些特殊的顏色會(huì)讓人想起什么襟雷？是。RGB和CMY是流行的色彩系統(tǒng)仁烹，但暫時(shí)忽略它耸弄，因?yàn)樗鼘⒛阋蚱缤尽?/p>
重要的是：如果不計(jì)算飽和度和亮度，則將色調(diào)移向紅色（0°）卓缰，綠色（120°）或藍(lán)色（240°）會(huì)降低發(fā)光度或感知到的顏色亮度叙赚。將色調(diào)移向黃色（60°）老客，青色（180°）或品紅色（300°）會(huì)增加顏色的感知亮度。
訣竅就是讓色調(diào)的運(yùn)動(dòng)與飽和度和亮度的運(yùn)動(dòng)相匹配震叮。如果您想要深色的變化胧砰，請(qǐng)將色調(diào)朝向紅色（0°），綠色（120°）或藍(lán)色（240°）（取其最接近者）苇瓣，反之亦然（青色尉间，品紅色和黃色）以獲得淺色的變化。（當(dāng)然击罪，這也假設(shè)你也在降低亮度并增加飽和度）
這就是為什么珊瑚墻上的陰影以色調(diào)向下移動(dòng)- 它正在向0°移動(dòng)哲嘲，這是最接近21°的最小點(diǎn)。
這就是為什么藍(lán)綠色墻上的陰影以色調(diào)向上移動(dòng)- 它正在向240°偏移媳禁，這是最接近194°的最小點(diǎn)眠副。
顏色的方式
所以當(dāng)談到顏色變化時(shí)，問(wèn)問(wèn)自己：我需要一種顏色變淺或變深的顏色竣稽，我已經(jīng)有了嗎囱怕？
（如果你想要一些干凈而簡(jiǎn)單的東西，答案是如此毫别，往往是的）
更深的變化：
·亮度下降
·飽和度增加
·色調(diào)（經(jīng)常）轉(zhuǎn)向最小亮度（紅色娃弓，綠色或藍(lán)色）
更輕的變化：
·亮度增加
·飽和度下降
·色調(diào)（通常）轉(zhuǎn)向光度最大值
這將允許你采取一種色調(diào)，但為了所有的用戶界面需求岛宦，無(wú)限修改它台丛，在適當(dāng)?shù)牡胤绞褂幂^暗和較淡的變化。
我只是在這里舉了一個(gè)快速示例砾肺。整個(gè)界面由單一顏色構(gòu)成挽霉。說(shuō)......?那深青色的眼影看起來(lái)很熟悉嗎
加我微信一起討論設(shè)計(jì)問(wèn)題：
更多的設(shè)計(jì)請(qǐng)關(guān)注：
Dribbble：https://dribbble.com/yanruijiao2
原文出處：
https://medium.com/@erikdkennedy/color-in-ui-design-a-practical-framework-e18cacd97f9e
