狠色狠色狠狠色综合久久,国产第一页浮力影院入口,刺激性视频黄页,日本强伦片中文字幕免费看 黄色综合,91.cn国产大片,亚洲日韩视频在线观看

UI設(shè)計分享:最直白的UI配色指南

2024-12-23    藍(lán)藍(lán)設(shè)計的小編 設(shè)計管理與成長

在今天,受限于國內(nèi)激烈的市場競爭,C 端產(chǎn)品為了爭奪用戶注意力,界面的設(shè)計越來越復(fù)雜,色彩越來越豐富(花哨),極簡的風(fēng)格只存在于少數(shù)頭部產(chǎn)品和工具類產(chǎn)品中。
萬字干貨 | 最直白的UI配色指南
 
 
這種風(fēng)氣會傳導(dǎo)到招聘的要求中,也就是對作品集的審視,往往更重視能駕馭復(fù)雜視覺風(fēng)格的作品,而不是極簡的風(fēng)格。
所以,除了界面設(shè)計中對界面、組件框架樣式的設(shè)計創(chuàng)新外,最重要的就是對界面配色的管理和表現(xiàn)。而配色作為所有設(shè)計類型的終極難題之一,長期困擾著初級 UI 設(shè)計師。
所以我們今天的主題,就是用最簡單、適用的邏輯,來解釋 UI 配色的方法!
 
 
色彩的選擇模式認(rèn)識
學(xué)會配色首先要理解色彩,以及在 UI 設(shè)計中要配哪些“色”。
首先是對色彩的描述,相信大家或多或少聽說過 RGB、CMYK 之類的名詞,它們就是對不同場景下的色彩描述方法。
比如顯示器成像,是由一個個像素點顯示不同色彩組成的,而像素點的顏色由三個發(fā)光晶體管控制,即 Red 紅、Green 綠、Blue 藍(lán),它們發(fā)出不同強弱的光進(jìn)行混合,從而形成新像素點上最后顯示的色彩,所以也叫 RGB 色。
萬字干貨 | 最直白的UI配色指南
 
 
而對于現(xiàn)實世界的物體的染色、印刷,就要使用具體的顏料上色,為了節(jié)省成本工業(yè)界不可能提供成百上千萬的顏料類型,所以使用了 Cyan 青色、 Magenta 洋紅色、 Yellow 黃色三個顏色作為基礎(chǔ)進(jìn)行混合,生成其它顏色。而因為 Black 黑色、灰色難以用別的顏色混出來,所以單獨提供,于是就有了 CMYK 色。
萬字干貨 | 最直白的UI配色指南
 
 
在 UI 設(shè)計中,我們的設(shè)計內(nèi)容無須進(jìn)行打印,所以只會以 RGB 模式記錄和顯示。但是 RGB 色的記錄模式比較復(fù)雜,即每個色值有 0-255 的 256 個顏色,要分別記錄這三個數(shù)值,且它們混合后的色彩很難判斷。
萬字干貨 | 最直白的UI配色指南
 
 
所以雖然 UI 中用的是 RGB,但我們?nèi)粘_x色使用的卻是 HSB 模式,即將顏色劃分成色相 Hue、飽和度 Saturation、明度 Brightnessd。
它是對色彩邏輯上的定義,會根據(jù)應(yīng)用的需要轉(zhuǎn)化成 RGB 和 CMYK,所以不用糾結(jié)它不是  RGB 不能顯示怎么辦。
而多數(shù) UI 軟件的色彩選擇面板,就是使用 HSB 的選色邏輯來設(shè)計的,有一個橫向的色相條,加一個表示明度、飽和度的矩形區(qū)域。
萬字干貨 | 最直白的UI配色指南
 
 
雖然色相條是一個長方形,但用過應(yīng)該能發(fā)現(xiàn)它的首尾都是紅色,因為 HSB 模式下建立的色相是一個360度的環(huán)形,也叫色環(huán)。選色面板用的色相條,就是這個色環(huán)截開拉直后的效果,所以首尾是同一顏色。
萬字干貨 | 最直白的UI配色指南
 
 
使用 HSB 選色的邏輯 ——
先確定色相,再調(diào)節(jié)飽和度和明度
。
如果飽和度 S 值為零,則色彩沒有任何色相只剩下黑白灰,即中性色。明度 B 值控制亮度,0 即完全沒有亮度所以是黑色,100 最亮則是白色,即顏色越深 B 值越小,B 值越大顏色越亮。
學(xué)會使用 HSB 選色和微調(diào)的方式是進(jìn)行配色的關(guān)鍵,因為專業(yè)的設(shè)計過程會有清晰的色彩應(yīng)用思路,會直接通過色彩面板去找到自己要的顏色,甚至是直接手動輸入數(shù)值,而不是把選色面板當(dāng)盲盒隨機拖一個出來去測試。
在 UI 設(shè)計過程中,如果軟件的色彩面板默認(rèn)是其它模式,優(yōu)先將它們先切換成  HSB (有些是 HEX)模式。
萬字干貨 | 最直白的UI配色指南
 
 
 
 
UI界面的色彩類型認(rèn)識
了解選色模式是第一步,而第二步就是認(rèn)識UI界面中應(yīng)用的色彩類型有哪些,為進(jìn)一步掌握配色做準(zhǔn)備。
在過去,我們將界面的配色分為主色、輔助色、中性色三種類型,但這次我們要做出新的定義,以滿足目前 UI 設(shè)計趨勢的需要。
UI 界面中應(yīng)用的色彩可以分成:品牌色、功能色、中性色、裝飾色、內(nèi)容色等,四個大類。
 
