前一篇文章《從零開始學(xué)！B 端產(chǎn)品圖標(biāo)繪制指南（創(chuàng)意篇）》跟大家分享了圖標(biāo)設(shè)計(jì)的創(chuàng)意階段，今天繼續(xù)第二篇，總結(jié)營造高級(jí)感有哪些技巧，以及設(shè)計(jì)整套圖標(biāo)庫需要在哪些方面統(tǒng)一規(guī)范。

營造高級(jí)感，B端也可以精致又耐看

1. 描邊

依據(jù)圖標(biāo)的使用場(chǎng)景和風(fēng)格定位，為描邊選擇合適的粗細(xì)：

• 按鈕圖標(biāo)的表現(xiàn)要簡(jiǎn)潔有力，描邊一般偏粗，也可以使用面性圖標(biāo)或線面結(jié)合，增加存在感和召喚力；
• 展示圖標(biāo)描邊粗細(xì)的自由度大一些，但看起來不要像按鈕，以免誤導(dǎo)用戶點(diǎn)擊。

簡(jiǎn)而言之，描邊過粗會(huì)顯得突兀，細(xì)節(jié)混沌不清；描邊過細(xì)會(huì)缺少重量，感覺太飄，要把握好平衡。

△ 按鈕圖標(biāo)一般描邊較粗，也可以使用線面結(jié)合、面性圖標(biāo)的方式表現(xiàn)。作者 Niclas Ernst 發(fā)表于 Dribbble

△ 展示圖標(biāo)的描邊可以很纖細(xì)，利用背景色塊強(qiáng)化存在感。作者 Peter Deltondo 發(fā)表于 Dribbble

一個(gè)圖標(biāo)也可以有兩到三種描邊粗細(xì)。

△ 外框使用粗描邊，細(xì)節(jié)使用細(xì)描邊。作者 Gloria Qiu 發(fā)表于 Dribbble

統(tǒng)一規(guī)范時(shí)要注意，除了粗細(xì)統(tǒng)一（包括多種粗細(xì)），描邊端點(diǎn)（平頭、圓頭、方頭）和邊角（斜接、圓角、斜切）的屬性也要保持統(tǒng)一。

△ Adobe Illustrator 描邊面板

2. 圓角

適度的圓角可以賦予圖標(biāo)親切柔和的氣質(zhì)，但要避免圓角太大，會(huì)顯得軟萌，不符合 B 端產(chǎn)品中立、冷靜的氣質(zhì)。

為保證規(guī)范統(tǒng)一，簡(jiǎn)單圖形最好只有一種圓角半徑，復(fù)雜圖形盡量控制在兩種以內(nèi)。

△ 圓角適中，風(fēng)格中立。作者 Guicon 發(fā)表于 Dribbble

△ 圓角較大，風(fēng)格傾向于軟萌。作者 Rizki Kurniawan Darsono 發(fā)表于 Dribbble

3. 混搭

如果把圖標(biāo)抽象成基礎(chǔ)幾何形，可以有方形、矩形、圓形、三角形、星形等形狀。不同基本形混搭（例如方形+圓形，矩形+三角形），對(duì)比相同類型重復(fù)（例如方形+方形，圓形+圓形），可以讓圖標(biāo)更有活力不沉悶，但要注意構(gòu)圖均衡，避免頭重腳輕或者重心偏向一邊。

組合形式有嵌套（里外），拼接（上下左右），堆疊（前后）幾種。

△ 不同幾何形的嵌套、拼接、堆疊。作者 Eddie Lobanovskiy 發(fā)表于 Dribbble

其實(shí)相同類型也可以通過長短、高低、正三角倒三角等組合，形成錯(cuò)落有致的搭配。

△ 相同幾何形的搭配。作者 Eddie Lobanovskiy 發(fā)表于 Dribbble

4. 傾斜

傾斜可以打破中規(guī)中矩的保守感，還可以平衡細(xì)長圖標(biāo)和方正圖標(biāo)的視覺重量。

注意不要破壞構(gòu)圖的穩(wěn)定性，采用相同角度或鏡像對(duì)稱來保證視覺統(tǒng)一。

△ 傾斜可以平衡視覺重量，注意傾斜角度的規(guī)律。作者 CMARIX TechnoLabs 發(fā)表于 Dribbble

5. 色彩

一旦有了顏色，設(shè)計(jì)師能夠施展的空間可以說非常大了。可以是純色、漸變色、不透明度疊加、不同混合模式的疊加。顏色可以用在填充、描邊，也可以僅局部點(diǎn)綴。顏色可以是封閉的、溢出的、內(nèi)縮的、偏移的……

