UI設(shè)計(jì)色彩的重要性

　　就UI設(shè)計(jì)而言，我是從AAA教育畢業(yè)后自學(xué)研究出來(lái)的，真是老師領(lǐng)進(jìn)門，修行看個(gè)人了，所以我一直想知道為什么這么多文章和書籍談?wù)撋世碚摵驼{(diào)色板。以我的經(jīng)驗(yàn)，使用“分體式互補(bǔ)調(diào)色板”大約可以預(yù)測(cè)我做出漂亮的設(shè)計(jì)。
 

　　對(duì)于這種事情，我有另一個(gè)說(shuō)法：沒(méi)用。
 

　　因此，如果顏色理論不能為UI設(shè)計(jì)中的顏色提供堅(jiān)實(shí)的基礎(chǔ)，那又是什么呢?
 

　　顏色修改。重要的是色彩的調(diào)整，而不是從色彩理論的帽子中挑選色彩。
 

　　或者說(shuō)另一種方式：著色界面設(shè)計(jì)的基本技能是能夠?qū)⒁环N基本顏色修改為許多不同的變體。
 

　　我知道這聽起來(lái)有些奇怪。聽我說(shuō)。我將為您提供一個(gè)用于調(diào)整UI設(shè)計(jì)顏色的框架。
 

　　該框架將：
 

　　允許您基本上在用戶界面中出于任何目的修改一種主題顏色(此功能非常強(qiáng)大，并且正如我們將看到的，淘寶之類的應(yīng)用程序已經(jīng)在做這些事情了)
 

　　幫助您預(yù)測(cè)哪些顏色變化會(huì)看起來(lái)不錯(cuò)
 

　　使色彩顯得更客觀(“主觀”往往是“我還沒(méi)有想出如何工作的”一個(gè)字-這是你聽到一個(gè)字噸，當(dāng)人們談?wù)摰念伾?
 

　　我們很酷嗎?
 

　　較淺和較深的變化
 

　　我在許多美觀的界面中注意到的一件事是，它們通常在特定主題顏色上具有更深和更淺的變化。

 

　　您不認(rèn)為搜索欄只是半透明的黑色覆蓋物，對(duì)嗎?劇透警報(bào)：不是。覆蓋在該藍(lán)色上的黑色的不透明度不會(huì)給您搜索欄的顏色。這是其他魔術(shù)選擇的一種變體。
 

　　快速，現(xiàn)在看一下美麗的沖浪預(yù)測(cè)應(yīng)用程序Swell Grid。
 

　　Sha-BAM。我們只是遇到了各種各樣的變化。那里有多少?轉(zhuǎn)到網(wǎng)站，自己算一算。實(shí)際上，此頁(yè)面上的所有內(nèi)容都是初始藍(lán)色的變體。
 

　　或者，這是另一個(gè)簡(jiǎn)單的示例：
 

　　甚至元素狀態(tài)也是顏色的變化。最好不要將其描述為“ 3個(gè)藍(lán)調(diào)的調(diào)色板”。這是一種帶有變化的藍(lán)色。
 

　　但這引出了一個(gè)問(wèn)題：您實(shí)際上如何修改顏色以獲得良好的變化?
 

　　我們會(huì)到達(dá)那里，但我希望您從頭開始理解這些內(nèi)容。因此，這是我們找出這些問(wèn)題的2條可信賴原則：
 

　　我們將在現(xiàn)實(shí)世界中尋找參考線索。即使我們的界面是“偽造的”，我們?nèi)匀粫?huì)瘋狂地復(fù)制現(xiàn)實(shí)世界，因?yàn)閿?shù)十年來(lái)在現(xiàn)實(shí)世界中看到事物之后，我們只是希望光線和色彩能夠以某種方式工作。
 

　　我們將使用HSB顏色系統(tǒng)。簡(jiǎn)而言之是：它是最廣泛使用的最直觀的色彩系統(tǒng)(就我而言，Sketch和Photoshop)。如果您不知道色相，飽和度和亮度是什么，讓我們休息一下，然后在10中見面。
 

　　真實(shí)世界的顏色變化
 

　　好吧，環(huán)顧四周。每次您掃視房間時(shí)，無(wú)疑會(huì)看到多少個(gè)“顏色變化”?
 

　　陰影。
 

　　您可以將陰影視為基色上的深色變體。

　　現(xiàn)在，讓我們進(jìn)入Sketch并獲取顏色選擇器，并精確找出當(dāng)陰影落在珊瑚墻上時(shí)會(huì)發(fā)生什么。
 

　　就像我提到的那樣，我們將在HSB中解決這個(gè)問(wèn)題。

 

　　注意：監(jiān)視器/圖像顏色配置文件可能會(huì)使這些確切的測(cè)量值與您有所不同。
 

　　亮度會(huì)降低—好，所以這很明顯。但是，請(qǐng)耐心等待–在我們進(jìn)行過(guò)多概括之前，讓我們實(shí)際上看看另一個(gè)示例。
 

　　陰影在古巴的運(yùn)作方式相同嗎?我們將找出答案。
 

　　好了，現(xiàn)在我們可以進(jìn)行比較和對(duì)比了。注意到模式嗎?
 

　　當(dāng)有陰影的顏色變化時(shí)，您可以預(yù)期亮度會(huì)下降，而飽和度會(huì)上升。我們只是在兩個(gè)實(shí)例中對(duì)此進(jìn)行了研究，但是據(jù)我所知，這是一個(gè)可靠的規(guī)則。
 

　　現(xiàn)在的色調(diào)有點(diǎn)瘋狂-它去下來(lái)的珊瑚墻的影子，而向上的水鴨墻的影子。還有就是對(duì)于一個(gè)解釋，但重要的是要少得多，有點(diǎn)比飽和度/亮度更深?yuàn)W的-所以我們會(huì)回來(lái)以后色調(diào)。
 

　　規(guī)則
 

　　讓我們進(jìn)一步解壓縮這些概念。
 

　　顏色變化更深=飽和度更高+亮度更低
 

　　如果回頭看我們的Facebook搜索欄示例，您會(huì)發(fā)現(xiàn)它確實(shí)在運(yùn)行。
 

　　色相從360°中移出1°，這實(shí)際上是舍入誤差。
 

　　飽和度隨著亮度的下降而上升。搜索欄之所以不能是覆蓋在基本藍(lán)色上的黑色不透明是因?yàn)?，在HSB中，添加黑色等于降低亮度。相反，我們要降低亮度，同時(shí)增加飽和度。黑色不會(huì)給我們的顏色增加任何飽和度!
 

　　為什么在現(xiàn)實(shí)世界中，深色與更高的飽和度相關(guān)?我沒(méi)有絲毫想法。但是我總能彌補(bǔ)：這是因?yàn)楫?dāng)光的強(qiáng)度(亮度)超過(guò)顏色的強(qiáng)度(飽和度)時(shí)，顏色必定會(huì)被洗掉，反之亦然。
 

　　那可能是完整的BS，但是有點(diǎn)道理，對(duì)嗎?
 

　　較淺的顏色變化=較低的飽和度+較高的亮度
 

　　現(xiàn)在，作為您的敏銳和博學(xué)的讀者，您可能會(huì)猜到，給我們帶來(lái)更黑暗變體的相反轉(zhuǎn)換將使我們變得更淺變體。
 

　　然后，您就把它釘了，真是太棒了。
 

　　當(dāng)然，我們可以更進(jìn)一步。如果我們繼續(xù)降低飽和度并提高亮度，直到奶?；丶?，那我們到哪里去呢?
 

　　這里：
 

　　我們最終變成白色。
 

　　你能想到的制作更輕的變化作為加入白。在Sketch等人中，有兩種非常簡(jiǎn)單的方法可以為顏色添加白色：
 

　　減少元素的不透明度(如果是在白色背景上)
 

　　在元素頂部添加半透明的白色層
 

　　最重要的事情
 

　　如果您只記得本文中的一件事，請(qǐng)記住以下幾點(diǎn)：
 

　　降低亮度和增加飽和度會(huì)產(chǎn)生較深的顏色變化。通過(guò)增加亮度和降低飽和度可以產(chǎn)生更明亮的顏色變化。
 

　　有了這個(gè)簡(jiǎn)單的想法，您就可以只用一種顏色就能完成令人驚奇的事情。
 

　　事實(shí)是，元素之間的顏色變化如此之多，甚至是同一元素的狀態(tài)，都只是簡(jiǎn)單的顏色修改。
 

　　這是Harvest，我使用并喜歡的時(shí)間跟蹤應(yīng)用程序。
 

　　看標(biāo)題。懸停狀態(tài)更輕。所選狀態(tài)較暗。
 

　　或查看綠色的“新條目”按鈕。
 

