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

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

　　對于這種事情，我有另一個說法：沒用。
 

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

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

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

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

　　該框架將：
 

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

　　幫助您預(yù)測哪些顏色變化會看起來不錯
 

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

　　我們很酷嗎?
 

　　較淺和較深的變化
 

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

 

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

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

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

　　或者，這是另一個簡單的示例：
 

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

　　但這引出了一個問題：您實際上如何修改顏色以獲得良好的變化?
 

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

　　我們將在現(xiàn)實世界中尋找參考線索。即使我們的界面是“偽造的”，我們?nèi)匀粫偪竦貜?fù)制現(xiàn)實世界，因為數(shù)十年來在現(xiàn)實世界中看到事物之后，我們只是希望光線和色彩能夠以某種方式工作。
 

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

　　真實世界的顏色變化
 

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

　　陰影。
 

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

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

　　就像我提到的那樣，我們將在HSB中解決這個問題。

 

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

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

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

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

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

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

　　規(guī)則
 

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

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

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

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

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

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

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

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

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

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

　　當(dāng)然，我們可以更進(jìn)一步。如果我們繼續(xù)降低飽和度并提高亮度，直到奶?；丶遥俏覀兊侥睦锶ツ?
 

　　這里：
 

　　我們最終變成白色。
 

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

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

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

　　最重要的事情
 

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

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

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

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

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

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

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

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

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

　　公平地說，并非每個設(shè)計都100%地遵循此規(guī)則。在上方的Harvest標(biāo)頭中，選定狀態(tài)僅為較低的亮度(飽和度不變)，而懸停狀態(tài)僅為較低的飽和度(亮度不變)。但是我們已經(jīng)研究了色彩在現(xiàn)實世界中的工作方式，并且我們知道為什么這些設(shè)計看起來不錯是因為它們近似于此處列出的原理。
 

　　順化呢?
 

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

　　話雖如此，這是最簡短的解釋。
 

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

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

　　我的意思是，例如，問街上的任何人：哪個更亮?
 

　　“嗯。黃色。黃色?”
 

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

　　“所以我是對的?”
 

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

 

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

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

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

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

　　看，Sherlock，一個模式。
 

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

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

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

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

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

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

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

　　頭腦被炸了嗎?
 

　　色彩之道
 

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

　　更深的變化：
 

　　1、亮度降低
 

　　2、飽和度增加
 

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

　　較輕的變化：
 

　　1、亮度增加
 

　　2、飽和度降低
 

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

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

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

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

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

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

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

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

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

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

　　6、顏色沖突時如何解決?
 

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

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

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

　　我們在這里談?wù)撘磺校?br />  

　　1、顏色

　　2、版式

　　3、版面

　　4、處理

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

　　和更多…
 

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

　　這是人們在說的：
 

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

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

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

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