界面配色

2016 年玩追波的時(shí)候，有幸加入了 FreedomUnion 團(tuán)隊(duì)，當(dāng)時(shí)團(tuán)隊(duì)內(nèi)的小D（Dea_n）的界面漸變風(fēng)很受歡迎，他使用的顏色干凈、舒服、有感染力，很快形成了自己特有的設(shè)計(jì)風(fēng)格。

我被他的配色深深吸引了，特別想研究他的配色，就嘗試把他的作品在 PS 中打開，嘗試吸色，找找他經(jīng)常使用的配色范圍。為什么他配出來的顏色就很吸引人，長(zhǎng)時(shí)間看眼睛也不會(huì)太累？下面先欣賞一下小D（Dea_n）的設(shè)計(jì)作品。

作品已經(jīng)過了三年了，如果是一般的配色作品應(yīng)該看上去會(huì)有些過時(shí)，但是小D（Dea_n）的作品看上去并沒有，還是有不少作品的配色現(xiàn)在看上去也是很前衛(wèi)的。一起來看看我對(duì)小D（Dea_n）的大部分作品的吸色情況吧。

小D（Dea_n）的用色著實(shí)很大膽，很多都是貼邊用色。我上大學(xué)的時(shí)候，老師曾經(jīng)說過盡量少用貼邊的顏色設(shè)計(jì)，包括灰色也可以使用帶有顏色傾向的高級(jí)灰。這下終于明白了為什么小D（Dea_n）的配色這么亮眼。

當(dāng)然我也有自己的小發(fā)現(xiàn)，我發(fā)現(xiàn)每個(gè)的作品主配色的 CMYK 值總會(huì)有兩種色值為 0%，比如C：0%、M：91%、Y：95%、K：0%。

難道只是偶然？當(dāng)時(shí)我也請(qǐng)教過小D（Dea_n）是否是刻意的，得到的答案是并沒有。然后小D（Dea_n）靠自己卓越的配色能力進(jìn)入小米 RIGO 設(shè)計(jì)團(tuán)隊(duì)。

當(dāng)小米 miui9 系統(tǒng)官網(wǎng)海報(bào)出來的時(shí)候，我把作品拿到 PS 一吸色，結(jié)果告訴我小D 一定參與了這個(gè)作品的配色設(shè)計(jì)。那為什么只有黃色的 CMYK 的色值是有 3 種顏色混合而成的。

難道僅靠著一點(diǎn)吸色就可以肯定 CMYK 配色方法的存在？CMYK 配色方法是不是只存在 UI 界面設(shè)計(jì)中？CMYK 配色方法可不可以增加它的擴(kuò)展性？CMYK 配色方法可以作為一種配色方法幫助設(shè)計(jì)師完成色彩搭配的工作嗎？帶著這些疑問我繼續(xù)研究配色。

圖標(biāo)配色

我們來看一下「子彈短信」的應(yīng)用圖標(biāo)，它的用色基本符合之前說的 CMYK 配色方法，當(dāng)然是不包含子彈上的深色調(diào)。漸漸地我發(fā)現(xiàn) CMYK 配色方法的路子越來越寬了。

Asher 是追波繪畫寫實(shí)圖標(biāo)的大神，他的寫實(shí)作品配色飽和度高，光影通透到位，需要很強(qiáng)的手繪功底。在他的設(shè)計(jì)作品中除去暗色調(diào)和深色調(diào)的部分，其他配色基本都使用了 CMYK 配色的技巧。

大廠系統(tǒng)規(guī)范

我們都知道 iOS 系統(tǒng)和 Android 系統(tǒng)，在他們各自的系統(tǒng)規(guī)范中對(duì)配色也有相應(yīng)的規(guī)范。我們提取兩大系統(tǒng)規(guī)范中的配色進(jìn)行吸色分析。

一頓猛吸之后，發(fā)現(xiàn)大廠系統(tǒng)規(guī)范的用色也基本符合 CMYK 配色方法的標(biāo)準(zhǔn)。

前段時(shí)間 IBM 重新定義了他們的設(shè)計(jì)語言，在產(chǎn)品配色中 Blye 60、Alert60、Alert40、Alert20、Alert50 等主要配色都符合 CMYK 配色的方法。

配色中的主色或品牌色

近期很多互聯(lián)網(wǎng)公司進(jìn)行了品牌改版，深亮色調(diào)到淺亮色調(diào)慢慢成為一種趨勢(shì)。

新版的 Facebook LOGO 從深藍(lán)色變?yōu)榱了{(lán)色，字體則繼續(xù)保持原樣。其中 CMY 值進(jìn)行適當(dāng)減少。除此之外，圖標(biāo)部分也由原來的圓角正方形變?yōu)閳A形，圖標(biāo)中的「f」從偏右的位置移到圓形的中間位置。

全球旅行者喜愛的民宿預(yù)訂平臺(tái) Airbnb 的品牌 logo 主色也符合 CMYK 配色的方法。和 2019 潘通流行色珊瑚橘很接近。

微信 7.0 版本使用了經(jīng)過調(diào)整的全新圖標(biāo)。圖標(biāo)除了原來綠色漸變的背板變淺外，兩個(gè)標(biāo)志性的對(duì)話氣泡與背景板的比例也做了相應(yīng)的調(diào)整。色彩的 CY 值減少了。調(diào)整后的新版圖標(biāo)除了空間感和符號(hào)感也更強(qiáng)外，整體變得「更輕」了。

在網(wǎng)易云音樂 6.0 版本中，對(duì)品牌 LOGO 再次進(jìn)行了調(diào)整。新版網(wǎng)易云音樂圖標(biāo)最明顯的變化為紅色的主色調(diào)，其次為「留聲機(jī)」和「音符」組合而成的圖形部分。

紅色較之前變得更加明亮，同時(shí)圖標(biāo)紅色背景由之前的純色改為輕微的紅色漸變填充。新的紅色著重考慮了用戶長(zhǎng)時(shí)間使用屏幕造成的視覺疲勞，采用比較「輕」的色彩可有效降低這種問題。其中顏色 CMY 三種色值都有減少。圖形部分，新版圖形縮小了中間交叉部分的面積，頂部向右彎曲的弧形變大。整體效果較之前更加清晰，特別是在更小的應(yīng)用尺寸中，其展示的效果明顯要比之前的好。

不同顏色CMYK的色域范圍

看到上面的描述是不是特別想知道當(dāng) CMYK 中的兩個(gè)色值同時(shí)為 0 時(shí)，不同顏色的色域范圍？帶著這樣的想法，把紅橙黃綠青藍(lán)紫中每類選一種顏色進(jìn)行區(qū)域研究。打開 PS，在拾色器中截取不同顏色的色域范圍如下：

上圖白色區(qū)域就是在紅色 C 值為 0、K值為 0 時(shí)的色域范圍，范圍還是很小的。

黃色的 CMYK 色域很奇怪，在色相 38-58 度的黃色純度最高時(shí)，CMY 都有色值。也就是 PS 里面最純的黃色也是由 CMY 復(fù)色調(diào)和而成的。這也是為什么之前黃色使用時(shí)，CMYK 色值是由三種顏色混合而成的。

上圖白色區(qū)域就是在綠色 M 值為 0、K 值為 0 時(shí)的色域范圍，范圍開始慢慢變大，意味著綠色高飽和度的可使用顏色越來越多。

上圖白色區(qū)域就是在綠色 M 值為 0、K 值為 0 時(shí)的色域范圍，范圍也開始慢慢變大，大體范圍和綠色相當(dāng)。

上圖白色區(qū)域就是在藍(lán)色 Y 值為 0、K 值為 0 時(shí)的色域范圍，范圍應(yīng)該很大了。

上圖白色區(qū)域就是在紫色 Y 值為 0、K 值為 0 時(shí)的色域范圍，范圍和藍(lán)色的色域范圍相當(dāng)。

上圖白色區(qū)域就是在洋紅色 Y 值為 0、K 值為 0 時(shí)的色域范圍，范圍和藍(lán)色、紫色的色域范圍相當(dāng)。

1. CIE

從理論上講，可見光分布的色彩域就是 CIE 所表示的色域。在顏色感知的研究中，CIE 1931 XYZ 色彩空間（也叫做CIE 1931色彩空間）是其中一個(gè)最先采用數(shù)學(xué)方式來定義的色彩空間。從 CIE 圖中能看出冷色的區(qū)域遠(yuǎn)遠(yuǎn)大于暖色的區(qū)域。其中黃色和紅色的色域范圍相對(duì)較少，完全符合 PS 拾色器里面的色域范圍。

2. RGB

RGB 是計(jì)算機(jī)熒光屏顯示顏色的色彩方式，它們是由 R、G、B 三種發(fā)光質(zhì)通過加光混合產(chǎn)生的。RGB 色彩模式是一種加色模式，將紅光、綠光和藍(lán)光以不同的比例相加可以合成各種各樣的色光。R、G、B 三種顏色各能產(chǎn)生 2 的 8 次冪，即 256 級(jí)不同等級(jí)亮度的顏色。256*256*256 即 16777216種顏色。RGB 色彩模式主要用在電腦顯示器和電視上。RGB 色彩模式是繪圖軟件最常用的一種顏色模式。

3. CMYK

CMYK 由C（青）、M（品紅）、Y（黃）、K（黑）四色高飽和度的油墨以不同角度的網(wǎng)屏疊印形成復(fù)雜的彩色圖片。CMYK 色彩模式是一種顏料模式，它利用色料三原色混色原理，加上黑色油墨，形成各種各樣的色彩。

這種模式屬于相減混色模式，廣泛運(yùn)用于繪畫和印刷領(lǐng)域。CMYK 的色域范圍比 RGB 的色域范圍要小，某些色彩無法用 CMYK 油墨印刷出來。當(dāng)這些不能印刷出來的顏色出現(xiàn)時(shí)，在 PS 的「拾色器」對(duì)話框上會(huì)顯示一個(gè)帶感嘆號(hào)的三角形警告標(biāo)志，表示這些顏色超出 CMYK 的色域。即使設(shè)計(jì)了比較鮮艷的顏色，如果超出了 CMYK 印刷顏色的色域，計(jì)算機(jī)就會(huì)用一個(gè)接近它的較灰暗的顏色去頂替它?？梢姶蟛糠?CMYK 印刷顏色的色域小于 RGB 屏幕顏色的色域。

我們來仔細(xì)研究下 CIE 色域范圍，CMYK 當(dāng)中的黃色色域值有一小段超過了 RGM 的色域值。這就說明黃色的更飽和的 CMYK 的原色和間色可能在 RGB 的范圍之外。

其他的我們還有一個(gè)方法去驗(yàn)證。就是在 PS 里面新建顏色模式為 CMYK 的文件，打開拾色器界面，把顏色調(diào)到右上角改變色相值的 0-360度 的范圍。色相在 38-58 度的黃色區(qū)域?qū)υ捒蛏喜粫?huì)顯示帶感嘆號(hào)的三角形警告標(biāo)志，表示黃色區(qū)域的 CMYK 色域值是超過 RGB 的色域值。這就是為什么 iOS 系統(tǒng)規(guī)范中的黃色色值必須是三種顏色混合而成的。這時(shí)候特殊的顏色就需要特殊處理。

CMYK配色法使用技巧

CMYK 配色法就是兩種顏色的色值為 0%，但是黃色因?yàn)樯騿栴}是由三色組成的（c值盡量小于10）。

色域集中在純色系的范圍，濁（灰）色系和暗色系除外。

界面的主色（純色系為主）、圖標(biāo)設(shè)計(jì)、品牌色（純色系為主）都可以使用 CMYK 配色法。

總結(jié)

CMYK 配色法目前多適用于互聯(lián)網(wǎng)產(chǎn)品，雖說在創(chuàng)意上要敢于創(chuàng)新，但在實(shí)際的工作中還是需要理性地根據(jù)公司品牌和產(chǎn)品定位，合理地進(jìn)行色彩搭配。目前此方法沒有更多的理論依據(jù)支撐，如有疑問希望多多交流。

文章來源：優(yōu)設(shè)網(wǎng)     作者：水手哥

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

大家好，今天給大家?guī)淼氖桥渖韶浵盗兄谌冢?！超?jí)干貨?。?

前兩期地址傳送門：

1）用我這套方法，配出來的顏色很難不高級(jí)！

2）我常用的3個(gè)配色方法，搞定專家級(jí)配色！

前面兩期，主要分享審美的培養(yǎng)與提升、配色的技巧與習(xí)慣。本篇更為實(shí)在，主要分析有哪些經(jīng)典的萬金油配色組合，滿足日常工作使用。

看完這篇文章，相信你對(duì)色彩的掌握，能更深一步~~干貨建議提前收藏！喜歡記得給咱們公眾號(hào)添加星標(biāo)喔~~

1）經(jīng)典搭配-黃配黑 

色板 顏色組合 

Yellow & Black

黃配黑的色系非常經(jīng)典耐看，普適度也很廣。我在公眾號(hào)里寫的一些文章，也經(jīng)常采用這套配色。

這套黃與黑的組合很適合一些生活、社區(qū)、人文、情感等場(chǎng)景進(jìn)行使用，情緒溫和。如果你的設(shè)計(jì)，會(huì)被頻繁的在這些場(chǎng)景里進(jìn)行使用，那么不妨使用一下這套黃黑配色試試看。

比如以下這些案例：

這里也給出我經(jīng)常使用的兩組黃黑色板，一組更為活潑鮮艷，更具娛樂化。一組更為內(nèi)斂，充滿文化氣息。

推薦組合色板①：

推薦組合色板②：

2）科技搭配-藍(lán)黑白 

色板 顏色組合 

Blue & Black

這套色彩就不多說了，藍(lán)色可以說是我非常喜歡的顏色之一了。從咱們公眾號(hào)的logo，還有日常發(fā)文的封面，相信大家就能感受到。

藍(lán)黑白搭配，可以說顏色是百看不膩，并且藍(lán)色色相偏冷，沒那么多情緒傾向，所以更能夠讓人心平氣和的閱讀信息，提升效率。因此也經(jīng)常被用到科技、數(shù)據(jù)、社交、工具等應(yīng)用場(chǎng)景。

比如以下幾組案例：

關(guān)于藍(lán)黑白，我也給大家推薦兩組我很喜歡的色號(hào)組合。一組更為明亮，顯得年輕活潑些，而另外一組則更加深沉商務(wù)，更為內(nèi)斂。

推薦組合色板③：

推薦組合色板④：

3）CP組合-紅藍(lán)配 

色板 顏色組合 

Red & Blue

這套顏色組合，在近幾年可以說是非常流行了。顏色比較淺的，有經(jīng)典的馬卡龍色組合，被廣泛運(yùn)用到年輕社交等工具場(chǎng)景。而顏色重點(diǎn)的，直播娛樂等秀場(chǎng)平臺(tái)，也都大量可見其身影。

紅藍(lán)搭配，顏色的相撞導(dǎo)致色彩充滿了熱情與朝氣，社交娛樂化產(chǎn)品的場(chǎng)景，非常適合這套色彩組合。

比如下面這些案例：

這里也給大家分享兩套紅藍(lán)搭配的色板，一套略顯溫柔，另外一套則熱情如火。

推薦組合色板⑤：

推薦組合色板⑥：

4）經(jīng)典國(guó)潮-赤金組合 

色板 顏色組合 

Yellow & Black

這幾年國(guó)潮風(fēng)格也越來越受到大眾所喜愛，而在國(guó)潮色彩的搭配中，赤色與金色的搭配。一方面紅色中國(guó)味特色濃厚，而搭配上高檔的金色，瞬間濃厚的精致國(guó)民畫風(fēng)，就出來了。

比如每年的集五福，就是非常經(jīng)典的赤金組合，精致的同時(shí)，還非常接地氣兒。

關(guān)于赤金，我也從潘通色里挑選出了一組很經(jīng)典高檔的色彩組合，色板色號(hào)也分享給大家。

推薦組合色板⑦：

推薦組合色板⑧：

5）尊顯高貴-黑金色 

色板 顏色組合 

Yellow & Black

黑金組合相比其它顏色更顯高貴，在很多知名的APP里面，也都是能看得到，比如淘寶的88vip，京東金融的小金庫。這套色彩組合往往代表著商務(wù)、尊貴，高級(jí)，既內(nèi)斂又隱蔽，通常被用到各類會(huì)員、金融等尊貴體系中。

比如以下這些案例

關(guān)于黑金里面的金色，也分為兩種，一種顏色更為純金，還有種偏向于玫瑰金，玫瑰金的色彩相對(duì)要更溫和一些，沒那么冰冷。這兩套色板，我都分享給大家啦~~

推薦組合色板⑨：

推薦組合色板⑩：

6）其它色彩組合 

色板 顏色組合資源下載 

Yellow & Black

除了我上面分享的這五套經(jīng)典配色，還有很多其它的色彩組合，也都非常優(yōu)秀好看，比如上次分享的這些：

這段時(shí)間的積累收集，又更新了下面這些新色板。

還有很多，就不一一展示了。方便大家收藏，我把這些色彩組合的圖片+色板文件，都進(jìn)行了打包，方便大家直接借鑒這些色彩。

文章來源：UI中國(guó)     作者：UX小學(xué)

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

色彩是影響用戶最簡(jiǎn)單和最重要的一個(gè)因素。研究表明，人們只需 90 秒就能對(duì)一種產(chǎn)品做出下意識(shí)的判斷，而其中高達(dá) 60%以上的判斷僅基于顏色。因此，選擇合適的顏色對(duì)于改進(jìn)產(chǎn)品的轉(zhuǎn)換率和提高產(chǎn)品的可用性是非常有用的。在沒有文字的場(chǎng)景中，顏色的搭配非常重要。如何配色可以使設(shè)計(jì)感更強(qiáng)，如何配色更好看，哪些配色不好看，解決這些問題就需要學(xué)習(xí)色彩理論。

色彩基礎(chǔ)知識(shí)

我們身處在一個(gè)多彩的世界中，物體的不同顏色，會(huì)讓我們產(chǎn)生不同的情緒。色彩，即光從物體反射到人的眼睛所引起的一種視覺心理感受，按字面含義上理解可分為色和彩?！干故侵溉藢?duì)進(jìn)入眼睛的光傳至大腦時(shí)所產(chǎn)生的感覺，「彩」則指多色的意思，是人對(duì)光變化的理解。色彩的基本理論雖然老生常談，但在 UI 設(shè)計(jì)中具體怎么運(yùn)用，還有關(guān)于色彩的性格和含義，都是我們需要了解的。因此在學(xué)習(xí) UI 配色之前我們先來了解色彩的基礎(chǔ)知識(shí)。

1. 色彩常識(shí)

原色

所有的色彩都源自“紅黃藍(lán)”三種原色，很多人誤以為三原色是“紅綠藍(lán)”，其實(shí)不是。紅綠藍(lán)是顯示上的三原色，計(jì)算機(jī)屏幕的顯示是色光三原色（紅 red，綠 green，藍(lán) blue）即 RGB 組成的，每一個(gè)像素的顏色都用三原色值來顯示，與美術(shù)上的三原色不一樣。原色是其他顏色調(diào)配不出來的。把原色相互混合，可以調(diào)和出其他種顏色。

雖然 RGB 在顯示設(shè)備上表現(xiàn)良好，但并不夠人性化。因?yàn)槿藗兣袛囝伾?，往往是通過：這是什么顏色？是不是太艷了？是太亮了還是太暗了？這樣的感官維度，而很難通過紅綠藍(lán)的亮度層級(jí)去判斷。所以人們后來基于 RGB 衍生出了 HSB 模式和 HSL 模式。

印刷三原色為青（Cyan)、品紅（Magenta)、黃（Yellow)。是減色模式，混合為深灰色，并不能產(chǎn)生黑，所以在印刷時(shí)加上黑色油墨，才能產(chǎn)生純正的黑，就是 CMYK 顏色模式。

間色

又叫“二次色”。它是由三原色兩兩混合調(diào)配出來的顏色。紅與黃調(diào)配出橙色；黃與藍(lán)調(diào)配出綠色；紅與藍(lán)調(diào)配出紫色，橙、綠、紫三種顏色又叫“三間色”。在調(diào)配時(shí)，由于原色在份量多少上有所不同，所以能產(chǎn)生豐富的間色變化。

復(fù)色

也叫“復(fù)合色”。復(fù)色是用原色與間色相調(diào)或用間色與間色相調(diào)而成的“三次色”復(fù)色是最豐富的色彩家族，千變?nèi)f化，豐富異常，復(fù)色包括了除原色和間色以外的所有顏色。例如，黃色與橙色混合得到橙黃，紅色與紫色混合得到紫紅。

冷暖色

最后由三種原色、三種間色和六種復(fù)色組成的系統(tǒng)就稱為十二色環(huán)，從紫色至黃綠為冷色，黃色至紫色為暖色。冷色令人聯(lián)想到天空、海洋、冰雪等，產(chǎn)生寒冷、理智、寧靜等感覺；暖色則令人聯(lián)想到太陽、火焰、熱血等，產(chǎn)生溫暖、熱烈、危險(xiǎn)等感覺。

雖然可以用「冷」、「暖」色系來劃分色彩，但配色的變化卻有千種萬種。借著色彩的組合方式，從「非常冷」到「涼爽」到「暖和」再到「炎熱」都可以用不同的配色組來表現(xiàn)色彩的印象。

• 知識(shí)點(diǎn)：

不同的色輪由不同的人發(fā)明，他們對(duì)于色彩的見解不一樣，因此創(chuàng)建出來的色輪用途也不一樣。比如：伊頓色輪又被稱之為美術(shù)三原色，是由顏料的三原色混合疊加而成；RGB 色輪主要運(yùn)用于電腦、手機(jī)、平板等一系列科技產(chǎn)品，RGB 的三原色是光的三原色；CMYK 色輪主要用于印刷領(lǐng)域。

2. 色彩三屬性

豐富多樣的顏色可以分成兩大類，即有彩色系和無彩色系。彩色系的顏色具有三個(gè)基本特征：色相、明度和飽和度，在色彩學(xué)上被稱為色彩三大要素或色彩三屬性。

色相（Hue）

色相是自然狀態(tài)下的色彩，是色彩的相貌。簡(jiǎn)言之，色環(huán)上沒有改變明暗的色彩。色相是色彩的首要特征，是區(qū)別各種不同色彩的標(biāo)準(zhǔn)。例如紅、橙、黃、綠、青、藍(lán)、紫就是其中不同的基本色相。黑色是沒有色相的中性色。不同的色相在人眼中的差異是色相本身對(duì)應(yīng)光的波長(zhǎng)不同而造成的。紅色波長(zhǎng)最長(zhǎng)，紫色的波長(zhǎng)最短。