1.品牌色
品牌色即組成產(chǎn)品品牌基調(diào)、個性的核心色彩,用于區(qū)分自己和其它產(chǎn)品之間的區(qū)別。而品牌色并不是只有一個,而是包含主色、輔助色兩個分類。
首先品牌主色,是品牌的核心色調(diào),是和品牌進(jìn)行綁定的色彩錨點,比如想到美團就是黃色,想到肯德基就是紅色,想到星巴克就是綠色。常規(guī)的品牌主色有且只能有一個。
萬字干貨 | 最直白的UI配色指南
 
 
而輔助色,則是建立在品牌色彩系統(tǒng)內(nèi)搭配主色出現(xiàn)的色彩。比如麥當(dāng)勞的核心主色是黃色(LOGO 色,"金"拱門),但相信麥當(dāng)勞的紅色你們一定也不陌生,它們經(jīng)常相伴出現(xiàn)。再比如沃爾瑪,雖然主色是藍(lán)色但是黃色在品牌制品和包裝上也沒少用。
萬字干貨 | 最直白的UI配色指南
 
 
輔助色可以只有一個也可以有多個,作為補充比使用單一主色會更具辨識度和豐富性。但它不是必須的,因為在 UI 界面中出現(xiàn)的顏色往往非常多,品牌輔助色的加入往往會讓配色變得更困難,反而成為拖累。
萬字干貨 | 最直白的UI配色指南
 
 
萬字干貨 | 最直白的UI配色指南
 
 
 
2.功能色
功能色,就是根據(jù)界面?zhèn)鬟_(dá)信息、隱喻所應(yīng)用的色彩,具有比較明確的工具作用而存在。部分場景下用戶對色彩代表的寓意認(rèn)識根深蒂固時,那么我們就有必要順應(yīng)這種認(rèn)識來添加色彩。
比如電商中紅色代表價格、折扣,工具產(chǎn)品里綠色代表成功通過,國內(nèi)金融產(chǎn)品里紅色代表上漲綠色代表下跌,幣圈行業(yè)反過來綠色代表上漲紅色代表下跌等。
萬字干貨 | 最直白的UI配色指南
 
 
功能色的應(yīng)用是必要的,因為色彩也是用于傳遞信息的關(guān)鍵要素之一。但是,功能色不一定完全和品牌色脫節(jié),如果品牌色和想要的功能色接近,往往直接使用品牌色即可,不用創(chuàng)建新的顏色。
比如京東的價格、優(yōu)惠用的就是品牌主色,支付寶的確認(rèn)、同意用的也是品牌主色。
萬字干貨 | 最直白的UI配色指南
 
 
 
3.中性色
中性色就是黑白灰,即沒有顏色的“顏色”。
萬字干貨 | 最直白的UI配色指南
 
 
一個項目再怎么花哨,也會包含不需要使用花哨色彩的背景、文字、圖標(biāo),而
通常它們在整個應(yīng)用內(nèi)的占比才是最大的,而不是品牌色!
中性色是支撐整個產(chǎn)品色彩體系的骨架,用好中性色就能讓界面被用戶快速理解、認(rèn)識。所以在一些品牌色就是以黑色為主色的產(chǎn)品中,用戶也并不會因為產(chǎn)品沒有使用其它色相而不知道應(yīng)用怎么使用。
萬字干貨 | 最直白的UI配色指南
 
 
4.裝飾色
前面提到的三種色彩類型,都是要進(jìn)入項目設(shè)計規(guī)范內(nèi)的“標(biāo)準(zhǔn)色”,而應(yīng)用實際設(shè)計過程中光靠這些標(biāo)準(zhǔn)色是無法滿足所有場景的。
比如一些特定的活動頁面,或者裝飾圖標(biāo),運營場景等,都會根據(jù)具體的需求或美觀性應(yīng)用其它色彩。
萬字干貨 | 最直白的UI配色指南
 
 
裝飾色的配置沒有非常具體的要求,在一定程度上就是脫離原有的規(guī)范標(biāo)準(zhǔn),作為一個獨立的設(shè)計去完成。所以很多大廠產(chǎn)品在不同頁面中的運營需求不同,于是裝飾色各用各的,導(dǎo)致最終呈現(xiàn)出來的結(jié)果非常割裂。
裝飾色是在今天的移動端設(shè)計中最大的難題,因為我們要加入很多新的色彩進(jìn)去會和規(guī)范色形成沖突。雖然線上很多產(chǎn)品的配色都有種放棄治療的決絕,但在招聘環(huán)節(jié)中對色彩的應(yīng)用上這些要求又全部回來辣(就是這么分裂)!
 
5.內(nèi)容色
最后一個,就是內(nèi)容色了,即產(chǎn)品內(nèi)展示的內(nèi)容所使用的色彩,如用戶的照片,商品的圖片,廣告的圖片等等。
某種程度上來說內(nèi)容用什么顏色是不可控的,不在配色的考慮范圍內(nèi)。但對于一些特定的產(chǎn)品中,內(nèi)容用什么顏色是有確定性的,甚至直接規(guī)范內(nèi)容制作、拍攝、后期的用色規(guī)范,讓整體的配色能更統(tǒng)一和諧。
比如美妝、服裝、茶飲類品牌自家的應(yīng)用或小程序:
萬字干貨 | 最直白的UI配色指南
 
 
并且在作品集項目和評審中,設(shè)計師自己輸出的界面也是要考慮內(nèi)容用色的,因為內(nèi)容往往在頁面中占比很大,用色的好壞會直接影響觀看者對整個頁面的評價,所以我們必須要把它當(dāng)成配色的一部分來處理。
比如我們前陣子之前分享過的案例:
萬字干貨 | 最直白的UI配色指南
 
 
配色就是完成對上面五種色彩類型的選擇、控制、管理,形成最終呈現(xiàn)的效果。
 
 
UI選色邏輯 - 基本說明
上一節(jié)介紹了 UI 配色的五個對象,而這一節(jié)中,我們就要針對它們的配色進(jìn)行更細(xì)致的解說。
平面和 UI 配色的差異
學(xué)習(xí) UI 配色,就繞不過去平面配色的各類知識點、概念、技法,雖然 UI 設(shè)計原則上也是平面設(shè)計的一種,但在配色上卻有很大的差異,不能直接照搬平面配色的邏輯。
平面和 UI 配色的差異主要由下面三點組成:
  1.  
    靜態(tài)和動態(tài)的差異
  2.  
    色彩模式的差異
  3.  
    品牌輸出目標(biāo)差異