　　懸停狀態(tài)是較暗的變化-飽和度較高，亮度較低。
 

　　您將一次又一次地使用它。
 

　　公平地說(shuō)，并非每個(gè)設(shè)計(jì)都100%地遵循此規(guī)則。在上方的Harvest標(biāo)頭中，選定狀態(tài)僅為較低的亮度(飽和度不變)，而懸停狀態(tài)僅為較低的飽和度(亮度不變)。但是我們已經(jīng)研究了色彩在現(xiàn)實(shí)世界中的工作方式，并且我們知道為什么這些設(shè)計(jì)看起來(lái)不錯(cuò)是因?yàn)樗鼈兘朴诖颂幜谐龅脑怼?br />  

　　順化呢?
 

　　說(shuō)到近似此處列出的原理，我們應(yīng)該談?wù)勆?。我也在上面說(shuō)過(guò)，但是需要重復(fù)：色相在整個(gè)飽和度和亮度相反的方向上都是次要的，因此在進(jìn)行顏色調(diào)整時(shí)，您通?？梢酝耆雎运?。
 

　　話雖如此，這是最簡(jiǎn)短的解釋。
 

　　首先，每種顏色都有一種“感知的亮度”。這稱為光度。
 

　　即使該藍(lán)色和黃色都處于100%HSB亮度，但看起來(lái)更亮?
 

　　我的意思是，例如，問(wèn)街上的任何人：哪個(gè)更亮?
 

　　“嗯。黃色。黃色?”
 

　　謝謝，蘭多。您剛剛發(fā)現(xiàn)了光度。
 

　　“所以我是對(duì)的?”
 

　　是的，即使您將亮度和飽和度保持不變，并且僅改變色調(diào)，您也將獲得一定范圍的亮度或可感知的亮度，我們將其測(cè)量為0到100之間的值。

 

　　這些是我們?cè)?0°間隔內(nèi)的色相，所有色相均為100%飽和度和100%亮度。
 

　　而這里是我們的色調(diào)復(fù)制，投入光度混合模式(在白色背景上-這是至關(guān)重要的，如果你沿著素描以下添加)，并用所得灰色的亮度覆蓋。這使我們可以測(cè)量原始顏色的亮度。
 

　　在“亮度混合”模式下，亮灰色表示高亮度，而暗灰色表示低亮度。如果您仔細(xì)考慮一下，這是很合理的。
 

　　現(xiàn)在，我已經(jīng)為您打印了數(shù)字，但是圖表的價(jià)值是一千個(gè)數(shù)字，對(duì)嗎?
 

　　看，Sherlock，一個(gè)模式。
 

　　這種特殊的模式從上面回答了我們的問(wèn)題。還記得我們是怎么看到的，有時(shí)候，對(duì)于陰影，色調(diào)會(huì)向下移動(dòng)，有時(shí)會(huì)向上移動(dòng)?為什么這樣做呢?
 

　　好吧，首先，請(qǐng)注意該圖具有三個(gè)最大點(diǎn)和三個(gè)最小點(diǎn)。低點(diǎn)是紅色，綠色和藍(lán)色。高點(diǎn)是青色，品紅色和黃色。
 

　　這些特殊的顏色會(huì)響嗎?是。RGB和CMY是流行的色彩系統(tǒng)，但是現(xiàn)在就忽略它，因?yàn)樗鼤?huì)使您誤入歧途。
 

　　重要的一點(diǎn)是：如果不計(jì)算飽和度和亮度，將色相移向紅色(0°)，綠色(120°)或藍(lán)色(240°)會(huì)降低亮度或顏色的明度。并且將色相移向黃色(60°)，青色(180°)或洋紅色(300°)將增加顏色的感知亮度。
 

　　訣竅是使色調(diào)的運(yùn)動(dòng)與飽和度和亮度的運(yùn)動(dòng)相匹配。如果要變暗，請(qǐng)將色相移向最接近的紅色(0°)，綠色(120°)或藍(lán)色(240°)，反之亦然(青色，品紅色和黃色)(較淺)。(當(dāng)然，這是假設(shè)您也在降低亮度并增加飽和度)
 

　　這就是為什么珊瑚墻上的陰影在色調(diào)上向下移動(dòng)的原因-它正在向0°的紅色移動(dòng)，這是最接近21°的最小點(diǎn)。
 

　　這就是為什么藍(lán)綠色墻壁上的陰影會(huì)在色調(diào)上向上移動(dòng)的原因-它正朝著240°的藍(lán)色移動(dòng)，這是最接近194°的最小點(diǎn)。
 

　　頭腦被炸了嗎?
 

　　色彩之道
 

　　因此，當(dāng)涉及到顏色變化時(shí)，請(qǐng)問(wèn)問(wèn)自己：我是否只需要對(duì)已有顏色進(jìn)行較淺或較深的變化?
 

　　更深的變化：
 

　　1、亮度降低
 

　　2、飽和度增加
 

　　3、色相(通常)向最小亮度(紅色，綠色或藍(lán)色)移動(dòng)
 

　　較輕的變化：
 

　　1、亮度增加
 

　　2、飽和度降低
 

　　3、色相(通常)向最大亮度移動(dòng)
 

　　這樣一來(lái)，您就可以采用一種色調(diào)，但可以根據(jù)您的所有UI需求對(duì)其進(jìn)行無(wú)休止的修改，并在適當(dāng)?shù)牡胤绞褂酶詈透鼫\的變化。
 

　　具有一種顏色和多種修改的界面
 

　　我只是在這里舉了一個(gè)簡(jiǎn)短的例子。整個(gè)界面是用單一顏色構(gòu)建的。說(shuō)... 那種水鴨色看起來(lái)很熟悉嗎?
 

　　現(xiàn)在，我對(duì)所有這些都非常簡(jiǎn)短。仍然有許多主題需要涉及：
 

　　1、在漸變和數(shù)據(jù)可視化中，色相如何變得更加重要?
 

　　2、當(dāng)您在Sketch(等)中時(shí)，您使用什么技術(shù)進(jìn)行更深的變化?
 

　　3、您會(huì)進(jìn)一步移動(dòng)飽和度還是亮度?
 

　　4、如何找到與您的配色方案匹配的灰色?
 

　　5、您如何選擇完全無(wú)關(guān)的顏色，一起看起來(lái)很好?
 

　　6、顏色沖突時(shí)如何解決?
 

　　7、而且，當(dāng)然，只是為什么是 RGB和CMY的光度曲線圖的低/高點(diǎn)?
 

　　介紹...了解UI設(shè)計(jì)
 

　　在過(guò)去的11個(gè)月中，我一直在努力創(chuàng)建單一的最全面的在線視頻課程，以學(xué)習(xí)界面設(shè)計(jì)的實(shí)際技能。
 

　　我們?cè)谶@里談?wù)撘磺校?br />  

　　1、顏色

　　2、版式

　　3、版面

　　4、處理

　　5、響應(yīng)式設(shè)計(jì)

　　和更多…
 

　　在網(wǎng)絡(luò)上你可以找到AAA教育的UI設(shè)計(jì)課程，在該課程中，你會(huì)在Sketch中觀看老師的設(shè)計(jì)。這個(gè)很重要。我這里不是在教一些理論框架。相反，我向您展示的所有內(nèi)容都是我每天用來(lái)設(shè)計(jì)界面的提示，技巧和框架。當(dāng)我教給您我所知道的一切時(shí)，可以將其視為看著我的肩膀。
 

　　這是人們?cè)谡f(shuō)的：
 

　　學(xué)習(xí)UI設(shè)計(jì)就像通過(guò)實(shí)際坐在飛行員的座艙中來(lái)學(xué)習(xí)如何駕駛飛機(jī)一樣。Erik不斷地設(shè)計(jì)/重新設(shè)計(jì)您面前的真實(shí)示例，解釋X的優(yōu)缺點(diǎn)以及如何去做。關(guān)于使它變得更好。
 

　　學(xué)習(xí)UI設(shè)計(jì)的簡(jiǎn)單方法，并通過(guò)實(shí)際示例和教程進(jìn)行說(shuō)明，非常有幫助且令人大開眼界。對(duì)于那些希望將UI設(shè)計(jì)添加到他們的工具箱中的UX設(shè)計(jì)人員，我強(qiáng)烈 推薦本課程。
 

　　Erik 務(wù)實(shí)的設(shè)計(jì)方法對(duì)我的教益遠(yuǎn)比閱讀任何設(shè)計(jì)書籍所學(xué)的要多!—請(qǐng)帶走書籍，再帶一個(gè)視頻。
 

　　如果您是開發(fā)人員，UX設(shè)計(jì)人員或PM，并且想在您的技能組中添加視覺(jué)設(shè)計(jì)，那么本課程將為您量身定制。跳上到AAA教育了解更多。