飽和度（Saturation）

飽和度是色彩的純度，他表示顏色中所含有色成分的比例。增加飽和度，色彩會(huì)變得更強(qiáng)烈、鮮艷生動(dòng)；降低飽和度，顏色中灰色成分越大，色彩會(huì)變得暗淡乏味。當(dāng)一種顏色摻入黑、白或其他色彩時(shí)，純度就產(chǎn)生了變化，當(dāng)摻入的顏色達(dá)到很大的比例時(shí)，人的眼睛就無法感知出來了。

飽和度為 0 的顏色為無彩色，就是黑、白、灰。數(shù)值越大，顏色中的灰色越少，顏色越鮮艷。飽和度高的地方給人感覺靠近，而飽和度低的地方則給人的感覺很遙遠(yuǎn)。高飽和度和低飽和度的色彩都給人堅(jiān)硬的感覺。

明度（Brightness）

明度，指色彩的明暗度，反應(yīng)的是色彩的深淺變化。以自然界為例，一些物體在早晨和晚上的色彩不同。如樹木和山脈，早晨色調(diào)淺；傍晚因?yàn)楣饩€減少了，色調(diào)變得偏暗。距光源越近的物體，明度越高，反之，則明度越暗。

明度在 UI 設(shè)計(jì)中扮演重要的角色，明度運(yùn)用得好，可以實(shí)現(xiàn)好的對(duì)比效果。明度達(dá)到 100%時(shí)，色彩就會(huì)變成白色（黑白模式下）；明度是 0%時(shí)，就會(huì)變成黑色。色彩的明度變化往往會(huì)影響到純度，例如藍(lán)色加入黑色以后明度降低了，同時(shí)純度也降低了；如果藍(lán)色加入白色則明度提高了，純度卻降低了。

3. 色彩的搭配

完整的 UI 配色應(yīng)包含主色、輔助色和中灰色。主色通常與品牌色一致，輔助色一般選擇與主色色調(diào)一致且能拉開層次的顏色，強(qiáng)調(diào)色選擇與主色相對(duì)立的互補(bǔ)色。下面我們來學(xué)習(xí)幾種常見的配色方案。

單色

單色是指某個(gè)色彩的明度變化，即在色彩上疊加 10%-90%白色或黑色得到的一組顏色。單色搭配由于彼此之間色彩相同，因此能和諧共處，但因較為樸素也就不容易引人注目，而且會(huì)給人一種單調(diào)的感覺。單色配色在色彩變化上也適合長(zhǎng)時(shí)間閱讀，顏色波動(dòng)較少，比較適合沉浸式交互的界面設(shè)計(jì)。

蝦米音樂就是單色搭配的最好例子，它將主色橙色用在主要功能入口、標(biāo)簽欄圖標(biāo)等所有界面的關(guān)鍵元素上，給人非常精致和統(tǒng)一的視覺體驗(yàn)。

如若想要在色彩變化上融入一點(diǎn)微妙的變化，可以嘗試在色環(huán)中選用兩側(cè)相近的顏色，這樣色彩層次豐富了而統(tǒng)一感也不會(huì)變，稱之為“鄰近色配色”。

鄰近色

是指在色相環(huán)中相鄰的兩種顏色，在色相環(huán)上相距 60°，或者相隔五六個(gè)數(shù)位的兩色。它可以在同一個(gè)色調(diào)中建立起豐富的質(zhì)感和層次，優(yōu)點(diǎn)是陽光、活潑、穩(wěn)定、和諧但不單調(diào)，理所當(dāng)然稱為最安全的配色法則。鄰近色色相相近，冷暖性質(zhì)相近，傳遞的情感也較為相似。例如，紅色，黃色和橙色就是一組鄰近色。鄰近色表現(xiàn)的情感多為溫和穩(wěn)定，沒有太大的視覺沖擊。

美顏相機(jī)的主色是粉色，將淺粉色和淺紫色作為輔助色，既能信息區(qū)分又和諧統(tǒng)一。

互補(bǔ)色

互補(bǔ)色是指在色相環(huán)上對(duì)立（180°）的兩個(gè)顏色，色相環(huán)上夾角呈現(xiàn)一條直線，例如黃色和紫色、橙色和藍(lán)色、紅色和綠色等。互補(bǔ)色有著非常強(qiáng)烈的對(duì)比度，在顏色飽和度很高時(shí)，可以產(chǎn)生許多十分強(qiáng)烈的視覺效果，就會(huì)使這兩種顏色都顯得更加鮮明，也將視覺沖擊力強(qiáng)度提升至峰值。這類配色形式優(yōu)缺點(diǎn)和對(duì)比色很相似。常給人一種潮流、刺激、興奮的感覺，把互補(bǔ)色放在一起，會(huì)給人強(qiáng)烈的排斥感，搭配不好會(huì)很山寨。

Airbnb 的主色為紅色，界面設(shè)計(jì)中使用主色的互補(bǔ)色「墨綠」作為主色調(diào)，給人清晰、簡(jiǎn)潔的感覺。

分裂互補(bǔ)色

分裂互補(bǔ)色是指尋找三種顏色，其中兩種互為鄰近色，另一種與它們形成互補(bǔ)色，例如黃色和藍(lán)色、洋紅。這種搭配既能保持互補(bǔ)色強(qiáng)烈的對(duì)比及視覺上的趣味性，又能讓顏色變得柔和。

36Kr 將藍(lán)色作為主色，互補(bǔ)色黃色作為輔助色用在圖標(biāo)、標(biāo)簽上，再選擇黃色的鄰近色紅色作為另一輔助色，用在不同的信息上，有助于用戶區(qū)分產(chǎn)品信息。

對(duì)比色

指在色環(huán)上相距 120°～180°之間的兩種顏色，也是兩種可以明顯區(qū)分的色彩，包括顏色三要素的對(duì)比、冷暖對(duì)比，彩色和消色的對(duì)比等。對(duì)比色能使色彩效果表現(xiàn)更明顯，形式多樣，極富表現(xiàn)力。需要注意的是，互補(bǔ)色一定是對(duì)比色，但是對(duì)比色不一定是互補(bǔ)色。因?yàn)閷?duì)比色的范圍更大，包括的要素更多，如冷暖對(duì)比、明度對(duì)比、純度對(duì)比等。這類配色形式優(yōu)點(diǎn)是視覺沖擊力強(qiáng)烈、富有跳躍性、突出、點(diǎn)綴能力強(qiáng)，比如常用作畫面中的點(diǎn)綴色，或與主體固有色成對(duì)比關(guān)系的背景色，用于突出主體。缺點(diǎn)是大面積使用比較難把控。

馬蜂窩的主色是黃色，對(duì)比色藍(lán)色作為輔色用在標(biāo)簽、小圖標(biāo)上，紅色作為強(qiáng)調(diào)色用在價(jià)格等信息上。

對(duì)比色也不單純是兩個(gè)顏色之間的對(duì)比，而是色調(diào)之間的對(duì)比！對(duì)比色還包括：補(bǔ)色對(duì)比、色相對(duì)比、明度對(duì)比、飽和度對(duì)比、冷暖對(duì)比，飽和度越高對(duì)比越強(qiáng)烈，明度反差越大對(duì)比越強(qiáng)烈。

四元色搭配

四元色搭配在色環(huán)上形成了一個(gè)矩形，使用不是一對(duì)而是兩對(duì)互補(bǔ)色。將其中的一個(gè)顏色作為主色，其余顏色作為輔色進(jìn)行搭配可以得出不錯(cuò)的效果。

四元色是比較難以平衡的顏色，不過搭配好了會(huì)非常出彩。不信可以自己用用感受一下，尤其是使用其中一個(gè)顏色作為主色，其他的三個(gè)顏色作為輔助色的時(shí)候。

4. 色彩和光源關(guān)系

了解了色彩的基本知識(shí)，下面說說色彩和光源的關(guān)系。如果想描繪好對(duì)象的色彩，那么就必須了解對(duì)象的固有色、光源色、環(huán)境色及它們之間的關(guān)系和變化。

固有色

即物體本身的顏色。是指在光源條件下物體占主導(dǎo)地位的色彩，如紅色的罐子、綠色的植物等。物體的固有色并不存在，在繪畫過程中為了觀察方便經(jīng)常引入“固有色”這一概念。從實(shí)際方面來看，即使日光也是在不停地變化中，何況任何物體的色彩不僅受到投照光的影響，還會(huì)受到周圍環(huán)境中各種反射光的影響。所以物體色并不是固定不變的。

光源色

物體只有在光源的照亮下才能觀察到它們的色彩。光源有自然光（太陽、天光）和人造光（燈），這些光源都各自具有不同的顏色。太陽光是偏黃色暖色光，月光是偏青的冷色光，陰天則更多的是藍(lán)灰色的天光，普通燈光是偏黃色的暖色光。光源的顏色對(duì)物體的顏色影響很大，想象一下一個(gè)置于紅色光源照射下的藍(lán)色物體會(huì)是什么顏色。

環(huán)境色

物體周圍環(huán)境的顏色就是環(huán)境色。環(huán)境色對(duì)物體的影響非常大，如在紅色背景下的白色物體，由于光源打到紅色背景上的背景反射光也會(huì)“染”到白色物體上，因此白色物體的部分表面會(huì)蒙上一層淡紅色的色彩。所以，設(shè)計(jì)師在用電腦作圖時(shí)也需要考慮并想象環(huán)境色的影響。

5. 色彩空間

Lab

Lab 的全稱是 CIELAB，有時(shí)候也寫成 CIE L*a*b*。最突出的特點(diǎn)是它的生理特性，一是它包括人眼所看到的所有顏色，是目前為止色域最寬的色彩空間，二是跟人眼一樣，首先看到的是明暗，其次是色彩，可以用數(shù)字化的方式描述人的視覺感應(yīng)，在計(jì)算機(jī)視覺中廣泛應(yīng)用。

LAB 顏色空間中，L 表示亮度，取值[0-100]對(duì)應(yīng)[純黑—純白]；A顏色表示從綠色到紅色的范圍，取值[-128—+127]對(duì)應(yīng)[綠—洋紅]；B表示從藍(lán)色到黃色的范圍，取值[-128—+127]對(duì)應(yīng)[藍(lán)-黃]，正是暖色，負(fù)是冷色。Lab顏色空間中亮度和顏色是分開的， L通道沒有顏色，a通道和b通道只有顏色。不像在RGB顏色空間中，R通道、G通道、B通道每一個(gè)既包含有明度又包含有顏色。

在表達(dá)色彩范圍上，最全的是 Lab 模式（其次是 RGB 模式，最窄的是 CMYK 模式），它彌補(bǔ)了 RGB 色彩模型和 CMYK 色彩模式色彩分布不均的不足。也就是說 Lab 模式所定義的色彩最多，且與光線及設(shè)備無關(guān)，并且處理速度與 RGB 模式同樣快，比 CMYK 模式快數(shù)倍。

Hsb

HSB 和 HSV 是同一個(gè)東西，只是名稱不同。在 Photoshop 拾色器上可以看到每個(gè)顏色都有一組 HSB 值，H 表示色相、S 表示純度、B 表示明度。色相值為 0～360 度，即圓；純度和明度值為 0～100%，因此，了解 HSB 模式的原理，就能了解色彩的本質(zhì)。

當(dāng)我們需要調(diào)配同色系色彩，保持色相不變，只需要改變純度和明度即可。如下圖所示的 3 種同色系綠色，他們的色相（H152）都一致，僅在純度和明度上有所變化。

當(dāng)色相和純度都為 0 時(shí)，色彩稱為中性色，也稱為灰度色，即黑白灰。其中，灰不是單指某一種顏色，而是一系列從黑到白的過渡色。

灰度色多用于文字，通常一個(gè)應(yīng)用中的文字不應(yīng)超過 3 種灰度色。深黑用于標(biāo)題、正文等主要文字；淺黑或深灰用于輔助、提示性文字；淺灰用于禁用、失效等狀態(tài)文字；純白用于深色按鈕文字。

此外，灰度色由于沒有任何色相，始終沉著冷靜，減少對(duì)內(nèi)容的視覺干擾，因此常用于界面背景色，例如 MOO 音樂的界面設(shè)計(jì)。

Hsl

HSL 色彩模式是工業(yè)界的另一種顏色標(biāo)準(zhǔn)，是通過對(duì)色相(H)、飽和度(S)、亮度(L)三個(gè)顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色的。在原理和表現(xiàn)上，HSL 和 HSB 中的 H（色相） 完全一致，但二者的 S（飽和度）不一樣，L 和 B （明度 ）也不一樣。

取一個(gè)顏色試試看，先選一個(gè)顏色 #0688F9，放入 “HSL Color Picker”，顯示 HSL 數(shù)值為：H(208), S(95), L(50)，但是我們放在 Sketch 里面看一下，顯示的 HSB 數(shù)值為，H(208), S(98), B(98) 。

HSL 的 H 代表的是人眼所能感知的顏色范圍，這些顏色分布在一個(gè)平面的色相環(huán)上，取值范圍是 0°到 360°的圓心角，每個(gè)角度可以代表一種顏色。色相值的意義在于，我們可以在不改變光感的情況下，通過旋轉(zhuǎn)色相環(huán)來改變顏色。在實(shí)際應(yīng)用中，我們需要記住色相環(huán)上的六大主色，用作基本參照：360°/0°紅、60°黃、120°綠、180°青、240°藍(lán)、300°洋紅，它們?cè)谏喹h(huán)上按照 60°圓心角的間隔排列。

HSL 相比 RGB 的優(yōu)勢(shì)

我們來做一個(gè)基于 HSL 的調(diào)色實(shí)踐。你可不可以快速說出“海棠紅”所對(duì)應(yīng)的 RGB 色值？如果再加一點(diǎn)橙色進(jìn)去，把亮度提高一點(diǎn)，色值又是多少？想想那應(yīng)該是一個(gè)介于洋紅和紅色之間的，性感嬌艷的顏色。我們可以假定它在色相環(huán) H 上的角度是 330°左右，飽和度較高，亮度適中，看看那是什么顏色？

em…我們想要的顏色應(yīng)該再接近紅色一點(diǎn)，讓我們把色相（H）+20°到 350°，現(xiàn)在好多了。

通過改變色相值 H，我們實(shí)現(xiàn)了色相從洋紅向海棠紅的偏移。 大感覺接近了，但還是略微有點(diǎn)灰暗，我們可以通過增加飽和度（S）+15%，讓這個(gè)顏色變得更鮮活，看起來更亮麗。

感覺還是差點(diǎn)，海棠紅是屬于少女的顏色，應(yīng)當(dāng)再嫩一點(diǎn)、通透一點(diǎn)，不會(huì)這么強(qiáng)烈。那可以通過增加亮度 L，+10%試試看，嗯，這才是我們想要的顏色。

同理，如果想加點(diǎn)橙色進(jìn)去， 再亮一點(diǎn)，我們通過心算就大致可以確定色相環(huán)的相位和亮度值。在這里，我們需要讓 H 增加 20°，L 增加 5%。

在使用 HSL 調(diào)色的過程中，不需要了解復(fù)雜的色光混合原理，這是一個(gè)自然的、感性的、易于理解的過程。相比之下，RGB 調(diào)色方式顯得非常笨拙復(fù)雜、難以理解，而 HSL 是多么的友好。

• 知識(shí)點(diǎn)：

需要提醒一下的是，CSS 代碼里支持的是 HSL，而不是 HSB。如果和前端對(duì)接時(shí)，UI 給到的是 HSB 的色值，那么最終落地的顏色效果會(huì)與設(shè)計(jì)稿有出入。Photoshop 中的 Hex 和 RGB 顏色可以直接在 CSS 文件中使用，但是 Photoshop 中的 HSB 模式顏色和 HSL 是不同的。

Yuv

YUV，是一種顏色編碼方法。常使用在各個(gè)影像處理組件中。YUV 在對(duì)照片或影片編碼時(shí)，考慮到人類的感知能力，允許降低色度的帶寬。Y 表示明亮度（Luminance 或 Luma），也就是灰度值；U(Cb)表示色度（Chrominance）；V(Cr)表示濃度（Chroma）；通常 UV 一起描述影像色彩和飽和度，用于指定像素的顏色。

采用 YUV 色彩空間的重要性是它的亮度信號(hào) Y 和色度信號(hào) U、V 是分離的。如果只有 Y 信號(hào)分量而沒有 U、V 信號(hào)分量，那么這樣表示的圖像就是黑白灰度圖像（回想一下小時(shí)候看的黑白電視）。彩色電視采用 YUV 空間正是為了用亮度信號(hào) Y 解決彩色電視機(jī)與黑白電視機(jī)的兼容問題，使黑白電視機(jī)也能接收彩色電視信號(hào)。

色彩心理學(xué)

色彩心理學(xué)是美術(shù)知識(shí)學(xué)習(xí)中非常重要的一部分。他所研究的是色彩通過對(duì)人視覺上的刺激，而引發(fā)人情感和感官上的變化，通過日常生活中人們對(duì)應(yīng)用色彩的經(jīng)驗(yàn)積累而歸納總結(jié)出人類對(duì)色彩心理上的預(yù)期感受。在生活中，色彩心理學(xué)對(duì)人們對(duì)顏色的認(rèn)知有很大的影響。為什么交通信號(hào)燈用紅色表示停止通行而不是綠色呢？為什么大多快餐店用紅色或黃色作為品牌的主色？這都是色彩心理學(xué)的相關(guān)知識(shí)。

雖然紅、藍(lán)是受到最普遍喜愛的顏色（通過對(duì) App Store 應(yīng)用流行顏色分類統(tǒng)計(jì)得知）。但并不意味著這一準(zhǔn)則可以套用在所有產(chǎn)品上。產(chǎn)品的屬性是什么，用戶定位是什么，要傳達(dá)的產(chǎn)品氣質(zhì)是什么等等，這些都是選擇應(yīng)用圖標(biāo)的顏色時(shí)需要考慮的問題。世界上第一間 Airbnb 房間是在一條叫 Rausch street 的街上誕生的，因此 Airbnb 的主色被命名為「Rausch」的溫暖顏色。在挑選主色調(diào)的時(shí)候，4 名設(shè)計(jì)師前往世界 13 個(gè)城市，只為了更好地理解 Airbnb 的理念：熱情、能量和自信，這正是 Rausch 要傳遞的信息。除了 Rausch 以外，Airbnb 還有其它九種顏色，包括 Kazan、Beach、Tirol、Foggy 等等，它們也都是以 Airbnb 的社區(qū)街道命名的。

下面來講解每一種顏色都各自帶有什么樣的性格，只有理解了顏色的性格才能正確的使用它們。

黑色

黑色代表著品質(zhì)、高端、時(shí)尚、低調(diào)、權(quán)威、嚴(yán)肅、穩(wěn)重，是一種充滿質(zhì)感的顏色。它是所有色彩中最有力量的，能很快吸引用戶的注意力。作為一種無彩色，能讓它和其他色彩百搭，黑色+金黃色，給人一種奢華精致的感覺；黑色+銀灰色，則給人一種成熟穩(wěn)重的感覺；黑色+紅色，給人一種時(shí)尚潮流的感覺。因此黑色是一種永遠(yuǎn)流行的主要色彩。

白色

白色代表著純潔、簡(jiǎn)單、純真、樸素、信任、開放、雅致，白色常常被認(rèn)為是“無色”，即不是色彩。單一使用白色通常不會(huì)引起任何情感，但是當(dāng)白色與其他顏色配合使用時(shí)，白色能很好的襯托，大量的留白讓其他元素脫穎而出。在界面設(shè)計(jì)中，作為無彩色的白色，常用于背景色，緩和各種顏色的沖突，以襯托其他色彩，提高畫面明度，提高文字可讀性。

灰色

灰色是代表著睿智、老實(shí)、執(zhí)著、嚴(yán)肅、壓抑、沉穩(wěn)。介于黑色和白色之間，也屬于無彩色，沒有色相也沒有純度，只有明度的變化。它和任何顏色都能很好的搭配，也常常用于背景色或用于突出其他彩色?；疑幌窈谏敲磮?jiān)硬刺眼，他更有彈性，它比黑色更有深層次的力量。因此在畫面中，很少出現(xiàn)純黑，基本都是用深灰色來代替黑色，也可以用淺灰色來代替白色。

紅色

紅色代表著喜慶、熱情、歡樂、斗志、奔放、自信，是一種充滿能量的顏色。這是最醒目和強(qiáng)勢(shì)的顏色，一登場(chǎng)即獲得全場(chǎng)的關(guān)注，甚至能引起一些生理反應(yīng)，例如心跳呼吸加快等。紅色最能烘托氣氛，在中國(guó)傳統(tǒng)節(jié)日里都使用熱鬧的紅色來裝飾，因此也就不難理解每逢佳節(jié)各大電商應(yīng)用活動(dòng)頁一片紅，為的就是發(fā)沖動(dòng)，引人消費(fèi)。同時(shí)紅色也代表了警示、告誡。所以在界面設(shè)計(jì)中常用紅色的文字和按鈕來警示用戶慎重操作。

橙色

橙色代表著溫暖、歡樂、輝煌、健康、陽光、年輕、華麗，是一種充滿朝氣的顏色。橙色并不像紅色那樣咄咄逼人，而且它烘托出的活躍氣氛沒有危險(xiǎn)的感覺，反而是一種友好。因此越來越多的應(yīng)用避開常見的紅色和藍(lán)色，而選擇橙色的原因。

黃色

黃色代表著信心、青春、聰明、尊貴、輝煌、時(shí)尚，是一種充滿活力的顏色。黃色是明度極高的顏色，其鮮亮的色調(diào)使它在眾多圖標(biāo)陣列中顯得尤為突出。盡管在警示效果上沒有紅色那么明顯和強(qiáng)烈，但是還是能給人很醒目和危險(xiǎn)的感覺（例如道路警示牌）。同時(shí)因?yàn)檫^于明亮，也是一種非常難以運(yùn)用的顏色，性格不穩(wěn)定常有偏差，和別的顏色配合使用易失去本來的性格。不過黃+黑的搭配很流行，例如站酷和美團(tuán)外賣。

綠色

綠色代表著健康、生命、青春、寧靜、自然、和平、安全、舒適，是一種充滿希望的顏色。綠色給人無限的安全感，當(dāng)情緒低落與消極時(shí)看一些綠色，能緩解我們焦躁的情緒。綠色在生活中被廣泛運(yùn)用，如安全出口的顏色就是綠色，但綠色的飽和度要適當(dāng)控制，如高飽和度的綠色也會(huì)令人興奮，引起注意。

青色

青色代表著堅(jiān)強(qiáng)、古樸、活潑、清爽、柔和、優(yōu)雅、希望，是一種充滿靈動(dòng)的顏色。青色是一種介于綠色與藍(lán)色之間的顏色，如果無法界定一種顏色是藍(lán)色還是綠色時(shí)，這個(gè)顏色就可以被稱為青色。豆瓣的主色調(diào)是青色，很符合豆瓣小清新的氣質(zhì)，帶給用戶恬靜的感受。

藍(lán)色

藍(lán)色代表著冷靜、科技、靈性、自由、放松、未來、理智、純凈、商務(wù)，是一種充滿理性的顏色。藍(lán)色是天空的顏色，是大海的顏色。在色彩心理學(xué)的測(cè)試中發(fā)現(xiàn)，幾乎沒有人對(duì)藍(lán)色反感。純凈的藍(lán)色通常讓人聯(lián)想到海洋和天空，可以撫平內(nèi)心的傷口，讓人的內(nèi)心感到平和，有助于人的頭腦變得冷靜。例如 twitter 的主色調(diào)是藍(lán)色，在社交應(yīng)用里藍(lán)色是一種很安全的顏色，高純度的顏色傳遞了信賴、年輕和溝通的氛圍。

紫色

紫色代表著高貴、浪漫、優(yōu)雅、性感、幸運(yùn)、夢(mèng)幻、時(shí)尚、創(chuàng)造性，是一種充滿神秘的顏色。是小孩子和有創(chuàng)造力的人十分喜歡的顏色。紫色的光波最短，在自然界中較少見到，所以被引申為象征高貴的色彩。紫色的明度在所有有彩色的顏色中是的。與不同的顏色結(jié)合會(huì)展現(xiàn)出不同的風(fēng)格特色。紫+粉常用于女性化的產(chǎn)品調(diào)性，黃色是紫色的對(duì)比色。

色彩對(duì)用戶體驗(yàn)的影響

當(dāng)我們討論色彩的時(shí)候，聊的更多的是色彩的搭配。雖然有些設(shè)計(jì)師認(rèn)為有些色彩是一些純粹的美學(xué)上的選擇，但是實(shí)際上，色彩對(duì)于用戶的心理和行為的影響相對(duì)更深，最終會(huì)反映在用戶體驗(yàn)和行為反饋上。

當(dāng)然，色彩理論是一個(gè)相對(duì)復(fù)雜的主題。從用戶體驗(yàn)的角度上來說，色彩所涉及到的遠(yuǎn)不是配色方案這一個(gè)維度。通常，我們聊得最多的是不同色彩所產(chǎn)生的心理效應(yīng)，以及多色彩搭配時(shí)，相互之間的影響和可訪問性上的問題。設(shè)計(jì)師可以將色彩更好地運(yùn)用到設(shè)計(jì)中，而無需重新考慮整個(gè)過程。一旦設(shè)計(jì)師掌握了基礎(chǔ)知識(shí)，色彩理論中最有意義的部分之一就是學(xué)習(xí)將更多意想不到的色彩融入他們的設(shè)計(jì)中。

1. 色彩心理學(xué)和用戶體驗(yàn)緊密關(guān)聯(lián)

界面顏色的情感影響不容忽視。盡管有些顏色在 Ui 設(shè)計(jì)中是“通用的”（例如，黑色，白色和灰色，實(shí)際上幾乎所有好的設(shè)計(jì)中都使用了其中的至少一種），但它們結(jié)合使用的顏色可能會(huì)對(duì)體驗(yàn)設(shè)計(jì)產(chǎn)生巨大影響。當(dāng)然，顏色的使用方式也會(huì)對(duì)顏色的感知產(chǎn)生巨大影響。以藍(lán)色為例，在簡(jiǎn)約的布局當(dāng)中，大面積使用藍(lán)色作為主色調(diào)，和在大面積白底上使用很小的一抹藍(lán)色用來強(qiáng)調(diào) CTA 按鈕，所帶來體驗(yàn)是截然不同的。

尊重文化差異

人類對(duì)于色彩都有著共通的認(rèn)知，但不同國(guó)家對(duì)于色彩賦予了不同的含義。紅色在中國(guó)象征著喜慶、財(cái)富和愛情，而在西方國(guó)家被賦予了流血、犧牲、暴力和激進(jìn)的文化意義，貶義的味道更重一些。而白色與紅色相反，白色在中國(guó)代表了死亡、反動(dòng)和投降，以白色為主的設(shè)計(jì)常常會(huì)被視之為過于「素」，認(rèn)為不夠吉利。而西方國(guó)家卻認(rèn)為白色高雅、純潔和幸運(yùn)，因此要根據(jù)不同的文化背景，使用不同的色彩，才能更好地降低被誤解的風(fēng)險(xiǎn)。

另外一方面，隨著現(xiàn)代主義運(yùn)動(dòng)的普及，白色也擁有了更加現(xiàn)代的特征。在日本，白色甚至和當(dāng)?shù)匚幕Y(jié)合，延伸出更加細(xì)膩獨(dú)特的精神特質(zhì)，隨著日本戰(zhàn)后設(shè)計(jì)領(lǐng)域的發(fā)展和崛起，白色在這一地區(qū)的含義則更加豐厚。原研哉在《白》一書當(dāng)中，針對(duì)白色的含義和特征進(jìn)行了非常深入的探討，之后的《Subtle》一書當(dāng)中，雖是圍繞紙來探討微妙的體驗(yàn)，但是也沒少提及白色本身的特征。

例如股票交易市場(chǎng)，在國(guó)際股票市場(chǎng)通常是綠漲紅跌，這是因?yàn)榧t色在西方國(guó)家代表著財(cái)政赤字，綠色代表著財(cái)富；而在中國(guó)正好相反是紅漲綠跌，這是因?yàn)樵谥袊?guó)紅色象征著財(cái)富。

設(shè)計(jì)師必須根據(jù)產(chǎn)品的目標(biāo)受眾來審視其調(diào)色板的文化含義，這一點(diǎn)很重要。如果產(chǎn)品要面向全球受眾，請(qǐng)確保在使用的顏色和圖像之間取得平衡，以防止負(fù)面的文化內(nèi)涵。如果產(chǎn)品主要只針對(duì)特定文化，則設(shè)計(jì)師可以不用太關(guān)心所選調(diào)色板在其他文化中可能產(chǎn)生的影響。

歷史對(duì)配色的影響

時(shí)間變化對(duì)于配色所帶來的影響不僅僅如此。比如中日兩國(guó)在色彩使用上，還存在一個(gè)非常典型的差異，歷史上日本在一個(gè)很長(zhǎng)的周期內(nèi)是作為中國(guó)的屬國(guó)所存在的，這也使得中國(guó)自古以來崇尚飽和度較高的正色，而日本則大多使用飽和度偏低的間色，這一特征可以從兩國(guó)的傳統(tǒng)色上體現(xiàn)出來：

△ 中國(guó)傳統(tǒng)色：https://color.uisdc.com/

△ 日本傳統(tǒng)色：https://color.uisdc.com/jp.html

性別誤區(qū)

或許天生如此，女性不喜歡灰色、棕色和橙色。她們鐘愛藍(lán)色、紫色和綠色。而男性不喜歡紫色、棕色和橙色。男性喜歡藍(lán)色、綠色和黑色。只要記住，當(dāng)你的產(chǎn)品目標(biāo)用戶群是男性時(shí)，選擇能傳達(dá)男性氣概的色彩，想象下你把運(yùn)動(dòng)類應(yīng)用的界面使用女性色彩，結(jié)果可想而知。

△ 男女最喜歡的顏色

△ 男女最不喜歡的顏色

3. 針對(duì)色盲用戶群體的設(shè)計(jì)

你有沒有想過你的 APP 使用人群中會(huì)有視力障礙者？

當(dāng)人們談?wù)撋r(shí)，他們通常指的是不能感知某些色彩。 大約 8％的男性和 0.5％的女性患有不同程度的色盲——他們?cè)谧R(shí)別部分或者全部顏色時(shí)有困難。面對(duì)如此龐大的特殊受眾，設(shè)計(jì)師理應(yīng)關(guān)注他們的需求。

△ 正常人和紅綠色盲看到的相同色彩

因?yàn)樯び卸嘀乇憩F(xiàn)形式，例如紅綠色盲，藍(lán)黃色盲和單色色盲。所以運(yùn)用多樣的視覺線索來連接你 APP 的重要狀態(tài)是很重要的。絕不要僅僅依靠色彩來表示系統(tǒng)狀態(tài)。 相反，應(yīng)使用元素（如筆畫，指示符，圖案，紋理或文本）來描述操作和內(nèi)容。需要注意的就是不要簡(jiǎn)單認(rèn)為色盲就是簡(jiǎn)單的分不清紅綠，色盲用戶對(duì)色彩的感受差異不僅僅是單獨(dú)某種的問題，是某些范圍色光的敏感程度問題。

有趣的事實(shí)：Facebook 的標(biāo)志和不怎么討喜的藍(lán)色配色是特意挑選的。因?yàn)?FB 創(chuàng)始人馬克·扎克伯格是紅綠色盲，他對(duì)藍(lán)色的識(shí)別是最好的。他曾說過，“藍(lán)色是我生命中最豐富的顏色，我?guī)缀蹩梢钥匆娺@世上所有的藍(lán)色?！?

△ facebook

Photoshop 有非常實(shí)用的工具來幫助模擬色盲，在「視圖」的「校樣設(shè)置」菜單內(nèi)選中就可以使用了。這個(gè)功能讓設(shè)計(jì)師可以看到在色盲用戶的眼中你的界面是什么樣子的。

△ pinterest登陸頁紅綠色盲視圖

下面以點(diǎn)狀圖信息圖形為例，來說明如何為色盲用戶優(yōu)化信息圖：

優(yōu)化采用了這樣一些手段：1.調(diào)整配色，將色盲人士容易混淆的紅、綠、橙色換為紅、藍(lán)、黃色。2.調(diào)整明度，使圖中幾個(gè)顏色在明度上差異更明顯。3.為不同元素賦予不同形狀。所有使用點(diǎn)元素的信息圖，都可以參考這種解決方式。

在實(shí)際設(shè)計(jì)過程中，我們需要在美觀和友好之間進(jìn)行權(quán)衡。我們也可以采用一些交互手段，避免同一界面中元素太多太過雜亂的問題。

4. 流行趨勢(shì)對(duì)色彩的影響

這是更長(zhǎng)維度上的變化，在短時(shí)間以內(nèi)，流行色的趨勢(shì)變化，對(duì)于用色也同樣存在影響。這種影響在時(shí)尚行業(yè)有著非常直接的體現(xiàn)，而在網(wǎng)頁和 UI 設(shè)計(jì)行業(yè)，同樣存在。比如 2020 年的潘通年度流行色是「經(jīng)典藍(lán)」（Classic Blue），也就明白了為什么 iphone12 今年的主打色是藍(lán)色了。

2020潘通年度流行色 「經(jīng)典藍(lán)」新鮮出爐！（附配色方案）

一覺醒來，2020 年潘通年度色就這么發(fā)布了。 2020年年度潘通色：「經(jīng)典藍(lán)」 這款被命名為為「經(jīng)典藍(lán)」（Classic Blue）的色彩沉穩(wěn)耐看，雋永優(yōu)雅，按照潘通官方的說法，「經(jīng)典藍(lán)」仿佛暮色四合時(shí)的天空，寧神靜心，讓人駐足。

閱讀文章 >>

所以，當(dāng)你在設(shè)計(jì)的時(shí)候，如果你的目標(biāo)用戶群體有著清晰的地域或者性別偏向，你可以有目的地利用這些知識(shí)來規(guī)避設(shè)計(jì)陷阱，更好地發(fā)揮色彩本身的功能和優(yōu)勢(shì)。如果受眾廣泛，則可以盡量使用通用性更強(qiáng)的色彩來進(jìn)行設(shè)計(jì)。

• 知識(shí)點(diǎn)：

你知道世界上的顏色是什么嗎？

是否存在一種色彩，是不分性別文化，大家都會(huì)喜歡的呢？確實(shí)有人通過大規(guī)模的調(diào)研和探索找到了一種世界上的色彩：馬爾斯綠（Marrs Green）。來自全世界 100 多個(gè)國(guó)家 3 萬多人響應(yīng)號(hào)召完成了這項(xiàng)投票，并且最終選取出來的一款綠色。

世界上的色彩出爐了，她的名字叫馬爾斯綠！

如果說有一種色彩是世界上的色彩，那么它會(huì)是什么顏色呢？今天，這個(gè)問題的答案出爐了：馬爾斯綠（Marrs Green）。

閱讀文章 >>

色彩在UI設(shè)計(jì)中的應(yīng)用

1. 色彩的應(yīng)用

人腦對(duì)于色彩的記憶度要高于形態(tài)，即一個(gè) App 給用戶留下深刻印象的往往是界面的色彩。例如說到支付寶，我們可能想不起它的首頁長(zhǎng)什么樣子，標(biāo)簽欄圖標(biāo)是那些，但能馬上記起它的界面主色是藍(lán)色。因此運(yùn)用好色彩對(duì) UI 設(shè)計(jì)十分重要，它能直觀的呈現(xiàn)產(chǎn)品的氣質(zhì)和性格，能有效的幫助用戶組織和閱讀信息，與界面設(shè)計(jì)產(chǎn)生聯(lián)系和記憶。好的配色往往依靠設(shè)計(jì)師審美、感覺搭配出來，但合理的顏色搭配必定存在合理的配色規(guī)律和配色方法論的支撐，下面結(jié)合相關(guān)案例為大家講解色彩運(yùn)用的幾個(gè)技巧。

不得觸碰的禁區(qū)

分析研究了很多優(yōu)秀設(shè)計(jì)作品，發(fā)現(xiàn)他們?cè)谟蒙臅r(shí)候有一部分區(qū)域是不會(huì)使用的，也就是我們常說的“配色禁區(qū)”。當(dāng)然，這里的“禁區(qū)”是帶雙引號(hào)帶的，并沒有什么絕對(duì)的禁區(qū)，只是說這些顏色不易控制，在連基礎(chǔ)色都沒有駕馭好之前，盡量少碰。

配色禁區(qū)大概分為這三種：三角形禁區(qū)、矩形禁區(qū)、扇形禁區(qū)（紅色為禁區(qū)），如下圖：

綜合看來，不管是那種禁區(qū)，右下角區(qū)域的顏色是很少用的。畢竟他們又臟又深，當(dāng)然什么顏色都能駕馭的大師請(qǐng)略過。

• 知識(shí)點(diǎn)：

在界面設(shè)計(jì)中，一般主色和輔助色都集中在右上角，次要的和不可點(diǎn)的顏色都集中在中上方，而文字信息和背景色則集中在左側(cè)，右下角禁區(qū)是我們要重點(diǎn)避開的對(duì)象。

色調(diào)一致

在 App 設(shè)計(jì)之前應(yīng)先確定界面的主色調(diào)，主色將占據(jù)界面中很大的比例，通常是品牌色，而輔助色、點(diǎn)綴色、背景色等都應(yīng)以主色調(diào)為基準(zhǔn)來搭配，這樣才能保證 App 整體色調(diào)的一致。色調(diào)一致的界面，能帶給用戶始終如一的視覺體驗(yàn)。例如馬蜂窩將黃色（品牌色）作為主色，以及從主色搭配出的藍(lán)色（對(duì)比色）貫穿 App 始終。

60-30-10 原則

60% 30% 10%的原則，是達(dá)到色彩平衡的最佳比例。在 60%的空間使用主色，可以運(yùn)用到導(dǎo)航欄、按鈕、圖標(biāo)等關(guān)鍵的元素中，使之成為整個(gè) App 的視覺焦點(diǎn)和色彩關(guān)系；30%的空間使用輔助色，可以平衡過多的主色而造成的視覺疲勞；最后剩下 10%的空間為點(diǎn)綴色，可以用在一些不太重要的元素又需要區(qū)分的時(shí)候。6:3:1 原則構(gòu)建了一種豐富的色彩層次，讓界面看上去和諧、平衡和不雜亂。

嗶哩嗶哩將粉色運(yùn)用到頁簽、標(biāo)簽欄、按鈕、入口圖標(biāo)等上，藍(lán)色的輔助色用在角標(biāo)、圖標(biāo)上，還有黃色、紅色用在一些小圖標(biāo)、小標(biāo)簽上，主次非常清晰明了。

色不過三

經(jīng)常很多大神在網(wǎng)上說配色不要超過三種色，其實(shí)就是「色不過三」原則，即在一個(gè)頁面中不要使用超過 3 種顏色搭配，這也和上面說的“60-30-10 原則”類似，即一個(gè)主色、一個(gè)輔助色和一個(gè)點(diǎn)綴色。但在實(shí)際 UI 設(shè)計(jì)中，迫于產(chǎn)品的需要可能會(huì)使用更多數(shù)量的色彩，但切記不可超過 7 種色相（注意不是 7 種色值），每個(gè)色相還可以運(yùn)用其飽和度、明度的變化分解出豐富的色彩搭配。

美團(tuán)外賣的首頁 20 個(gè)功能入口大圖標(biāo)的背景用了 9 種不同的色彩，每種色彩又包含一種低飽和度色彩進(jìn)行彩色漸變，但并沒有顯得雜亂，而是呈現(xiàn)一種年輕時(shí)尚的律動(dòng)感。這是因?yàn)檫@里雖然使用了 9 種不同的色彩，但仔細(xì)觀察發(fā)現(xiàn)只使用了 3 種色彩，其他 6 種則是從前者鄰近色中提取出來的搭配，再將它們錯(cuò)落放置，呈現(xiàn)出豐富多彩的色彩搭配，整體和諧統(tǒng)一。

遠(yuǎn)離純黑色和純灰色

黑色就像沒有生命力的深淵，使用戶陷入冷冷的負(fù)面情緒中。遠(yuǎn)離純黑色和純灰色，是因?yàn)樗鼈儾淮嬖谟诂F(xiàn)實(shí)世界里。嘗試在純黑和純灰中加入一些色調(diào)，會(huì)讓界面看上去更柔和自然。另外，純黑色還會(huì)與白色產(chǎn)生強(qiáng)烈的對(duì)比度，看久了會(huì)使人疲勞，讓用戶產(chǎn)生焦慮的情緒。MONO 的導(dǎo)航欄并不是深黑色，而是加入了藍(lán)色的低飽和度藍(lán)黑色，它的界面背景也是加入了藍(lán)色的的淺色，這樣就不會(huì)讓界面看上去死氣沉沉的。

遵循色彩心理學(xué)

前文我們已經(jīng)了解過各種色彩的心理學(xué)知識(shí)，就是為了我們?cè)谶M(jìn)行 App 設(shè)計(jì)時(shí)提供依據(jù)。這些色彩都是源于人類對(duì)大自然最原始的感受，藍(lán)色的天空、綠色的草地、黃色的沙漠等等，自然的色彩，對(duì)于我們來說是司空見慣的，但其中卻蘊(yùn)含著豐富的美感，并達(dá)到了和諧統(tǒng)一。網(wǎng)易云音樂使用紅色作為主色，這種熱情奔放的顏色傳遞出一種充滿能量、自信的氣質(zhì)。

良好的可讀性

良好的可讀性在界面設(shè)計(jì)中能為用戶提供主次分明、層次清晰的閱讀體驗(yàn)，而一個(gè)可讀性差的界面則會(huì)成為用戶瀏覽的障礙。那如何確保界面具有良好的可讀性呢？這就需要在界面設(shè)計(jì)中注意色彩搭配的對(duì)比，如在淺色背景上使用深色文字，在深色背景上使用淺色文字，使用高對(duì)比的度的亮色展示重要的元素，用低對(duì)比度的淺色來體現(xiàn)需要弱化和次要的內(nèi)容。例如蘋果 Music 的主要功能入口，標(biāo)簽欄圖標(biāo)、按鈕等都是用了高純度的紅色，與其他元素形成鮮明對(duì)比，就連深灰色的輔助文字都有著清晰的可讀性。

從大自然中獲得靈感

配色中盡量使用大眾熟悉的色彩，如自然界中人們常見的色彩等。從大自然中獲取的配色靈感可以使你的設(shè)計(jì)更加切合用戶的審美，非常自然。而藝術(shù)是對(duì)自然的直接反映，是非常寶貴的資源，值得好好利用。我們可以搜集各種與自然風(fēng)光相關(guān)的圖片，從中提取色彩運(yùn)用到設(shè)計(jì)中，這些幾近完美的搭配呈現(xiàn)出來的和諧美感能瞬間打動(dòng)人心。天氣應(yīng)用 Marline 就是一個(gè)很好的例子，它的界面背景漸變就參考大自然的變化，隨著不同時(shí)間段呈現(xiàn)出清晨、日出、正午、日落、深夜、雨天等漸變色，打開應(yīng)用即喚起了用戶的快樂情緒。

將 UX 顏色與品牌相匹配

品牌價(jià)值在創(chuàng)建調(diào)色板中發(fā)揮關(guān)鍵作用，但是它們不是唯一重要的因素，行業(yè)規(guī)范也是關(guān)鍵。使用與品牌主要競(jìng)爭(zhēng)產(chǎn)品幾乎相同的配色方案不失一種好方法。配色在品牌視覺中所發(fā)揮的作用是不言而喻的，但是，色彩本身的內(nèi)涵和情緒特質(zhì)并不是全部。比如一個(gè)行業(yè)當(dāng)中，很多產(chǎn)品都使用了藍(lán)色，那么你的產(chǎn)品繼續(xù)使用藍(lán)色，可以讓用戶更快「識(shí)別出」你所屬的領(lǐng)域，但是本身也存在讓人混淆的風(fēng)險(xiǎn)。如果你想要在視覺上脫穎而出，可以試著使用不同的色彩。

△中國(guó)區(qū)或美國(guó)區(qū)，紅色和藍(lán)色都是最流行的顏色。

在進(jìn)行品牌設(shè)計(jì)的時(shí)候，選擇配色的第一步，始終是了解各種顏色或者色相的氣質(zhì)和情感屬性。然后，在具體設(shè)計(jì)的時(shí)候，再進(jìn)一步根據(jù)品牌的氣質(zhì)和需求，再在色相的基礎(chǔ)上調(diào)整明暗和飽和度。也可以打破常規(guī)創(chuàng)造出與眾不同的配色方案。

從強(qiáng)調(diào)色入手

想要讓配色方案更加突出，在設(shè)計(jì)中添加強(qiáng)調(diào)色可能是最容易入手的地方。舉個(gè)例子，一個(gè)律師咨詢的 App 可能會(huì)使用傳統(tǒng)的藍(lán)色作為基礎(chǔ)配色，但是，如果能夠加入檸檬綠作為強(qiáng)調(diào)色，會(huì)顯得獨(dú)特很多。

冷暖色對(duì)比搭配

冷暖對(duì)比色是自然平衡的規(guī)律，可以在設(shè)計(jì)中大量使用，這樣的配色會(huì)使作品非常的出彩，同時(shí)不顯單調(diào)，讓用戶感覺舒服平和。而且這種搭配方法基本沒有啥缺點(diǎn)，使用在設(shè)計(jì)中，技巧性比較多，對(duì)設(shè)計(jì)的細(xì)膩感受要求比較高，需要多練習(xí)。

黑白色搭配不過時(shí)

黑色是所有中性色中最強(qiáng)的，而白色是最常用的背景顏色。黑色是一個(gè)很好的選擇，有種高端和永恒的感覺，而白色可以帶給用戶自由，寬敞和透氣的感覺。如上所述，黑色和白色也是最大的對(duì)比色，如果合理的使用黑色配合白色，會(huì)營(yíng)造出一種優(yōu)雅的氛圍。

強(qiáng)交互色彩

交互色彩在執(zhí)行過程中必須清晰且在界面中保持一致。號(hào)召性用語必須相對(duì)于背景具有足夠的對(duì)比度，并且相對(duì)于其他組件必須具有足夠的視覺權(quán)重，以便用戶可以輕松識(shí)別它們。Nike 健身應(yīng)用中，「開始」按鈕以高飽和度的檸檬綠作為主色，從背景中脫引而出。

但是，交互色彩并不總是以最具飽和度或最亮為特征，而是通過色調(diào)、形狀、大小或?qū)Ρ榷?，從屏幕上脫穎而出。因此，交互色彩的有效性將基于用戶識(shí)別交互區(qū)域和執(zhí)行任務(wù)的速度來衡量。同時(shí)，次要功能權(quán)重要更輕，并在視覺上更接近信息元素。如上圖 Nike Training 界面中，“設(shè)置”和“聲音”按鈕只用簡(jiǎn)單的白色，減輕對(duì)主按鈕的干擾，也避免了頁面中出現(xiàn)多個(gè)強(qiáng)交互按鈕。

保證良好的可讀性

可讀性是任何設(shè)計(jì)中的重要因素。你的顏色應(yīng)該清晰易讀，尤其是在處理文字時(shí)。因此對(duì)比度對(duì)視覺效果的影響就非常關(guān)鍵，對(duì)比度過小，就會(huì)使得界面出現(xiàn)灰蒙蒙的效果。清晰的對(duì)比度，一般會(huì)采用色彩的兩極，黑紙白字或白紙黑字。而在彩色背景上要讓內(nèi)容清晰可見，就需要搭配純白或高明度的文字，避免灰色文字。也要注意避免彩色背景上搭配互補(bǔ)色和明度接近的文字，因?yàn)檫@兩種搭配會(huì)產(chǎn)生一種“震顫效應(yīng)”，發(fā)出光暈的視覺效果。

UI 中的陰影

沒有完全純黑的陰影，陰影的顏色是會(huì)受到物體本身固有色的影響，一定要避免使用純黑色（#000000），使用不太深的灰色，效果會(huì)更好。對(duì)于有顏色的元素，好的做法是為陰影設(shè)定與元素相同的顏色，并使其更暗一些。

如果是有顏色的元素，并且它處在黑暗的背景下，一般情況下，是不建議使用陰影的。但是如果你一定要用，把陰影透明度調(diào)到小于 10%及以下，并且顏色跟隨主色調(diào)來。比如按鈕為綠色，則可以為按鈕設(shè)定一個(gè)更深的綠色陰影，并加上小于 10%的透明度數(shù)值。如下圖，左側(cè)的按鈕陰影很自然，右側(cè)的則有一層模糊發(fā)光的效果，顯得不夠漂亮。

• 知識(shí)點(diǎn)：

為什么「超鏈接文字」要用藍(lán)色？

簡(jiǎn)單說，因?yàn)樵谧钤缙诘木W(wǎng)站頁面中，藍(lán)色能呈現(xiàn)最高的對(duì)比度。

Tim Berners-Lee——web 的主要開創(chuàng)者，被認(rèn)為是最早用藍(lán)色鏈接的人。

一個(gè)很早期的 web 瀏覽器 Mosaic，用的是深灰色背景和黑色文字。那時(shí)候，能用的非黑色、最深的文字顏色，就是藍(lán)色。所以，讓超鏈接文字突出顯示，同時(shí)保證可讀性，就選定了藍(lán)色。此后超鏈接文字都用藍(lán)色的傳統(tǒng)沿用至今。

2. App 設(shè)計(jì)中的色彩搭配

App 的色彩搭配能直觀、快速的反饋到用戶的大腦中形成記憶思維。好的色彩搭配可以加深用戶對(duì)產(chǎn)品的印象；明確界面的視覺層次，讓用戶分清主次信息；同時(shí)還能給用戶賞心悅目的視覺享受。那么，在 UI 設(shè)計(jì)時(shí)該如何進(jìn)行色彩搭配呢？我們可以從 App 中都包含了那些色彩開始，通常一個(gè) App 中包含了主色、輔助色、點(diǎn)綴色、背景色這 4 類，下面就以微信讀書為例進(jìn)行詳細(xì)的講解（個(gè)人角度）。

主色

主色是指在配色中處于主導(dǎo)地位的色彩，給用戶的第一眼印象，通常是產(chǎn)品的品牌色。在 App 設(shè)計(jì)中，主色一般占有色相色彩的 60%的比例。這里指的是 60%的界面都使用到的主色比例，而不是使用面積（因?yàn)橥ǔＲ粋€(gè)界面中使用面積最大的是背景色）。還有就是背景色多為淺灰色或白色，它們都屬于無色相色彩，因此不涉及到配色過程中。我們看到微信讀書的第一印象，就可以判斷它的主色為藍(lán)色，這也是它的品牌色。在標(biāo)簽欄、按鈕、圖標(biāo)、注冊(cè)登陸全都使用了這種純凈的主色，使界面看上去非常和諧一致。

輔助色

輔助色與主色相輔相成，輔助色的功能是幫助主色建立更完整的形象，使界面豐富精彩起來，避免畫面過于單一。通常，主色的鄰近色、互補(bǔ)色、分散互補(bǔ)色和三角對(duì)立色都可以成為優(yōu)秀的輔助色，但注意輔助色不宜過多，否則就會(huì)使界面看上去花哨分散了主題。根據(jù) 6:3:1 原則，輔助色可以占有色相色彩的 30%或更少為宜。

在微信讀書中，綠色、橙色、梅紅、藍(lán)紫色是除了主色以外使用最多的顏色，它們都是輔助色，主要用于功能圖標(biāo)和欄目分類上。雖然輔助色看起來有點(diǎn)多，但其實(shí)都是從主色的鄰近色和對(duì)比色（及其鄰近色）中提取出來的搭配，而且只用在頁面中很少的地方，這種搭配技巧既可以豐富色彩的搭配，傳遞出年輕活躍的產(chǎn)品氣質(zhì)，又保證了整體搭配的和諧統(tǒng)一。

點(diǎn)綴色

點(diǎn)綴色是除了主色和輔助色以外的另一種色彩，通常體現(xiàn)在細(xì)節(jié)上。其作用是，當(dāng)頁面中主色和輔助色不能滿足關(guān)鍵信息的提示時(shí)，就需要點(diǎn)綴色來吸引用戶眼球，還有就是利用點(diǎn)綴色來平衡畫面的冷暖色調(diào)。點(diǎn)綴色通常都是分散的，使用面積小，顏色非常顯眼，能與主色形成強(qiáng)烈的對(duì)比。一般點(diǎn)綴色是主色的互補(bǔ)色。在微信讀書中，使用了香檳金、梅紅和紅色作為點(diǎn)綴色。香檳金用在文章分享按鈕上，梅紅色用在點(diǎn)贊圖標(biāo)上，強(qiáng)調(diào)其特殊性，紅色用在通知及退出登錄提醒上，用于警示。

來康康這三種點(diǎn)綴色與主色之間存在什么樣的關(guān)系，在色相（H）上，3 種點(diǎn)綴色為鄰近色，與主色為互補(bǔ)色；在明度（B）上，3 種點(diǎn)綴色均為高明度色彩，起到強(qiáng)提醒的作用。這種強(qiáng)對(duì)比的互補(bǔ)色的點(diǎn)綴色可以快速引起用戶注意力。

背景色

背景色就比較好理解了，通常為了襯托內(nèi)容，大多數(shù) App 都是用淺灰色作為背景色，以白色作為背景色的對(duì)比色，來區(qū)分視覺層次。建議是可以根據(jù)前景色來提取背景色，將其調(diào)亮或變暗，這樣可以讓界面色調(diào)更加統(tǒng)一。在微信讀書中背景色是偏藍(lán)色調(diào)的淺灰色，而不是純灰色，背景對(duì)比色是在白色里加入了藍(lán)色色相，而不是純白色，整體對(duì)比較柔和，給人清爽通透的感覺。

• 知識(shí)點(diǎn)：

支付寶 Alipay Design 團(tuán)隊(duì)提出過一個(gè)配色原則：

以同色系配色為主導(dǎo)，多色搭配為輔。

同色系為統(tǒng)一的色相，使用中可以加深品牌色的感知，可以讓界面更有層次，同時(shí)可以讓界面保持色彩上的一致性；由于業(yè)務(wù)的多樣化，我們需要多色搭配為輔；多色的輔助顏色，也可稱之為功能色，可設(shè)定不同的任務(wù)屬性和情感表達(dá)；再搭配中性色黑白灰，賦予更多的變化和層次。兩種配色通過主次、使用比例，可靈活運(yùn)用在業(yè)務(wù)的各個(gè)場(chǎng)景中，具有非常好的延展性。

3. 迷人的漸變色

不同于單一色彩，漸變色不屬于任何色彩，它營(yíng)造出千變?nèi)f化的視覺效果，卻又不會(huì)增加視覺負(fù)擔(dān)。相較于單一的色彩，漸變色的復(fù)合性質(zhì)讓它在界面設(shè)計(jì)中具有更強(qiáng)的視覺沖擊力，有助于快速搶占視線。如今，這種的色彩正逐漸成為一種潮流，究其原因是目前大量的扁平風(fēng)格造成 UI 設(shè)計(jì)的嚴(yán)重同質(zhì)化，人們需要追求更加個(gè)性的視覺語言來滿足日益增長(zhǎng)的設(shè)計(jì)需求。下面我們來了解幾種常見的漸變的使用技巧。

色相、飽和度、明度的漸變

色相（H）漸變是指由一種色彩向另一種色彩的過渡，這種漸變因跨度大產(chǎn)生的視覺效果非常明顯；飽和度（S）漸變是指同一種色彩不同純度的過度，其產(chǎn)生的視覺效果比較和諧單調(diào)；明度（B）漸變是同一種色彩不同明暗的過度，這種漸變的視覺效果給人一種沉靜的氛圍。

漸變的表現(xiàn)形式

在界面設(shè)計(jì)中經(jīng)?？炊喔鞣N各樣的漸變表現(xiàn)方式，使用最多的有以下幾種：

• 水平漸變

這個(gè)很好理解，是指角度為 0 的線性漸變，是最流行的漸變形式。界面設(shè)計(jì)中多用在導(dǎo)航欄、進(jìn)度條、按鈕等元素上，能讓畫面變得精致而通透。例如京東使用橙紅漸變的設(shè)計(jì)語言貫穿整個(gè) App，從應(yīng)用圖標(biāo)到導(dǎo)航欄、按鈕、標(biāo)簽，全部都運(yùn)用了這種由紅色到橙色的過渡。仔細(xì)觀察發(fā)現(xiàn)在很多小標(biāo)簽上都使用了水平漸變?cè)O(shè)計(jì)手法，使產(chǎn)品看起來更年輕化。

• 知識(shí)點(diǎn)：

在水平漸變中，通常把輕（亮）的色彩放在左邊，重（暗）的色彩放在右邊，這樣由左向右的方向感剛好與人的瀏覽習(xí)慣保持一致。而反過來就會(huì)與人的瀏覽視線相悖，應(yīng)避免。

垂直漸變

即角度為 90°的線性漸變，它通常被用在正方形或豎條形的元素上，如注冊(cè)登陸頁，個(gè)人中心頭部等。垂直漸變中上下兩種色彩的深淺變化會(huì)產(chǎn)生截然不同的視覺效果，上淺下深會(huì)讓給人一種凸起的立體感，而上深下淺會(huì)給人一種凹陷下去的空間感。例如「紀(jì)念碑谷」的背景是采用了單色相和多色相的垂直漸變作為游戲背景，在讓整個(gè)畫面豐富的同時(shí)又不會(huì)太搶奪主體的色彩，使畫面顯得清新透氣而不沉悶。

角度漸變

角度漸變通常有對(duì)角漸變和多角度漸變。有角度的漸變相比水平和垂直漸變，它的使用場(chǎng)景更廣，如圖標(biāo)背板、啟動(dòng)頁、注冊(cè)登錄頁、標(biāo)簽等。想讓界面更加絢麗、動(dòng)感和迷人，這時(shí)候我們可以考慮多組漸變搭配使用。

色塊漸變

漸變的顏色不只可以運(yùn)用在一個(gè)色塊上，還可以運(yùn)用在一組色塊上。設(shè)計(jì)師運(yùn)用一組近似性色彩，將每個(gè)菜單項(xiàng)清晰區(qū)分開，讓界面平衡在一個(gè)頻率上，這樣的畫面更有節(jié)奏感和舒適性。不同于平滑的漸變，色塊漸變不再是單純的背景裝飾，在某些地方還具有一定的功能性，比如使用不同的色塊來分割的列表樣式。Clear Todos 是一款日常任務(wù)清單的 APP，它拋棄了傳統(tǒng)的列表樣式，使用了一系列色塊來作為列表的分割，非常漂亮和精致。

徑向漸變

是指色彩以圓心向四周擴(kuò)散的漸變，是一種模擬光源照射的視覺效果，因此光源是整個(gè)畫面的視覺焦點(diǎn)，將關(guān)鍵元素放在光源中心就會(huì)成為主角。通常被運(yùn)用到大背景上，如啟動(dòng)頁、引導(dǎo)頁等。Solar 天氣應(yīng)用的背景就是徑向漸變，光源擴(kuò)散的效果營(yíng)造出一種夢(mèng)幻般的美感。

和諧的漸變色

漸變色是由一個(gè)色彩走向另一個(gè)色彩的過程，有著迷人的視覺效果。如果你仔細(xì)觀察兩種色彩的過渡關(guān)系，就會(huì)發(fā)現(xiàn)不是每次都會(huì)得到滿意的效果，例如紅綠漸變就很糟糕，因?yàn)樗鼈儍烧呤腔閷?duì)立的色彩，但是如果加入黃色的過渡色就會(huì)好很多。原因是當(dāng)兩種色彩之間超過 90 度就會(huì)導(dǎo)致其漸變色看上去不太和諧自然，只有控制在 90 度之內(nèi)才會(huì)產(chǎn)生美妙的變化。如何改善超過 90 度的兩種色相的漸變呢？這時(shí)候可以在兩色之間加入過渡色進(jìn)行調(diào)和。例如當(dāng)從黃色到藍(lán)色漸變時(shí)，就可以加入紫色作為過渡才能呈現(xiàn)完美的視覺效果。

• 知識(shí)點(diǎn)：

在搭配漸變色時(shí)，盡量只改變其色相（H）、飽和度（S）、明度（B）中的一項(xiàng)，這樣才能創(chuàng)造出和諧的漸變色方案。

創(chuàng)建調(diào)色板及配色工具

調(diào)色板幫助我們?cè)谠O(shè)計(jì)項(xiàng)目中建立色彩規(guī)范、提高工作效率。通過上文對(duì)色彩基礎(chǔ)知識(shí)的學(xué)習(xí)，接下來為大家介紹幾種簡(jiǎn)單易用的創(chuàng)建調(diào)色板的小技巧，以及 Materia design 配色方法和配色網(wǎng)站推薦。

1. 從設(shè)計(jì)作品收集色彩

打開 dribbble，每一幅作品預(yù)覽頁左下角都有一份自動(dòng)生成的配色板，很多同學(xué)可能不知道這個(gè)配色文件是可以下載的。將調(diào)色板保存到本地，為自己在創(chuàng)作時(shí)提供靈感。在 ps 里的操作步驟是：點(diǎn)擊“窗口—色板”，然后在色板的屬性面板右上角打開“導(dǎo)入色板”，載入剛下載的色彩文件即可。

它也有顏色搜索工具，輸入或選擇顏色值即可搜索相關(guān)配色的設(shè)計(jì)作品。

2. 從圖片取色

這種方法也很常用，不需要任何插件，丟一張圖片到 Ps，然后將圖片「馬賽克」處理下就可得到一組配色。例如，我們需要一組同色系的綠色，在網(wǎng)上（建議 unsplash 或 500px 等專業(yè)圖片網(wǎng)站）找一張樹葉的圖片，接著將圖片在 Ps 中打開，進(jìn)入“濾鏡—像素化—馬賽克”，在打開的窗口里調(diào)節(jié)單元格大小即可。

同時(shí)，建議平時(shí)多去收集好看的攝影圖片和優(yōu)秀的配色方案，看的多了就知道什么是好的什么是 Low 的配色，對(duì)提升審美也有很大幫助。

△ pinterest畫板

3. 自定義色塊疊加

該方法稍微復(fù)雜一點(diǎn)，示例步驟如下：第一步繪制一個(gè)正方形做底板，填充一個(gè)顏色#5354F0；第二步分別在正方形的上和下 1/3 處疊加 20%的白色和黑色；第三步分別在正方形中和右 1/3 處疊加 40%、80%的紫紅色#DF56FA；最后改變紫紅色圖層的混合模式為疊加即可得到一組藍(lán)紫色色調(diào)的調(diào)色板。

4. 色彩系統(tǒng)

Materia design 調(diào)色板

Materia design 從生活場(chǎng)景中提煉出 19 個(gè)充滿活力的色彩，旨在和諧地協(xié)同工作，可用于開發(fā)品牌調(diào)色板。Materia design 提供了一整套調(diào)色板，從原色開始，延伸出其他許多色彩，這些色彩和諧相處，可用于產(chǎn)品設(shè)計(jì)的品牌色?；A(chǔ)色的飽和度是 500，Google 建議以此作為產(chǎn)品應(yīng)用的主色調(diào)，可以再選擇一種輔助色，并在主色的基礎(chǔ)上進(jìn)行飽和度，明度變化，構(gòu)成一套配色方案。

如果上面的色板不能滿足你的需求，你可以選擇一個(gè)主色，Materia design 調(diào)色板生成工具會(huì)為你生成完整的色板。

主色和強(qiáng)調(diào)色

在色彩選取時(shí)，需要先明確品牌色在界面中的使用場(chǎng)景及范圍。在基礎(chǔ)色板中選擇主色，建議選擇飽和度為 500 的基礎(chǔ)色作為主色，根據(jù)設(shè)計(jì)需要在主色的基礎(chǔ)上增加 1～3 種不同飽和度、明度的色彩建立層次感，再選擇一種強(qiáng)調(diào)色突出重要內(nèi)容或操作，例如 FAB 的背景色。

深/淺背景上的文字

Materia design 通過文本的不透明度建立在不同背景上的深淺對(duì)比，對(duì)于淺色背景上黑色文字，主文字不透明度 87%，次要文字不透明度 60%，禁用文字不透明度 38%；而黑色背景上的白色文字正好相反；彩色背景上的白色文字不透明度 100%，分割線不透明度 12%。Ant Design 也定義了一套用于界面文字、背景、分割線的中性色，在落地的時(shí)候同樣也是按照透明度的方式實(shí)現(xiàn)的。

背景

為了提高應(yīng)用之間的一致性和閱讀的可讀性，背景色根據(jù)設(shè)計(jì)需要選擇純白色或飽和度依次為 50、100、300 的灰色。

5. 配色工具推薦

顏色是一個(gè)很難掌握的概念-因?yàn)橛袩o限多種可能的顏色組合，對(duì)于很多設(shè)計(jì)師來說還是一件蠻困難的事，為了讓設(shè)計(jì)配色變得容易些，下面推薦幾個(gè)常用的配色網(wǎng)站，希望能幫助大家在日常工作中節(jié)省更多的時(shí)間。

Adobe Color

Adobe Color 是一個(gè)基于網(wǎng)絡(luò)的應(yīng)用程序和創(chuàng)意社區(qū)，提供免費(fèi)的色彩主題，并且在 Adobe 相應(yīng)的軟件中也提供了擴(kuò)展程序，比如我們常用的 Photoshop 和 Illustrator。

△ https://color.adobe.com/

Adobe Color 通過拖拽色輪或輸入自定義色值，可以創(chuàng)造出基于相似、互補(bǔ)、三原色、正方形等不同色彩規(guī)則的配色方案。除此之外，還支持 CMYK、RGB、HSV 多種色彩模式的配色調(diào)整。用法很簡(jiǎn)單，點(diǎn)擊顏色塊上的小三角確定基礎(chǔ)色，就會(huì)自動(dòng)生成 5 個(gè)基于你所選色彩規(guī)則的配色方案，拖動(dòng)下方的顏色條時(shí)相應(yīng)的也會(huì)改變配色方案。如果沒有靈感可以通過頂部導(dǎo)航進(jìn)入“探索”頁，這里為我們提供了很多提取好的顏色和圖片，有的是攝影作品，有的是設(shè)計(jì)作品，上方的輪播圖提供的一些其他內(nèi)容，比如潘通流行色、Adobe 社區(qū)和手機(jī)端的 APP 等等，非常的實(shí)用。

Eva Design System

Eva Design System 是一個(gè)基于深度學(xué)習(xí)算法的配色網(wǎng)站。適用于給我們的產(chǎn)品或品牌生成一個(gè)系統(tǒng)的配色方案。右上角可以切換淺色模式和深色模式的對(duì)比。

△ https://colors.eva.design/

Colorhunt

Color Hunt 是由設(shè)計(jì)師 Gal Shir 創(chuàng)建的開放調(diào)色板集合，每天更新豐富的配色方案。顏色卡片下方可以看到更新的時(shí)間和喜歡人數(shù)。鼠標(biāo)懸浮在任一色塊上顯示顏色值，點(diǎn)擊顏色卡進(jìn)入詳情頁可下載和分享，驚喜的是還可以添加到 chrome 瀏覽器，方便隨時(shí)隨地使用。

△ https://colorhunt.co/

Grabient