第一點,也是最重要的一點,就是平面設(shè)計的對象是“靜止”的,在設(shè)計被制作出來后就被固定。而 UI 設(shè)計的對象是 “動態(tài)” 的,不管是內(nèi)容還是界面本身都會經(jīng)常發(fā)生修改變化。
靜態(tài)的設(shè)計穩(wěn)定,就意味著設(shè)計意圖可以貫徹,個性化易于塑造。而動態(tài)的設(shè)計意味不確定性,上線后內(nèi)容的變更或產(chǎn)品迭代會直接破壞原有的設(shè)計,導(dǎo)致設(shè)計意圖的流產(chǎn)。
萬字干貨 | 最直白的UI配色指南
 
 
第二點,則是色彩顯示模式的差異。平面設(shè)計要進(jìn)入真實世界就要經(jīng)過染色或印刷(CMYK),這些制品的色彩經(jīng)過光的折射后才進(jìn)入人眼。而 UI 設(shè)計的色彩則是由屏幕自身發(fā)光呈現(xiàn)(RGB),直接進(jìn)入人眼。
自發(fā)光和折射光呈現(xiàn)的色彩觀感是非常不同的,這由它們的物理特性決定(暫不拓展),最直觀的一個差異,就是屏幕發(fā)光是會“刺眼”的,能讓人眼覺得不適和過快疲勞。比如熒光色系,或者大面積的對比色。
萬字干貨 | 最直白的UI配色指南
 
 
自發(fā)光產(chǎn)生的生理影響,決定了 UI 配色為了滿足可用性就要排除一部分色彩,讓配色的范圍大大縮小。所以平面中有句話叫沒有難看的顏色,只有配不好的顏色,并不適用于 UI 配色。
第三點,就是品牌輸出目標(biāo)的差異。傳統(tǒng)品牌的色彩系統(tǒng)更注重品牌的概念、價值觀的表達(dá),通過在門店、包裝、物料、服務(wù)上的統(tǒng)一應(yīng)用,來潛移默化的塑造用戶對品牌的認(rèn)識和定位。
萬字干貨 | 最直白的UI配色指南
 
 
而互聯(lián)網(wǎng)產(chǎn)品能影響用戶的主要渠道就是手機或顯示器上小小的屏幕,在這個小小的屏幕內(nèi)還要和成千上萬的其它產(chǎn)品競爭。所以互聯(lián)網(wǎng)產(chǎn)品對品牌的塑造上是非常“強硬”的,要讓用戶強烈的感知到并快速形成印象。
萬字干貨 | 最直白的UI配色指南
 
 
平面和 UI 配色的邏輯的差異,自然會導(dǎo)致實踐的方式也不同,需要單獨學(xué)習(xí)。這也是很多 UI 設(shè)計師一直學(xué)習(xí)配色相關(guān)知識但還是做不好UI配色的原因,因為這是兩套不同的體系。
 
 
品牌色的選擇
在建立 UI 配色系統(tǒng)時,第一步確定的通常都是品牌色。而品牌色的建立包含兩種情況,一種是設(shè)計的產(chǎn)品已經(jīng)是個完整的品牌建立過自己的 VI 系統(tǒng),另一種情況是完全獨立的新產(chǎn)品需要全部重新創(chuàng)建。
時,原則上 UI 的配色也要使用原來制定的品牌 VI 用色。但前面也說過平面用色和屏幕用色差異巨大,所以 UI 用色可以在原有的基礎(chǔ)上做調(diào)整,比如 MUJI、宜家。
萬字干貨 | 最直白的UI配色指南
 
 
如果還仔細(xì)研究過成功的獨立產(chǎn)品配色,那么就會發(fā)現(xiàn)一個規(guī)律,主色基本都處于飽和度明度面板的右上方。
萬字干貨 | 最直白的UI配色指南
 
 
這種設(shè)置的依據(jù),都是為了讓主色能更鮮艷、明亮。一方面是在屏幕上更能吸引用戶注意和灌輸品牌認(rèn)知,另一部分鮮艷的色彩在屏幕中展示起來也更舒適、和諧,客觀決定了不應(yīng)該使用一些“有氣無力”的顏色作為產(chǎn)品主色。
萬字干貨 | 最直白的UI配色指南
 
 
遵循這種規(guī)律,那么主色的選擇就是先確定色相類型,然后在明度、飽和度面板的右上方再選出具體的顏色。
萬字干貨 | 最直白的UI配色指南
 
 
除了主色外,品牌的輔助色定義也遵循相同的原則。但是,如果不是品牌VI本身就定義過輔助色的情況下,不建議新產(chǎn)品定義輔助色,因為它很容易稀釋主色的權(quán)重,不能帶來太多的幫助。
 
 
中性色的選擇
除了品牌色外,最重要的色彩定義就是中性色,在我自己的設(shè)計流程中,甚至是先定義中性色再去定義品牌色。
中性色是由黑白灰組成的多個色彩,并通過灰度值(HSB 的 B 值)的高低來形成一個表現(xiàn)強弱的等級階梯。通常一個 UI 產(chǎn)品中會使用不少于5個以上的中性色,以滿足信息對比性的需要。
萬字干貨 | 最直白的UI配色指南
 
 
為了方便記憶,我們會對 B 值使用5的倍數(shù)做定義,比如10、20、40、60、80、90等。
中性色的定義并不困難,只要不同等級的顏色有足夠的差異即可,至于需要多少級的顏色,根據(jù)具體項目的需要決定。
下面還有兩個中性色定義的細(xì)節(jié),一個是
盡量避免使用純黑色
(B 值0),因為純黑在 OLED 屏幕中是完全不發(fā)光的狀態(tài),所以會和周遭的顏色產(chǎn)生極大的反差,難以進(jìn)行控制。
第二個細(xì)節(jié),就是成熟項目中的中性色往往并不是純灰色,而是會加入輕微的色相(主要是藍(lán)色色相)進(jìn)去,讓中性色的應(yīng)用不會那么僵硬和枯燥。
萬字干貨 | 最直白的UI配色指南
 
 
加入色相的中性色,會提供非常微妙的潛在影響,但并不需要用戶感知到這些顏色使用了色相,所以往往只添加了極少的色相值。顏色越淺,色相值就需要越弱才不易被感知,反之可以添加的色相值范圍就越強。
所以中性色的配色邏輯可以在明度、飽和度面板中遵循下方這樣的曲線:
萬字干貨 | 最直白的UI配色指南
 
 
 
 
功能色的配色邏輯
之后制定功能色的配色邏輯,在定義它們之前最好已經(jīng)完成了項目主要界面內(nèi)容和原型的搭建,能預(yù)判項目中包含了哪些特定的信息、要素、模塊是需要使用非品牌色和中性色來表示的。
比如前文提到的金融軟件,包含漲跌的示意。電商購物應(yīng)用,包含價格和優(yōu)惠。一個普通的社區(qū)應(yīng)用,包含收藏、點贊和會員等。
萬字干貨 | 最直白的UI配色指南
 
 
當(dāng)主色不適合對這些內(nèi)容進(jìn)行填充時,就應(yīng)該選新的顏色作為功能色進(jìn)行填充。而功能色的選擇也是最簡單的部分,因為功能色的目標(biāo)通常都很明確,而它們也可以從主色的選擇區(qū)域內(nèi)產(chǎn)生。
萬字干貨 | 最直白的UI配色指南
 
 
 
 
裝飾色的配色邏輯
進(jìn)入到裝飾色的環(huán)節(jié),就不在色彩規(guī)范定義的顏色范圍內(nèi)了,進(jìn)入到“看碟下菜”的階段。
裝飾色的應(yīng)用首先面對的就是裝飾圖標(biāo)的用色,比如快速入口、瓷片區(qū)用的裝飾圖標(biāo),往往會使用其它顏色來提高界面色彩的豐富性。
萬字干貨 | 最直白的UI配色指南
 
 
在這類圖標(biāo)的配色中,沒有固定的配色規(guī)律可以遵循,只能憑感覺配。但值得慶幸的是,裝飾圖標(biāo)的用色也和主色選色類似,可以選擇范圍其實很小,直接在這個范圍內(nèi)選色很快就能得到想要的結(jié)果。
總結(jié)一些線上成熟產(chǎn)品的快速入口配色,大家就會發(fā)現(xiàn)用色其實非常固定:
萬字干貨 | 最直白的UI配色指南
 
 
除了圖標(biāo)外,第二種裝飾用色就是運營場景,比如節(jié)日主題或是專題頁面,針對它們的設(shè)計,可以理解成是針對一個獨立頁面定義新的主色和輔助色,覺得怎么做合適怎么來……
萬字干貨 | 最直白的UI配色指南
 
 
雖然它們的應(yīng)用可能和產(chǎn)品主色沖突,但運營內(nèi)容的權(quán)重往往是高于項目配色要求的,所以在線上項目中只要加入運營設(shè)計開始,界面色彩就開始“雞飛狗跳”。
而在作品集項目的設(shè)計中,就要確定裝飾色的應(yīng)用目標(biāo),即通過更多的色彩來增加設(shè)計的豐富性,所以盡量從非主色的色系里選擇,避免使用和主色近似的色彩。
 
