從零開始學！B 端產品圖標繪制指南（細節篇）

前一篇文章《從零開始學！B 端產品圖標繪制指南（創意篇）》跟大家分享了圖標設計的創意階段，今天繼續第二篇，總結營造高級感有哪些技巧，以及設計整套圖標庫需要在哪些方面統一規范。

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

1. 描邊

依據圖標的使用場景和風格定位，為描邊選擇合適的粗細：

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

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

△ 按鈕圖標一般描邊較粗，也可以使用線面結合、面性圖標的方式表現。作者 Niclas Ernst 發表于 Dribbble

△ 展示圖標的描邊可以很纖細，利用背景色塊強化存在感。作者 Peter Deltondo 發表于 Dribbble

一個圖標也可以有兩到三種描邊粗細。

△ 外框使用粗描邊，細節使用細描邊。作者 Gloria Qiu 發表于 Dribbble

統一規范時要注意，除了粗細統一（包括多種粗細），描邊端點（平頭、圓頭、方頭）和邊角（斜接、圓角、斜切）的屬性也要保持統一。

△ Adobe Illustrator 描邊面板

2. 圓角

適度的圓角可以賦予圖標親切柔和的氣質，但要避免圓角太大，會顯得軟萌，不符合 B 端產品中立、冷靜的氣質。

為保證規范統一，簡單圖形最好只有一種圓角半徑，復雜圖形盡量控制在兩種以內。

△ 圓角適中，風格中立。作者 Guicon 發表于 Dribbble

△ 圓角較大，風格傾向于軟萌。作者 Rizki Kurniawan Darsono 發表于 Dribbble

3. 混搭

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

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

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

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

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

4. 傾斜

傾斜可以打破中規中矩的保守感，還可以平衡細長圖標和方正圖標的視覺重量。

注意不要破壞構圖的穩定性，采用相同角度或鏡像對稱來保證視覺統一。

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

5. 色彩

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

注意在配色時要有品牌意識，不可與 VI 手冊色彩規范相沖突。

為了表現高級感，不要使用太多高飽和度的顏色，否則會有吵鬧和沖撞的感覺。

△ 多色描邊，注意觀察外框、細節、特征點分別如何用色。作者 Kyle Anthony Miller 發表于 Dribbble

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

△ 部分填充，背景局部點綴，用色透氣靈動。作者 Dmitri Litvinov 發表于 Dribbble

6. 層次

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

要注意層次和細節多了，統一規范的內容也隨之增加。

陰影和投影：假設光源在固定角度照射（例如正上方、斜上方、側方），由此產生的陰影和投影應大致在中心對稱的位置，即大致圍著圖標中心旋轉 180°。

透視：透視角度一致，常見的角度例如正視圖、俯視圖、側視圖、現在流行的等軸測圖等。一般情況下首先考慮正視圖，除非正視圖不能表現出對象特征，需要從其他角度補充細節。注意細節增加，圖標可辨識度未必提升。

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

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

△ 漸變色填充。作者 Daniel Bograd 發表于 Dribbble

△ 雖然是線性圖標，但通過線條顏色的變化表現陰影和層次。作者 Eddie Lobanovskiy 發表于 Dribbble

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

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

7. 透氣

如果大家喜歡攝影或者中國畫，應該能從中感受到精妙留白營造的靈動之感。透氣，就是層次之間留有空間。構圖時注意畫面不要太實，細節不要太滿。

△ 虛線比實線透氣。作者 Marina Fedoseenko 發表于 Dribbble

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

△ 填充偏移。作者 Anthony Gribben 發表于 Dribbble

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

8. 注意

在設計中表現高級感，設計師首先要做的是提升自己審美品味，平時多觀察，多總結，多積累。

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

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

設計師們也可以從其他領域尋找靈感，比如建筑、攝影、繪畫、雕塑、空間設計等等，這里就不展開說了。

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

統一規范，腦袋里始終有品牌意識

除了上面提到的描邊粗細、圓角半徑、傾斜角度、色彩、光源和陰影等細節需要統一，以下幾個方面經常被忽略，但對圖標統一性的表現有較大影響。

1. 節奏感協調

線性圖標的節奏由線條和其間距構成，單個圖標的線條可以疏密相間，但一整套圖標庫應該有大致規律，不要某些圖標線條都很緊湊，其他圖標的線條都很疏離。面性圖標的疏密節奏由色塊和其間距構成，也是類似的規律。

△ 單個圖標線條節奏疏密相間，但整體節奏是規律的。作者 Dmitri Litvinov 發表于 Dribbble

2. 視覺重量均衡

視覺重量均衡不單是尺寸統一，形狀、面積、顏色、細節復雜度等都會影響一個圖標的體量輕重。比如規則形狀比不規則形狀（尤其是非對稱形狀）更穩定，視覺上更重；相同高度和寬度的正方形、圓形、三角形面積遞減，視覺重量上也隨之遞減；深色比淺色感覺沉重（深色背景相反）；細節越多，留白越少，畫面越滿，視覺感覺更重等等。因此視覺重量是多種因素疊加產生的結果，畫圖標時也要從多個角度來審視和靈活調整。

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

△ 通過調整細節復雜度來平衡不同圖標的視覺重量。作者 Jaya Prakash 發表于Dribbble。作者

3. 前景和背景

當圖標由兩個圖案組合而成時，一前一后的圖案分別是前景圖、背景圖。不管是前景圖還是背景圖，重復出現的時候要大小統一和位置固定，不要有時在前有時在后，有時在上有時在下。

需要注意的是，前景圖會遮擋背景圖部分細節，不要遮擋關鍵細節。另外組合而成的兩個圖案要適當降低細節復雜度，避免合在一起的時候太過復雜，跟單個圖案的圖標對比視覺重量太重，破壞視覺平衡。

△ 前景和背景，大小統一位置固定。作者 Afshin Mhmdi 發表于Dribbble

4. 注意

雖然圖標設計需要遵循統一規范，但以「整齊劃一」來要求圖標設計是不合理的，刻板遵守規范可能會產生死板僵硬的感覺。遇到一些特殊情況完全可以靈活處理，只要整體效果協調不突兀即可。

△ 表現禁用狀態時，紅色部分有時在右上，有時在左下，整體上依舊協調。作者 Martin David 發表于Dribbble

總結

今天內容所選的案例并不都是 B 端產品的應用，也不都是完美的設計，希望大家能取其精華去其糟粕，吸收有價值有營養的部分，而不是刻意模仿。

歡迎關注作者的微信公眾號：「能呆書房一整天」