注意在配色時(shí)要有品牌意識(shí)，不可與 VI 手冊(cè)色彩規(guī)范相沖突。

為了表現(xiàn)高級(jí)感，不要使用太多高飽和度的顏色，否則會(huì)有吵鬧和沖撞的感覺。

△ 多色描邊，注意觀察外框、細(xì)節(jié)、特征點(diǎn)分別如何用色。作者 Kyle Anthony Miller 發(fā)表于 Dribbble

△ 描邊和背景的兩種顏色采用正片疊底的混合模式。作者 Ted Kulakevich 發(fā)表于 Dribbble

△ 部分填充，背景局部點(diǎn)綴，用色透氣靈動(dòng)。作者 Dmitri Litvinov 發(fā)表于 Dribbble

6. 層次

設(shè)計(jì)師們漸漸厭倦了純粹的扁平效果，開始加入各種輕質(zhì)感，例如運(yùn)用光和影增加立體感和深度，使用線條勾勒出等軸測(cè)圖的透視效果等。

要注意層次和細(xì)節(jié)多了，統(tǒng)一規(guī)范的內(nèi)容也隨之增加。

陰影和投影：假設(shè)光源在固定角度照射（例如正上方、斜上方、側(cè)方），由此產(chǎn)生的陰影和投影應(yīng)大致在中心對(duì)稱的位置，即大致圍著圖標(biāo)中心旋轉(zhuǎn) 180°。

透視：透視角度一致，常見的角度例如正視圖、俯視圖、側(cè)視圖、現(xiàn)在流行的等軸測(cè)圖等。一般情況下首先考慮正視圖，除非正視圖不能表現(xiàn)出對(duì)象特征，需要從其他角度補(bǔ)充細(xì)節(jié)。注意細(xì)節(jié)增加，圖標(biāo)可辨識(shí)度未必提升。

△ 輕薄透氣的陰影使線性圖標(biāo)有了立體感。作者 Bipin Balan 發(fā)表于 Dribbble

△ 投影使圖標(biāo)有了深度，注意投影的模糊程度和位移距離，交代了元素之間的距離。作者 415Agency 發(fā)表于 Dribbble

△ 漸變色填充。作者 Daniel Bograd 發(fā)表于 Dribbble

△ 雖然是線性圖標(biāo)，但通過線條顏色的變化表現(xiàn)陰影和層次。作者 Eddie Lobanovskiy 發(fā)表于 Dribbble

△ 注意光源方向和陰影位置一致性。作者Ted Kulakevich 發(fā)表于 Dribbble

△ 透視角度一致。作者 Andrey Kopyrin 發(fā)表于 Dribbble

7. 透氣

如果大家喜歡攝影或者中國畫，應(yīng)該能從中感受到精妙留白營造的靈動(dòng)之感。透氣，就是層次之間留有空間。構(gòu)圖時(shí)注意畫面不要太實(shí)，細(xì)節(jié)不要太滿。

△ 虛線比實(shí)線透氣。作者 Marina Fedoseenko 發(fā)表于 Dribbble

△ 線條采用斷點(diǎn)、故意不封閉，且銜接之處留有空隙，以及填充色內(nèi)縮。作者 HarikaDeng 發(fā)表于 iconfont

△ 填充偏移。作者 Anthony Gribben 發(fā)表于 Dribbble

△ 注意色塊和黑色描邊留有空隙，且空隙間距一致。作者 Kyle Anthony Miller 發(fā)表于 Dribbble

8. 注意

在設(shè)計(jì)中表現(xiàn)高級(jí)感，設(shè)計(jì)師首先要做的是提升自己審美品味，平時(shí)多觀察，多總結(jié)，多積累。

對(duì)著好作品不要按部就班的臨摹，這樣很難深刻理解細(xì)節(jié)之間是怎樣互相影響和牽制的。我的建議是仔細(xì)觀察原作后，自己不看稿再畫一遍，然后和原作對(duì)比，研究差距在哪里。

這個(gè)過程不僅要研究表現(xiàn)技巧，更要琢磨里面的「道」，這樣才能真正內(nèi)化所學(xué)并為己所用，而不是淺層次的山寨和抄襲。