內(nèi)容色的配色邏輯
最后,就是在填充內(nèi)容配圖時使用的色彩了。這里也分兩種情況,即該內(nèi)容在頁面中的占比。
如果占比過大,比如占據(jù)半屏以上的廣告圖、商品圖,那么填充進(jìn)去的內(nèi)容必定直接影響整個頁面的色彩觀感。
萬字干貨 | 最直白的UI配色指南
 
 
所以在這種場景下,建議使用背景色比較單一的圖片,會比填充色彩凌亂、復(fù)雜的圖片效果更好。當(dāng)然,內(nèi)容的用色不能和主色完全一致,也不能和主色產(chǎn)生不協(xié)調(diào)感,這要設(shè)計師自己判斷。
萬字干貨 | 最直白的UI配色指南
 
 
然后就是普通內(nèi)容的用色,比如商品列表中的商品圖,動態(tài)列表內(nèi)的動態(tài)圖,新聞列表中的封面等等。尺寸不大,但是往往出現(xiàn)的數(shù)量很多。
對這些內(nèi)容圖的用色傾向太強會使設(shè)計結(jié)果看起來非常“刻意”,或是色彩的搭配非?;靵y,所以很多設(shè)計稿一看就是飛機稿的原因就是配圖使用太刻意,無法呈現(xiàn)界面應(yīng)有的狀態(tài)。
萬字干貨 | 最直白的UI配色指南
 
 
這類內(nèi)容圖的填充和上一種情況要反著來,即弱化顏色的存在感。盡量使用沒有高飽和度或白色的背景圖,可以讓它們更好的融入整個界面,不會成為界面的累贅。
萬字干貨 | 最直白的UI配色指南
 
 
根據(jù)這些總結(jié)出來的原則,我們可以再回到識色面板中做一個總結(jié)。先將明度、飽和度區(qū)域用橫豎做成三等分的“井”字,確定大致色相后選擇具體色彩的區(qū)域通常都集中在右上角,背景集中在左上角,中性色集中在左側(cè)的區(qū)域內(nèi)。
萬字干貨 | 最直白的UI配色指南
 
 
UI的配色相比平面非常簡單,因為配色的對象固定,每種配色對象的選擇范圍也很 “固定”。配色就是一個蘿卜一個坑的分配適合的色彩,只要積累一定案例分析和實踐經(jīng)驗,就能快速掌握。
而UI配色所謂的品牌調(diào)性,也遠(yuǎn)遠(yuǎn)沒有平面那么復(fù)雜,要做的就是組合出和同類產(chǎn)品不同,能被用戶記憶的色彩!
 
 
 
