UI設計色彩的重要性

　　就UI設計而言，我是從AAA教育畢業(yè)后自學研究出來的，真是老師領進門，修行看個人了，所以我一直想知道為什么這么多文章和書籍談論色彩理論和調色板。以我的經驗，使用“分體式互補調色板”大約可以預測我做出漂亮的設計。
 

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

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

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

　　或者說另一種方式：著色界面設計的基本技能是能夠將一種基本顏色修改為許多不同的變體。
 

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

　　該框架將：
 

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

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

　　使色彩顯得更客觀(“主觀”往往是“我還沒有想出如何工作的”一個字-這是你聽到一個字噸，當人們談論的顏色)
 

　　我們很酷嗎?
 

　　較淺和較深的變化
 

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

 

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

　　快速，現在看一下美麗的沖浪預測應用程序Swell Grid。
 

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

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

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

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

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

　　我們將在現實世界中尋找參考線索。即使我們的界面是“偽造的”，我們仍然會瘋狂地復制現實世界，因為數十年來在現實世界中看到事物之后，我們只是希望光線和色彩能夠以某種方式工作。
 

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

　　真實世界的顏色變化
 

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

　　陰影。
 

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

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

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

 

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

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

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

　　好了，現在我們可以進行比較和對比了。注意到模式嗎?
 

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

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

　　規(guī)則
 

　　讓我們進一步解壓縮這些概念。
 

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

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

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

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

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

　　那可能是完整的BS，但是有點道理，對嗎?
 

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

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

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

　　當然，我們可以更進一步。如果我們繼續(xù)降低飽和度并提高亮度，直到奶牛回家，那我們到哪里去呢?
 

　　這里：
 

　　我們最終變成白色。
 

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

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

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

　　最重要的事情
 

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

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

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

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

　　這是Harvest，我使用并喜歡的時間跟蹤應用程序。
 

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

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

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

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

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

　　順化呢?
 

　　說到近似此處列出的原理，我們應該談談色相。我也在上面說過，但是需要重復：色相在整個飽和度和亮度相反的方向上都是次要的，因此在進行顏色調整時，您通常可以完全忽略它。
 

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

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

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

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

　　“嗯。黃色。黃色?”
 

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

　　“所以我是對的?”
 

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

 

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

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

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

　　現在，我已經為您打印了數字，但是圖表的價值是一千個數字，對嗎?
 

　　看，Sherlock，一個模式。
 

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

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

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

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

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

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

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

　　頭腦被炸了嗎?
 

　　色彩之道
 

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

　　更深的變化：
 

　　1、亮度降低
 

　　2、飽和度增加
 

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

　　較輕的變化：
 

　　1、亮度增加
 

　　2、飽和度降低
 

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

　　這樣一來，您就可以采用一種色調，但可以根據您的所有UI需求對其進行無休止的修改，并在適當的地方使用更深和更淺的變化。
 

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

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

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

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

　　2、當您在Sketch(等)中時，您使用什么技術進行更深的變化?
 

　　3、您會進一步移動飽和度還是亮度?
 

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

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

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

　　7、而且，當然，只是為什么是 RGB和CMY的光度曲線圖的低/高點?
 

　　介紹...了解UI設計
 

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

　　我們在這里談論一切：
 

　　1、顏色

　　2、版式

　　3、版面

　　4、處理

　　5、響應式設計

　　和更多…
 

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

　　這是人們在說的：
 

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

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

　　Erik 務實的設計方法對我的教益遠比閱讀任何設計書籍所學的要多!—請帶走書籍，再帶一個視頻。
 

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