今天給大家帶來的是如何建立設計師個人的插畫組件庫，因內容過長并知識點過多，請泡杯枸杞觀看。
一、關于個人插畫組件庫的3大疑問點：
1、為什么要建立個人插畫組件庫？
其實最主要目的是為了給自己的插畫提供一個設計軸心，我們可以圍繞著這個軸心創作出更具有效率規范的插畫內容，演變更多的插畫風格，讓我們使用插畫時變得游刃有余，提升率的設計輸出，衍生更多的組件化運營設計與品牌插畫組件庫。（注：按照以下步驟設計，插畫手殘黨也能輕松學會哦?。?
2、品牌（產品、項目）插畫組件庫與個人插畫組件庫的區別？
01-規范區別：
品牌插畫組件庫：組件品牌插畫庫前會做很多細致的規范，如：顏色規范/情景規范/光線規范/關節細節處理/景別元素處理等等；
個人插畫組件庫：為了讓我們的插畫更具有靈活性，所以在做個人插畫組件庫時不會做太多的規范，反而為了插畫的衍生要更注重人物構造、比例、小組件等等，目的就是為了成立個人插畫軸心。（注：個人插畫軸心是針對于第一個插畫系統的原型，我們后面的插畫風格衍生都會參照第一個插畫系統的原型，后面會給大家詳細講解）
02-使用效率：
品牌插畫組件庫：使用更加，拖入即可更換組件使用；
個人插畫組件庫：因為我們采用的是不斷迭代式做法，所以在剛建立個人插畫組件庫時，我們的組件替換效率是比較低的，但是在逐漸迭代中，我們的使用效率會逐步提升。
03-拓展力：
品牌插畫組件庫：因為有很多規范的約束，所以拓展力偏弱，不過針對于自己的品牌已經足夠了，它本身就是為了自己的品牌服務的；
個人插畫組件庫：因為從我們插畫組件庫的層級分區來看本來就是為了衍生拓展，所以拓展力非常強，不僅可以衍生出相同類型的插畫風格，還可以衍生出不同類型的插畫形勢，甚至可以以個人插畫組件庫為基礎創建單獨的運營設計組件庫，或者升級為品牌插畫組件庫。
3、個人插畫組件庫哪些人最應該去建立？
我認為UI設計師是最應該去建立的，在我們線上接觸的banner、功能頁、啟動頁、海報等等，很多都可以用到插畫去設計，不管是針對于在公司還是針對于自己私下接私活都是一大利器，可以讓你的完成甲方的任務，更大程度保證設計的統一性以及輸出的質量。（相信大家都遇到過到處找插畫素材拼湊banner的時候吧，有了個人插畫組件庫就不用愁了）
當然除了UI設計師還有插畫設計師、平面設計師、美工也都可以去建立插畫組件庫，不過具體還是要看每個人所接觸的不同設計內容，有些設計師的設計內容很少接觸到插畫部分，或者很少接觸到可以組件化的插畫（比如材質復雜、偏手繪插畫），所以就沒有必要去建立插畫組件庫。
二、如何建立個人插畫組件庫？
想要建立個人插畫組件庫就要從它的本質特點出發去考慮，個人插畫系統歸納下來一共有三大特點：可復用、適應力強、效率高。那么接下來我會圍繞著這三點來闡述該如何制作UI設計師個人的插畫系統。
1、可復用性方向出發設計
可復用性是做插畫系統的一個基礎，如果不能解決可復用問題，那么做個人插畫系統根本沒有任何意義。
如果想要達到插畫可復用性，我們就要把插畫內容進行不同的拆分，在它可替換的部分都作為一個復用樣式，讓它可以更換不同的組件，那么我的解決方案有五步：
第一步：
設定基礎人物組件（肢體細節、型體比例），規范組件內容。如果你是第一次做人物組件，可以多在網上找一些可參考內容：
下圖是我做的一個基礎人物組件案例：
從人物組件上面來看我一共把它們分為了9個小件，它們分別為：頭部、上身、上臂、前臂、手掌、臀部、大腿、小腿、腳掌。
從人物比例來看，男性比例為10a，男性略高，上身寬大，整體壯碩；而女性比例為9a，稍矮于男性，纖細苗條。不管是男性還是女性整個身體構造簡單常規，符合真實人物比例，有利于后期的組件改造。（第一個插畫組件最好使用常規比例，后面會提到為什么要這樣做）
在人物組件上的劃分并不是固化的，你可以把它細化分為9個部分，也可以分為7個部分，如果分為7個部分就把上臂與前臂統一融為手臂，大腿與小腿統一融合為腿部，到底要怎么去進行組件化，還是要取決于自己設計的插畫人物特性。
除了男性、女性外也可以建造更多的人物進來，例如老人、小孩、嬰兒...人物越多，后續的延展空間也越大，前期為了更快的制作插畫組件庫，可以先建立1到2個人物，后續可以逐步完善迭代。
第二步：
為了后期人物的動態延展，我們可以用人物組件制定一些高頻的人物基礎動態，例如標準站姿、坐姿、跑動等，以便于我們插畫的延展，圖示如下：
做人物基礎動態可以讓我們在后面的插畫設計上少花很多時間，例如工作中要用到跑步動態時，那么就可以直接用人物基礎動態里面的跑步動作進行添加人物細節，會節省很多工作時間，提升工作效率。
第三步：
有了人物組件的基礎，我們就可以開始設計插畫的風格。
在設計前我們可以多參考一下別人的插畫風格，這里所說的風格主要是指插畫的處理方式，比如：顏色的選擇、表情的處理、衣服材質的處理、曲線直線的選擇等。
我們需要注意的是建立第一個插畫系統時可以先做一個風格簡單的，不僅容易調節組件也有利于后期的風格衍生，以下是我為人物添加的簡單基礎風格（ 特點：純色/完全按人物組件貼合設計/無漸變）：
第四步：
設計人物組件（可以讓你的插畫在不同的場景應用不同的動作/服裝/表情/膚色等）
1/發型：
在發型上面我們可以進行一些人物的區分，可以適用于不同的場景，例如：男性第一個適用于公司場景，第二個適用于學生，第三個適用于軍人...
2/膚色：
做膚色的變化最主要原因是讓插畫適應于國際化，在不同的場景中可以加入不同膚色的人物。
3/表情：
表情是為了更好的體現出人物在環境中的狀態，如：領取紅包插畫，人物的表情就應該是開心或者大笑。
4/角度：
在插畫的角度上，我們采用了最常用：正面、半側、正側，讓它在插畫中的適應力變得更強。
5/紋理：
我們目前設計了6個基本紋理，基本紋理不僅可以設定于服裝中，還可以設定于輔助元素以及背景中。
6/服裝：
在整個人物組件中，分為3大塊可替換服裝組件，分為別：上身、下身、鞋子。例如上身可以替換為短袖、長袖、衛衣、背心等，同時在它的下一個層級還可以替換服裝紋理、服裝動作、服裝顏色。
結合以上的人物組件我們就可以組合出各種不同的動作，如下：
第五步：
設計通用組件庫：
通用組件庫中的元素最開始要用黑白灰來表達，因為在不同的場景中元素的運用也有很大差異，例如花盆作為近景元素會多許多細節，作為遠景元素可能只是作為線條來點綴，這些表達方式我們可以在日后使用過程中添加到它的子級庫即可，這樣可以讓我們在使用組件庫時更加靈活，也有利于我們迭代組件庫，后面會逐一的講解。
這5個步驟下來我們的可復用性插畫就做好了，那么接下來看看運用效果：
我們可以看到以下4個場景，運用到了不同的景別處理方式，例如：第一組為背景漸變；第二組背景則采用了大面積的純色；第三組背景用線性表達；第四組則用淺色面表達。
這也是與品牌插畫組件庫的很大區分點，雖然都是可復用性插畫，但是品牌插畫組件庫大部分是使用現有的、具有規范的，而我們所做的個人插畫組件庫可以用同一個輔助元素增添不同的插畫表達形式，不斷迭代子級，迭代的子級越多它的內容選取性就越高，后續就可以直接拖入使用，比如圖4中的植物就有2種狀態，第一種是顯示部分顏色，第二種則直接為灰色。（注：后面會詳細講解）
以下活動頁中，背景元素也可以運用同樣的方法，在我們的背景組件庫中調取想要的單個插畫元素，把它們組合放入活動頁背景中，進行再次調色得到不同的背景組合，以下三種背景組合都可以相互替換使用。
2、讓你的插畫具有極強的適應力
適應力強是指我們的插畫系統可以匹配大多數的產品，因為個人插畫組件庫是以設計師身份做的，我們會面臨各類產品，而各類產品風格都會有不同的變化，要解決這一點我們可以使用以下三個方法：
方法一：改變人物結構
例如：你想為產品A做一些插畫類的功能頁或banner時，發現你現有的第一套插畫組件庫并不符合產品特性，產品A想表達更多夸張的成分，而我們所做的插畫系統顯示更多的是柔和與大眾，這樣就完全不匹配，那么我們就要去改變一個基礎點，那就是人物結構，通過人物結構的重組我們可以得到想要的夸張效果，那么我就男女各舉一例結構重組對比圖，如下：
我們為了在身體結構中達到人物夸張的效果，在原有10a比例不動的情況下對原本的身體結構做了重大調整，男性：上身的縮短，下身的延長以及手部腳部的突出；女性：整體更加硬朗，手腳放大，腿加長。
如果把他們用相同的插畫風格表現出來，就會出現如下效果：
當你在做人物結構調整時，你會發現有一個常規的人體結構作為基點去設計是多么重要，也就是之前所提的為什么第一版插畫組件讓你做常規的，因為如果不是常規人體結構，調整起來會非常麻煩，就很難有參考意義。
方法二：改變插畫風格
除了人物結構外我們還可以更多的考慮插畫風格，通過不同的插畫風格去適應不同的產品，例如：線面/漸變/雜色/極簡...同樣我就男女各舉一例，如下：
上圖改變風格后，男性的風格則更偏向于線條的表達與高亮色調；女性的風格則簡單直接，更注重凸顯配色的碰撞。
方法三：改變人物結構+插畫風格
在上面兩種方法中除了已有的基礎人物結構A與插畫風格A，我們還得到了人物結構B、C與插畫風格B、C，如果我們用人物結構B（或C）與插畫風格B（或C）結合又可以形成新的插畫狀態。
按照這樣的方式下來我們就可以逐步添加自己的插畫系統，假如當你的插畫系統人物結構有5組、插畫風格有5組時，你就可以組合出25組不同的插畫，這樣你的插畫系統適應能力就極強了，甚至你要為產品做插畫系統時，也可以大幅度參考你的個人插畫系統，當然這一切都是需要自己去慢慢迭代添加的。
3、用軟件規范插畫組件庫（層級詳解），提升應用效率
為了更好的替換組件，提升輸出的工作效率，我們可以從一開始就使用軟件對插畫進行管理。市面上可以提供復用樣式的軟件也蠻多的，這里我就使用應用率最高的Sketch來進行講解。
首先我給大家講一下我的插畫組件庫的構成，我的插畫組件庫一共分為了5大塊，分別為：人物組件庫、非常規人物組件庫、動物組件庫、輔助元素組件庫、輔助背景組件庫，而這5大塊中也細分出了很多小層級，我就一一為大家分析下我所用的層級。
我們可以從以上圖中看出從風格分類開始直至最小的組件，我用到最多的層數是5層。
如果大家看的有點懵，我們就拿一塊從層級1到層級5舉例說明：
風格分類（A）-角度分類（正側）-四大組件（下身）-動作（B）-顏色（B）
這里所用的是sketch復用樣式中的“套中套”，“套中套”的組件方式看似復雜，其實挺簡單的，并且在軟件中換取都在大組件內，因為不是軟件講解所以就不帶入過多的軟件知識。
在制作時我們不要想著一次性就做出很多小組件，比如你想做表情時，一來就想做10多20個全部包含完，其實沒有必要，我個人是比較建議最開始小組件做個3-5種常用的就可以了，因為組件庫是要不斷添加優化的，所以可以在后續工作應用中再不斷的添加。
有了層級的劃分，我們可以用sketch的復用樣式簡單、的規范插畫組件庫，想要覆蓋替換組件內容也是十分方面，如下：
2/非常規人物組件庫
除了常規的人物組件庫外，我還單獨羅列了非常規人物組件庫，這一類組件庫主要是作用于人物特殊的動作形態，比如下面3個透視類的插畫動作形態，這些動態與常規的插畫組件庫的內容很多是不互通的，比如臉的角度、鞋子的角度、身體的透視尺寸，所以我們就單獨給他羅列一個非常規人物組件庫。
都是同為組件庫，當然也有可替換內容，非常規人物組件庫與常規的人物組件庫的層級邏輯有所不同，常規的人物組件庫是用小組件替換人物動作，但是非常規人物組件庫是先替換整體的動作然后才可以替換小組件，這也是對他的特殊化管理。（注：不想舍棄它，又不想為他做出更大的調整，所以就單獨讓它成立出來。）
根據非常規組件庫的設定給大家做個小案例：
以上可以看出我在這個透視化的插畫人物中可以替換表情、發型、紋理、上身、下身。
3/動物組件庫
我這里做的動物組件庫是用來輔助人物以及調和場景的，所以在層級劃分上并不會做的非常細，滿足我的日常插畫需求即可，當然如果你想把動作組件庫做的非常細，那么可以參照人物組件庫的層級來劃分層級。
根據我使用的動物組件庫層級，給大家舉一個正確小案例與錯誤小案例，先看下錯誤小案例：
可以看到下圖（狗子）是一個非常粗糙的動物組件庫，里面只能替換動作以及動物的動作，當選在狗子的狀態下，狗子除了換動作沒有其他的組件選項，雖然我想讓動物組件庫簡化，但是也不至于什么都不能替換。
接下來看看正確的案例：
我們可以看到在貓咪的狀態下就有很多組件可以選擇，不僅可以替換貓咪的動作，還可以替換展示形式（展示形式我是按照景別來做差異化，當然也可以用其他方法）、貓咪表情以及貓咪的顏色，這樣的動物組件庫已經完全能夠滿足我的設計需求。
4/輔助元素組件庫
輔助元素組件庫層級最好要添加景別，因為我們經常會遇到同一個元素在不同產品中體現出不同的景別，如果不區分，在選取組件時就非常的傷腦經，經驗之談、強烈要求。
為了大家更好的理解，我給大家舉一個小案例：
我們可以看到我不僅可以切換元素，還可以切換景別以及顏色，至于其他的小組件我并不需要，因為這些已經足以滿足我的日常運營設計需求，這個層級劃分簡單實用非常推薦。
5/背景元素組件庫
背景元素組件庫一共分為兩種類型，分別為：組合場景背景與紋理背景。
組合場景背景：
組合場景背景是用輔助元素組件庫拼湊而來，它是一個可以直接用的完整場景，想要替換的組件如果在輔助元素組件庫能夠替換，那么在背景組件庫也是可以的。（注：這里牽涉到組件庫的重組調動，在后續出的文章中會詳細提到）
上面的插畫由白天變為黑夜只需要用組件庫就能輕松完成，而這些組件庫也不是現做的，全部是輔助元素組件庫里提取過來的，也就是我所說的組合場景背景是用輔助元素組件庫拼湊而來。
大家可以發現插畫中山上的小房子只用一個組件就可以全部替換顏色，而左右兩邊的樹卻要做6次不同的替換，樹木需要多次替換的原因這就是沒有做重組，如果想要相同元素做相同的替換，那么建議在調換過程中重組組件，優化層級。
紋理背景：
紋理背景相對于來說就是最簡單的，它里面只存在紋理的不同樣式，并且只可更換顏色。
三、人物插畫組件庫如何結合到運營設計中？
1、創建常見運營設計規范
在做設計前，我們先要做好運營設計的規范，以便于組件庫的插入應用。
那么我就用卡片彈窗來舉例：做設計前我們先確定卡片內容，當內容確定后，根據內容進行卡片的運營設計規范：
我們需要注意的是初步規范里并不需要涉及到用什么字體，也不需要羅列出插畫的尺寸規范，我們可以在后面的設計中一步步去實現。
2、結合運營設計的兩大方法：
當規范做好時，我們就可以利用規范去制作相應的組件庫，利用組件庫來結合運營設計，按照不同的情況可以分為以下兩種方法：
1/重組組件庫（無人物動態組件的情況下）
在一些運營設計中，如果我們要用到的人物動作之前并沒有做過，那么就需要我們重新設計人物動作，設計完后再把可以重組的人物組件拖到我們現在的組件中進行重組，分以下幾步進行：
第一步，根據卡片的規范做出卡片的設計內容，如下：
第二步，把設計好的內容分板塊，以便于組件庫的層級劃分。在這里我把他們一共分為了4個大塊，分別為：文字組件、人物組件、輔助裝飾組件、背景元素組件。
第三步，在大的板塊下劃分小組件，結合小組件就可以得到我們組件庫的層級，可看下圖：
在小組件里，很多都是個人組件庫里原本有的內容，這時我們就可以把它們拖進來進行重組。
假如你替換的元素不夠用，那么就需要你自己手動設計了，這樣也能反過來擴充你總的人物組件庫內容，其實組件庫的內容就是這么一點點迭代添加的，當你的組件庫內容越來越多時，你的設計成本就會越來越低。
三步下來我們就把組件庫融入到了運營設計中了，有了新的子級運營設計組件庫。
2/直接替換（有人物動態組件的情況下）
如果你做的運營內容組件庫里都有，那么就可以按著規范直接拖入即可，也沒有必要去進行重組。
總結：
總的來說組件庫的建立是一個龐大的工程，在你有了基礎架構的時，你就要慢慢往里面塞更多的內容進行填充，當你的內容足夠多時它就可以反向為你提供更多的便利，它是你的寶貴的設計資源庫。
因為這期的內容實在太多，所以插畫組件庫的應用、運營設計常用模塊組件案例、重組技巧以及品牌插畫組件庫的建立我會另外抽時間給大家總結。（做案例太費時間希望大家諒解）
參考資料提?。?/span>
我為大家提供了一些組件庫的可參考性文件，里面包含成套組件庫（sketch）、成套的插畫圖片、宣傳動畫、一些參考性的圖片（構圖、表情、發型等等）。
文章來源：tob.design 作者：黑獅力
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
元旦過后，新的一波工作又要開始了，我在開始準備新一輪匯報材料的時候突然想到了一個問題，不知道鐵子們在往年參加設計評審的時候，有沒有總被老板 diss 設計稿里“太空了” “不夠飽滿” 這些個問題呢？
我猜測應該99%的鐵子經歷過，我也不例外，從校招進到第一家公司就開始被植入頁面需要利用好每一像素的理念，搞得像北京房價一樣寸土寸金，生怕被浪費了；思前想后為了大家不重蹈我的覆轍，所以新年的第一篇，咱一起來聊聊排版的問題：
如果你看過我過往的文章，也許會對我的排版多少有點印象，夸張的大字，極強的對比，還有一些微妙的層級關系；坦誠的講，我的風格揉雜了 2 種設計體系 —— 瑞士風格 / 擬物風格；
整潔、嚴謹、工整、理性化、實用的特征是瑞士平面設計的精神所在；這種一絲不茍，傳達準確的風格，即所謂瑞士國際主義風格。簡單的說，由于 Swiss Design 這種風格簡單明確，傳達功能準確，因而很快得到世界范圍內的普遍認可，成為戰后影響最大的一種平面設計風格，也是國際最流行的風格，因此，又被稱為國際主義平面設計風格；
簡單的說，瑞士的這種設計風格典型的代表就是我們看到的雜志，其中有 3 個特點：講究網格 / 非常理智的克制顏色的使用 / 層級關系；有趣的是，審美和潮流是循環的，隨著時代的發展，越來越多的app開始重新挖掘出來瑞士風格并加以使用，比如我們iOS系統自帶的應用們，Spotify：
年少的時候，我經?？粗@些個app會不禁的問，為什么在沒有一張圖片的情況下還能如此好看？這些年終于明白了前人良苦用心：文字是內容，同樣也是構成；是信息，同樣也是裝飾；簡單可以理解為，不管在平面還是網頁亦或者是UI界面，在沒有可用的裝飾下，信息本身要承擔起裝飾和傳達的雙重功能，這就是瑞士風格的核心本質。
iOS是擬物的典型代表，網上對于這塊的講解已經過于飽和了，我也沒必要贅述；那么這一趴，來聊聊對我產生深遠影響的錘子科技吧。我第一次接觸到 smartisan OS 并沒有覺著多么驚艷，潛意識里只不過是覺著把 iOS 的圖標畫的更漂亮了一點而已…
但當我打開下圖這個頁面的時候，我意識到我對擬物的理解還是淺薄了，第一次被光影的層次震撼到：
通過光影塑造了一個三維空間，讓整個畫面豐富飽滿，也打破了我幼稚的設計觀，PS.不管錘子科技現在如何，我依然敬佩 Paco / 方遲 / 羅子雄的設計團隊為這個行業做出的貢獻，respect！
毫無保留的說，我的設計就是二者的融合，以 層次對比 作為核心理念。
啰嗦了半天，趕緊進入正題；如果你是一名產品體驗設計師，一定聽說過 “奧卡姆剃刀” ，這個定律通常用在交互鏈路的設計上（意思就是在用戶路徑中沒必要的步驟，省了就完事了），“如無必要，勿增實體” 即簡單有效原理；
通常來講，如果想要不平，把二維空間轉化成三維空間是必要的一步，需要在Z軸上下功夫；如果你恰巧也是一名攝影愛好者，可以想象下照相機的焦距和景深，工作原理是相同的，需要 前景 / 主體和背景 三個層次；當然，虛實的對比對信息的呈現和層次的拉開是極其重要的，這里需要通過景深來控制效果，你可以通過 photoshop 濾鏡-模糊畫廊的“場景模糊”來做到：
另外，空間的感覺想要被突顯，那么“光影和空氣”的價值就可以無限放大了，按照如上所說的結構，把內容和自然物質擺進去就好了，甚至可以做到舉一反三（比如不同顏色的氛圍，我就不展開了）：
整個case下來，你會發現用光來聚焦在信息上，自然而然就形成了我們說所得 “信息優先級”；有點時候空氣和光影的飽滿程度超乎你的想象，這種自然存在的物質可以很好的幫助畫面分層，以達到填充的效果，并不是一定要依賴于實體化的裝飾。
本來不打算再開一個章節說這個，但還是覺著很有必要再說下（我好糾結），作為PPT來講，ta的主要用途分為兩種：其一是給人看的，其二是給人講的；不管是哪種，盡可能的簡化文字，是對輸入者關愛；
以上圖為例（實名diss自己的作品），坦誠的講左邊的部分大多數觀者是不會有心思來看的，按照視覺系統的處理，這部分就會被當成一個“面”而被忽略掉，這種情況下右邊顯得有力很多，也能幫助觀者聚焦信息，所以還是那句話，能不寫的就別寫，能少些的別多寫，保持信息的密度也是設計師必要的職責之一。
想問一個問題，鐵子們覺著UI的本質或者作用是什么？從我個人的角度來講，UI設計的本質就是對信息的整理歸類和編排，沒有什么比信息更重要，如果貿然為了飽滿加入一些裝飾元素，很有可能是本末倒置，得不償失。這就像喝酒一樣，喝醉很容易，但微醺的感覺才是最棒的，今天是元旦后的第二個工作日，希望你能有個好心情迎接美好的一年～
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
當今是色彩的世界，物體顏色的不同，帶給我們的情緒也截然不同。想要掌握顏色，首先就要研究顏色的本質。
顏色分為光學三原色和顏料三原色。
1. 光學三原色
光學三原色由：紅、綠、藍組成。
色值分別是：
2. 顏料三原色
顏料三原色由：品紅、黃、青組成。
色值分別是：
理論上，原色可以調制出絕大部分的其他色，而其他色都調不出原色。
那么，這兩種有什么區別呢？
3. 區別
光學三原色和顏料三原色最主要的區別就是他們的混合原理不同，分為相加混色和相減混色。
光學三原色為相加混色（可以理解為光的疊加），混合后顏色的明度提高，三色混合即為白色。
相反，顏料三原色采用相減混色（可以理解為光的吸收），混合后顏色的明度和純度都會下降，三個混合即為黑色。
在設計中我們可以區分為 RGB（光學三原色）和 CMYK（顏料三原色）。
RGB 模式本質上與 CMYK 模式沒有區別，只是產生顏色的方式不同。顯示器采用RGB模式，就是因為顯示器是電子光束轟擊熒光屏上的熒光材料發出亮光從而產生顏色，當沒有光的時候為黑色，光線加到最大時為白色。而打印機呢？它的油墨不會自己發出光線。因而只有采用吸收特定光波而反射其它光的顏色，所以需要用減色法來解決。
運用場景：
冷暖色由三種原色、三種間色和六種復色組成的系統就稱為十二色環，從紫色至黃綠為冷色，黃色至紫色為暖色。
冷色可以讓人聯想到海洋、天空、雨雪等，讓人產生理智、寒冷、沉寂的感覺。
暖色可以讓人聯想到火焰、太陽等，讓人產生溫暖、熱情、開放的感覺。
實際案例中，冷暖色調的搭配，直接決定了觀賞者的第一感官。觀賞者第一眼的情緒感觸，就由此而來。
顏色的三個屬性分別為：色相（Hue）、明度（Brightness）、飽和度（Saturation）。
1. 色相
色相指的是這些不同波長的色的情況。波長最長的是紅色，最短的是紫色。
色彩是由于物體上的物理性的光反射到人眼視神經上所產生的感覺。色的不同是由光的波長的長短差別所決定的。把紅、橙、黃、綠、藍、紫和處在它們各自之間的紅橙、黃橙、黃綠、藍綠、藍紫、紅紫這 6 種中間色——共計 12 種色作為色相環。在色相環上排列的色是純度高的色，被稱為純色。
2. 明度
明度是表示色所具有的亮度和暗度。計算明度的基準是灰度測試卡。黑色為 0，白色為 10，在 0~10 之間等間隔的排列為 9 個階段。
色彩可以分為有彩色和無彩色，但后者仍然存在著明度。作為有彩色，每種色各自的亮度、暗度在灰度測試卡上都具有相應的位置值。彩度高的色對明度有很大的影響，不太容易辨別。在明亮的地方鑒別色的明度比較容易的，在暗的地方就難以鑒別。
3. 飽和度
飽和度是用數值表示色的鮮艷或鮮明的程度。
飽和度為 0 時，就是黑白灰。有彩色的各種色都具有彩度值，無彩色的色的彩度值為0，對于有彩色的色的彩度（純度）的高低，區別方法是根據這種色中含灰色的程度來計算的。
1. 單色
單色指的是某個顏色純度的變化，就是在原有色上疊加 10%~90% 的白色/黑色得到的一個顏色。
這種方法運用到產品中，會給人一種樸素、低調干凈的感覺；同時，也會給人一種單調的感覺。單色的顏色搭配適合沉浸式的產品中使用，不會因為色彩而打亂用戶的體驗。
產品案例：MUJI
2. 互補色
互補色是指在色相環上對立（180°）的兩個顏色。
色彩中的互補色有紅色與綠色互補，藍色與橙色互補，紫色與黃色互補。
補色并列時，會引起強烈對比的色覺，會感到紅的更紅、綠的更綠。
互補色是很難把控的一種色彩搭配。由于色彩沖擊力極強，用好了可以達到視覺峰值，反之則會很“村氣”
3. 鄰近色
鄰近色是指在色環上相鄰的兩三個顏色，在色相環上相距 60°
它們色相彼此相近，冷暖性質一致、色調統一和諧、感情特性一致。鄰近色是選擇相近色彩時很不錯的方法，可以在同一個色調中制造豐富的質感和層次。一些效果不錯的色彩組合有藍綠色、藍色和藍紫色，還有黃綠色、黃色和橘黃色等。
4. 對比色
對比色是人的視覺感官所產生的一種生理現象，是視網膜對色彩的平衡作用。指在相環上相距 120° 到 180° 之間的兩種顏色。
對比色能使色彩效果表現更明顯，形式多樣，極富表現力。需要注意的是，互補色一定是對比色，但是對比色不一定是互補色。
1. 光源色
物體只有在光的照射下我們才能看到他們的顏色。
發光體發出的光，形成了不同的色彩，我們將這些色光稱之為光源色。
2. 固有色
固有色就是我們平時看到物體的顏色。
比如在正常光照下我們看到一個物體是紅色，那他的固有色就是紅色。
3. 環境色
環境色是物體周圍環境的顏色。
環境色對我們看到物體顏色的影響非常大。大家平時肯定也遇到過一個物體在不同的光照下，呈現出來的物體顏色也不盡相同。比如，一個在藍色天空下的蘋果會呈現部分淡藍色，就是環境色的影響。
1. RGB
RGB 色彩模式是工業界的一種顏色標準，是通過對紅(R)、綠(G)、藍(B)三個顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色的，RGB 即是代表紅、綠、藍三個通道的顏色，這個標準幾乎包括了人類視力所能感知的所有顏色，是目前運用最廣的顏色系統之一。
2. HSB
在 HSB 模式中，H(hues)表示色相，S(saturation)表示飽和度，B（brightness）表示明度。
3. HSL
在 HSL 模式中，H(hues)表示色相，S(saturation)表示飽和度，L（Lightness）表示明度。
4. HSB 和 HSL 的區別
HSB 和 HSL 都是表示色相、飽和度和明度，不同的點在于應用開發中，不同開發語言下可調節的明度值名詞不同，所以這兩個格式不用過于糾結哪個用的更多，具體使用中就是需要哪個用哪個。
1. 黑色
黑色代表著品質、權威、嚴肅、穩重、高級。它是所有顏色中最有力量的，黑色+金色凸顯高貴感，黑色+紅色凸顯時尚感。
黑色是永不過時的顏色。
2. 白色
白色代表純潔、信任、樸素、簡單。黑色和白色經常會被用作無色，這兩個顏色沒有色彩傾向，屬于中性色，所以常常被忽略掉。在界面設計中，白色常常被用作背景色，提高畫面明度，凸顯其他內容，提高文字的易讀性。
3. 紅色
紅色代表喜慶、熱情、奔放、自由、歡樂。它是很強勢的顏色，一出現就會使人熱血沸騰，常常出現在電商活動中，讓人有購物的沖動。同時，紅色也有一種警告的含義。一些產品高危操作的 Button，都是用紅色來提醒用戶。
4. 藍色
藍色代表冷靜、商務、未來、科技、安全，它是一種比較理智的顏色，在色彩心理學的測試中發現，幾乎沒有人對藍色反感。主色調用藍色的太多了：知乎、Twitter、Behance、釘釘等，藍色的運用給用戶一直安全、放心的感覺。
5. 黃色
黃色代表輝煌、高貴、信心。它的明度極高，雖然沒有紅色給人那么強烈的感官，但是黃色給人一種警示的意思。黃色經常會以高貴的含義被用到：網站的 VIP。
6. 綠色
綠色代表健康、活力、生命、安全、和平、寧靜。綠色可以治愈心靈，當你不開心的時候，看一下綠色的東西，會讓你的愉悅值增加。它在生活中用到最多的含義是安全：綠色通道、綠燈等。
7. 紫色
紫色代表浪漫、時尚、性感、夢幻、創造力。紫色+粉色經常在女性化妝品被用到，紫色在自然生活中很少看到，所以也有一種稀有、高貴的感覺。
1. 數量
一個頁面中盡量不要超過 3 種顏色（黑白除外），顏色過多會讓用戶的興奮值上升，不易長期查看。
2. 統一性
每一個產品都有自己的主色調，所有的頁面的色彩搭配都要和主色調呼應，主色調的合理運用直接關系到用戶對產品的信任值。同一組件、場景中，顏色使用要保持一致，切忌“自由發揮”，毫無規范可言。
3. 60-30-10原則
60%、30%、10% 的原則，是達到色彩平衡的最佳比例。在 60% 的空間使用主色，可以運用到導航欄、按鈕、圖標等關鍵的元素中，使之成為整個 App 的視覺焦點和色彩關系；30% 的空間使用輔助色，可以平衡過多的主色而造成的視覺疲勞；最后剩下 10% 的空間為點綴色，可以用在一些不太重要的元素又需要區分的時候。6:3:1 原則構建了一種豐富的色彩層次，讓界面看上去和諧、平衡和不雜亂。
4. 顏色禁忌
禁用純黑、純灰，純黑和純灰會使用戶陷入負面情緒中，可以在黑色和灰色中加入一些色調，讓顏色看上去更柔和，另外純黑色看時間久了會使人疲憊，在實際產品中，也很少有用純黑的。
5. 文字中的使用
超鏈接顏色用藍色，為什么呢？
最早期電腦中用的是深灰色背景+黑色字，那時候能用非黑色最深的顏色就是藍色，所以這個習慣一直延續至今。這種用戶習慣非常一致的情況下，盡量不要去改顏色，因為改成別的顏色就會顛覆用戶認知，學習成本就會增加。
6. 卡片陰影
一定不要用純黑色陰影，陰影的顏色會受到環境色和固有色的影響，對于有顏色卡片的背景，盡量使用比卡片更深的同色系顏色來調陰影，會使得陰影更干凈、整潔。
1. Wbgradients
網站鏈接：https://webgradients.com/
Wbgradients 是一個在線調整漸變色的網站 ，可以根據你想要的調整效果，同時支持復制 CSS 代碼，可以更好的與開發對接。
網站鏈接：https://www.grabient.com/
Grabient 是一個非常漂亮且實用的漸變配色網站，支持 CSS 樣式代碼復制、360度漸變旋轉、自由增加或刪除漸變顏色等功能。設計師可以在色塊下方自由添加和調整漸變的色系、以及線性漸變方向。
3. Color Grid
網站鏈接：https://www.0to255.com/740941
該網站隨意選色值，它自動換算出已選色值的 32 種明度色值，簡單易用。
4. Eva Design System
網站鏈接：https://colors.eva.design/
Eva Design System 是一個基于深度學習算法的配色網站。適用于給我們的產品或品牌生成一個系統的配色方案。右上角可以切換淺色模式和深色模式的對比。
5. Color Hunt
Color Hunt 是開放的調色板集合，可以添加到 chrome 瀏覽器，方便隨時隨地使用。
文章來源：優設網 作者：友設青年
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
前文的原子設計中我曾經講過，原子是構成所有元素的最小單元，沒有辦法再被細分。它通常對應著產品設計中的通用樣式及構成組件的最小顆粒。而顏色，作為整個設計系統中極為重要的原子之一，在心智模型中占據了關鍵的地位。
我們看到紅色能夠感受到熱情、興奮和危險，看到綠色時往往就感受到安全、自然和平靜?？梢哉f，顏色調動我們的情緒只需要一瞬間，而且它在我們的記憶中可以停留更久。
接下來，我結合公司目前的業務CROV Dropshipping（以下簡稱DS），來進行色彩體系的探索，以輸出一整套的色彩方案。但愿這次探索能夠給予各位一點啟發。
大綱走起：
CROV DS是針對美國市場的線上一件代發平臺（類似阿里巴巴的一件代發業務），屬于跨境電商B2C行業。平臺幫助用戶無需任何初始成本、無需囤貨即可順利開展電商之路，時間靈活可控，讓用戶專注于銷售本身。
目前CROV DS業務日益繁雜，但是除了品牌色之外，輔助色的定義過于隨意。而且隨著業務場景的擴展，臨時增加的顏色很容易被遺漏在某個不知名角落的畫板中，導致一次性用色的風險。（tips：一次性即前一篇我所講到的用完即扔、未被復用的設計）
而且用色本身的隨意也導致研發還原結果的不統一，一處地方色彩各異的現象比比皆是。
因此，我們需要基于我們自身的業務特征來產出一套足夠完善的色彩體系，讓業務從用色上達成基本的一致統一。
我們設計師在定義顏色時，更多的是直接在色板上進行取色，但這樣的取色方法存在諸多弊端。
增加決策
可能很多設計師選色時會有這種情況，一會覺得這個顏色臟了，一會又覺得那個顏色太刺眼了，有時候完美主義作祟，為了得到一個滿意的顏色甚至花上大半天。這種情況尤其在多色搭配時更為嚴重。
其實這和不用網格系統來布局是一個道理。（注：網格系統是一種能夠極大提升布局效率的方法，后面會講～）
色板中取色的范圍趨近于無窮。如果將HSB模式下的單個H、S和B作為一個最小單元格，那么我們可以選擇的格子高達數百萬個。顆粒度過細的情況（其實根本就沒有顆粒度）導致我們在取色時往往會被迫進行反復的微調和嘗試。
缺乏秩序和邏輯性
直接在色板中取色主要依賴的是”直覺“這種相對感性的存在。
比如一個按鈕的狀態可以包括normal、hover、pressed、disable等多個狀態，如果我們僅僅靠自己的直覺自由調整明度和飽和度，最后的配色方案其實缺乏內在的邏輯性和秩序性。
難以復用
對于B端這些偏后臺工具、場景復雜的業務，顏色運用得往往也比較廣泛，如果我們沒有一套完善的色彩體系，那每次一遇到新的項目及業務場景需要用到新的顏色時，之前定義的顏色難以復用，導致我們需要重新定義顏色。而且這種相對主觀的方法也缺乏說服力，難以體現專業度。
而如果設計師提前定義好一套色彩體系，一方面只需要在對應的色板中選擇即可，大大減少了設計決策。另一方面色彩體系所提供的不同色彩梯度也便于各個需求、業務場景的復用。而且色彩體系富有邏輯和秩序，因此從中挑選的顏色也同樣是這樣，顯著降低設計師依賴”直覺“所帶來的主觀和不可控。
Alipay Design團隊提過：
以同色系配色為主導，多色搭配為輔。
同色系為統一的色相，使用中可以加深品牌色的感知，可以讓界面更有層次，同時可以讓界面保持色彩上的一致性；由于業務的多樣化，我們需要多色搭配為輔；多色的輔助顏色，也可稱之為功能色，可設定不同的任務屬性和情感表達；再搭配中性色黑白灰，賦予更多的變化和層次。兩種配色通過主次、使用比例，可靈活運用在業務的各個場景中，具有非常好的延展性。
接下來我以DS項目為例進行色彩體系探索——
首先，所有的色彩模型統一采用HSB模型進行，正如Ant Design設計團隊說的那樣，這個模型利于調整色彩時對顏色有明確的心理預期，同時便于團隊溝通。
這里再簡單普及下HSB模型。H指的是色相（Hue），S指飽和度（Saturation），B指明度（Brightness）。S控制顏色混入白色的量，S值越高，意味著混入白色的量越少，顏色也就越“純”。B控制顏色混入黑色的量，B值越高，意味著混入黑色的量越少，顏色也就越“亮”。（通俗點說，它們分別代表了明色區域和暗色區域）
Crov Dropshipping基于其時間自由靈活、可兼職副業、成本風險低的業務特征，使得對應的用戶群越來越多的集中在年輕一代的e-tailer（線上零售商）當中。他們不同于我們常規認知里那類傳統的retailer（線下實體零售商），大部分的DSer擁有自己的事業和工作，為了賺取外快，將其當做自己的副業。因此，年輕化是這類用戶群的主要標簽。
所以，我們采用了高飽和度、偏向藍色色相的紫色，來作為crov dropshipping的品牌色。它的HSB值是 （250，80，100）。
為了覆蓋掉Crov DS本身復雜的前后臺業務場景，需要額外搭配各類型的輔助色。我們想要提取24類色相，所以直接通過360/24得出了色環中每類色相的基本角度15°。
因此，這里以品牌色色相為基礎，在HSB 360°色環中，對色相（H）正向和反向各自±15°，飽和度（S）和明度（B）保持不變，得到24色的色環彩帶。
后續我們的顏色體系就在彩帶上的24個顏色上面進行提取。
品牌色同色系是指，根據品牌色不同的飽和度和明度變化，生成不同深淺、不同明暗的一組顏色。同色系配色不僅傳達了品牌性，多個梯度的變化也能夠適應及通用盡可能多的業務場景，也便于多信息的層級劃分。
而同色系配色的輸出則遵循了antDesign發明的tint/shade 色彩系統算法，說人話，就是在顏色中分別加入一定比例的黑色或者白色來更科學地生成色階。
sketch中可以直接將這套算法可視化處理，便于設計師直接生成所有顏色的色階。需要注意的是明色區（就是上方橫向的那塊取色區域，白色至純色時S由0過渡至100）和暗色區（右側縱向的取色區域，純色至黑色時B由100過渡至0）遵循了兩種不同的規則，具體規則見下：
當S飽和度變化時（明色區域），S值以S/5的結果值為一個增量進行遞減，B值以(100-B)/5的結果值為一個增量進行遞增。我們品牌色的S和B分別是80和100，所以這里的兩個增量分別是16和0。
品牌色在明色區的下兩個色階對應的HSB參數就是（250，64，100），（250，48，100），以此類推。
而當B明度產生變化時（暗色區域），S值以(100-S)/5的結果值為一個增量進行遞增，而B值以B/5的結果值為一個增量進行遞減。得出的兩個增量分別為4和20。
品牌色在暗色區的下兩個顏色對應的HSB參數即（250，84，80）、（250，88，60），剩下的所有顏色以此類推。
根據這兩個定義規則推導出全部不同梯度的色階，我們就可以將其作為品牌色同色系配色。
我們使用品牌色來傳達品牌價值，還需要輔助色來滿足多樣化業務場景的需要，對用戶進行不同的情緒引導，同時也可以緩解用戶對單一主色產生的視覺疲勞。
輔助色的定義就可以直接用到我們之前基于品牌色所衍生出的24色“彩帶”了。我們通過色環形式，來迅速得出品牌色的同類色、類似色、鄰近色、中差色、對比色和互補色。
結果見下：
首先，由于相差15°的同類色與品牌色差距過小，色相對比感微弱，傳遞的調性過于相似，所以這里直接pass。而鄰近色生成的粉色和青色在界面中基本不會作為功能色使用，這里同樣直接舍棄。
類似色
類似色即色相差在30度左右的顏色，屬于較弱對比色。我們基于品牌色的色相各自±30得出類似色。由于H280的類似色調性與品牌色類似，并且色彩體系中需要一個典型的冷色來覆蓋一些場景，所以這里使用了H220的顏色作為冷系的輔助色。
中差色
中差色即色相相差90度左右的顏色，屬于中等對比色。H340偏粉，與常規紅色相差過多，所以這里借鑒了alipay的輔助色校正原則“色相差值不能超過15”，對H340進行了色相校正，調整至H355。
對比色
對比色即色相相差120度左右的顏色，屬于強對比色。最后得出的H130調性與中差色的H160過于類似，直接舍棄。H10與H340調性類似，但是可以向橙色系發展，所以微調到同類色進行色相校正。
互補色
互補色即色相相差180度左右的顏色，屬于高強度對比色。最后得出的H70偏綠，這里同樣進行了色相校正，將其調整為H55。
最后，得出了共計5種輔助色。不過這些輔助色并不能直接使用，還需要進行感官明度的校正。
感官明度校正方法來自支付寶設計團隊，這是是確認輔助色的最后關鍵一環。每種顏色都有屬于自己的“感官明度”，即發光度。品牌色即輔助色的發光度不一致，就會導致視覺上會有明顯的明暗差別。所以，我們需要通過發光度來進行最終的顏色校正。
明度較高的灰色意味著高發光度，明度較低則意味著低發光度。保持品牌色發光度不變，我們對其他輔助色進行微調。
我們只需要將那些視覺明暗差距明顯的顏色進行調整。注意，并非所有的顏色都要調整到品牌色的感官明度，這些值僅僅是一個參考。最終的校正依然取決于我們的視覺！比如黃色感官明度本身很高，但是視覺緩和、不像綠色那么刺激，所以基本無需校正。
最后得到校正后的如下輔助色。藍色、綠色、黃色以及紅色在界面中可以作為功能色使用，可以分別代表常規、成功、警告和報錯狀態。而橙色則可以用作突出類的提示信息，它比bold字重要高出一個層級。
與品牌色一樣，使用tint/shade規則推導出全部輔助色不同梯度的色階。具體過程不再贅述～
CROV DS的文本色并非純粹的中性色，我們通過加入一點點品牌色來讓文本呈現色彩傾向，以此提升頁面的活力及年輕感，同時也可以讓界面更加耐看，減緩B端產品長期使用時的視覺疲勞。
具體方法就是，分別在#222、#555、#888、#b3b3b3的一、二、三級中性文本色代表的色塊上，覆蓋一層10%透明度的品牌色。最后得出了四個層次的文本色。當然，中性文本色你也可以參考antDesign中通過透明度進行定義的方法，不一定需要按照某個具體色值來。
我們必須要承認的現實是，設計師所定義出的色彩在mac上看上去是很出彩，但是這并不能代表所有用戶。也許在用戶中依然有一部分人群，他們的顯示器配置低和老舊。而且我們無法判斷用戶們的使用環境，有可能是在刺眼的陽光下、有可能是在昏暗的環境中。如果色彩不去做可用性測試，在很多的情況下存在體驗降低的風險。
而WCAG（Web Content Accessibility Guideline，Web內容無障礙指南）解決的正是這些障礙問題。WCAG中的POUR無障礙原則包括了：易于感知的（Perceivable）、便于操作的（Operable）、穩定理解的（Understandable）、穩定耐用的（Robust）。
而顏色則正是對應了易于感知的這一無障礙原則。網站中的文字和圖像應該具備足夠高的色彩對比度，使之更易被用戶感知識別。
WCAG顏色對比度無障礙的兩個標準分別為：「1.4.3條例：最小對比度標準」和「1.4.6條例：加強對比度標準」，分別對應著AA級和AAA級。
AA級的定義為：普通文本的視覺呈現與背景至少要有4.5：1的對比度，大文本與背景至少有3：1的對比度
AAA級的定義為：普通文本的視覺呈現與背景至少要有7：1的對比度，大文本與背景至少有4.5：1的對比度
（這里的大文本即≥18pt常規字重的文本或者≥14pt加粗字重的文本）
這兩個條例被大廠們廣泛運用到了產品的顏色標準當中。
比如MD規范中的文本移動性規范標準中的數據就是來自WCAG的1.4.3條例標準。
同樣，阿里巴巴在前不久發布的B-Design中的無障礙色acs指標和WCAG本質上也是一樣。
1. 顏色對比度驗證
那該如何驗證我們的顏色符合這倆標準呢？
easy。這里直接上個網址，https://contrast-ratio.com/#%23373247-on-%23fff
我們分別在背景及文本錄入色值，即可得到最終的對比度數據。比如我錄入了白色和一級文本色數值，最后的12.28即兩者的對比度，嗯，達到了AAA級標準。
一樣的步驟，分別測試了其他文本色的對比度（產品無暗色模式，所以此處僅驗證白色背景下的顏色對比度），分別達到了7.59、4.71和2.38。可以看出除了2.38外，其他文本色的對比度均符合可見度標準。
不過WCAG中指出，一些特殊情況下的文本無對比度的限制，其中就包含了表單字段的占位符（placeholder）。而2.38對比度對應的文本色主要用于暗提示，因此這種情況就可以無視掉了~
色彩體系的初步探索到此結束了，不過篇幅原因并沒有面面俱到，比如漸變色、實際落地效果等等。另外，一些地方我自己也在摸索階段，因此很多分析也可能存在不足，文章僅作參考。
文章來源：優設網 作者：轉行人的設計筆記
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在經歷了一個不太理想的新十年開局后，年輕人們迫切需要重塑品牌。幸運的是，以下2021年的標志設計趨勢完全可以勝任這項任務。
觀察來自世界各地的logo設計作品，他們的預測代表了設計環境的變化。雖然去年的趨勢集中在通過新技術進行革新，但2021年標志趨勢中的一個共同主題似乎是限制條件下的創新。過去的一年可能在很多方面限制了世界，但是2021年的標志設計師們還都在繼續努力著。
彩色玻璃
透視圖
簡單幾何
發散字母
真實寫真
原始對稱
古怪的人物
現代象征主義
靜態運動
類似配色方案
標志設計作為一項相對現代的發明，往往在過去的技術和局限中尋求靈感。在2021年，許多標志設計師在過去時代的彩色玻璃窗中找到了啟發。
當應用到現代設計中時，將圖像分割成純色碎片，給普通概念增添了一點抽象感。彩色玻璃也與神圣聯系在一起，因為它起源于中世紀教堂。這可能不是巧合，這種標志趨勢經常與美麗的自然景觀結合使用。在一年的大部分時間被困在室內之后，我們可以期待我們脆弱的生態系統將在2021年的彩色玻璃標志設計中得到尊重。
正如標志設計師林登·萊德（Lindon Leader）曾經說過的那樣，偉大的設計源自簡潔和清晰。這兩個優點使標志設計能夠有效地向觀眾傳達品牌的復雜身份。這就是為什么許多過去的標志潮流都集中在極簡主義和平面設計上。
雖然2021年的logo設計師們決不會放棄這種方法，但他們正尋找在過度簡化中失去的一些魔力。一個流行的標志設計趨勢是融入微妙的視角。使用基本的繪畫技巧，如線性透視，曲率或縮短，設計師能夠創造深度的錯覺，而不會使設計復雜化。
其效果是，標志給人的感覺很突出，品牌從頁面上一躍而下，而半平面的設計技術，一直以來都是為設計師服務的，但至今仍然完好無損。
形狀是構成意象的基石。但是，盡管三角形、正方形和圓形等原始形狀一旦打下基礎，往往就會被淘汰，但它們純粹的簡單卻有力量。
2021年的設計師們正利用這種力量，用簡單的線條和形狀制作出標志。這種對形狀極簡主義的嚴格遵守給了這些標志一種刻意克制的氣氛，允許他們在其他地方自由發揮，比如在豐富的顏色飽和度上。
這種方法的另一個特點是，簡單的分層可以產生一種結構和深度的錯覺，這符合我們前面提到的透視圖趨勢。通過純粹的造型語言，設計師能夠創造出易于解析、令人難忘、色彩鮮艷的logo。
基于字體的文字標記標識有著直截了當的名聲，無論好壞。雖然他們使品牌名稱成為整個標志的焦點，因此更令人難忘，但他們沒有留下太多的空間，為創意鋪路。但是2021年的標志設計師們正在一個字母一個字母地改變這種印象。
具體來說，我們看到越來越多的單詞標記中的一個字母被夸大了。這可以是一個顏色突出的小寫的“i”，或作為一個突出的筷子形成一個大寫的“H”。這個不同的字母不僅創造了一個吸引眼球的興趣點，它給予品牌最好的選擇：一個傳統的，基于類型的標志，也不怕打破規則。
人們憑直覺尋找其他面孔，這是一個有據可查的事實，這就是為什么肖像畫有助于在設計中建立情感聯系。這些面孔越真實，越容易辨認，聯系就越深。
因此，2021年更多的標志設計師開始轉向反映不同種族、文化、性別、年齡段等的肖像畫。與媒體過于擁擠的同質表現不同，這種方式創造了真實的印象，有助于人們在瞬間與品牌建立聯系。這些標志可以從簡單的，平面的人物肖像到詳細的說明性技術。
歸根結底，設計師們厭倦了那些讓人感覺不親切的形象。歸根結底，無論一個標志是在講述品牌背后的人還是品牌服務的人的故事，人都是關鍵。
平衡是標志設計的基本原則之一，而對稱也許是其最極端的表現。對稱的標志從中間分開時，兩邊是相同的。
雖然相同性和可預測性似乎是冗余的同義詞，但對稱設計完全是關于強度的。它們讓我們想起了建筑，無論多么高大復雜，它們的設計都是為了站穩腳跟，它們通過完美的對稱平衡來實現這一點。
這種原始的對稱性允許標志包含線條藝術，感覺既不可能復雜又完美有序。但即使對稱在幾何設計中很常見，我們也看到這種趨勢在手繪徽標中找到了歸宿。無論是設計師追求的完美還是實力，有一點是肯定的：2021年的標志建筑是為了經得起時間的考驗而建造的。
雖然logo設計師在真實人物的表現上處于領先地位，但2021年的其他許多人則通過漫畫和夸張的幽默來對比這一點。我們正在看到越來越多的以插圖為主要內容的logo呈現出詼諧，甚至古怪的概念，從玩老鼠的醫生到華麗的甜甜圈花花公子。
從事舒適或娛樂的企業希望能讓他們的觀眾放松，而設計師們則用散發著博愛氣息的logo來回應。最終，這些異想天開的設計讓顧客覺得他們找到了朋友而不是品牌。
邏各斯的根源一直是古老的象征，從升起的鳳凰到不朽的女神，再到無所不能的眼睛。就像古代的象形文字一樣，它也是一個標志的目的，通過簡化的圖形來傳達信息。
通常，logo尋求創造他們自己獨特的符號語言，但在2021年，設計師們正在疏導古代符號的力量。其效果是將人們普遍理解的、經典的美德與奮斗品牌的愿景聯系起來。開始一個新的企業是一個信仰的飛躍，這些象征性的標志承載著一個啟示的承諾。
這意味著運動跟蹤器、流體形狀、飛濺粒子和動作線的增加。對于那些希望創新的企業，比如科技品牌，這是一個標志潮流，肯定會引起轟動。它提醒顧客品牌不僅僅是一種產品或服務：它是一種活的東西。
隨著每年的標志設計潮流，我們常常期望找到令人眼花繚亂、革命性和顛覆性的技術。另一方面，相似的配色方案是學生設計師在第一年的色彩理論學習的內容。這基本上意味著在色輪上對彼此相鄰的顏色進行配對，其結果是創造和諧的科學方法（代替對立顏色的對比）。
雖然類似的配色方案并不一定是新的，但它們在標志設計中日益流行可能表明了對對比度的排斥。色彩是設計師用來影響觀眾情緒的最重要的工具之一。
2021年的標志設計趨勢是重塑這個新的十年的一個機會。從透視技法到簡單造型再到對稱性，從極簡主義到古典主義的復興，我們未來的理性似乎在追求一種純粹。
轉自：站酷
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
軟件熟練度屬于“器”的范疇，對主要靠作品集吃飯的設計師來說很難對外體現。但是我們不能說它不重要，軟件的熟練度依然是設計是否能夠產出的重要因素之一??！
今天結合我自己之前的經驗，來談談AI中的一些相對比較冷門的小干貨（很多是我最近才get到的- -），但愿這些快捷操作能幫助你進行產出～～
大綱：
AI中存在很多參數需要我們自己去調節。比如一個形狀的寬高圓角，對形狀進行變換的旋轉、扭曲等參數等等?？赡芎芏嗯笥迅乙粯樱匆粋€個手動輸入要么通過拖動滑塊進行調節。
這么做造成的問題有兩個，一個是交互的繁瑣，一個是參數調節顆粒度過細，在進行往返調試時需要耗費大量的重復工作量。對于我們時間寶貴的設計師來說這種方法簡直太弱了好嘛?。?/span>
不過這些完全可以通過一個方法來解決——快捷鍵調節即可！結合shift、cmd（即win系統的ctrl）以及上下方向鍵完完全全地提升效率。具體的方法如下：
比如對形狀的變換，我們就可以使用上下方向鍵1px微調，結合shift以10px數調。鍵入位置通過tab切換。
再比如變換效果的參數，同樣可以使用這種方法快速地調試，全程只需要快捷鍵操作即可。而且這種一邊敲擊鍵盤一邊實時預覽的趕腳也讓人心情莫名得順暢！
這種方法也可以迅速地讓水平和垂直數值保持一致，比我以前的滑塊拖動、數值輸入的操作好太多了。
順帶一提，sketch參數數值調節也支持這種快捷操作哦。
我們在調節形狀的圓角時，一般情況有兩種方法，要么在菜單欄or變換工具中數值調整，要么直接在角落的圓角點上拖動。
但是對于平行四邊形這種四個頂角度數不一樣的形狀，即使四個圓角大小是一致的，由于銳角和鈍角的存在導致圓角看起來并不一樣。
這時候，外觀效果就派上用場了。
我們在效果-風格化中找到圓角選項，為平行四邊形添加一個圓角外觀效果。
風格中找到圓角選項就可以自己設置。這里給一個和剛剛一樣的圓角10px。
最后（右圖）得出的四個圓角看上去明顯比之前的方案更加一致。
另外，這種外觀的好處就是，后期隨時可以在外觀中編輯！
我們更多時候縮放是滾輪縮放，但是這樣的縮放的顆粒度太大，尤其在小屏電腦上想要定在某個合適的窗口大小比較麻煩。
這時候我們可以利用快捷鍵Z激活縮放功能，然后通過左、右拖曳的手勢進行快速而平滑的縮放操作。我們可以輕易定格在我們想要的窗口大小。一開始可能很多朋友和我一樣習慣上下縮放，但是ai里的縮放并不是上下，而是左右。
一般我們畫波浪線是通過扭曲與變換中的波紋效果來變換。
但是我們也可以使用鋼筆來直接畫。
向一個方向拖拽生成手柄（不知道有沒有朋友和我一樣用鋼筆工具都有點一下去繪制形狀的毛?。缓笤诤线m的位置再拖拽一次即可繪制出波浪線。在對精準度要求不高的情況下完全可以采用這種辦法，方便快速。
在以往，我在進行路徑消除操作（比如繪制一些斷線icon時），通過這樣的步驟，添加錨點工具在路徑上添加兩個錨點，然后直接選擇工具選中錨點間的路徑刪除。拜托，都2120年了，別用這么古老的方式了好嘛！?。ê孟氤藭r光機回去拯救年少迷茫的自己）
但其實壓根不需要這么麻煩，一個工具就可以迅速解決，而且可以連續消除！
這個工具就是路徑橡皮擦工具，說實話知道這個工具后我再也回不去了。
只需要激活它，你就可以在任意的路徑中像使用橡皮擦那樣，迅速地消除你想消除的地方。另外，我提前給這個工具設置了E這個快捷鍵，以便我能迅速調用它進行路徑消除工作。
路徑橡皮擦用在填充的色塊中同樣只能消除路徑，但我們想要消除色塊時，則可以用到另外一個工具——橡皮擦工具。
shift+E直接調用到它，按住shift即可直接在填充色塊中進行切割。而且最后被切割出的圖形都是互相獨立的閉合形狀。
當我們按住alt后，就可以隨意地繪制出不同寬度的矩形進行切割，相比形狀生成器或布爾運算更加方便點。
一點點平時積累的ai小干貨，但愿能幫到你??！
文章來源：優設網 作者：轉行人的設計筆記
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
LOGO 是品牌設計當中最為重要的一環，LOGO 本身的設計不僅昭示了品牌的身份，甚至可以表現品牌的價值觀和特點。你可能想開拓新的領域，或者重塑舊有的業務，又或者是基于 2020 或者2021 年的新趨勢，將原本的 LOGO 升級，這些都是促使 LOGO 革新變化的契機。
和視覺設計不同，LOGO 的設計常規類型其實是相對固定的，通常不會有某種類型的 LOGO 占據主流，但是不同類型的 LOGO 呈現出不同的變化和趨勢傾向，下面就是 LOGO 設計在 2021 年呈現出的 11 個趨勢：
2021 年將會是 3D 在設計領域中徹底崛起的一年。而相應的，在 LOGO 設計領域，光影細節也成為了很多企業和品牌體現品牌價值和特質的一種設計策略。如果你正在尋找一種流行的風格，或者打算將已有的 LOGO 翻新升級，試試立體的 3D 設計，這可能是當下的一種設計風格。
這是最近2年又重新流行開來的一種設計風格，復雜的輪廓和陰影，筆觸細節豐富，繁雜但是令人愉悅，手寫和手繪都融入其中，從手寫風格的文本到近乎手繪的圖形圖像，你能在這樣的 LOGO 設計中感受到強烈的品質感，感知到精致的元素和獨特的個性，整體其實是給人耳目一新的感覺。
文字 LOGO 一直是 LOGO 設計中的一個比較大的門類，只需要使用特別風格化的字體來呈現品牌的名稱，就能夠很大程度上傳遞品牌的主要信息和氣質，它足夠簡明，不費吹灰之力就可以確保信息的傳達，視覺的美觀，氣質獨特，并且獲得某種程度的認可。下面的 LOGO 都是2020年新設計的文字 LOGO 中，比較有特點和代表性的作品。
有很多品牌本身，和自然元素是有關聯的。在今年這個大環境之下，大家對于自然的青睞是無與倫比的。這也是的很多和自然元素相關的品牌，會盡可能多地在設計的時候從自然汲取靈感，盡量創造富有識別度，有著平靜協調氣質，并且能夠讓人想到「自然」的設計，下面的案例就是典型：
黑白是永恒的經典。通常，黑白 LOGO 會更加考驗設計師對于形體和構成的認知。優秀的黑白 LOGO 通常輪廓分明，優雅又頗具識別度。
有意思的地方在于，2021年的黑白 LOGO 并非和往常一樣毫無新意，很多設計師會將 3D 效果、動畫和黑白 LOGO 結合到一起來進行設計。
生動的色調，明亮的色彩，只有扎眼的設計才能夠在第一時刻抓住用戶的注意力。在 2021 年，反常規、大膽的用色會是 LOGO 設計當中相當合理且出彩的一種策略。用戶會下意識地被品牌色吸引，這也能夠讓LOGO 和品牌最快發揮效用。
角色總是能夠更容易引起共情，因為一個具體的角色總能夠更加具象和立體地呈現特征、傳達情感甚至在某些方面引起互動。
值得一提的是，在品牌設計方面，設計師將想象力和品牌特征加諸角色，也可以幫用戶和觀看者構建出想象空間。
使用角色或者吉祥物構建的 LOGO 可以更加輕松地應用到海報、標牌、廣告、動畫、社交媒體等地方。這類 LOGO 設計的重難點，是如何通過簡單的角色傳遞出獨特的氣質和情緒。
在抖音風靡全世界之前，很少會有人在 LOGO 中玩故障效果。一方面是故障風并沒有那么主流，雖然很贊很賽博朋克，另一方面是和故障風在氣質上契合的品牌其實并沒有那么多。
不過在這個注意力資源稀缺的時代，前有大廠帶路，后有市場壓力，很多品牌開始在條件允許的情況下，盡可能地采用更為大膽的故障效果，瘋狂地、富有創造性地嘗試這一效果。
總而言之，如果你正在尋找一些特殊的 LOGO 效果，來試試故障效果吧。
動效，或者我們稱之為微動效，是在2020年之前就存在的東西，不過在 LOGO 設計領域的大范圍流行，應該在 2021 年。在數字硬件性能過剩的今天，讓 LOGO 動起來并不是什么大事，只要它能夠吸引用戶的注意力。
唯一的問題是在于，怎么動才會讓它恰到好處？很簡單，看看別人都是怎么做的：
和 3D 設計一樣，漸變色也一直身處設計領域的話題中心。漸變本身會賦予 LOGO 以更強的體積感和立體感，讓色彩更加有趣，即使 LOGO 不動的時候，依然具有足夠的「動感」，這大概是漸變色最富有價值的地方。
值得注意的是，隨著「擬物化」的「文藝復興」，大幅度漸變色重新成為了設計師們的寵兒，雖然這是大趨勢，但是在設計 LOGO 的時候，依然要注意堅守品牌色，同時控制好變化幅度，避免過猶不及的情況發生。
回歸簡約和基礎可能也是 2021 年 LOGO 設計的一個重要的主題。很少有東西能像基礎的幾何圖形那樣具有啟發性和趣味性。
將基礎的幾何圖形進行重新的排列組合，可以創作出各式各樣的圖形，傳達隱喻，還富有藝術性。在2021年，你可以嘗試一下這種 LOGO 設計，它巧妙且有趣。這種設計還可以結合動畫和色彩變換，創造出引人入勝的動畫效果。
相比于其他的設計門類，LOGO 設計更加考驗設計師的基本功和打磨的耐心，而與此同時還能擁抱變化的設計師，能夠在接下來的 2021年，創作出更優秀的作品。
文章來源：優設 作者：Iveta Pavlova
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
每年的雙11在設計師們的眼里，都不僅僅是購物狂歡節還是一場視覺盛宴。這不，今年的雙11重頭戲來了。
天貓聯合各品牌發布了超級符合“貓頭海報”，一共55家下面讓我們一次看個夠。
1. 泡泡瑪特，很有意思的創意
2. The North Face場景感十足
3. 好奇很溫馨的設計
4. 外星人，一直都想買的電腦
5. VANS，我喜歡他家的黑格子鞋
6. Levi’s，我服了
7. 麥當勞，煙霧的創意很契合產品
8. 惠氏鉑臻3，一團線織出來的創意
9. 拉面說，來碗面
10. 宜家家居，仔細看，是購物袋
11. 巴黎歐萊雅，萬能的C4D
12. 朗仕，細節很多
13. 華為，冷暖對比很有沖擊力
14. 樂高，積木的海洋
15. Marshall，燥起來
16. Jordan，喬丹
17. 肯德基，WOW好吃！
18. 林氏木業，俯視的構圖角度，空間感很強
19. 元氣森林，故事性很強
20. 強生，滿是愛
21. fresh，高端的護膚品牌
22. 萬代，為“酷”而生
23. 始祖鳥，化石來了
24. 三生花，旗袍肯定很漂亮
25. HOLLISTER，一起沖浪
26. 施華洛世奇，每個女孩都值得擁有
27. PINKO，亂的有創意
28. MINI，我有個進MINI車友群的夢
29. 孩之寶變形金剛，汽車人變形
30. Onisuka Tiger，日本的運動產品品牌
31. 優衣庫，線下實體店的貨架創意
32. 三頓半
33. OLAY
34. Dyson，很親切的表達方式
35. 迪士尼商店，可愛、好玩
36. NIKE
37. 法國嬌蘭，看起來很貴氣
38. 榮耀
39. LINE FRIENDS
40. M.A.C
41. 紅星美凱龍，空間感很強
42. NET-A-PORTER，泡泡龍的感覺
43. 稀奇，太喜感了
44. 百威，喲喲切克鬧
45. 芭比
46. 李子柒，依然還是熟悉的味道
47. 愛他美3，陽光帥氣
48. 花西子，雕刻工藝品
49. 伊利谷粒多，太美了
50. Apple，表情包集合
51. 滴露，傳統國風的感覺
52. Moleskine
53. 大疆，很喜歡無人機，有一起拼單的嗎？
54. 繪兒樂，這個創意現實中我玩過
55. 樂事，好吃
每個品牌對于貓頭的創意表達都不一樣，很多都是生活中隨處能見到的，但在設計師的眼中，就是創意靈感來源。
下面還有視頻版，大家一起看看：
以下視頻來源于
看完今年的貓頭海報，讓我更加期待接下來各品牌雙11活動的玩法和創意。接下來讓我拭目以待吧。
專注設計理論書籍，大多偏底層原理的知識，特意整理過往的筆記與設計心得分享一下。對設計的學習，要知其然，也要知其所以然。
以上都是近年來的幾本閱讀筆記和心得總結，一直在慢慢整理中。特意分享給各位作為參考交流，本文還有諸多不足，望各位批評指證。
此篇為構圖與形狀的第二節，開始深入原理的探討，第三節是關于構圖與形狀與人類知覺關聯的深層內容。
理論不同于軟件和技法，短時間的學習就能看到進步，不能現學現賣。它是一種所謂的“種樹”過程，靠的是日積月累，是一種學習、消化、迭代的過程，一種由量變到質變的過程。需要堅持不懈、持之以恒。
僅作免費交流與啟發，請勿商用! 謝謝！
參考書籍：
《繪圖構圖學》常銳倫
《圖像語言的私密》Molly.Bang
《攝影構圖學》本.克萊門茨，大衛.羅森菲爾德
《圖解藝術》郭書宣
《迷情黑白》Marcos Mateu-Mestre
《設計元素.造型與空間》丹尼斯.M.普哈拉
《藝術與視知覺》魯道夫.阿恩海姆
文章來源：站酷網
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn
