@菜心設(shè)計(jì)鋪 ：關(guān)于圖標(biāo)如何斷線，如果是經(jīng)驗(yàn)豐富的設(shè)計(jì)師，估計(jì)靠感覺(jué)做就可以了，但不是大神的我們?cè)趺崔k呢？總得有點(diǎn)規(guī)律讓我們參考吧。雖然有些規(guī)律不能全盤(pán)通用，但這次總結(jié)一定能給你帶來(lái)幫助。

大綱如下：

• 先考慮在拼接處斷線
• 平衡視覺(jué)復(fù)雜度
• 避免正中間處斷線
• 盡量讓圖標(biāo)一筆畫(huà)完

一. 先考慮在拼接處斷線

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

我會(huì)覺(jué)得兩個(gè)部分還沒(méi)組裝好，是一種很自然的分開(kāi)。

但如果是下面這樣的：

我會(huì)覺(jué)得它壞了，很不舒服。

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

舉個(gè)例子，下圖是一個(gè)「我的」圖標(biāo)：

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

雖然例子有點(diǎn)血腥，但事實(shí)確實(shí)如此，拼接處就在頭和身子連接的地方，所以嘗試在這里斷開(kāi)：

我覺(jué)得還可以。行，那再來(lái)個(gè)例子。下圖是個(gè)消息的圖標(biāo)：

再來(lái)分析，它的外形是由一個(gè)矩形和一個(gè)三角形組成的：

我們還是在拼接處斷開(kāi)，得到如下圖：

嗯，也還行。

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

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

二. 視覺(jué)復(fù)雜度要平衡

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

來(lái)個(gè)例子，下圖是一個(gè)皇冠的圖標(biāo)：

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

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

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

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

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

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

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

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

三. 避免正中間處斷線

有朋友會(huì)說(shuō)，有些圖標(biāo)沒(méi)有拼接處，復(fù)雜程度也都一樣，比如下面這種：

怎么辦呢？

很簡(jiǎn)單，這種圖標(biāo)只要盡量避免在正中間斷線就ok，因?yàn)檎虚g斷線顯得過(guò)于呆板：

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

四. 盡量讓圖標(biāo)一筆畫(huà)完

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

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

當(dāng)然，如果實(shí)在不能一筆畫(huà)下來(lái)，也不必勉強(qiáng)，因?yàn)閺?qiáng)扭的瓜不好看。

總結(jié)

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

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

歡迎關(guān)注作者的微信公眾號(hào)：「菜心設(shè)計(jì)鋪」

「經(jīng)驗(yàn)總結(jié)！圖標(biāo)設(shè)計(jì)技巧」

• 《從零基礎(chǔ)到合格，我總結(jié)了這5個(gè)圖標(biāo)設(shè)計(jì)實(shí)戰(zhàn)方法》
• 《用品牌基因法做圖標(biāo)設(shè)計(jì)，高級(jí)UI設(shè)計(jì)師才會(huì)的手法！》
• 《用品牌基因法做圖標(biāo)設(shè)計(jì)，高級(jí)UI設(shè)計(jì)師才會(huì)的手法?。ㄉ?jí)篇）》
• 《用品牌基因法做圖標(biāo)設(shè)計(jì)，高級(jí)UI設(shè)計(jì)師才會(huì)的手法?。▽?shí)戰(zhàn)篇）》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

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

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛(ài)好者也準(zhǔn)備了貼心的知識(shí)樹(shù)專欄。開(kāi)啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺(jué)效果。

設(shè)計(jì)導(dǎo)航：國(guó)內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備：http://hao.uisdc.com