配色的流程解釋
一個完整的平面視覺畫面,里面包含的所有元素、色彩都不是孤立的,都會和其它元素形成聯(lián)系,產(chǎn)生整體的影響。
而我們在設(shè)計過程中,如果對元素的設(shè)計、配色是逐一完成的,那就很難控制整體的效果。因為你在做第一個元素的配色時,是很難預(yù)估它在最終畫面中的效果是否是合理的。
所以在我的配色建議中,不能一邊設(shè)計框架、交互、布局、樣式時一邊配色,而要把它當(dāng)成一個獨立的步驟,即 —— 配色階段,在完成界面的基礎(chǔ)的原型或簡單的上色后,再進(jìn)行統(tǒng)一的配色操作。
萬字干貨 | 最直白的UI配色指南
 
 
而配色的操作也不是看著元素一個一個填的,而是根據(jù)配色的類型,分層次、分順序逐步完成。前面之所以把 UI 的色彩類型拆解得那么細(xì)致,其中一個原因就是為了應(yīng)對當(dāng)前的情況。
萬字干貨 | 最直白的UI配色指南
 
 
配色的第一步就是完成中性色的配置,前面我們說過中性色是整個項目色彩的骨骼、基礎(chǔ)框架。在我們完成前期頁面原型設(shè)計的階段,就可以先創(chuàng)建中性色的階梯,來完成對界面層次、信息權(quán)重的表現(xiàn)。
萬字干貨 | 最直白的UI配色指南
 
 
有了這個基礎(chǔ),第二步就是填充品牌色,品牌色是整個項目配色中最關(guān)鍵的色彩類型,因為它要建立用戶對品牌的認(rèn)識,是一個必須使用且要高頻使用的色彩類型。
并且,后續(xù)所有的顏色的制定都會和品牌色發(fā)生聯(lián)系,理論上這些顏色和品牌色產(chǎn)生的聯(lián)系必須是和諧、穩(wěn)固、有效的。所以制定了品牌色,也就對后續(xù)的配色產(chǎn)生的一定的影響和約束。
接著,就是制定功能色。因為產(chǎn)品的基礎(chǔ)原型構(gòu)建完成以后,設(shè)計師對產(chǎn)品使用哪些特殊的字段、信息就會有清晰的認(rèn)識。那么最好把這些需要特殊表現(xiàn)的內(nèi)容先整理并羅列出來,然后選出合理的功能色進(jìn)行填充。
再往后就是填充容,根據(jù)相關(guān)的場景、內(nèi)容、風(fēng)格來選擇合適的配圖,確保配圖的用色不會和前面的色彩產(chǎn)生沖突,且根據(jù)配圖的類型決定它們色彩的突出程度。
最后就是裝飾色的處理,主要針對復(fù)雜的組件細(xì)節(jié)和圖標(biāo)等完成配色。之所以放在最后,是因為裝飾色的選擇是最復(fù)雜且沒有限制的,但它依舊要確保和畫面其它色彩能建立和諧的聯(lián)系。
所以當(dāng)其它顏色的配置都已經(jīng)完成以后,裝飾色的配色范圍就被大大限制了,選擇范圍變小,選擇起來自然也就更容易。
應(yīng)用這種配色方法,我們可以非??斓耐瓿蓪缑娴呐渖?,并且可以在每個階段檢查對應(yīng)配色的效果,并快速做出修改。除了效率外,這么做最大的好處,
就是幫助我們更有效地提升對色彩地深入認(rèn)識,以及積累不同配色組合的方案
。
講到這里,分層次和順序按一定的條件選色填充,就是UI配色的全部嗎?
當(dāng)然不止,還有一個更重要的部分 ——
對設(shè)計風(fēng)格的構(gòu)建
。
即展開正式的配色之前,設(shè)計師還需要對項目采用哪種風(fēng)格做出定義,后續(xù)的設(shè)計包括版式、圖標(biāo)、樣式、色彩,都是構(gòu)建這個風(fēng)格的一部分。比如很多作品集包裝中會展示 “情緒版”,它就是項目前期分析中探索設(shè)計風(fēng)格的工具之一。
萬字干貨 | 最直白的UI配色指南
 
 
萬字干貨 | 最直白的UI配色指南
 
 
理論上配色的前置環(huán)節(jié),是先探索并確定設(shè)計風(fēng)格,為配色指明方向。但這個流程對設(shè)計師的職業(yè)水平是有很高要求的,如果本身項目經(jīng)驗少,對設(shè)計風(fēng)格的積累理解不足,是沒辦法建立風(fēng)格和色彩的聯(lián)系的。
初級設(shè)計師會認(rèn)為情緒版、品牌化的分析是種包裝,毫無意義,但專業(yè)的 UI 設(shè)計師和團隊卻對風(fēng)格定義和分析樂此不彼,這就是
經(jīng)驗限制了認(rèn)知,我們沒辦法想象還沒做好的工作要怎么才能突破瓶頸做的更好
所以在前期的積累過程中,不用過分關(guān)注品牌、風(fēng)格化的分析,而是先確保能按照上面的做法輸出有效的配色。只要每個層級的配色不出錯,那么最終結(jié)果也會附帶品牌和風(fēng)格的附加屬性。
而在適應(yīng)這種操作并越來越熟練以后,你們就會發(fā)現(xiàn)只用這種方法的配色是 —— 莫得靈魂的,它們不能賦予你設(shè)計方案底層的價值和深度,要突破這種瓶頸就要追求更宏觀的思考和分析。
所以先從實踐出發(fā),用實踐積累經(jīng)驗和有效的問題,然后才能真正理解進(jìn)階的思維和流程的價值。
 
