就UI設(shè)計(jì)而言,我是從AAA教育畢業(yè)后自學(xué)研究出來(lái)的,真是老師領(lǐng)進(jìn)門(mén),修行看個(gè)人了,所以我一直想知道為什么這么多文章和書(shū)籍談?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基本顏色修改為許多不同的變體。
我知道這聽(tīng)起來(lái)有些奇怪。聽(tīng)我說(shuō)。我將為您提供一個(gè)用于調(diào)整UI設(shè)計(jì)顏色的框架。
該框架將:
允許您基本上在用戶(hù)界面中出于任何目的修改一種主題顏色(此功能非常強(qiáng)大,并且正如我們將看到的,淘寶之類(lèi)的應(yīng)用程序已經(jīng)在做這些事情了)
幫助您預(yù)測(cè)哪些顏色變化會(huì)看起來(lái)不錯(cuò)
使色彩顯得更客觀(“主觀”往往是“我還沒(méi)有想出如何工作的”一個(gè)字-這是你聽(tīng)到一個(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á)那里,但我希望您從頭開(kāi)始理解這些內(nèi)容。因此,這是我們找出這些問(wèn)題的2條可信賴(lài)原則:
我們將在現(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中見(jiàn)面。
真實(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è)解釋?zhuān)匾氖且俚枚啵悬c(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í),您通??梢酝耆雎运?br />
話雖如此,這是最簡(jiǎn)短的解釋。
首先,每種顏色都有一種“感知的亮度”。這稱(chēng)為光度。
即使該藍(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ō)明,非常有幫助且令人大開(kāi)眼界。對(duì)于那些希望將UI設(shè)計(jì)添加到他們的工具箱中的UX設(shè)計(jì)人員,我強(qiáng)烈 推薦本課程。
Erik 務(wù)實(shí)的設(shè)計(jì)方法對(duì)我的教益遠(yuǎn)比閱讀任何設(shè)計(jì)書(shū)籍所學(xué)的要多!—請(qǐng)帶走書(shū)籍,再帶一個(gè)視頻。
如果您是開(kāi)發(fā)人員,UX設(shè)計(jì)人員或PM,并且想在您的技能組中添加視覺(jué)設(shè)計(jì),那么本課程將為您量身定制。跳上到AAA教育了解更多。
填寫(xiě)下面表單即可預(yù)約申請(qǐng)免費(fèi)試聽(tīng)!怕錢(qián)不夠?可先就業(yè)掙錢(qián)后再付學(xué)費(fèi)! 怕學(xué)不會(huì)?助教全程陪讀,隨時(shí)解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!
?2007-2022/ 5wd995.cn 北京漫動(dòng)者數(shù)字科技有限公司 備案號(hào): 京ICP備12034770號(hào) 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc