界面配色

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)常使用的配色范圍。為什么他配出來的顏色就很吸引人，長時(shí)間看眼睛也不會太累？下面先欣賞一下小D（Dea_n）的設(shè)計(jì)作品。

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

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

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

難道只是偶然？當(dāng)時(shí)我也請教過小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ī)范中對配色也有相應(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)慢慢成為一種趨勢。

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

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

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

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

紅色較之前變得更加明亮，同時(shí)圖標(biāo)紅色背景由之前的純色改為輕微的紅色漸變填充。新的紅色著重考慮了用戶長時(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ū)域。其中黃色和紅色的色域范圍相對較少，完全符合 PS 拾色器里面的色域范圍。

2. RGB

RGB 是計(jì)算機(jī)熒光屏顯示顏色的色彩方式，它們是由 R、G、B 三種發(fā)光質(zhì)通過加光混合產(chǎn)生的。RGB 色彩模式是一種加色模式，將紅光、綠光和藍(lán)光以不同的比例相加可以合成各種各樣的色光。R、G、B 三種顏色各能產(chǎn)生 2 的 8 次冪，即 256 級不同等級亮度的顏色。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 的「拾色器」對話框上會顯示一個(gè)帶感嘆號的三角形警告標(biāo)志，表示這些顏色超出 CMYK 的色域。即使設(shè)計(jì)了比較鮮艷的顏色，如果超出了 CMYK 印刷顏色的色域，計(jì)算機(jī)就會用一個(gè)接近它的較灰暗的顏色去頂替它?？梢姶蟛糠?CMYK 印刷顏色的色域小于 RGB 屏幕顏色的色域。

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

其他的我們還有一個(gè)方法去驗(yàn)證。就是在 PS 里面新建顏色模式為 CMYK 的文件，打開拾色器界面，把顏色調(diào)到右上角改變色相值的 0-360度 的范圍。色相在 38-58 度的黃色區(qū)域?qū)υ捒蛏喜粫@示帶感嘆號的三角形警告標(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ì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ī)淼氖桥渖韶浵盗兄谌冢?！超級干貨！?

前兩期地址傳送門：

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

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

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

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

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

色板 顏色組合 

Yellow & Black

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

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

比如以下這些案例：

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

推薦組合色板①：

推薦組合色板②：

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

色板 顏色組合 

Blue & Black

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

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

比如以下幾組案例：

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

推薦組合色板③：

推薦組合色板④：

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

色板 顏色組合 

Red & Blue

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

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

比如下面這些案例：

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

推薦組合色板⑤：

推薦組合色板⑥：

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

色板 顏色組合 

Yellow & Black

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

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

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

推薦組合色板⑦：

推薦組合色板⑧：

5）尊顯高貴-黑金色 

色板 顏色組合 

Yellow & Black

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

比如以下這些案例

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

推薦組合色板⑨：

推薦組合色板⑩：

6）其它色彩組合 

色板 顏色組合資源下載 

Yellow & Black

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

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

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

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

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)

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

色彩基礎(chǔ)知識

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

1. 色彩常識

原色

所有的色彩都源自“紅黃藍(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)的亮度層級去判斷。所以人們后來基于 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)色彩的印象。

• 知識點(diǎn)：

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

2. 色彩三屬性

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

色相（Hue）

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

飽和度（Saturation）

飽和度是色彩的純度，他表示顏色中所含有色成分的比例。增加飽和度，色彩會變得更強(qiáng)烈、鮮艷生動；降低飽和度，顏色中灰色成分越大，色彩會變得暗淡乏味。當(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)好的對比效果。明度達(dá)到 100%時(shí)，色彩就會變成白色（黑白模式下）；明度是 0%時(shí)，就會變成黑色。色彩的明度變化往往會影響到純度，例如藍(lán)色加入黑色以后明度降低了，同時(shí)純度也降低了；如果藍(lán)色加入白色則明度提高了，純度卻降低了。

3. 色彩的搭配

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

單色

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

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

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

鄰近色

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

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

分裂互補(bǔ)色

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

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

對比色

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

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

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

四元色搭配

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

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

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

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

固有色

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

光源色

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

環(huán)境色

物體周圍環(huán)境的顏色就是環(huán)境色。環(huán)境色對物體的影響非常大，如在紅色背景下的白色物體，由于光源打到紅色背景上的背景反射光也會“染”到白色物體上，因此白色物體的部分表面會蒙上一層淡紅色的色彩。所以，設(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]對應(yīng)[純黑—純白]；A顏色表示從綠色到紅色的范圍，取值[-128—+127]對應(yīng)[綠—洋紅]；B表示從藍(lán)色到黃色的范圍，取值[-128—+127]對應(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)文字；純白用于深色按鈕文字。

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

Hsl

HSL 色彩模式是工業(yè)界的另一種顏色標(biāo)準(zhǔn)，是通過對色相(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°洋紅，它們在色相環(huán)上按照 60°圓心角的間隔排列。

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

我們來做一個(gè)基于 HSL 的調(diào)色實(shí)踐。你可不可以快速說出“海棠紅”所對應(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)，不會這么強(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 是多么的友好。

• 知識點(diǎn)：

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

Yuv

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

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

色彩心理學(xué)

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

雖然紅、藍(lán)是受到最普遍喜愛的顏色（通過對 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)流行的主要色彩。

白色

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

灰色

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

紅色

紅色代表著喜慶、熱情、歡樂、斗志、奔放、自信，是一種充滿能量的顏色。這是最醒目和強(qiáng)勢的顏色，一登場即獲得全場的關(guān)注，甚至能引起一些生理反應(yīng)，例如心跳呼吸加快等。紅色最能烘托氣氛，在中國傳統(tǒng)節(jié)日里都使用熱鬧的紅色來裝飾，因此也就不難理解每逢佳節(jié)各大電商應(yīng)用活動頁一片紅，為的就是發(fā)沖動，引人消費(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)控制，如高飽和度的綠色也會令人興奮，引起注意。

青色

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

藍(lán)色

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

紫色

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

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

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

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

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

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

尊重文化差異

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

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

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

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

歷史對配色的影響

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

△ 中國傳統(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)動類應(yīng)用的界面使用女性色彩，結(jié)果可想而知。

△ 男女最喜歡的顏色

△ 男女最不喜歡的顏色

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

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

當(dāng)人們談?wù)撋r(shí)，他們通常指的是不能感知某些色彩。 大約 8％的男性和 0.5％的女性患有不同程度的色盲——他們在識別部分或者全部顏色時(shí)有困難。面對如此龐大的特殊受眾，設(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)容。需要注意的就是不要簡單認(rèn)為色盲就是簡單的分不清紅綠，色盲用戶對色彩的感受差異不僅僅是單獨(dú)某種的問題，是某些范圍色光的敏感程度問題。

有趣的事實(shí)：Facebook 的標(biāo)志和不怎么討喜的藍(lán)色配色是特意挑選的。因?yàn)?FB 創(chuàng)始人馬克·扎克伯格是紅綠色盲，他對藍(lán)色的識別是最好的。他曾說過，“藍(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í)間以內(nèi)，流行色的趨勢變化，對于用色也同樣存在影響。這種影響在時(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)用戶群體有著清晰的地域或者性別偏向，你可以有目的地利用這些知識來規(guī)避設(shè)計(jì)陷阱，更好地發(fā)揮色彩本身的功能和優(yōu)勢。如果受眾廣泛，則可以盡量使用通用性更強(qiáng)的色彩來進(jìn)行設(shè)計(jì)。

• 知識點(diǎn)：

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

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

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

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

閱讀文章 >>

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

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

人腦對于色彩的記憶度要高于形態(tài)，即一個(gè) App 給用戶留下深刻印象的往往是界面的色彩。例如說到支付寶，我們可能想不起它的首頁長什么樣子，標(biāo)簽欄圖標(biāo)是那些，但能馬上記起它的界面主色是藍(lán)色。因此運(yùn)用好色彩對 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)他們在用色的時(shí)候有一部分區(qū)域是不會使用的，也就是我們常說的“配色禁區(qū)”。當(dāng)然，這里的“禁區(qū)”是帶雙引號帶的，并沒有什么絕對的禁區(qū)，只是說這些顏色不易控制，在連基礎(chǔ)色都沒有駕馭好之前，盡量少碰。

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

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

• 知識點(diǎn)：

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

色調(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)色（對比色）貫穿 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)品的需要可能會使用更多數(shù)量的色彩，但切記不可超過 7 種色相（注意不是 7 種色值），每個(gè)色相還可以運(yùn)用其飽和度、明度的變化分解出豐富的色彩搭配。

美團(tuán)外賣的首頁 20 個(gè)功能入口大圖標(biāo)的背景用了 9 種不同的色彩，每種色彩又包含一種低飽和度色彩進(jìn)行彩色漸變，但并沒有顯得雜亂，而是呈現(xiàn)一種年輕時(shí)尚的律動感。這是因?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)，會讓界面看上去更柔和自然。另外，純黑色還會與白色產(chǎn)生強(qiáng)烈的對比度，看久了會使人疲勞，讓用戶產(chǎn)生焦慮的情緒。MONO 的導(dǎo)航欄并不是深黑色，而是加入了藍(lán)色的低飽和度藍(lán)黑色，它的界面背景也是加入了藍(lán)色的的淺色，這樣就不會讓界面看上去死氣沉沉的。

遵循色彩心理學(xué)

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

良好的可讀性

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

從大自然中獲得靈感

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

將 UX 顏色與品牌相匹配

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

△中國區(qū)或美國區(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 可能會使用傳統(tǒng)的藍(lán)色作為基礎(chǔ)配色，但是，如果能夠加入檸檬綠作為強(qiáng)調(diào)色，會顯得獨(dú)特很多。

冷暖色對比搭配

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

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

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

強(qiáng)交互色彩

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

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

保證良好的可讀性

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

UI 中的陰影

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

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

• 知識點(diǎn)：

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

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

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 的色彩搭配能直觀、快速的反饋到用戶的大腦中形成記憶思維。好的色彩搭配可以加深用戶對產(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)、注冊登陸全都使用了這種純凈的主色，使界面看上去非常和諧一致。

輔助色

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

在微信讀書中，綠色、橙色、梅紅、藍(lán)紫色是除了主色以外使用最多的顏色，它們都是輔助色，主要用于功能圖標(biāo)和欄目分類上。雖然輔助色看起來有點(diǎn)多，但其實(shí)都是從主色的鄰近色和對比色（及其鄰近色）中提取出來的搭配，而且只用在頁面中很少的地方，這種搭配技巧既可以豐富色彩的搭配，傳遞出年輕活躍的產(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)烈的對比。一般點(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)對比的互補(bǔ)色的點(diǎn)綴色可以快速引起用戶注意力。

背景色

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

• 知識點(diǎn)：

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

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

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

3. 迷人的漸變色

不同于單一色彩，漸變色不屬于任何色彩，它營造出千變?nèi)f化的視覺效果，卻又不會增加視覺負(fù)擔(dān)。相較于單一的色彩，漸變色的復(fù)合性質(zhì)讓它在界面設(shè)計(jì)中具有更強(qiáng)的視覺沖擊力，有助于快速搶占視線。如今，這種的色彩正逐漸成為一種潮流，究其原因是目前大量的扁平風(fēng)格造成 UI 設(shè)計(jì)的嚴(yán)重同質(zhì)化，人們需要追求更加個(gè)性的視覺語言來滿足日益增長的設(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)簽上都使用了水平漸變設(shè)計(jì)手法，使產(chǎn)品看起來更年輕化。

• 知識點(diǎn)：

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

垂直漸變

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

角度漸變

角度漸變通常有對角漸變和多角度漸變。有角度的漸變相比水平和垂直漸變，它的使用場景更廣，如圖標(biāo)背板、啟動頁、注冊登錄頁、標(biāo)簽等。想讓界面更加絢麗、動感和迷人，這時(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)鍵元素放在光源中心就會成為主角。通常被運(yùn)用到大背景上，如啟動頁、引導(dǎo)頁等。Solar 天氣應(yīng)用的背景就是徑向漸變，光源擴(kuò)散的效果營造出一種夢幻般的美感。

和諧的漸變色

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

• 知識點(diǎn)：

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

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

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

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

打開 dribbble，每一幅作品預(yù)覽頁左下角都有一份自動生成的配色板，很多同學(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 的配色，對提升審美也有很大幫助。

△ 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 從生活場景中提煉出 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)色板生成工具會為你生成完整的色板。

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

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

深/淺背景上的文字

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

背景

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

5. 配色工具推薦

顏色是一個(gè)很難掌握的概念-因?yàn)橛袩o限多種可能的顏色組合，對于很多設(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)整。用法很簡單，點(diǎn)擊顏色塊上的小三角確定基礎(chǔ)色，就會自動生成 5 個(gè)基于你所選色彩規(guī)則的配色方案，拖動下方的顏色條時(shí)相應(yīng)的也會改變配色方案。如果沒有靈感可以通過頂部導(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)的配色方案。右上角可以切換淺色模式和深色模式的對比。

△ 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ù)，切忌生搬硬套。

• 知識點(diǎn)：

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

同時(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é)作請?zhí)崆氨３稚士臻g配置的統(tǒng)一性。如果有需要針對廣色域色彩空間做項(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ì)文檔將會默認(rèn)采用我們的設(shè)置作為默認(rèn)的色彩空間，不用每次新建文檔都單獨(dú)設(shè)置一次。

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

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

寫在最后

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

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

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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)容過長并知識點(diǎn)過多，請泡杯枸杞觀看。

一、關(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)營設(shè)計(jì)與品牌插畫組件庫。（注：按照以下步驟設(shè)計(jì)，插畫手殘黨也能輕松學(xué)會哦?。?

 

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

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

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

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

 

02-使用效率：

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

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

 

03-拓展力：

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

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

 

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

我認(rèn)為UI設(shè)計(jì)師是最應(yīng)該去建立的，在我們線上接觸的banner、功能頁、啟動頁、海報(bào)等等，很多都可以用到插畫去設(shè)計(jì)，不管是針對于在公司還是針對于自己私下接私活都是一大利器，可以讓你的完成甲方的任務(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)、效率高。那么接下來我會圍繞著這三點(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)造簡單常規(guī)，符合真實(shí)人物比例，有利于后期的組件改造。（第一個(gè)插畫組件最好使用常規(guī)比例，后面會提到為什么要這樣做）

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

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

 

第二步：

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

做人物基礎(chǔ)動態(tài)可以讓我們在后面的插畫設(shè)計(jì)上少花很多時(shí)間，例如工作中要用到跑步動態(tài)時(shí)，那么就可以直接用人物基礎(chǔ)動態(tài)里面的跑步動作進(jìn)行添加人物細(xì)節(jié)，會節(jié)省很多工作時(shí)間，提升工作效率。

 

第三步：

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

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

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

第四步：

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

 

1/發(fā)型：

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

2/膚色：

做膚色的變化最主要原因是讓插畫適應(yī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大塊可替換服裝組件，分為別：上身、下身、鞋子。例如上身可以替換為短袖、長袖、衛(wèi)衣、背心等，同時(shí)在它的下一個(gè)層級還可以替換服裝紋理、服裝動作、服裝顏色。

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

第五步：

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

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

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

 

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

 

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

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

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

適應(yīng)力強(qiáng)是指我們的插畫系統(tǒng)可以匹配大多數(shù)的產(chǎn)品，因?yàn)閭€(gè)人插畫組件庫是以設(shè)計(jì)師身份做的，我們會面臨各類產(chǎn)品，而各類產(chǎn)品風(fēng)格都會有不同的變化，要解決這一點(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)重組對比圖，如下：

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

 

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

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

 

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

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

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

 

方法三：改變?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ī)范插畫組件庫（層級詳解），提升應(yīng)用效率

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

 

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

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

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

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

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

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

 

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

 

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

 

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

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

 

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

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

 

3/動物組件庫

 

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

 

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

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

接下來看看正確的案例：

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

 

4/輔助元素組件庫

 

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

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

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

 

5/背景元素組件庫

 

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

 

組合場景背景：

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

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

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

 

紋理背景：

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

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

 

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

 

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

 

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

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

 

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

 

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

 

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

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

 

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

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

 

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

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

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

 

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

 

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

如果你做的運(yùn)營內(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)營設(shè)計(jì)常用模塊組件案例、重組技巧以及品牌插畫組件庫的建立我會另外抽時(shí)間給大家總結(jié)。（做案例太費(fèi)時(shí)間希望大家諒解）

 

參考資料提?。?/span>

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

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

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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è)問題，不知道鐵子們在往年參加設(shè)計(jì)評審的時(shí)候，有沒有總被老板 diss 設(shè)計(jì)稿里“太空了” “不夠飽滿” 這些個(gè)問題呢？

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

NO.1

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

1.瑞士風(fēng)格

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

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

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

2.擬物風(fēng)格

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

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

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

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

NO.2

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

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

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

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

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

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

NO.3

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

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

總結(jié)一下

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

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

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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é)三原色為相加混色（可以理解為光的疊加），混合后顏色的明度提高，三色混合即為白色。

相反，顏料三原色采用相減混色（可以理解為光的吸收），混合后顏色的明度和純度都會下降，三個(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ī)呢？它的油墨不會自己發(fā)出光線。因而只有采用吸收特定光波而反射其它光的顏色，所以需要用減色法來解決。

運(yùn)用場景：

• 光學(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. 色相

色相指的是這些不同波長的色的情況。波長最長的是紅色，最短的是紫色。

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

2. 明度

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

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

3. 飽和度

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

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

顏色搭配

1. 單色

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

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

產(chǎn)品案例：MUJI

2. 互補(bǔ)色

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

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

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

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

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. 對比色

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

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

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

1. 光源色

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

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

2. 固有色

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

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

3. 環(huán)境色

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

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

色彩格式

1. RGB

RGB 色彩模式是工業(yè)界的一種顏色標(biāo)準(zhǔn)，是通過對紅(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)重、高級。它是所有顏色中最有力量的，黑色+金色凸顯高貴感，黑色+紅色凸顯時(shí)尚感。

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

2. 白色

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

3. 紅色

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

4. 藍(lán)色

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

5. 黃色

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

6. 綠色

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

7. 紫色

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

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

1. 數(shù)量

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

2. 統(tǒng)一性

每一個(gè)產(chǎn)品都有自己的主色調(diào)，所有的頁面的色彩搭配都要和主色調(diào)呼應(yīng)，主色調(diào)的合理運(yùn)用直接關(guān)系到用戶對產(chǎn)品的信任值。同一組件、場景中，顏色使用要保持一致，切忌“自由發(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. 顏色禁忌

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

5. 文字中的使用

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

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

6. 卡片陰影

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

配色網(wǎng)站推薦

1. Wbgradients

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

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

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)站隨意選色值，它自動換算出已選色值的 32 種明度色值，簡單易用。

4. Eva Design System

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

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

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ì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ì)分。它通常對應(yīng)著產(chǎn)品設(shè)計(jì)中的通用樣式及構(gòu)成組件的最小顆粒。而顏色，作為整個(gè)設(shè)計(jì)系統(tǒng)中極為重要的原子之一，在心智模型中占據(jù)了關(guān)鍵的地位。

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

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

大綱走起：

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

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

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

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

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

