四個月前答應(yīng)過大家要寫一篇關(guān)于斷線圖標(biāo)的規(guī)律，一直沒來得及總結(jié)，很多人說想知道，終于，今天它來了，哈哈哈！

對于圖標(biāo)如何斷線，如果是經(jīng)驗豐富的設(shè)計師，估計靠感覺做就可以了，但不是大神的我們怎么辦呢？總得有點規(guī)律讓我們參考參考吧，雖然有些規(guī)律不能全盤通用，但這次總結(jié)一定能給你帶來幫助。

來，看下大綱：

1.先考慮在拼接處斷線

2.平衡視覺復(fù)雜度

3.避免正中間處斷線

4.盡量讓圖標(biāo)一筆畫完

1.先考慮在拼接處斷線

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

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

但如果是下面這樣的：

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

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

舉個例子：

下圖是一個“我的”圖標(biāo)：

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

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

哎呦，我覺得還ok。

行，那再來個例子！

下圖是個消息的圖標(biāo)：

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

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

嗯，也還行！

所以一般來做斷線圖標(biāo)，我就會先利用這一個規(guī)律看可不可行。

如果可行，就繼續(xù)優(yōu)化細節(jié)，如果不可行再嘗試其他方法。

2.視覺復(fù)雜度要平衡

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

來個例子，下圖是一個皇冠的圖標(biāo)：

經(jīng)過分析，我們可以得出，圖標(biāo)紅色區(qū)域的復(fù)雜程度要比藍色區(qū)域高：

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

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

所以，通過對視覺上復(fù)雜程度的解析后發(fā)現(xiàn)，方案一會平衡協(xié)調(diào)很多！

再來個例子，下面是個通訊錄圖標(biāo)：

圖標(biāo)的左側(cè)要比右側(cè)復(fù)雜:

如果我們選擇在左側(cè)斷線，那左側(cè)就會更復(fù)雜，這樣兩邊的復(fù)雜度就會失調(diào)，所以我選擇在右邊斷線：

這樣圖標(biāo)左右都有細節(jié)，視覺平衡多了！

3.避免正中間處斷線

有朋友會說了，那有些圖標(biāo)沒有拼接處，復(fù)雜程度也都一樣，比如下面這種：

怎么辦呢？

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

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

4.盡量讓圖標(biāo)一筆畫完

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

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

當(dāng)然，如果實在不能一筆畫下來，也不必勉強，因為強扭的瓜不好看！

總結(jié)

這四個知識點就是目前為止菜心所整理的關(guān)于斷線圖標(biāo)的規(guī)律，個人經(jīng)驗，供大家參考。

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

科科！

#專欄作家#

菜心，微信公眾號：菜心設(shè)計鋪，人人都是產(chǎn)品經(jīng)理專欄作家，前華為ITUX用戶體驗設(shè)計師（主視覺），3年工作經(jīng)驗，參與華為Welink、3MS、連長社區(qū)等多個項目的用戶體驗設(shè)計工作。歡迎大家互相交流關(guān)注。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自PEXELS，基于CC0協(xié)議