設(shè)計(jì)師們也可以從其他領(lǐng)域?qū)ふ异`感，比如建筑、攝影、繪畫、雕塑、空間設(shè)計(jì)等等，這里就不展開說了。

另外，設(shè)計(jì)要有高級(jí)感但也要接地氣，要冷靜克制但也要有親和力，要嚴(yán)謹(jǐn)中立但也要包容貼心。一切以用戶為中心，形式服從功能，不要本末倒置。

統(tǒng)一規(guī)范，腦袋里始終有品牌意識(shí)

除了上面提到的描邊粗細(xì)、圓角半徑、傾斜角度、色彩、光源和陰影等細(xì)節(jié)需要統(tǒng)一，以下幾個(gè)方面經(jīng)常被忽略，但對(duì)圖標(biāo)統(tǒng)一性的表現(xiàn)有較大影響。

1. 節(jié)奏感協(xié)調(diào)

線性圖標(biāo)的節(jié)奏由線條和其間距構(gòu)成，單個(gè)圖標(biāo)的線條可以疏密相間，但一整套圖標(biāo)庫應(yīng)該有大致規(guī)律，不要某些圖標(biāo)線條都很緊湊，其他圖標(biāo)的線條都很疏離。面性圖標(biāo)的疏密節(jié)奏由色塊和其間距構(gòu)成，也是類似的規(guī)律。

△ 單個(gè)圖標(biāo)線條節(jié)奏疏密相間，但整體節(jié)奏是規(guī)律的。作者 Dmitri Litvinov 發(fā)表于 Dribbble

2. 視覺重量均衡

視覺重量均衡不單是尺寸統(tǒng)一，形狀、面積、顏色、細(xì)節(jié)復(fù)雜度等都會(huì)影響一個(gè)圖標(biāo)的體量輕重。比如規(guī)則形狀比不規(guī)則形狀（尤其是非對(duì)稱形狀）更穩(wěn)定，視覺上更重；相同高度和寬度的正方形、圓形、三角形面積遞減，視覺重量上也隨之遞減；深色比淺色感覺沉重（深色背景相反）；細(xì)節(jié)越多，留白越少，畫面越滿，視覺感覺更重等等。因此視覺重量是多種因素疊加產(chǎn)生的結(jié)果，畫圖標(biāo)時(shí)也要從多個(gè)角度來審視和靈活調(diào)整。

△ 高度和寬度相等，但面積遞減，視覺重量遞減。

△ 通過調(diào)整細(xì)節(jié)復(fù)雜度來平衡不同圖標(biāo)的視覺重量。作者 Jaya Prakash 發(fā)表于Dribbble。作者

3. 前景和背景

當(dāng)圖標(biāo)由兩個(gè)圖案組合而成時(shí)，一前一后的圖案分別是前景圖、背景圖。不管是前景圖還是背景圖，重復(fù)出現(xiàn)的時(shí)候要大小統(tǒng)一和位置固定，不要有時(shí)在前有時(shí)在后，有時(shí)在上有時(shí)在下。

需要注意的是，前景圖會(huì)遮擋背景圖部分細(xì)節(jié)，不要遮擋關(guān)鍵細(xì)節(jié)。另外組合而成的兩個(gè)圖案要適當(dāng)降低細(xì)節(jié)復(fù)雜度，避免合在一起的時(shí)候太過復(fù)雜，跟單個(gè)圖案的圖標(biāo)對(duì)比視覺重量太重，破壞視覺平衡。

△ 前景和背景，大小統(tǒng)一位置固定。作者 Afshin Mhmdi 發(fā)表于Dribbble

4. 注意

雖然圖標(biāo)設(shè)計(jì)需要遵循統(tǒng)一規(guī)范，但以「整齊劃一」來要求圖標(biāo)設(shè)計(jì)是不合理的，刻板遵守規(guī)范可能會(huì)產(chǎn)生死板僵硬的感覺。遇到一些特殊情況完全可以靈活處理，只要整體效果協(xié)調(diào)不突兀即可。

△ 表現(xiàn)禁用狀態(tài)時(shí)，紅色部分有時(shí)在右上，有時(shí)在左下，整體上依舊協(xié)調(diào)。作者 Martin David 發(fā)表于Dribbble

總結(jié)

今天內(nèi)容所選的案例并不都是 B 端產(chǎn)品的應(yīng)用，也不都是完美的設(shè)計(jì)，希望大家能取其精華去其糟粕，吸收有價(jià)值有營養(yǎng)的部分，而不是刻意模仿。

歡迎關(guān)注作者的微信公眾號(hào)：「能呆書房一整天」