Grabient 是一個(gè)非常漂亮且實(shí)用的漸變配色網(wǎng)站，支持 CSS 樣式代碼復(fù)制、360 度漸變旋轉(zhuǎn)、自由增加或刪除漸變顏色等功能。設(shè)計(jì)師可以在色塊下方自由添加和調(diào)整漸變的色系、以及線性漸變方向。

△ https://www.grabient.com/

當(dāng)然，以上這些配色工具只是為我們提供方便的，而不是主導(dǎo)我們的，所以在使用配色工具的時(shí)候最好是要有一定的理論基礎(chǔ)作為支撐，讓你的配色有理有據(jù)，切忌生搬硬套。

• 知識(shí)點(diǎn)：

對(duì)于新手設(shè)計(jì)師來說，顏色越少越容易把控畫面。色彩層級(jí)越精簡(jiǎn)，就越容易達(dá)到整體色彩平衡，掌握好色彩的功能劃分必然會(huì)讓你的配色過程保持思路清晰從而提率。

同時(shí)，不管是 2C 還是 2B，很多大公司都構(gòu)建了自己的設(shè)計(jì)系統(tǒng)。如果你想學(xué)習(xí)別人是如何進(jìn)行配色布局的，最快的方式就是研究他們的設(shè)計(jì)源文件。

6. 關(guān)于色彩空間配置(附加內(nèi)容)

建議設(shè)計(jì)軟件使用 sRGB 作為色彩空間的默認(rèn)配置，而不要采用未管理（ Sketch 中默認(rèn)是未管理），若團(tuán)隊(duì)協(xié)作請(qǐng)?zhí)崆氨３稚士臻g配置的統(tǒng)一性。如果有需要針對(duì)廣色域色彩空間做項(xiàng)目，可以單獨(dú)設(shè)置該項(xiàng)目文檔的色彩空間為 Display P3 或者 Adobe RGB。

Mac 系統(tǒng)色彩空間配置

建議所有 macOS 用戶都在系統(tǒng)偏好設(shè)定的顯示器顏色設(shè)定當(dāng)中換用 sRGB IEC61966-2.1 這個(gè)校色方案，可以極大改善系統(tǒng)顯示效能。如果有外接顯示器，也建議使用外接的默認(rèn)選項(xiàng)，默認(rèn)選項(xiàng)一般可以發(fā)揮出該顯示器的最大色彩性能。

Sketch 色彩空間配置

Sketch 默認(rèn)顏色配置是 Unmanaged「非托管」， 我們可以在「偏好設(shè)置」中為 Sketch 指定默認(rèn)的色彩空間配置，如此一來每次新建設(shè)計(jì)文檔將會(huì)默認(rèn)采用我們的設(shè)置作為默認(rèn)的色彩空間，不用每次新建文檔都單獨(dú)設(shè)置一次。

設(shè)置方法：Sketch → 偏好設(shè)置(Preferences) → 通用(General) → 顏色描述文件(Color Profile)，修改下拉框選擇器的內(nèi)容為 sRGB IEC61996-2.1。（其他設(shè)計(jì)軟件設(shè)置方法類似）

如果要更改已有的文檔為 sRGB 色彩配置，可以通過文件——更改顏色配置，在彈出的對(duì)話窗里對(duì)文件進(jìn)行色彩空間的更改即可。

寫在最后

其實(shí)無論是色彩理論還是配色方法，最本質(zhì)的東西就那些，更多的還是需要設(shè)計(jì)師在日后的工作中不斷的摸索和積累。這篇文章全部寫下來耗費(fèi)了不少時(shí)間（小聲 BB：其實(shí)每篇都是），抱歉內(nèi)容確實(shí)有點(diǎn)多，但其實(shí)已經(jīng)是收著點(diǎn)寫了。就像大樹一樣，有很多分枝不斷生長(zhǎng)，需要了解很多細(xì)分出來的深度知識(shí)。這也是寫這類文章的樂趣，通過不斷的查閱資料，把過去很多模糊的概念摸清楚了。果然學(xué)透一個(gè)知識(shí)點(diǎn)的最好方式就是把它講出來才能真正為自己所有。關(guān)于色彩的知識(shí)先分享到這里，希望對(duì)大家有所幫助，文中有不嚴(yán)謹(jǐn)或錯(cuò)誤的地方，歡迎大家指正，一起學(xué)習(xí)成長(zhǎng)。

文章來源：優(yōu)設(shè)網(wǎng)     作者：印跡

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

今天給大家?guī)淼氖侨绾谓⒃O(shè)計(jì)師個(gè)人的插畫組件庫，因內(nèi)容過長(zhǎng)并知識(shí)點(diǎn)過多，請(qǐng)泡杯枸杞觀看。

一、關(guān)于個(gè)人插畫組件庫的3大疑問點(diǎn)：

 

1、為什么要建立個(gè)人插畫組件庫？

其實(shí)最主要目的是為了給自己的插畫提供一個(gè)設(shè)計(jì)軸心，我們可以圍繞著這個(gè)軸心創(chuàng)作出更具有效率規(guī)范的插畫內(nèi)容，演變更多的插畫風(fēng)格，讓我們使用插畫時(shí)變得游刃有余，提升率的設(shè)計(jì)輸出，衍生更多的組件化運(yùn)營(yíng)設(shè)計(jì)與品牌插畫組件庫。（注：按照以下步驟設(shè)計(jì)，插畫手殘黨也能輕松學(xué)會(huì)哦?。?

 

2、品牌（產(chǎn)品、項(xiàng)目）插畫組件庫與個(gè)人插畫組件庫的區(qū)別？

01-規(guī)范區(qū)別：

品牌插畫組件庫：組件品牌插畫庫前會(huì)做很多細(xì)致的規(guī)范，如：顏色規(guī)范/情景規(guī)范/光線規(guī)范/關(guān)節(jié)細(xì)節(jié)處理/景別元素處理等等；

個(gè)人插畫組件庫：為了讓我們的插畫更具有靈活性，所以在做個(gè)人插畫組件庫時(shí)不會(huì)做太多的規(guī)范，反而為了插畫的衍生要更注重人物構(gòu)造、比例、小組件等等，目的就是為了成立個(gè)人插畫軸心。（注：個(gè)人插畫軸心是針對(duì)于第一個(gè)插畫系統(tǒng)的原型，我們后面的插畫風(fēng)格衍生都會(huì)參照第一個(gè)插畫系統(tǒng)的原型，后面會(huì)給大家詳細(xì)講解）

 

02-使用效率：

品牌插畫組件庫：使用更加，拖入即可更換組件使用；

個(gè)人插畫組件庫：因?yàn)槲覀儾捎玫氖遣粩嗟阶龇?，所以在剛建立個(gè)人插畫組件庫時(shí)，我們的組件替換效率是比較低的，但是在逐漸迭代中，我們的使用效率會(huì)逐步提升。

 

03-拓展力：

品牌插畫組件庫：因?yàn)橛泻芏嘁?guī)范的約束，所以拓展力偏弱，不過針對(duì)于自己的品牌已經(jīng)足夠了，它本身就是為了自己的品牌服務(wù)的；

個(gè)人插畫組件庫：因?yàn)閺奈覀儾瀹嫿M件庫的層級(jí)分區(qū)來看本來就是為了衍生拓展，所以拓展力非常強(qiáng)，不僅可以衍生出相同類型的插畫風(fēng)格，還可以衍生出不同類型的插畫形勢(shì)，甚至可以以個(gè)人插畫組件庫為基礎(chǔ)創(chuàng)建單獨(dú)的運(yùn)營(yíng)設(shè)計(jì)組件庫，或者升級(jí)為品牌插畫組件庫。

 

3、個(gè)人插畫組件庫哪些人最應(yīng)該去建立？

我認(rèn)為UI設(shè)計(jì)師是最應(yīng)該去建立的，在我們線上接觸的banner、功能頁、啟動(dòng)頁、海報(bào)等等，很多都可以用到插畫去設(shè)計(jì)，不管是針對(duì)于在公司還是針對(duì)于自己私下接私活都是一大利器，可以讓你的完成甲方的任務(wù)，更大程度保證設(shè)計(jì)的統(tǒng)一性以及輸出的質(zhì)量。（相信大家都遇到過到處找插畫素材拼湊banner的時(shí)候吧，有了個(gè)人插畫組件庫就不用愁了）

當(dāng)然除了UI設(shè)計(jì)師還有插畫設(shè)計(jì)師、平面設(shè)計(jì)師、美工也都可以去建立插畫組件庫，不過具體還是要看每個(gè)人所接觸的不同設(shè)計(jì)內(nèi)容，有些設(shè)計(jì)師的設(shè)計(jì)內(nèi)容很少接觸到插畫部分，或者很少接觸到可以組件化的插畫（比如材質(zhì)復(fù)雜、偏手繪插畫），所以就沒有必要去建立插畫組件庫。

 

二、如何建立個(gè)人插畫組件庫？

 

想要建立個(gè)人插畫組件庫就要從它的本質(zhì)特點(diǎn)出發(fā)去考慮，個(gè)人插畫系統(tǒng)歸納下來一共有三大特點(diǎn)：可復(fù)用、適應(yīng)力強(qiáng)、效率高。那么接下來我會(huì)圍繞著這三點(diǎn)來闡述該如何制作UI設(shè)計(jì)師個(gè)人的插畫系統(tǒng)。

 

1、可復(fù)用性方向出發(fā)設(shè)計(jì)

可復(fù)用性是做插畫系統(tǒng)的一個(gè)基礎(chǔ)，如果不能解決可復(fù)用問題，那么做個(gè)人插畫系統(tǒng)根本沒有任何意義。

如果想要達(dá)到插畫可復(fù)用性，我們就要把插畫內(nèi)容進(jìn)行不同的拆分，在它可替換的部分都作為一個(gè)復(fù)用樣式，讓它可以更換不同的組件，那么我的解決方案有五步：

 

第一步：

設(shè)定基礎(chǔ)人物組件（肢體細(xì)節(jié)、型體比例），規(guī)范組件內(nèi)容。如果你是第一次做人物組件，可以多在網(wǎng)上找一些可參考內(nèi)容：

下圖是我做的一個(gè)基礎(chǔ)人物組件案例：

從人物組件上面來看我一共把它們分為了9個(gè)小件，它們分別為：頭部、上身、上臂、前臂、手掌、臀部、大腿、小腿、腳掌。

從人物比例來看，男性比例為10a，男性略高，上身寬大，整體壯碩；而女性比例為9a，稍矮于男性，纖細(xì)苗條。不管是男性還是女性整個(gè)身體構(gòu)造簡(jiǎn)單常規(guī)，符合真實(shí)人物比例，有利于后期的組件改造。（第一個(gè)插畫組件最好使用常規(guī)比例，后面會(huì)提到為什么要這樣做）

在人物組件上的劃分并不是固化的，你可以把它細(xì)化分為9個(gè)部分，也可以分為7個(gè)部分，如果分為7個(gè)部分就把上臂與前臂統(tǒng)一融為手臂，大腿與小腿統(tǒng)一融合為腿部，到底要怎么去進(jìn)行組件化，還是要取決于自己設(shè)計(jì)的插畫人物特性。

除了男性、女性外也可以建造更多的人物進(jìn)來，例如老人、小孩、嬰兒...人物越多，后續(xù)的延展空間也越大，前期為了更快的制作插畫組件庫，可以先建立1到2個(gè)人物，后續(xù)可以逐步完善迭代。

 

第二步：

為了后期人物的動(dòng)態(tài)延展，我們可以用人物組件制定一些高頻的人物基礎(chǔ)動(dòng)態(tài)，例如標(biāo)準(zhǔn)站姿、坐姿、跑動(dòng)等，以便于我們插畫的延展，圖示如下：

做人物基礎(chǔ)動(dòng)態(tài)可以讓我們?cè)诤竺娴牟瀹嬙O(shè)計(jì)上少花很多時(shí)間，例如工作中要用到跑步動(dòng)態(tài)時(shí)，那么就可以直接用人物基礎(chǔ)動(dòng)態(tài)里面的跑步動(dòng)作進(jìn)行添加人物細(xì)節(jié)，會(huì)節(jié)省很多工作時(shí)間，提升工作效率。

 

第三步：

有了人物組件的基礎(chǔ)，我們就可以開始設(shè)計(jì)插畫的風(fēng)格。

在設(shè)計(jì)前我們可以多參考一下別人的插畫風(fēng)格，這里所說的風(fēng)格主要是指插畫的處理方式，比如：顏色的選擇、表情的處理、衣服材質(zhì)的處理、曲線直線的選擇等。

我們需要注意的是建立第一個(gè)插畫系統(tǒng)時(shí)可以先做一個(gè)風(fēng)格簡(jiǎn)單的，不僅容易調(diào)節(jié)組件也有利于后期的風(fēng)格衍生，以下是我為人物添加的簡(jiǎn)單基礎(chǔ)風(fēng)格（ 特點(diǎn)：純色/完全按人物組件貼合設(shè)計(jì)/無漸變）：

第四步：

設(shè)計(jì)人物組件（可以讓你的插畫在不同的場(chǎng)景應(yīng)用不同的動(dòng)作/服裝/表情/膚色等）

 

1/發(fā)型：

在發(fā)型上面我們可以進(jìn)行一些人物的區(qū)分，可以適用于不同的場(chǎng)景，例如：男性第一個(gè)適用于公司場(chǎng)景，第二個(gè)適用于學(xué)生，第三個(gè)適用于軍人...

2/膚色：

做膚色的變化最主要原因是讓插畫適應(yīng)于國(guó)際化，在不同的場(chǎng)景中可以加入不同膚色的人物。

3/表情：

表情是為了更好的體現(xiàn)出人物在環(huán)境中的狀態(tài)，如：領(lǐng)取紅包插畫，人物的表情就應(yīng)該是開心或者大笑。

4/角度：

在插畫的角度上，我們采用了最常用：正面、半側(cè)、正側(cè)，讓它在插畫中的適應(yīng)力變得更強(qiáng)。

5/紋理：

我們目前設(shè)計(jì)了6個(gè)基本紋理，基本紋理不僅可以設(shè)定于服裝中，還可以設(shè)定于輔助元素以及背景中。

6/服裝：

在整個(gè)人物組件中，分為3大塊可替換服裝組件，分為別：上身、下身、鞋子。例如上身可以替換為短袖、長(zhǎng)袖、衛(wèi)衣、背心等，同時(shí)在它的下一個(gè)層級(jí)還可以替換服裝紋理、服裝動(dòng)作、服裝顏色。

結(jié)合以上的人物組件我們就可以組合出各種不同的動(dòng)作，如下：

第五步：

設(shè)計(jì)通用組件庫：

通用組件庫中的元素最開始要用黑白灰來表達(dá)，因?yàn)樵诓煌膱?chǎng)景中元素的運(yùn)用也有很大差異，例如花盆作為近景元素會(huì)多許多細(xì)節(jié)，作為遠(yuǎn)景元素可能只是作為線條來點(diǎn)綴，這些表達(dá)方式我們可以在日后使用過程中添加到它的子級(jí)庫即可，這樣可以讓我們?cè)谑褂媒M件庫時(shí)更加靈活，也有利于我們迭代組件庫，后面會(huì)逐一的講解。

這5個(gè)步驟下來我們的可復(fù)用性插畫就做好了，那么接下來看看運(yùn)用效果：

 

我們可以看到以下4個(gè)場(chǎng)景，運(yùn)用到了不同的景別處理方式，例如：第一組為背景漸變；第二組背景則采用了大面積的純色；第三組背景用線性表達(dá)；第四組則用淺色面表達(dá)。

 

這也是與品牌插畫組件庫的很大區(qū)分點(diǎn)，雖然都是可復(fù)用性插畫，但是品牌插畫組件庫大部分是使用現(xiàn)有的、具有規(guī)范的，而我們所做的個(gè)人插畫組件庫可以用同一個(gè)輔助元素增添不同的插畫表達(dá)形式，不斷迭代子級(jí)，迭代的子級(jí)越多它的內(nèi)容選取性就越高，后續(xù)就可以直接拖入使用，比如圖4中的植物就有2種狀態(tài)，第一種是顯示部分顏色，第二種則直接為灰色。（注：后面會(huì)詳細(xì)講解）

以下活動(dòng)頁中，背景元素也可以運(yùn)用同樣的方法，在我們的背景組件庫中調(diào)取想要的單個(gè)插畫元素，把它們組合放入活動(dòng)頁背景中，進(jìn)行再次調(diào)色得到不同的背景組合，以下三種背景組合都可以相互替換使用。

2、讓你的插畫具有極強(qiáng)的適應(yīng)力

適應(yīng)力強(qiáng)是指我們的插畫系統(tǒng)可以匹配大多數(shù)的產(chǎn)品，因?yàn)閭€(gè)人插畫組件庫是以設(shè)計(jì)師身份做的，我們會(huì)面臨各類產(chǎn)品，而各類產(chǎn)品風(fēng)格都會(huì)有不同的變化，要解決這一點(diǎn)我們可以使用以下三個(gè)方法：

 

方法一：改變?nèi)宋锝Y(jié)構(gòu)

例如：你想為產(chǎn)品A做一些插畫類的功能頁或banner時(shí)，發(fā)現(xiàn)你現(xiàn)有的第一套插畫組件庫并不符合產(chǎn)品特性，產(chǎn)品A想表達(dá)更多夸張的成分，而我們所做的插畫系統(tǒng)顯示更多的是柔和與大眾，這樣就完全不匹配，那么我們就要去改變一個(gè)基礎(chǔ)點(diǎn)，那就是人物結(jié)構(gòu)，通過人物結(jié)構(gòu)的重組我們可以得到想要的夸張效果，那么我就男女各舉一例結(jié)構(gòu)重組對(duì)比圖，如下：

我們?yōu)榱嗽谏眢w結(jié)構(gòu)中達(dá)到人物夸張的效果，在原有10a比例不動(dòng)的情況下對(duì)原本的身體結(jié)構(gòu)做了重大調(diào)整，男性：上身的縮短，下身的延長(zhǎng)以及手部腳部的突出；女性：整體更加硬朗，手腳放大，腿加長(zhǎng)。

 

如果把他們用相同的插畫風(fēng)格表現(xiàn)出來，就會(huì)出現(xiàn)如下效果：

當(dāng)你在做人物結(jié)構(gòu)調(diào)整時(shí)，你會(huì)發(fā)現(xiàn)有一個(gè)常規(guī)的人體結(jié)構(gòu)作為基點(diǎn)去設(shè)計(jì)是多么重要，也就是之前所提的為什么第一版插畫組件讓你做常規(guī)的，因?yàn)槿绻皇浅Ｒ?guī)人體結(jié)構(gòu)，調(diào)整起來會(huì)非常麻煩，就很難有參考意義。

 

方法二：改變插畫風(fēng)格

除了人物結(jié)構(gòu)外我們還可以更多的考慮插畫風(fēng)格，通過不同的插畫風(fēng)格去適應(yīng)不同的產(chǎn)品，例如：線面/漸變/雜色/極簡(jiǎn)...同樣我就男女各舉一例，如下：

上圖改變風(fēng)格后，男性的風(fēng)格則更偏向于線條的表達(dá)與高亮色調(diào)；女性的風(fēng)格則簡(jiǎn)單直接，更注重凸顯配色的碰撞。

 

方法三：改變?nèi)宋锝Y(jié)構(gòu)+插畫風(fēng)格

在上面兩種方法中除了已有的基礎(chǔ)人物結(jié)構(gòu)A與插畫風(fēng)格A，我們還得到了人物結(jié)構(gòu)B、C與插畫風(fēng)格B、C，如果我們用人物結(jié)構(gòu)B（或C）與插畫風(fēng)格B（或C）結(jié)合又可以形成新的插畫狀態(tài)。

按照這樣的方式下來我們就可以逐步添加自己的插畫系統(tǒng)，假如當(dāng)你的插畫系統(tǒng)人物結(jié)構(gòu)有5組、插畫風(fēng)格有5組時(shí)，你就可以組合出25組不同的插畫，這樣你的插畫系統(tǒng)適應(yīng)能力就極強(qiáng)了，甚至你要為產(chǎn)品做插畫系統(tǒng)時(shí)，也可以大幅度參考你的個(gè)人插畫系統(tǒng)，當(dāng)然這一切都是需要自己去慢慢迭代添加的。

 

3、用軟件規(guī)范插畫組件庫（層級(jí)詳解），提升應(yīng)用效率

為了更好的替換組件，提升輸出的工作效率，我們可以從一開始就使用軟件對(duì)插畫進(jìn)行管理。市面上可以提供復(fù)用樣式的軟件也蠻多的，這里我就使用應(yīng)用率最高的Sketch來進(jìn)行講解。

 

首先我給大家講一下我的插畫組件庫的構(gòu)成，我的插畫組件庫一共分為了5大塊，分別為：人物組件庫、非常規(guī)人物組件庫、動(dòng)物組件庫、輔助元素組件庫、輔助背景組件庫，而這5大塊中也細(xì)分出了很多小層級(jí)，我就一一為大家分析下我所用的層級(jí)。

我們可以從以上圖中看出從風(fēng)格分類開始直至最小的組件，我用到最多的層數(shù)是5層。

如果大家看的有點(diǎn)懵，我們就拿一塊從層級(jí)1到層級(jí)5舉例說明：

風(fēng)格分類（A）-角度分類（正側(cè)）-四大組件（下身）-動(dòng)作（B）-顏色（B）

這里所用的是sketch復(fù)用樣式中的“套中套”，“套中套”的組件方式看似復(fù)雜，其實(shí)挺簡(jiǎn)單的，并且在軟件中換取都在大組件內(nèi)，因?yàn)椴皇擒浖v解所以就不帶入過多的軟件知識(shí)。

在制作時(shí)我們不要想著一次性就做出很多小組件，比如你想做表情時(shí)，一來就想做10多20個(gè)全部包含完，其實(shí)沒有必要，我個(gè)人是比較建議最開始小組件做個(gè)3-5種常用的就可以了，因?yàn)榻M件庫是要不斷添加優(yōu)化的，所以可以在后續(xù)工作應(yīng)用中再不斷的添加。

 

有了層級(jí)的劃分，我們可以用sketch的復(fù)用樣式簡(jiǎn)單、的規(guī)范插畫組件庫，想要覆蓋替換組件內(nèi)容也是十分方面，如下：

 

2/非常規(guī)人物組件庫

 

除了常規(guī)的人物組件庫外，我還單獨(dú)羅列了非常規(guī)人物組件庫，這一類組件庫主要是作用于人物特殊的動(dòng)作形態(tài)，比如下面3個(gè)透視類的插畫動(dòng)作形態(tài)，這些動(dòng)態(tài)與常規(guī)的插畫組件庫的內(nèi)容很多是不互通的，比如臉的角度、鞋子的角度、身體的透視尺寸，所以我們就單獨(dú)給他羅列一個(gè)非常規(guī)人物組件庫。