配色的實例演示
這次的配色演示我要用一個學(xué)員的作品為例,下面是原圖:
萬字干貨 | 最直白的UI配色指南
 
 
在這套界面中,顏色的整體觀感顯然是很不好的。一方面主色的應(yīng)用和品牌(捷安特)很不符合,另一方面色彩的搭配不和諧,尤其是內(nèi)容色和配色很沖突。
還有一個很重要的因素,就是默認(rèn)使用的深色配色,這是非常難駕馭的方向,完全不推薦新手在輸出項目作品時使用。
所以在后續(xù)的演示中,我們會分成兩個部分,首先從淺色模式開展了解基本的配色邏輯,然后再在這個基礎(chǔ)上進(jìn)行深色模式的配色說明,掌握兩種配色模式的實踐路徑。
 
Step1: 中性色填充
首先從淺色模式開始說起,在進(jìn)行配色前,先完成基礎(chǔ)的原型框架,為配色做后續(xù)的準(zhǔn)備。而完成基礎(chǔ)框架就要順便完成對中性色的定義,選擇合適的中性色數(shù)量和色彩,滿足產(chǎn)品需要。
萬字干貨 | 最直白的UI配色指南
 
 
原型對原圖做了簡單的修改和調(diào)整,讓布局先更合理一點,才適合配色的發(fā)揮。
萬字干貨 | 最直白的UI配色指南
 
 
Step2:品牌色填充
因為捷安特是一個成熟品牌,有自己的 VI 系統(tǒng),所以選色要從官方品牌的色彩出發(fā),主色是深藍(lán)色(RGB 已經(jīng)比印刷色更淺),淺藍(lán)是輔助色。
萬字干貨 | 最直白的UI配色指南
 
 
萬字干貨 | 最直白的UI配色指南
 
 
然后,開始填充主色和輔助色。主色要填充到頁面最重要的元素和背景色上,比如 LOGO、選中的底部導(dǎo)航圖標(biāo)、首頁背景色、重要的標(biāo)簽、按鈕等。輔助色可以添加到相對次要但高頻出現(xiàn)的一些設(shè)計元素上,如次要標(biāo)簽、按鈕等。
萬字干貨 | 最直白的UI配色指南
 
 
 
