如何畫好斷線圖標？我總結了這4個規律

@菜心設計鋪 ：關于圖標如何斷線，如果是經驗豐富的設計師，估計靠感覺做就可以了，但不是大神的我們怎么辦呢？總得有點規律讓我們參考吧。雖然有些規律不能全盤通用，但這次總結一定能給你帶來幫助。

大綱如下：

• 先考慮在拼接處斷線
• 平衡視覺復雜度
• 避免正中間處斷線
• 盡量讓圖標一筆畫完

一. 先考慮在拼接處斷線

如果一個物體是由兩個部分組成，當我們選擇在拼接處斷開：

我會覺得兩個部分還沒組裝好，是一種很自然的分開。

但如果是下面這樣的：

我會覺得它壞了，很不舒服。

我們做斷線圖標的時候也一樣，可以先考慮在物體的拼接處斷線，讓斷口看起來自然和諧。

舉個例子，下圖是一個「我的」圖標：

如果現在讓我給它來做斷線，我就先找到拼接處，分析如下：

雖然例子有點血腥，但事實確實如此，拼接處就在頭和身子連接的地方，所以嘗試在這里斷開：

我覺得還可以。行，那再來個例子。下圖是個消息的圖標：

再來分析，它的外形是由一個矩形和一個三角形組成的：

我們還是在拼接處斷開，得到如下圖：

嗯，也還行。

所以一般做斷線圖標，我會先利用這一個規律看看可不可行。

如果可行，就繼續優化細節，如果不可行再嘗試其他方法。

二. 視覺復雜度要平衡

有時候，我們不好將其圖標拆解，這時候我們就可以嘗試去考慮圖標的視覺復雜度。

來個例子，下圖是一個皇冠的圖標：

經過分析，我們可以得出，圖標紅色區域的復雜程度要比藍色區域高：

所以我選擇在藍色區域斷口，來增加藍色區域的復雜程度，達到平衡的效果：

那如果在紅色區域斷開是什么樣的呢，我們來分析對比一下：

所以，通過對視覺上復雜程度的解析后發現，方案一會平衡協調很多。

再來個例子，下面是個通訊錄圖標：

圖標的左側要比右側復雜:

如果我們選擇在左側斷線，那左側就會更復雜，這樣兩邊的復雜度就會失調，所以我選擇在右邊斷線：

這樣圖標左右都有細節，視覺上平衡多了。

三. 避免正中間處斷線

有朋友會說，有些圖標沒有拼接處，復雜程度也都一樣，比如下面這種：

怎么辦呢？

很簡單，這種圖標只要盡量避免在正中間斷線就ok，因為正中間斷線顯得過于呆板：

其它地方都可以嘗試，例如左上角、左上角、右上角、右下角等等。

四. 盡量讓圖標一筆畫完

這也是一個很重要的知識點：如果可以的話盡量讓圖標外輪廓一筆畫完，如下圖：

其實很多時候，只要我們能從拼接處斷線，基本都是可以一筆畫完的，所以大家注意一下就好了。

當然，如果實在不能一筆畫下來，也不必勉強，因為強扭的瓜不好看。

總結

這四個知識點就是目前為止菜心所整理的關于斷線圖標的規律，個人經驗，供大家參考。

不過提醒大家，這些方法難免會有少數不適用的時候，遇到不適用的情況，千萬不要因為規則而被困住，多多嘗試，敢于不同，也許可以找到更合適的解決方案。

歡迎關注作者的微信公眾號：「菜心設計鋪」

「經驗總結！圖標設計技巧」

• 《從零基礎到合格，我總結了這5個圖標設計實戰方法》
• 《用品牌基因法做圖標設計，高級UI設計師才會的手法！》
• 《用品牌基因法做圖標設計，高級UI設計師才會的手法！（升級篇）》
• 《用品牌基因法做圖標設計，高級UI設計師才會的手法！（實戰篇）》

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優優教程網： UiiiUiii.com是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備：http://hao.uisdc.com