都是同為組件庫，當(dāng)然也有可替換內(nèi)容，非常規(guī)人物組件庫與常規(guī)的人物組件庫的層級(jí)邏輯有所不同，常規(guī)的人物組件庫是用小組件替換人物動(dòng)作，但是非常規(guī)人物組件庫是先替換整體的動(dòng)作然后才可以替換小組件，這也是對(duì)他的特殊化管理。（注：不想舍棄它，又不想為他做出更大的調(diào)整，所以就單獨(dú)讓它成立出來。）

 

根據(jù)非常規(guī)組件庫的設(shè)定給大家做個(gè)小案例：

以上可以看出我在這個(gè)透視化的插畫人物中可以替換表情、發(fā)型、紋理、上身、下身。

 

3/動(dòng)物組件庫

 

我這里做的動(dòng)物組件庫是用來輔助人物以及調(diào)和場(chǎng)景的，所以在層級(jí)劃分上并不會(huì)做的非常細(xì)，滿足我的日常插畫需求即可，當(dāng)然如果你想把動(dòng)作組件庫做的非常細(xì)，那么可以參照人物組件庫的層級(jí)來劃分層級(jí)。

 

根據(jù)我使用的動(dòng)物組件庫層級(jí)，給大家舉一個(gè)正確小案例與錯(cuò)誤小案例，先看下錯(cuò)誤小案例：

可以看到下圖（狗子）是一個(gè)非常粗糙的動(dòng)物組件庫，里面只能替換動(dòng)作以及動(dòng)物的動(dòng)作，當(dāng)選在狗子的狀態(tài)下，狗子除了換動(dòng)作沒有其他的組件選項(xiàng)，雖然我想讓動(dòng)物組件庫簡(jiǎn)化，但是也不至于什么都不能替換。

接下來看看正確的案例：

我們可以看到在貓咪的狀態(tài)下就有很多組件可以選擇，不僅可以替換貓咪的動(dòng)作，還可以替換展示形式（展示形式我是按照景別來做差異化，當(dāng)然也可以用其他方法）、貓咪表情以及貓咪的顏色，這樣的動(dòng)物組件庫已經(jīng)完全能夠滿足我的設(shè)計(jì)需求。

 

4/輔助元素組件庫

 

輔助元素組件庫層級(jí)最好要添加景別，因?yàn)槲覀兘?jīng)常會(huì)遇到同一個(gè)元素在不同產(chǎn)品中體現(xiàn)出不同的景別，如果不區(qū)分，在選取組件時(shí)就非常的傷腦經(jīng)，經(jīng)驗(yàn)之談、強(qiáng)烈要求。

為了大家更好的理解，我給大家舉一個(gè)小案例：

我們可以看到我不僅可以切換元素，還可以切換景別以及顏色，至于其他的小組件我并不需要，因?yàn)檫@些已經(jīng)足以滿足我的日常運(yùn)營(yíng)設(shè)計(jì)需求，這個(gè)層級(jí)劃分簡(jiǎn)單實(shí)用非常推薦。

 

5/背景元素組件庫

 

背景元素組件庫一共分為兩種類型，分別為：組合場(chǎng)景背景與紋理背景。

 

組合場(chǎng)景背景：

組合場(chǎng)景背景是用輔助元素組件庫拼湊而來，它是一個(gè)可以直接用的完整場(chǎng)景，想要替換的組件如果在輔助元素組件庫能夠替換，那么在背景組件庫也是可以的。（注：這里牽涉到組件庫的重組調(diào)動(dòng)，在后續(xù)出的文章中會(huì)詳細(xì)提到）

上面的插畫由白天變?yōu)楹谝怪恍枰媒M件庫就能輕松完成，而這些組件庫也不是現(xiàn)做的，全部是輔助元素組件庫里提取過來的，也就是我所說的組合場(chǎng)景背景是用輔助元素組件庫拼湊而來。

大家可以發(fā)現(xiàn)插畫中山上的小房子只用一個(gè)組件就可以全部替換顏色，而左右兩邊的樹卻要做6次不同的替換，樹木需要多次替換的原因這就是沒有做重組，如果想要相同元素做相同的替換，那么建議在調(diào)換過程中重組組件，優(yōu)化層級(jí)。

 

紋理背景：

紋理背景相對(duì)于來說就是最簡(jiǎn)單的，它里面只存在紋理的不同樣式，并且只可更換顏色。

三、人物插畫組件庫如何結(jié)合到運(yùn)營(yíng)設(shè)計(jì)中？

 

1、創(chuàng)建常見運(yùn)營(yíng)設(shè)計(jì)規(guī)范

 

在做設(shè)計(jì)前，我們先要做好運(yùn)營(yíng)設(shè)計(jì)的規(guī)范，以便于組件庫的插入應(yīng)用。

 

那么我就用卡片彈窗來舉例：做設(shè)計(jì)前我們先確定卡片內(nèi)容，當(dāng)內(nèi)容確定后，根據(jù)內(nèi)容進(jìn)行卡片的運(yùn)營(yíng)設(shè)計(jì)規(guī)范：

我們需要注意的是初步規(guī)范里并不需要涉及到用什么字體，也不需要羅列出插畫的尺寸規(guī)范，我們可以在后面的設(shè)計(jì)中一步步去實(shí)現(xiàn)。

 

2、結(jié)合運(yùn)營(yíng)設(shè)計(jì)的兩大方法：

 

當(dāng)規(guī)范做好時(shí)，我們就可以利用規(guī)范去制作相應(yīng)的組件庫，利用組件庫來結(jié)合運(yùn)營(yíng)設(shè)計(jì)，按照不同的情況可以分為以下兩種方法：

 

1/重組組件庫（無人物動(dòng)態(tài)組件的情況下）

在一些運(yùn)營(yíng)設(shè)計(jì)中，如果我們要用到的人物動(dòng)作之前并沒有做過，那么就需要我們重新設(shè)計(jì)人物動(dòng)作，設(shè)計(jì)完后再把可以重組的人物組件拖到我們現(xiàn)在的組件中進(jìn)行重組，分以下幾步進(jìn)行：

 

第一步，根據(jù)卡片的規(guī)范做出卡片的設(shè)計(jì)內(nèi)容，如下：

第二步，把設(shè)計(jì)好的內(nèi)容分板塊，以便于組件庫的層級(jí)劃分。在這里我把他們一共分為了4個(gè)大塊，分別為：文字組件、人物組件、輔助裝飾組件、背景元素組件。

 

第三步，在大的板塊下劃分小組件，結(jié)合小組件就可以得到我們組件庫的層級(jí)，可看下圖：

在小組件里，很多都是個(gè)人組件庫里原本有的內(nèi)容，這時(shí)我們就可以把它們拖進(jìn)來進(jìn)行重組。

假如你替換的元素不夠用，那么就需要你自己手動(dòng)設(shè)計(jì)了，這樣也能反過來擴(kuò)充你總的人物組件庫內(nèi)容，其實(shí)組件庫的內(nèi)容就是這么一點(diǎn)點(diǎn)迭代添加的，當(dāng)你的組件庫內(nèi)容越來越多時(shí)，你的設(shè)計(jì)成本就會(huì)越來越低。

 

三步下來我們就把組件庫融入到了運(yùn)營(yíng)設(shè)計(jì)中了，有了新的子級(jí)運(yùn)營(yíng)設(shè)計(jì)組件庫。

 

2/直接替換（有人物動(dòng)態(tài)組件的情況下）

如果你做的運(yùn)營(yíng)內(nèi)容組件庫里都有，那么就可以按著規(guī)范直接拖入即可，也沒有必要去進(jìn)行重組。

總結(jié)：

總的來說組件庫的建立是一個(gè)龐大的工程，在你有了基礎(chǔ)架構(gòu)的時(shí)，你就要慢慢往里面塞更多的內(nèi)容進(jìn)行填充，當(dāng)你的內(nèi)容足夠多時(shí)它就可以反向?yàn)槟闾峁└嗟谋憷悄愕膶氋F的設(shè)計(jì)資源庫。

 

因?yàn)檫@期的內(nèi)容實(shí)在太多，所以插畫組件庫的應(yīng)用、運(yùn)營(yíng)設(shè)計(jì)常用模塊組件案例、重組技巧以及品牌插畫組件庫的建立我會(huì)另外抽時(shí)間給大家總結(jié)。（做案例太費(fèi)時(shí)間希望大家諒解）

 

參考資料提?。?/span>

我為大家提供了一些組件庫的可參考性文件，里面包含成套組件庫（sketch）、成套的插畫圖片、宣傳動(dòng)畫、一些參考性的圖片（構(gòu)圖、表情、發(fā)型等等）。

文章來源：tob.design     作者：黑獅力

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

元旦過后，新的一波工作又要開始了，我在開始準(zhǔn)備新一輪匯報(bào)材料的時(shí)候突然想到了一個(gè)問題，不知道鐵子們?cè)谕陞⒓釉O(shè)計(jì)評(píng)審的時(shí)候，有沒有總被老板 diss 設(shè)計(jì)稿里“太空了” “不夠飽滿” 這些個(gè)問題呢？

我猜測(cè)應(yīng)該99%的鐵子經(jīng)歷過，我也不例外，從校招進(jìn)到第一家公司就開始被植入頁面需要利用好每一像素的理念，搞得像北京房?jī)r(jià)一樣寸土寸金，生怕被浪費(fèi)了；思前想后為了大家不重蹈我的覆轍，所以新年的第一篇，咱一起來聊聊排版的問題：

NO.1

如果你看過我過往的文章，也許會(huì)對(duì)我的排版多少有點(diǎn)印象，夸張的大字，極強(qiáng)的對(duì)比，還有一些微妙的層級(jí)關(guān)系；坦誠(chéng)的講，我的風(fēng)格揉雜了 2 種設(shè)計(jì)體系 —— 瑞士風(fēng)格 / 擬物風(fēng)格；

1.瑞士風(fēng)格

整潔、嚴(yán)謹(jǐn)、工整、理性化、實(shí)用的特征是瑞士平面設(shè)計(jì)的精神所在；這種一絲不茍，傳達(dá)準(zhǔn)確的風(fēng)格，即所謂瑞士國(guó)際主義風(fēng)格。簡(jiǎn)單的說，由于 Swiss Design 這種風(fēng)格簡(jiǎn)單明確，傳達(dá)功能準(zhǔn)確，因而很快得到世界范圍內(nèi)的普遍認(rèn)可，成為戰(zhàn)后影響最大的一種平面設(shè)計(jì)風(fēng)格，也是國(guó)際最流行的風(fēng)格，因此，又被稱為國(guó)際主義平面設(shè)計(jì)風(fēng)格；

簡(jiǎn)單的說，瑞士的這種設(shè)計(jì)風(fēng)格典型的代表就是我們看到的雜志，其中有 3 個(gè)特點(diǎn)：講究網(wǎng)格 / 非常理智的克制顏色的使用 / 層級(jí)關(guān)系；有趣的是，審美和潮流是循環(huán)的，隨著時(shí)代的發(fā)展，越來越多的app開始重新挖掘出來瑞士風(fēng)格并加以使用，比如我們iOS系統(tǒng)自帶的應(yīng)用們，Spotify：

年少的時(shí)候，我經(jīng)?？粗@些個(gè)app會(huì)不禁的問，為什么在沒有一張圖片的情況下還能如此好看？這些年終于明白了前人良苦用心：文字是內(nèi)容，同樣也是構(gòu)成；是信息，同樣也是裝飾；簡(jiǎn)單可以理解為，不管在平面還是網(wǎng)頁亦或者是UI界面，在沒有可用的裝飾下，信息本身要承擔(dān)起裝飾和傳達(dá)的雙重功能，這就是瑞士風(fēng)格的核心本質(zhì)。

2.擬物風(fēng)格

iOS是擬物的典型代表，網(wǎng)上對(duì)于這塊的講解已經(jīng)過于飽和了，我也沒必要贅述；那么這一趴，來聊聊對(duì)我產(chǎn)生深遠(yuǎn)影響的錘子科技吧。我第一次接觸到 smartisan OS 并沒有覺著多么驚艷，潛意識(shí)里只不過是覺著把 iOS 的圖標(biāo)畫的更漂亮了一點(diǎn)而已…

但當(dāng)我打開下圖這個(gè)頁面的時(shí)候，我意識(shí)到我對(duì)擬物的理解還是淺薄了，第一次被光影的層次震撼到：

通過光影塑造了一個(gè)三維空間，讓整個(gè)畫面豐富飽滿，也打破了我幼稚的設(shè)計(jì)觀，PS.不管錘子科技現(xiàn)在如何，我依然敬佩 Paco / 方遲 / 羅子雄的設(shè)計(jì)團(tuán)隊(duì)為這個(gè)行業(yè)做出的貢獻(xiàn)，respect！

毫無保留的說，我的設(shè)計(jì)就是二者的融合，以 層次對(duì)比 作為核心理念。

NO.2

啰嗦了半天，趕緊進(jìn)入正題；如果你是一名產(chǎn)品體驗(yàn)設(shè)計(jì)師，一定聽說過 “奧卡姆剃刀” ，這個(gè)定律通常用在交互鏈路的設(shè)計(jì)上（意思就是在用戶路徑中沒必要的步驟，省了就完事了），“如無必要，勿增實(shí)體” 即簡(jiǎn)單有效原理；

同樣，在嘈雜的視覺結(jié)構(gòu)里，畫面也需要奧卡姆剃刀，當(dāng)你在對(duì)畫面的飽和上困擾不已，并急于找到一些背景和紋理填充的時(shí)候，我建議你先冷靜一下…因?yàn)轫撁娴目仗撐幢厥切枰獙?shí)體化的東西來填充的；上文有說過以  “層次對(duì)比” 作為核心理念出發(fā)，要區(qū)別于平面設(shè)計(jì)，營(yíng)造一個(gè)立體空間，所以先理一下畫面結(jié)構(gòu)：

通常來講，如果想要不平，把二維空間轉(zhuǎn)化成三維空間是必要的一步，需要在Z軸上下功夫；如果你恰巧也是一名攝影愛好者，可以想象下照相機(jī)的焦距和景深，工作原理是相同的，需要 前景 / 主體和背景 三個(gè)層次；當(dāng)然，虛實(shí)的對(duì)比對(duì)信息的呈現(xiàn)和層次的拉開是極其重要的，這里需要通過景深來控制效果，你可以通過 photoshop 濾鏡-模糊畫廊的“場(chǎng)景模糊”來做到：

另外，空間的感覺想要被突顯，那么“光影和空氣”的價(jià)值就可以無限放大了，按照如上所說的結(jié)構(gòu)，把內(nèi)容和自然物質(zhì)擺進(jìn)去就好了，甚至可以做到舉一反三（比如不同顏色的氛圍，我就不展開了）：

整個(gè)case下來，你會(huì)發(fā)現(xiàn)用光來聚焦在信息上，自然而然就形成了我們說所得 “信息優(yōu)先級(jí)”；有點(diǎn)時(shí)候空氣和光影的飽滿程度超乎你的想象，這種自然存在的物質(zhì)可以很好的幫助畫面分層，以達(dá)到填充的效果，并不是一定要依賴于實(shí)體化的裝飾。

對(duì)了，如果你跟我一樣閑著沒事干的話，借用 keynote 的動(dòng)畫效果做一個(gè)吊炸天的動(dòng)效，一定可以成為匯報(bào)場(chǎng)上最靚的崽（ 注意：視頻有音樂）！

NO.3

本來不打算再開一個(gè)章節(jié)說這個(gè)，但還是覺著很有必要再說下（我好糾結(jié)），作為PPT來講，ta的主要用途分為兩種：其一是給人看的，其二是給人講的；不管是哪種，盡可能的簡(jiǎn)化文字，是對(duì)輸入者關(guān)愛；

以上圖為例（實(shí)名diss自己的作品），坦誠(chéng)的講左邊的部分大多數(shù)觀者是不會(huì)有心思來看的，按照視覺系統(tǒng)的處理，這部分就會(huì)被當(dāng)成一個(gè)“面”而被忽略掉，這種情況下右邊顯得有力很多，也能幫助觀者聚焦信息，所以還是那句話，能不寫的就別寫，能少些的別多寫，保持信息的密度也是設(shè)計(jì)師必要的職責(zé)之一。

總結(jié)一下

想問一個(gè)問題，鐵子們覺著UI的本質(zhì)或者作用是什么？從我個(gè)人的角度來講，UI設(shè)計(jì)的本質(zhì)就是對(duì)信息的整理歸類和編排，沒有什么比信息更重要，如果貿(mào)然為了飽滿加入一些裝飾元素，很有可能是本末倒置，得不償失。這就像喝酒一樣，喝醉很容易，但微醺的感覺才是最棒的，今天是元旦后的第二個(gè)工作日，希望你能有個(gè)好心情迎接美好的一年～

文章來源：站酷   作者：負(fù)能量補(bǔ)給站

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

顏色的本質(zhì)

當(dāng)今是色彩的世界，物體顏色的不同，帶給我們的情緒也截然不同。想要掌握顏色，首先就要研究顏色的本質(zhì)。

顏色分為光學(xué)三原色和顏料三原色。

1. 光學(xué)三原色

光學(xué)三原色由：紅、綠、藍(lán)組成。

色值分別是：

• 紅（red ）：#FF0000 RGB（255，0，0）
• 綠（green）：#00FF00 RGB（0，255，0）
• 藍(lán)（blue）：#0000FF RGB（0，0，255）

2. 顏料三原色

顏料三原色由：品紅、黃、青組成。

色值分別是：

• 品紅（magenta）：#FF00FF CMYK（42，64，0，0）
• 黃（yellow）：#F8F400 CMYK（0，11，92，0）
• 青（cyan）：#00FFFF00FFFF CMYK（38，0，16，0）

理論上，原色可以調(diào)制出絕大部分的其他色，而其他色都調(diào)不出原色。

那么，這兩種有什么區(qū)別呢？

3. 區(qū)別

光學(xué)三原色和顏料三原色最主要的區(qū)別就是他們的混合原理不同，分為相加混色和相減混色。

光學(xué)三原色為相加混色（可以理解為光的疊加），混合后顏色的明度提高，三色混合即為白色。

相反，顏料三原色采用相減混色（可以理解為光的吸收），混合后顏色的明度和純度都會(huì)下降，三個(gè)混合即為黑色。

在設(shè)計(jì)中我們可以區(qū)分為 RGB（光學(xué)三原色）和 CMYK（顏料三原色）。

RGB 模式本質(zhì)上與 CMYK 模式?jīng)]有區(qū)別，只是產(chǎn)生顏色的方式不同。顯示器采用RGB模式，就是因?yàn)轱@示器是電子光束轟擊熒光屏上的熒光材料發(fā)出亮光從而產(chǎn)生顏色，當(dāng)沒有光的時(shí)候?yàn)楹谏?，光線加到最大時(shí)為白色。而打印機(jī)呢？它的油墨不會(huì)自己發(fā)出光線。因而只有采用吸收特定光波而反射其它光的顏色，所以需要用減色法來解決。

運(yùn)用場(chǎng)景：

• 光學(xué)三原色：RGB模式，燈光色彩中；
• 顏料三原色：CMYK模式，繪畫和印刷領(lǐng)域。

冷暖色調(diào)

冷暖色由三種原色、三種間色和六種復(fù)色組成的系統(tǒng)就稱為十二色環(huán)，從紫色至黃綠為冷色，黃色至紫色為暖色。

冷色可以讓人聯(lián)想到海洋、天空、雨雪等，讓人產(chǎn)生理智、寒冷、沉寂的感覺。

暖色可以讓人聯(lián)想到火焰、太陽等，讓人產(chǎn)生溫暖、熱情、開放的感覺。

實(shí)際案例中，冷暖色調(diào)的搭配，直接決定了觀賞者的第一感官。觀賞者第一眼的情緒感觸，就由此而來。

顏色的三個(gè)屬性

顏色的三個(gè)屬性分別為：色相（Hue）、明度（Brightness）、飽和度（Saturation）。

1. 色相

色相指的是這些不同波長(zhǎng)的色的情況。波長(zhǎng)最長(zhǎng)的是紅色，最短的是紫色。

色彩是由于物體上的物理性的光反射到人眼視神經(jīng)上所產(chǎn)生的感覺。色的不同是由光的波長(zhǎng)的長(zhǎng)短差別所決定的。把紅、橙、黃、綠、藍(lán)、紫和處在它們各自之間的紅橙、黃橙、黃綠、藍(lán)綠、藍(lán)紫、紅紫這 6 種中間色——共計(jì) 12 種色作為色相環(huán)。在色相環(huán)上排列的色是純度高的色，被稱為純色。

2. 明度

明度是表示色所具有的亮度和暗度。計(jì)算明度的基準(zhǔn)是灰度測(cè)試卡。黑色為 0，白色為 10，在 0~10 之間等間隔的排列為 9 個(gè)階段。

色彩可以分為有彩色和無彩色，但后者仍然存在著明度。作為有彩色，每種色各自的亮度、暗度在灰度測(cè)試卡上都具有相應(yīng)的位置值。彩度高的色對(duì)明度有很大的影響，不太容易辨別。在明亮的地方鑒別色的明度比較容易的，在暗的地方就難以鑒別。

3. 飽和度

飽和度是用數(shù)值表示色的鮮艷或鮮明的程度。

飽和度為 0 時(shí)，就是黑白灰。有彩色的各種色都具有彩度值，無彩色的色的彩度值為0，對(duì)于有彩色的色的彩度（純度）的高低，區(qū)別方法是根據(jù)這種色中含灰色的程度來計(jì)算的。

顏色搭配

1. 單色

單色指的是某個(gè)顏色純度的變化，就是在原有色上疊加 10%~90% 的白色/黑色得到的一個(gè)顏色。

這種方法運(yùn)用到產(chǎn)品中，會(huì)給人一種樸素、低調(diào)干凈的感覺；同時(shí)，也會(huì)給人一種單調(diào)的感覺。單色的顏色搭配適合沉浸式的產(chǎn)品中使用，不會(huì)因?yàn)樯识騺y用戶的體驗(yàn)。

產(chǎn)品案例：MUJI

2. 互補(bǔ)色

互補(bǔ)色是指在色相環(huán)上對(duì)立（180°）的兩個(gè)顏色。

色彩中的互補(bǔ)色有紅色與綠色互補(bǔ)，藍(lán)色與橙色互補(bǔ)，紫色與黃色互補(bǔ)。

補(bǔ)色并列時(shí)，會(huì)引起強(qiáng)烈對(duì)比的色覺，會(huì)感到紅的更紅、綠的更綠。