目前CROV DS業(yè)務(wù)日益繁雜，但是除了品牌色之外，輔助色的定義過于隨意。而且隨著業(yè)務(wù)場景的擴(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. 對于設(shè)計(jì)師

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

增加決策

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

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

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

缺乏秩序和邏輯性

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

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

難以復(fù)用

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

而如果設(shè)計(jì)師提前定義好一套色彩體系，一方面只需要在對應(yīng)的色板中選擇即可，大大減少了設(shè)計(jì)決策。另一方面色彩體系所提供的不同色彩梯度也便于各個(gè)需求、業(yè)務(wù)場景的復(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è)場景中，具有非常好的延展性。

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

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

這里再簡單普及下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ù)特征，使得對應(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ù)雜的前后臺業(yè)務(wù)場景，需要額外搭配各類型的輔助色。我們想要提取24類色相，所以直接通過360/24得出了色環(huán)中每類色相的基本角度15°。

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

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

3. 品牌色同色系配色

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

而同色系配色的輸出則遵循了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è)色階對應(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è)顏色對應(yīng)的HSB參數(shù)即（250，84，80）、（250，88，60），剩下的所有顏色以此類推。

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

4. 定義輔助色

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

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

結(jié)果見下：

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

類似色

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

中差色

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

對比色

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

互補(bǔ)色

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

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

5. 感官明度校正

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

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

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

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

6. 輔助色的同色系配色

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

7. 定義文本色

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

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

WCAG無障礙測試

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

最后

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

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

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)測代表了設(shè)計(jì)環(huán)境的變化。雖然去年的趨勢集中在通過新技術(shù)進(jìn)行革新，但2021年標(biāo)志趨勢中的一個(gè)共同主題似乎是限制條件下的創(chuàng)新。過去的一年可能在很多方面限制了世界，但是2021年的標(biāo)志設(shè)計(jì)師們還都在繼續(xù)努力著。

• 彩色玻璃

• 透視圖

• 簡單幾何

• 發(fā)散字母

• 真實(shí)寫真

• 原始對稱

• 古怪的人物

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

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

• 類似配色方案

 

標(biāo)志設(shè)計(jì)作為一項(xiàng)相對現(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)志趨勢經(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ì)源自簡潔和清晰。這兩個(gè)優(yōu)點(diǎn)使標(biāo)志設(shè)計(jì)能夠有效地向觀眾傳達(dá)品牌的復(fù)雜身份。這就是為什么許多過去的標(biāo)志潮流都集中在極簡主義和平面設(shè)計(jì)上。

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

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

  

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

2021年的設(shè)計(jì)師們正利用這種力量，用簡單的線條和形狀制作出標(biāo)志。這種對形狀極簡主義的嚴(yán)格遵守給了這些標(biāo)志一種刻意克制的氣氛，允許他們在其他地方自由發(fā)揮，比如在豐富的顏色飽和度上。

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

  

基于字體的文字標(biāo)記標(biāo)識有著直截了當(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í)的印象，有助于人們在瞬間與品牌建立聯(lián)系。這些標(biāo)志可以從簡單的，平面的人物肖像到詳細(xì)的說明性技術(shù)。

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

 

  

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

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

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

 

  

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

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

  

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

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

 

  

 

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

 

  

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

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

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

轉(zhuǎn)自：站酷

作者：Brain斌 

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ì)師來說很難對外體現(xiàn)。但是我們不能說它不重要，軟件的熟練度依然是設(shè)計(jì)是否能夠產(chǎn)出的重要因素之一??！

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

大綱：

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

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

AI中存在很多參數(shù)需要我們自己去調(diào)節(jié)。比如一個(gè)形狀的寬高圓角，對形狀進(jìn)行變換的旋轉(zhuǎn)、扭曲等參數(shù)等等。可能很多朋友跟我一樣，要么一個(gè)個(gè)手動輸入要么通過拖動滑塊進(jìn)行調(diào)節(jié)。

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

不過這些完全可以通過一個(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é)

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

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

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

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

平行四邊形圓角

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

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

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

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

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

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

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

快速平滑縮放

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

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

手柄波浪線

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

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

向一個(gè)方向拖拽生成手柄（不知道有沒有朋友和我一樣用鋼筆工具都有點(diǎn)一下去繪制形狀的毛?。?，然后在合適的位置再拖拽一次即可繪制出波浪線。在對精準(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ì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)