起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識圖標設計總結：斷線圖標規律
四個月前答應過大家要寫一篇關于斷線圖標的規律，一直沒來得及總結，很多人說想知道，終于，今天它來了，哈哈哈！
對于圖標如何斷線，如果是經驗豐富的設計師，估計靠感覺做就可以了，但不是大神的我們怎么辦呢？總得有點規律讓我們參考參考吧，雖然有些規律不能全盤通用，但這次總結一定能給你帶來幫助。
來，看下大綱：
1.先考慮在拼接處斷線
2.平衡視覺復雜度
3.避免正中間處斷線
4.盡量讓圖標一筆畫完
1.先考慮在拼接處斷線
如果一個物體是由兩個部分組成，當我們選擇在拼接處斷開：
我會覺得兩個部分還沒組裝好，是一種很自然的分開。
但如果是下面這樣的：
我會覺得它壞了，很不舒服。
我們做斷線圖標的時候也一樣，可以先考慮在物體的拼接處斷線，讓斷口看起來自然和諧！
舉個例子：
下圖是一個“我的”圖標：
如果現在讓我給它來做斷線，我就先找到拼接處，分析如下：
雖然例子有點血腥，但事實確實如此，拼接處就在頭和身子連接的地方，所以嘗試在這里斷開：
哎呦，我覺得還ok。
行，那再來個例子！
下圖是個消息的圖標：
再來分析，它的外形是由一個矩形和一個三角形組成的：
我們還是在拼接處斷開，得到如下圖：
嗯，也還行！
所以一般來做斷線圖標，我就會先利用這一個規律看可不可行。
如果可行，就繼續優化細節，如果不可行再嘗試其他方法。
2.視覺復雜度要平衡
有時候，我們的圖標不好將其拆解，這時候我們就可以嘗試去考慮圖標的視覺復雜度。
來個例子，下圖是一個皇冠的圖標：
經過分析，我們可以得出，圖標紅色區域的復雜程度要比藍色區域高：
所以我選擇在藍色區域斷口，來增加藍色區域的復雜程度，達到平衡的效果：
那如果在紅色區域斷開是什么樣的呢，我們來分析對比一下：
所以，通過對視覺上復雜程度的解析后發現，方案一會平衡協調很多！
再來個例子，下面是個通訊錄圖標：
圖標的左側要比右側復雜:
如果我們選擇在左側斷線，那左側就會更復雜，這樣兩邊的復雜度就會失調，所以我選擇在右邊斷線：
這樣圖標左右都有細節，視覺平衡多了！
3.避免正中間處斷線
有朋友會說了，那有些圖標沒有拼接處，復雜程度也都一樣，比如下面這種：
怎么辦呢？
很簡單，這種圖標只要盡量避免在正中間斷線就ok，因為正中間斷線顯得過于呆板：
其它地方都可以嘗試，例如左上角、左上角、右上角、右下角等等。
4.盡量讓圖標一筆畫完
這也是一個很重要的知識點：如果可以的話盡量讓圖標外輪廓一筆畫完，如下圖：
其實很多時候，只要我們能從拼接處斷線，基本都是可以一筆畫完的，所以大家注意一下就好了。
當然，如果實在不能一筆畫下來，也不必勉強，因為強扭的瓜不好看！
總結
這四個知識點就是目前為止菜心所整理的關于斷線圖標的規律，個人經驗，供大家參考。
不過提醒大家，這些方法難免會有少數不適用的時候，遇到不適用的情況，千萬不要因為規則而被困住，多多嘗試，敢于不同，也許可以找到更合適的解決方案。
科科！
#專欄作家#
菜心，微信公眾號：菜心設計鋪，人人都是產品經理專欄作家，前華為ITUX用戶體驗設計師（主視覺），3年工作經驗，參與華為Welink、3MS、連長社區等多個項目的用戶體驗設計工作。歡迎大家互相交流關注。
本文原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自PEXELS，基于CC0協議
get
拼接處斷裂 – 避免正中間斷裂 – 根據復雜程度斷裂 – icon盡可能一筆畫完成
get到實用的新知識了
拼接處，復雜程度，一筆畫，避免正中間