Step3:功能色填充
接著總結(jié)界面中包含的一些應(yīng)該填充色彩但又不適合用主色、中性色的對象,比如價格元素、評分、收藏、熱門等。
萬字干貨 | 最直白的UI配色指南
 
 
萬字干貨 | 最直白的UI配色指南
 
 
 
Step4:內(nèi)容填充
到這里色彩的主體已經(jīng)有了,就可以先開始往里面填圖片內(nèi)容了。整體的選圖標(biāo)準(zhǔn)用比較“安全”的做法,即大圖有能和主色搭配的背景顏色,小圖則盡量避免有大色塊、復(fù)雜的色彩,減少沖突性。
萬字干貨 | 最直白的UI配色指南
 
 
 
Step5:裝飾色填充
最后就到了裝飾色的填充上,對于一些特殊組件,以及裝飾圖標(biāo),就要在前面的配色基礎(chǔ)上做選擇。得到最終結(jié)果并沒有使用什么理論、規(guī)則,僅僅是從一系列的選擇中找出自己最滿意的結(jié)果而已。
萬字干貨 | 最直白的UI配色指南
 
 
到這一步基本配色也就完成了,可以再和原來的做法做一次對比。
這就是我們總結(jié)出來的最簡單的基礎(chǔ)配色方式,而上面的方案也不是唯一的配色方案,你們可以嘗試自己臨摹一遍原型,自己填充一遍色彩,看看能得到什么新的結(jié)果。
 


作者:酸梅干超人
鏈接:https://www.zcool.com.cn/article/ZMTY0NjQxMg==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

蘭亭妙微(www.jghy.net )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計圖標(biāo)定制、用戶體驗設(shè)計交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計,以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計,有興趣請加入一起學(xué)習(xí)成長,咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan

日歷

鏈接

個人資料

存檔