互補(bǔ)色是很難把控的一種色彩搭配。由于色彩沖擊力極強(qiáng)，用好了可以達(dá)到視覺峰值，反之則會(huì)很“村氣”

3. 鄰近色

鄰近色是指在色環(huán)上相鄰的兩三個(gè)顏色，在色相環(huán)上相距 60°

它們色相彼此相近，冷暖性質(zhì)一致、色調(diào)統(tǒng)一和諧、感情特性一致。鄰近色是選擇相近色彩時(shí)很不錯(cuò)的方法，可以在同一個(gè)色調(diào)中制造豐富的質(zhì)感和層次。一些效果不錯(cuò)的色彩組合有藍(lán)綠色、藍(lán)色和藍(lán)紫色，還有黃綠色、黃色和橘黃色等。

4. 對(duì)比色

對(duì)比色是人的視覺感官所產(chǎn)生的一種生理現(xiàn)象，是視網(wǎng)膜對(duì)色彩的平衡作用。指在相環(huán)上相距 120° 到 180° 之間的兩種顏色。

對(duì)比色能使色彩效果表現(xiàn)更明顯，形式多樣，極富表現(xiàn)力。需要注意的是，互補(bǔ)色一定是對(duì)比色，但是對(duì)比色不一定是互補(bǔ)色。

色彩的視覺呈現(xiàn)

1. 光源色

物體只有在光的照射下我們才能看到他們的顏色。

發(fā)光體發(fā)出的光，形成了不同的色彩，我們將這些色光稱之為光源色。

2. 固有色

固有色就是我們平時(shí)看到物體的顏色。

比如在正常光照下我們看到一個(gè)物體是紅色，那他的固有色就是紅色。

3. 環(huán)境色

環(huán)境色是物體周圍環(huán)境的顏色。

環(huán)境色對(duì)我們看到物體顏色的影響非常大。大家平時(shí)肯定也遇到過一個(gè)物體在不同的光照下，呈現(xiàn)出來的物體顏色也不盡相同。比如，一個(gè)在藍(lán)色天空下的蘋果會(huì)呈現(xiàn)部分淡藍(lán)色，就是環(huán)境色的影響。

色彩格式

1. RGB

RGB 色彩模式是工業(yè)界的一種顏色標(biāo)準(zhǔn)，是通過對(duì)紅(R)、綠(G)、藍(lán)(B)三個(gè)顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色的，RGB 即是代表紅、綠、藍(lán)三個(gè)通道的顏色，這個(gè)標(biāo)準(zhǔn)幾乎包括了人類視力所能感知的所有顏色，是目前運(yùn)用最廣的顏色系統(tǒng)之一。

2. HSB

在 HSB 模式中，H(hues)表示色相，S(saturation)表示飽和度，B（brightness）表示明度。

3. HSL

在 HSL 模式中，H(hues)表示色相，S(saturation)表示飽和度，L（Lightness）表示明度。

4. HSB 和 HSL 的區(qū)別

HSB 和 HSL 都是表示色相、飽和度和明度，不同的點(diǎn)在于應(yīng)用開發(fā)中，不同開發(fā)語言下可調(diào)節(jié)的明度值名詞不同，所以這兩個(gè)格式不用過于糾結(jié)哪個(gè)用的更多，具體使用中就是需要哪個(gè)用哪個(gè)。

不同顏色的感受

1. 黑色

黑色代表著品質(zhì)、權(quán)威、嚴(yán)肅、穩(wěn)重、高級(jí)。它是所有顏色中最有力量的，黑色+金色凸顯高貴感，黑色+紅色凸顯時(shí)尚感。

黑色是永不過時(shí)的顏色。

2. 白色

白色代表純潔、信任、樸素、簡(jiǎn)單。黑色和白色經(jīng)常會(huì)被用作無色，這兩個(gè)顏色沒有色彩傾向，屬于中性色，所以常常被忽略掉。在界面設(shè)計(jì)中，白色常常被用作背景色，提高畫面明度，凸顯其他內(nèi)容，提高文字的易讀性。

3. 紅色

紅色代表喜慶、熱情、奔放、自由、歡樂。它是很強(qiáng)勢(shì)的顏色，一出現(xiàn)就會(huì)使人熱血沸騰，常常出現(xiàn)在電商活動(dòng)中，讓人有購物的沖動(dòng)。同時(shí)，紅色也有一種警告的含義。一些產(chǎn)品高危操作的 Button，都是用紅色來提醒用戶。

4. 藍(lán)色

藍(lán)色代表冷靜、商務(wù)、未來、科技、安全，它是一種比較理智的顏色，在色彩心理學(xué)的測(cè)試中發(fā)現(xiàn)，幾乎沒有人對(duì)藍(lán)色反感。主色調(diào)用藍(lán)色的太多了：知乎、Twitter、Behance、釘釘?shù)?，藍(lán)色的運(yùn)用給用戶一直安全、放心的感覺。

5. 黃色

黃色代表輝煌、高貴、信心。它的明度極高，雖然沒有紅色給人那么強(qiáng)烈的感官，但是黃色給人一種警示的意思。黃色經(jīng)常會(huì)以高貴的含義被用到：網(wǎng)站的 VIP。

6. 綠色

綠色代表健康、活力、生命、安全、和平、寧靜。綠色可以治愈心靈，當(dāng)你不開心的時(shí)候，看一下綠色的東西，會(huì)讓你的愉悅值增加。它在生活中用到最多的含義是安全：綠色通道、綠燈等。

7. 紫色

紫色代表浪漫、時(shí)尚、性感、夢(mèng)幻、創(chuàng)造力。紫色+粉色經(jīng)常在女性化妝品被用到，紫色在自然生活中很少看到，所以也有一種稀有、高貴的感覺。

色彩在設(shè)計(jì)中的應(yīng)用

1. 數(shù)量

一個(gè)頁面中盡量不要超過 3 種顏色（黑白除外），顏色過多會(huì)讓用戶的興奮值上升，不易長(zhǎng)期查看。

2. 統(tǒng)一性

每一個(gè)產(chǎn)品都有自己的主色調(diào)，所有的頁面的色彩搭配都要和主色調(diào)呼應(yīng)，主色調(diào)的合理運(yùn)用直接關(guān)系到用戶對(duì)產(chǎn)品的信任值。同一組件、場(chǎng)景中，顏色使用要保持一致，切忌“自由發(fā)揮”，毫無規(guī)范可言。

3. 60-30-10原則

60%、30%、10% 的原則，是達(dá)到色彩平衡的最佳比例。在 60% 的空間使用主色，可以運(yùn)用到導(dǎo)航欄、按鈕、圖標(biāo)等關(guān)鍵的元素中，使之成為整個(gè) App 的視覺焦點(diǎn)和色彩關(guān)系；30% 的空間使用輔助色，可以平衡過多的主色而造成的視覺疲勞；最后剩下 10% 的空間為點(diǎn)綴色，可以用在一些不太重要的元素又需要區(qū)分的時(shí)候。6:3:1 原則構(gòu)建了一種豐富的色彩層次，讓界面看上去和諧、平衡和不雜亂。

4. 顏色禁忌

禁用純黑、純灰，純黑和純灰會(huì)使用戶陷入負(fù)面情緒中，可以在黑色和灰色中加入一些色調(diào)，讓顏色看上去更柔和，另外純黑色看時(shí)間久了會(huì)使人疲憊，在實(shí)際產(chǎn)品中，也很少有用純黑的。

5. 文字中的使用

超鏈接顏色用藍(lán)色，為什么呢？

最早期電腦中用的是深灰色背景+黑色字，那時(shí)候能用非黑色最深的顏色就是藍(lán)色，所以這個(gè)習(xí)慣一直延續(xù)至今。這種用戶習(xí)慣非常一致的情況下，盡量不要去改顏色，因?yàn)楦某蓜e的顏色就會(huì)顛覆用戶認(rèn)知，學(xué)習(xí)成本就會(huì)增加。

6. 卡片陰影

一定不要用純黑色陰影，陰影的顏色會(huì)受到環(huán)境色和固有色的影響，對(duì)于有顏色卡片的背景，盡量使用比卡片更深的同色系顏色來調(diào)陰影，會(huì)使得陰影更干凈、整潔。

配色網(wǎng)站推薦

1. Wbgradients

網(wǎng)站鏈接：https://webgradients.com/

Wbgradients 是一個(gè)在線調(diào)整漸變色的網(wǎng)站 ，可以根據(jù)你想要的調(diào)整效果，同時(shí)支持復(fù)制 CSS 代碼，可以更好的與開發(fā)對(duì)接。

2. Grabient

網(wǎng)站鏈接：https://www.grabient.com/

Grabient 是一個(gè)非常漂亮且實(shí)用的漸變配色網(wǎng)站，支持 CSS 樣式代碼復(fù)制、360度漸變旋轉(zhuǎn)、自由增加或刪除漸變顏色等功能。設(shè)計(jì)師可以在色塊下方自由添加和調(diào)整漸變的色系、以及線性漸變方向。

3. Color Grid

網(wǎng)站鏈接：https://www.0to255.com/740941

該網(wǎng)站隨意選色值，它自動(dòng)換算出已選色值的 32 種明度色值，簡(jiǎn)單易用。

4. Eva Design System

網(wǎng)站鏈接：https://colors.eva.design/

Eva Design System 是一個(gè)基于深度學(xué)習(xí)算法的配色網(wǎng)站。適用于給我們的產(chǎn)品或品牌生成一個(gè)系統(tǒng)的配色方案。右上角可以切換淺色模式和深色模式的對(duì)比。

5. Color Hunt

網(wǎng)站鏈接：https://colorhunt.co/

Color Hunt 是開放的調(diào)色板集合，可以添加到 chrome 瀏覽器，方便隨時(shí)隨地使用。

文章來源：優(yōu)設(shè)網(wǎng)     作者：友設(shè)青年

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

前文的原子設(shè)計(jì)中我曾經(jīng)講過，原子是構(gòu)成所有元素的最小單元，沒有辦法再被細(xì)分。它通常對(duì)應(yīng)著產(chǎn)品設(shè)計(jì)中的通用樣式及構(gòu)成組件的最小顆粒。而顏色，作為整個(gè)設(shè)計(jì)系統(tǒng)中極為重要的原子之一，在心智模型中占據(jù)了關(guān)鍵的地位。

我們看到紅色能夠感受到熱情、興奮和危險(xiǎn)，看到綠色時(shí)往往就感受到安全、自然和平靜?？梢哉f，顏色調(diào)動(dòng)我們的情緒只需要一瞬間，而且它在我們的記憶中可以停留更久。

接下來，我結(jié)合公司目前的業(yè)務(wù)CROV Dropshipping（以下簡(jiǎn)稱DS），來進(jìn)行色彩體系的探索，以輸出一整套的色彩方案。但愿這次探索能夠給予各位一點(diǎn)啟發(fā)。

大綱走起：

• 業(yè)務(wù)背景
• 為什么我們需要色彩體系
• 如何創(chuàng)造一套色彩體系
• WCAG無障礙測(cè)試

業(yè)務(wù)背景

CROV DS是針對(duì)美國(guó)市場(chǎng)的線上一件代發(fā)平臺(tái)（類似阿里巴巴的一件代發(fā)業(yè)務(wù)），屬于跨境電商B2C行業(yè)。平臺(tái)幫助用戶無需任何初始成本、無需囤貨即可順利開展電商之路，時(shí)間靈活可控，讓用戶專注于銷售本身。

為什么我們需要色彩體系？

1. 對(duì)于業(yè)務(wù)

目前CROV DS業(yè)務(wù)日益繁雜，但是除了品牌色之外，輔助色的定義過于隨意。而且隨著業(yè)務(wù)場(chǎng)景的擴(kuò)展，臨時(shí)增加的顏色很容易被遺漏在某個(gè)不知名角落的畫板中，導(dǎo)致一次性用色的風(fēng)險(xiǎn)。（tips：一次性即前一篇我所講到的用完即扔、未被復(fù)用的設(shè)計(jì)）

而且用色本身的隨意也導(dǎo)致研發(fā)還原結(jié)果的不統(tǒng)一，一處地方色彩各異的現(xiàn)象比比皆是。

因此，我們需要基于我們自身的業(yè)務(wù)特征來產(chǎn)出一套足夠完善的色彩體系，讓業(yè)務(wù)從用色上達(dá)成基本的一致統(tǒng)一。

2. 對(duì)于設(shè)計(jì)師

我們?cè)O(shè)計(jì)師在定義顏色時(shí)，更多的是直接在色板上進(jìn)行取色，但這樣的取色方法存在諸多弊端。

增加決策

可能很多設(shè)計(jì)師選色時(shí)會(huì)有這種情況，一會(huì)覺得這個(gè)顏色臟了，一會(huì)又覺得那個(gè)顏色太刺眼了，有時(shí)候完美主義作祟，為了得到一個(gè)滿意的顏色甚至花上大半天。這種情況尤其在多色搭配時(shí)更為嚴(yán)重。

其實(shí)這和不用網(wǎng)格系統(tǒng)來布局是一個(gè)道理。（注：網(wǎng)格系統(tǒng)是一種能夠極大提升布局效率的方法，后面會(huì)講～）

色板中取色的范圍趨近于無窮。如果將HSB模式下的單個(gè)H、S和B作為一個(gè)最小單元格，那么我們可以選擇的格子高達(dá)數(shù)百萬個(gè)。顆粒度過細(xì)的情況（其實(shí)根本就沒有顆粒度）導(dǎo)致我們?cè)谌∩珪r(shí)往往會(huì)被迫進(jìn)行反復(fù)的微調(diào)和嘗試。

缺乏秩序和邏輯性

直接在色板中取色主要依賴的是”直覺“這種相對(duì)感性的存在。

比如一個(gè)按鈕的狀態(tài)可以包括normal、hover、pressed、disable等多個(gè)狀態(tài)，如果我們僅僅靠自己的直覺自由調(diào)整明度和飽和度，最后的配色方案其實(shí)缺乏內(nèi)在的邏輯性和秩序性。

難以復(fù)用

對(duì)于B端這些偏后臺(tái)工具、場(chǎng)景復(fù)雜的業(yè)務(wù)，顏色運(yùn)用得往往也比較廣泛，如果我們沒有一套完善的色彩體系，那每次一遇到新的項(xiàng)目及業(yè)務(wù)場(chǎng)景需要用到新的顏色時(shí)，之前定義的顏色難以復(fù)用，導(dǎo)致我們需要重新定義顏色。而且這種相對(duì)主觀的方法也缺乏說服力，難以體現(xiàn)專業(yè)度。

而如果設(shè)計(jì)師提前定義好一套色彩體系，一方面只需要在對(duì)應(yīng)的色板中選擇即可，大大減少了設(shè)計(jì)決策。另一方面色彩體系所提供的不同色彩梯度也便于各個(gè)需求、業(yè)務(wù)場(chǎng)景的復(fù)用。而且色彩體系富有邏輯和秩序，因此從中挑選的顏色也同樣是這樣，顯著降低設(shè)計(jì)師依賴”直覺“所帶來的主觀和不可控。

如何創(chuàng)建一套色彩體系？

Alipay Design團(tuán)隊(duì)提過：

以同色系配色為主導(dǎo)，多色搭配為輔。

同色系為統(tǒng)一的色相，使用中可以加深品牌色的感知，可以讓界面更有層次，同時(shí)可以讓界面保持色彩上的一致性；由于業(yè)務(wù)的多樣化，我們需要多色搭配為輔；多色的輔助顏色，也可稱之為功能色，可設(shè)定不同的任務(wù)屬性和情感表達(dá)；再搭配中性色黑白灰，賦予更多的變化和層次。兩種配色通過主次、使用比例，可靈活運(yùn)用在業(yè)務(wù)的各個(gè)場(chǎng)景中，具有非常好的延展性。

接下來我以DS項(xiàng)目為例進(jìn)行色彩體系探索——

首先，所有的色彩模型統(tǒng)一采用HSB模型進(jìn)行，正如Ant Design設(shè)計(jì)團(tuán)隊(duì)說的那樣，這個(gè)模型利于調(diào)整色彩時(shí)對(duì)顏色有明確的心理預(yù)期，同時(shí)便于團(tuán)隊(duì)溝通。

這里再簡(jiǎn)單普及下HSB模型。H指的是色相（Hue），S指飽和度（Saturation），B指明度（Brightness）。S控制顏色混入白色的量，S值越高，意味著混入白色的量越少，顏色也就越“純”。B控制顏色混入黑色的量，B值越高，意味著混入黑色的量越少，顏色也就越“亮”。（通俗點(diǎn)說，它們分別代表了明色區(qū)域和暗色區(qū)域）

1. 品牌色

Crov Dropshipping基于其時(shí)間自由靈活、可兼職副業(yè)、成本風(fēng)險(xiǎn)低的業(yè)務(wù)特征，使得對(duì)應(yīng)的用戶群越來越多的集中在年輕一代的e-tailer（線上零售商）當(dāng)中。他們不同于我們常規(guī)認(rèn)知里那類傳統(tǒng)的retailer（線下實(shí)體零售商），大部分的DSer擁有自己的事業(yè)和工作，為了賺取外快，將其當(dāng)做自己的副業(yè)。因此，年輕化是這類用戶群的主要標(biāo)簽。

所以，我們采用了高飽和度、偏向藍(lán)色色相的紫色，來作為crov dropshipping的品牌色。它的HSB值是 （250，80，100）。

2. 基于品牌色生成24色“彩帶”

為了覆蓋掉Crov DS本身復(fù)雜的前后臺(tái)業(yè)務(wù)場(chǎng)景，需要額外搭配各類型的輔助色。我們想要提取24類色相，所以直接通過360/24得出了色環(huán)中每類色相的基本角度15°。

因此，這里以品牌色色相為基礎(chǔ)，在HSB 360°色環(huán)中，對(duì)色相（H）正向和反向各自±15°，飽和度（S）和明度（B）保持不變，得到24色的色環(huán)彩帶。

后續(xù)我們的顏色體系就在彩帶上的24個(gè)顏色上面進(jìn)行提取。

3. 品牌色同色系配色

品牌色同色系是指，根據(jù)品牌色不同的飽和度和明度變化，生成不同深淺、不同明暗的一組顏色。同色系配色不僅傳達(dá)了品牌性，多個(gè)梯度的變化也能夠適應(yīng)及通用盡可能多的業(yè)務(wù)場(chǎng)景，也便于多信息的層級(jí)劃分。

而同色系配色的輸出則遵循了antDesign發(fā)明的tint/shade 色彩系統(tǒng)算法，說人話，就是在顏色中分別加入一定比例的黑色或者白色來更科學(xué)地生成色階。

sketch中可以直接將這套算法可視化處理，便于設(shè)計(jì)師直接生成所有顏色的色階。需要注意的是明色區(qū)（就是上方橫向的那塊取色區(qū)域，白色至純色時(shí)S由0過渡至100）和暗色區(qū)（右側(cè)縱向的取色區(qū)域，純色至黑色時(shí)B由100過渡至0）遵循了兩種不同的規(guī)則，具體規(guī)則見下：

當(dāng)S飽和度變化時(shí)（明色區(qū)域），S值以S/5的結(jié)果值為一個(gè)增量進(jìn)行遞減，B值以(100-B)/5的結(jié)果值為一個(gè)增量進(jìn)行遞增。我們品牌色的S和B分別是80和100，所以這里的兩個(gè)增量分別是16和0。

品牌色在明色區(qū)的下兩個(gè)色階對(duì)應(yīng)的HSB參數(shù)就是（250，64，100），（250，48，100），以此類推。

而當(dāng)B明度產(chǎn)生變化時(shí)（暗色區(qū)域），S值以(100-S)/5的結(jié)果值為一個(gè)增量進(jìn)行遞增，而B值以B/5的結(jié)果值為一個(gè)增量進(jìn)行遞減。得出的兩個(gè)增量分別為4和20。

品牌色在暗色區(qū)的下兩個(gè)顏色對(duì)應(yīng)的HSB參數(shù)即（250，84，80）、（250，88，60），剩下的所有顏色以此類推。

根據(jù)這兩個(gè)定義規(guī)則推導(dǎo)出全部不同梯度的色階，我們就可以將其作為品牌色同色系配色。

4. 定義輔助色

我們使用品牌色來傳達(dá)品牌價(jià)值，還需要輔助色來滿足多樣化業(yè)務(wù)場(chǎng)景的需要，對(duì)用戶進(jìn)行不同的情緒引導(dǎo)，同時(shí)也可以緩解用戶對(duì)單一主色產(chǎn)生的視覺疲勞。

輔助色的定義就可以直接用到我們之前基于品牌色所衍生出的24色“彩帶”了。我們通過色環(huán)形式，來迅速得出品牌色的同類色、類似色、鄰近色、中差色、對(duì)比色和互補(bǔ)色。

結(jié)果見下：

首先，由于相差15°的同類色與品牌色差距過小，色相對(duì)比感微弱，傳遞的調(diào)性過于相似，所以這里直接pass。而鄰近色生成的粉色和青色在界面中基本不會(huì)作為功能色使用，這里同樣直接舍棄。

類似色

類似色即色相差在30度左右的顏色，屬于較弱對(duì)比色。我們基于品牌色的色相各自±30得出類似色。由于H280的類似色調(diào)性與品牌色類似，并且色彩體系中需要一個(gè)典型的冷色來覆蓋一些場(chǎng)景，所以這里使用了H220的顏色作為冷系的輔助色。

中差色

中差色即色相相差90度左右的顏色，屬于中等對(duì)比色。H340偏粉，與常規(guī)紅色相差過多，所以這里借鑒了alipay的輔助色校正原則“色相差值不能超過15”，對(duì)H340進(jìn)行了色相校正，調(diào)整至H355。

對(duì)比色

對(duì)比色即色相相差120度左右的顏色，屬于強(qiáng)對(duì)比色。最后得出的H130調(diào)性與中差色的H160過于類似，直接舍棄。H10與H340調(diào)性類似，但是可以向橙色系發(fā)展，所以微調(diào)到同類色進(jìn)行色相校正。

互補(bǔ)色

互補(bǔ)色即色相相差180度左右的顏色，屬于高強(qiáng)度對(duì)比色。最后得出的H70偏綠，這里同樣進(jìn)行了色相校正，將其調(diào)整為H55。

最后，得出了共計(jì)5種輔助色。不過這些輔助色并不能直接使用，還需要進(jìn)行感官明度的校正。

5. 感官明度校正

感官明度校正方法來自支付寶設(shè)計(jì)團(tuán)隊(duì)，這是是確認(rèn)輔助色的最后關(guān)鍵一環(huán)。每種顏色都有屬于自己的“感官明度”，即發(fā)光度。品牌色即輔助色的發(fā)光度不一致，就會(huì)導(dǎo)致視覺上會(huì)有明顯的明暗差別。所以，我們需要通過發(fā)光度來進(jìn)行最終的顏色校正。

明度較高的灰色意味著高發(fā)光度，明度較低則意味著低發(fā)光度。保持品牌色發(fā)光度不變，我們對(duì)其他輔助色進(jìn)行微調(diào)。

我們只需要將那些視覺明暗差距明顯的顏色進(jìn)行調(diào)整。注意，并非所有的顏色都要調(diào)整到品牌色的感官明度，這些值僅僅是一個(gè)參考。最終的校正依然取決于我們的視覺！比如黃色感官明度本身很高，但是視覺緩和、不像綠色那么刺激，所以基本無需校正。

最后得到校正后的如下輔助色。藍(lán)色、綠色、黃色以及紅色在界面中可以作為功能色使用，可以分別代表常規(guī)、成功、警告和報(bào)錯(cuò)狀態(tài)。而橙色則可以用作突出類的提示信息，它比bold字重要高出一個(gè)層級(jí)。

6. 輔助色的同色系配色

與品牌色一樣，使用tint/shade規(guī)則推導(dǎo)出全部輔助色不同梯度的色階。具體過程不再贅述～

7. 定義文本色

CROV DS的文本色并非純粹的中性色，我們通過加入一點(diǎn)點(diǎn)品牌色來讓文本呈現(xiàn)色彩傾向，以此提升頁面的活力及年輕感，同時(shí)也可以讓界面更加耐看，減緩B端產(chǎn)品長(zhǎng)期使用時(shí)的視覺疲勞。

具體方法就是，分別在#222、#555、#888、#b3b3b3的一、二、三級(jí)中性文本色代表的色塊上，覆蓋一層10%透明度的品牌色。最后得出了四個(gè)層次的文本色。當(dāng)然，中性文本色你也可以參考antDesign中通過透明度進(jìn)行定義的方法，不一定需要按照某個(gè)具體色值來。

WCAG無障礙測(cè)試

我們必須要承認(rèn)的現(xiàn)實(shí)是，設(shè)計(jì)師所定義出的色彩在mac上看上去是很出彩，但是這并不能代表所有用戶。也許在用戶中依然有一部分人群，他們的顯示器配置低和老舊。而且我們無法判斷用戶們的使用環(huán)境，有可能是在刺眼的陽光下、有可能是在昏暗的環(huán)境中。如果色彩不去做可用性測(cè)試，在很多的情況下存在體驗(yàn)降低的風(fēng)險(xiǎn)。

而WCAG（Web Content Accessibility Guideline，Web內(nèi)容無障礙指南）解決的正是這些障礙問題。WCAG中的POUR無障礙原則包括了：易于感知的（Perceivable）、便于操作的（Operable）、穩(wěn)定理解的（Understandable）、穩(wěn)定耐用的（Robust）。

而顏色則正是對(duì)應(yīng)了易于感知的這一無障礙原則。網(wǎng)站中的文字和圖像應(yīng)該具備足夠高的色彩對(duì)比度，使之更易被用戶感知識(shí)別。

WCAG顏色對(duì)比度無障礙的兩個(gè)標(biāo)準(zhǔn)分別為：「1.4.3條例：最小對(duì)比度標(biāo)準(zhǔn)」和「1.4.6條例：加強(qiáng)對(duì)比度標(biāo)準(zhǔn)」，分別對(duì)應(yīng)著AA級(jí)和AAA級(jí)。

AA級(jí)的定義為：普通文本的視覺呈現(xiàn)與背景至少要有4.5：1的對(duì)比度，大文本與背景至少有3：1的對(duì)比度

AAA級(jí)的定義為：普通文本的視覺呈現(xiàn)與背景至少要有7：1的對(duì)比度，大文本與背景至少有4.5：1的對(duì)比度

（這里的大文本即≥18pt常規(guī)字重的文本或者≥14pt加粗字重的文本）

這兩個(gè)條例被大廠們廣泛運(yùn)用到了產(chǎn)品的顏色標(biāo)準(zhǔn)當(dāng)中。

比如MD規(guī)范中的文本移動(dòng)性規(guī)范標(biāo)準(zhǔn)中的數(shù)據(jù)就是來自WCAG的1.4.3條例標(biāo)準(zhǔn)。

同樣，阿里巴巴在前不久發(fā)布的B-Design中的無障礙色acs指標(biāo)和WCAG本質(zhì)上也是一樣。

1. 顏色對(duì)比度驗(yàn)證

那該如何驗(yàn)證我們的顏色符合這倆標(biāo)準(zhǔn)呢？

easy。這里直接上個(gè)網(wǎng)址，https://contrast-ratio.com/#%23373247-on-%23fff

我們分別在背景及文本錄入色值，即可得到最終的對(duì)比度數(shù)據(jù)。比如我錄入了白色和一級(jí)文本色數(shù)值，最后的12.28即兩者的對(duì)比度，嗯，達(dá)到了AAA級(jí)標(biāo)準(zhǔn)。

一樣的步驟，分別測(cè)試了其他文本色的對(duì)比度（產(chǎn)品無暗色模式，所以此處僅驗(yàn)證白色背景下的顏色對(duì)比度），分別達(dá)到了7.59、4.71和2.38?？梢钥闯龀?.38外，其他文本色的對(duì)比度均符合可見度標(biāo)準(zhǔn)。

不過WCAG中指出，一些特殊情況下的文本無對(duì)比度的限制，其中就包含了表單字段的占位符（placeholder）。而2.38對(duì)比度對(duì)應(yīng)的文本色主要用于暗提示，因此這種情況就可以無視掉了~

最后

色彩體系的初步探索到此結(jié)束了，不過篇幅原因并沒有面面俱到，比如漸變色、實(shí)際落地效果等等。另外，一些地方我自己也在摸索階段，因此很多分析也可能存在不足，文章僅作參考。

文章來源：優(yōu)設(shè)網(wǎng)     作者：轉(zhuǎn)行人的設(shè)計(jì)筆記

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

觀察來自世界各地的logo設(shè)計(jì)作品，他們的預(yù)測(cè)代表了設(shè)計(jì)環(huán)境的變化。雖然去年的趨勢(shì)集中在通過新技術(shù)進(jìn)行革新，但2021年標(biāo)志趨勢(shì)中的一個(gè)共同主題似乎是限制條件下的創(chuàng)新。過去的一年可能在很多方面限制了世界，但是2021年的標(biāo)志設(shè)計(jì)師們還都在繼續(xù)努力著。

• 彩色玻璃

• 透視圖

• 簡(jiǎn)單幾何

• 發(fā)散字母

• 真實(shí)寫真

• 原始對(duì)稱

• 古怪的人物

• 現(xiàn)代象征主義

• 靜態(tài)運(yùn)動(dòng)

• 類似配色方案

 

標(biāo)志設(shè)計(jì)作為一項(xiàng)相對(duì)現(xiàn)代的發(fā)明，往往在過去的技術(shù)和局限中尋求靈感。在2021年，許多標(biāo)志設(shè)計(jì)師在過去時(shí)代的彩色玻璃窗中找到了啟發(fā)。

   

當(dāng)應(yīng)用到現(xiàn)代設(shè)計(jì)中時(shí)，將圖像分割成純色碎片，給普通概念增添了一點(diǎn)抽象感。彩色玻璃也與神圣聯(lián)系在一起，因?yàn)樗鹪从谥惺兰o(jì)教堂。這可能不是巧合，這種標(biāo)志趨勢(shì)經(jīng)常與美麗的自然景觀結(jié)合使用。在一年的大部分時(shí)間被困在室內(nèi)之后，我們可以期待我們脆弱的生態(tài)系統(tǒng)將在2021年的彩色玻璃標(biāo)志設(shè)計(jì)中得到尊重。

  

正如標(biāo)志設(shè)計(jì)師林登·萊德（Lindon Leader）曾經(jīng)說過的那樣，偉大的設(shè)計(jì)源自簡(jiǎn)潔和清晰。這兩個(gè)優(yōu)點(diǎn)使標(biāo)志設(shè)計(jì)能夠有效地向觀眾傳達(dá)品牌的復(fù)雜身份。這就是為什么許多過去的標(biāo)志潮流都集中在極簡(jiǎn)主義和平面設(shè)計(jì)上。

雖然2021年的logo設(shè)計(jì)師們決不會(huì)放棄這種方法，但他們正尋找在過度簡(jiǎn)化中失去的一些魔力。一個(gè)流行的標(biāo)志設(shè)計(jì)趨勢(shì)是融入微妙的視角。使用基本的繪畫技巧，如線性透視，曲率或縮短，設(shè)計(jì)師能夠創(chuàng)造深度的錯(cuò)覺，而不會(huì)使設(shè)計(jì)復(fù)雜化。

其效果是，標(biāo)志給人的感覺很突出，品牌從頁面上一躍而下，而半平面的設(shè)計(jì)技術(shù)，一直以來都是為設(shè)計(jì)師服務(wù)的，但至今仍然完好無損。

  

形狀是構(gòu)成意象的基石。但是，盡管三角形、正方形和圓形等原始形狀一旦打下基礎(chǔ)，往往就會(huì)被淘汰，但它們純粹的簡(jiǎn)單卻有力量。

2021年的設(shè)計(jì)師們正利用這種力量，用簡(jiǎn)單的線條和形狀制作出標(biāo)志。這種對(duì)形狀極簡(jiǎn)主義的嚴(yán)格遵守給了這些標(biāo)志一種刻意克制的氣氛，允許他們?cè)谄渌胤阶杂砂l(fā)揮，比如在豐富的顏色飽和度上。

這種方法的另一個(gè)特點(diǎn)是，簡(jiǎn)單的分層可以產(chǎn)生一種結(jié)構(gòu)和深度的錯(cuò)覺，這符合我們前面提到的透視圖趨勢(shì)。通過純粹的造型語言，設(shè)計(jì)師能夠創(chuàng)造出易于解析、令人難忘、色彩鮮艷的logo。

  

基于字體的文字標(biāo)記標(biāo)識(shí)有著直截了當(dāng)?shù)拿?，無論好壞。雖然他們使品牌名稱成為整個(gè)標(biāo)志的焦點(diǎn)，因此更令人難忘，但他們沒有留下太多的空間，為創(chuàng)意鋪路。但是2021年的標(biāo)志設(shè)計(jì)師們正在一個(gè)字母一個(gè)字母地改變這種印象。

具體來說，我們看到越來越多的單詞標(biāo)記中的一個(gè)字母被夸大了。這可以是一個(gè)顏色突出的小寫的“i”，或作為一個(gè)突出的筷子形成一個(gè)大寫的“H”。這個(gè)不同的字母不僅創(chuàng)造了一個(gè)吸引眼球的興趣點(diǎn)，它給予品牌最好的選擇：一個(gè)傳統(tǒng)的，基于類型的標(biāo)志，也不怕打破規(guī)則。

  

人們憑直覺尋找其他面孔，這是一個(gè)有據(jù)可查的事實(shí)，這就是為什么肖像畫有助于在設(shè)計(jì)中建立情感聯(lián)系。這些面孔越真實(shí)，越容易辨認(rèn)，聯(lián)系就越深。

因此，2021年更多的標(biāo)志設(shè)計(jì)師開始轉(zhuǎn)向反映不同種族、文化、性別、年齡段等的肖像畫。與媒體過于擁擠的同質(zhì)表現(xiàn)不同，這種方式創(chuàng)造了真實(shí)的印象，有助于人們?cè)谒查g與品牌建立聯(lián)系。這些標(biāo)志可以從簡(jiǎn)單的，平面的人物肖像到詳細(xì)的說明性技術(shù)。

歸根結(jié)底，設(shè)計(jì)師們厭倦了那些讓人感覺不親切的形象。歸根結(jié)底，無論一個(gè)標(biāo)志是在講述品牌背后的人還是品牌服務(wù)的人的故事，人都是關(guān)鍵。

 

  

平衡是標(biāo)志設(shè)計(jì)的基本原則之一，而對(duì)稱也許是其最極端的表現(xiàn)。對(duì)稱的標(biāo)志從中間分開時(shí)，兩邊是相同的。

雖然相同性和可預(yù)測(cè)性似乎是冗余的同義詞，但對(duì)稱設(shè)計(jì)完全是關(guān)于強(qiáng)度的。它們讓我們想起了建筑，無論多么高大復(fù)雜，它們的設(shè)計(jì)都是為了站穩(wěn)腳跟，它們通過完美的對(duì)稱平衡來實(shí)現(xiàn)這一點(diǎn)。

這種原始的對(duì)稱性允許標(biāo)志包含線條藝術(shù)，感覺既不可能復(fù)雜又完美有序。但即使對(duì)稱在幾何設(shè)計(jì)中很常見，我們也看到這種趨勢(shì)在手繪徽標(biāo)中找到了歸宿。無論是設(shè)計(jì)師追求的完美還是實(shí)力，有一點(diǎn)是肯定的：2021年的標(biāo)志建筑是為了經(jīng)得起時(shí)間的考驗(yàn)而建造的。

 

  

雖然logo設(shè)計(jì)師在真實(shí)人物的表現(xiàn)上處于領(lǐng)先地位，但2021年的其他許多人則通過漫畫和夸張的幽默來對(duì)比這一點(diǎn)。我們正在看到越來越多的以插圖為主要內(nèi)容的logo呈現(xiàn)出詼諧，甚至古怪的概念，從玩老鼠的醫(yī)生到華麗的甜甜圈花花公子。

從事舒適或娛樂的企業(yè)希望能讓他們的觀眾放松，而設(shè)計(jì)師們則用散發(fā)著博愛氣息的logo來回應(yīng)。最終，這些異想天開的設(shè)計(jì)讓顧客覺得他們找到了朋友而不是品牌。

  

邏各斯的根源一直是古老的象征，從升起的鳳凰到不朽的女神，再到無所不能的眼睛。就像古代的象形文字一樣，它也是一個(gè)標(biāo)志的目的，通過簡(jiǎn)化的圖形來傳達(dá)信息。

通常，logo尋求創(chuàng)造他們自己獨(dú)特的符號(hào)語言，但在2021年，設(shè)計(jì)師們正在疏導(dǎo)古代符號(hào)的力量。其效果是將人們普遍理解的、經(jīng)典的美德與奮斗品牌的愿景聯(lián)系起來。開始一個(gè)新的企業(yè)是一個(gè)信仰的飛躍，這些象征性的標(biāo)志承載著一個(gè)啟示的承諾。

 

  

 

這意味著運(yùn)動(dòng)跟蹤器、流體形狀、飛濺粒子和動(dòng)作線的增加。對(duì)于那些希望創(chuàng)新的企業(yè)，比如科技品牌，這是一個(gè)標(biāo)志潮流，肯定會(huì)引起轟動(dòng)。它提醒顧客品牌不僅僅是一種產(chǎn)品或服務(wù)：它是一種活的東西。

 

  

隨著每年的標(biāo)志設(shè)計(jì)潮流，我們常常期望找到令人眼花繚亂、革命性和顛覆性的技術(shù)。另一方面，相似的配色方案是學(xué)生設(shè)計(jì)師在第一年的色彩理論學(xué)習(xí)的內(nèi)容。這基本上意味著在色輪上對(duì)彼此相鄰的顏色進(jìn)行配對(duì)，其結(jié)果是創(chuàng)造和諧的科學(xué)方法（代替對(duì)立顏色的對(duì)比）。

雖然類似的配色方案并不一定是新的，但它們?cè)跇?biāo)志設(shè)計(jì)中日益流行可能表明了對(duì)對(duì)比度的排斥。色彩是設(shè)計(jì)師用來影響觀眾情緒的最重要的工具之一。

2021年的標(biāo)志設(shè)計(jì)趨勢(shì)是重塑這個(gè)新的十年的一個(gè)機(jī)會(huì)。從透視技法到簡(jiǎn)單造型再到對(duì)稱性，從極簡(jiǎn)主義到古典主義的復(fù)興，我們未來的理性似乎在追求一種純粹。

轉(zhuǎn)自：站酷

作者：Brain斌 

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

軟件熟練度屬于“器”的范疇，對(duì)主要靠作品集吃飯的設(shè)計(jì)師來說很難對(duì)外體現(xiàn)。但是我們不能說它不重要，軟件的熟練度依然是設(shè)計(jì)是否能夠產(chǎn)出的重要因素之一??！

今天結(jié)合我自己之前的經(jīng)驗(yàn)，來談?wù)凙I中的一些相對(duì)比較冷門的小干貨（很多是我最近才get到的- -），但愿這些快捷操作能幫助你進(jìn)行產(chǎn)出～～

大綱：

• 快速調(diào)節(jié)參數(shù)
• 平行四邊形圓角
• 快速平滑縮放
• 手柄波浪線
• 路徑快速消除
• 填充快速消除

快速調(diào)節(jié)參數(shù)

AI中存在很多參數(shù)需要我們自己去調(diào)節(jié)。比如一個(gè)形狀的寬高圓角，對(duì)形狀進(jìn)行變換的旋轉(zhuǎn)、扭曲等參數(shù)等等?？赡芎芏嗯笥迅乙粯?，要么一個(gè)個(gè)手動(dòng)輸入要么通過拖動(dòng)滑塊進(jìn)行調(diào)節(jié)。

這么做造成的問題有兩個(gè)，一個(gè)是交互的繁瑣，一個(gè)是參數(shù)調(diào)節(jié)顆粒度過細(xì)，在進(jìn)行往返調(diào)試時(shí)需要耗費(fèi)大量的重復(fù)工作量。對(duì)于我們時(shí)間寶貴的設(shè)計(jì)師來說這種方法簡(jiǎn)直太弱了好嘛??！

不過這些完全可以通過一個(gè)方法來解決——快捷鍵調(diào)節(jié)即可！結(jié)合shift、cmd（即win系統(tǒng)的ctrl）以及上下方向鍵完完全全地提升效率。具體的方法如下：

• 上下方向鍵：1px為增量進(jìn)行調(diào)節(jié)
• shift+上下方向鍵：以10px為增量調(diào)節(jié)
• cmd+上下方向鍵：以0.1px為增量進(jìn)行調(diào)節(jié)

比如對(duì)形狀的變換，我們就可以使用上下方向鍵1px微調(diào)，結(jié)合shift以10px數(shù)調(diào)。鍵入位置通過tab切換。

再比如變換效果的參數(shù)，同樣可以使用這種方法快速地調(diào)試，全程只需要快捷鍵操作即可。而且這種一邊敲擊鍵盤一邊實(shí)時(shí)預(yù)覽的趕腳也讓人心情莫名得順暢！

這種方法也可以迅速地讓水平和垂直數(shù)值保持一致，比我以前的滑塊拖動(dòng)、數(shù)值輸入的操作好太多了。

順帶一提，sketch參數(shù)數(shù)值調(diào)節(jié)也支持這種快捷操作哦。

平行四邊形圓角

我們?cè)谡{(diào)節(jié)形狀的圓角時(shí)，一般情況有兩種方法，要么在菜單欄or變換工具中數(shù)值調(diào)整，要么直接在角落的圓角點(diǎn)上拖動(dòng)。

但是對(duì)于平行四邊形這種四個(gè)頂角度數(shù)不一樣的形狀，即使四個(gè)圓角大小是一致的，由于銳角和鈍角的存在導(dǎo)致圓角看起來并不一樣。

這時(shí)候，外觀效果就派上用場(chǎng)了。

我們?cè)谛Ч?風(fēng)格化中找到圓角選項(xiàng)，為平行四邊形添加一個(gè)圓角外觀效果。

風(fēng)格中找到圓角選項(xiàng)就可以自己設(shè)置。這里給一個(gè)和剛剛一樣的圓角10px。

最后（右圖）得出的四個(gè)圓角看上去明顯比之前的方案更加一致。

另外，這種外觀的好處就是，后期隨時(shí)可以在外觀中編輯！

快速平滑縮放

我們更多時(shí)候縮放是滾輪縮放，但是這樣的縮放的顆粒度太大，尤其在小屏電腦上想要定在某個(gè)合適的窗口大小比較麻煩。

這時(shí)候我們可以利用快捷鍵Z激活縮放功能，然后通過左、右拖曳的手勢(shì)進(jìn)行快速而平滑的縮放操作。我們可以輕易定格在我們想要的窗口大小。一開始可能很多朋友和我一樣習(xí)慣上下縮放，但是ai里的縮放并不是上下，而是左右。

手柄波浪線

一般我們畫波浪線是通過扭曲與變換中的波紋效果來變換。

但是我們也可以使用鋼筆來直接畫。

向一個(gè)方向拖拽生成手柄（不知道有沒有朋友和我一樣用鋼筆工具都有點(diǎn)一下去繪制形狀的毛病），然后在合適的位置再拖拽一次即可繪制出波浪線。在對(duì)精準(zhǔn)度要求不高的情況下完全可以采用這種辦法，方便快速。

路徑快速消除

在以往，我在進(jìn)行路徑消除操作（比如繪制一些斷線icon時(shí)），通過這樣的步驟，添加錨點(diǎn)工具在路徑上添加兩個(gè)錨點(diǎn)，然后直接選擇工具選中錨點(diǎn)間的路徑刪除。拜托，都2120年了，別用這么古老的方式了好嘛！?。ê孟氤藭r(shí)光機(jī)回去拯救年少迷茫的自己）

但其實(shí)壓根不需要這么麻煩，一個(gè)工具就可以迅速解決，而且可以連續(xù)消除！

這個(gè)工具就是路徑橡皮擦工具，說實(shí)話知道這個(gè)工具后我再也回不去了。

只需要激活它，你就可以在任意的路徑中像使用橡皮擦那樣，迅速地消除你想消除的地方。另外，我提前給這個(gè)工具設(shè)置了E這個(gè)快捷鍵，以便我能迅速調(diào)用它進(jìn)行路徑消除工作。

填充快速消除

路徑橡皮擦用在填充的色塊中同樣只能消除路徑，但我們想要消除色塊時(shí)，則可以用到另外一個(gè)工具——橡皮擦工具。

shift+E直接調(diào)用到它，按住shift即可直接在填充色塊中進(jìn)行切割。而且最后被切割出的圖形都是互相獨(dú)立的閉合形狀。

當(dāng)我們按住alt后，就可以隨意地繪制出不同寬度的矩形進(jìn)行切割，相比形狀生成器或布爾運(yùn)算更加方便點(diǎn)。

最后

一點(diǎn)點(diǎn)平時(shí)積累的ai小干貨，但愿能幫到你！！

文章來源：優(yōu)設(shè)網(wǎng)     作者：轉(zhuǎn)行人的設(shè)計(jì)筆記

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)