2018-7-5 博博
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
對(duì)于圖標(biāo)如何斷線，如果是經(jīng)驗(yàn)豐富的設(shè)計(jì)師，估計(jì)靠感覺做就可以了，但不是大神的我們?cè)趺崔k呢？總得有點(diǎn)規(guī)律讓我們參考參考吧，雖然有些規(guī)律不能全盤通用，但這次總結(jié)一定能給你帶來幫助。
來，看下大綱：
1.先考慮在拼接處斷線
2.平衡視覺復(fù)雜度
3.避免正中間處斷線
4.盡量讓圖標(biāo)一筆畫完
1.先考慮在拼接處斷線
如果你覺得此篇文章對(duì)你有作用，請(qǐng)收藏轉(zhuǎn)發(fā)分享給你的朋友，把自己的收獲寫在評(píng)論區(qū)，小編會(huì)解答。
如果一個(gè)物體是由兩個(gè)部分組成，當(dāng)我們選擇在拼接處斷開：
我會(huì)覺得兩個(gè)部分還沒組裝好，是一種很自然的分開。
但如果是下面這樣的：
我會(huì)覺得它壞了，很不舒服。
我們做斷線圖標(biāo)的時(shí)候也一樣，可以先考慮在物體的拼接處斷線，讓斷口看起來自然和諧！
舉個(gè)例子：
下圖是一個(gè)“我的”圖標(biāo)：UI設(shè)計(jì)學(xué)習(xí)群：583915450，領(lǐng)取100G學(xué)習(xí)資料，備注：資料領(lǐng)取
如果現(xiàn)在讓我給它來做斷線，我就先找到拼接處，分析如下：
雖然例子有點(diǎn)血腥，但事實(shí)確實(shí)如此，拼接處就在頭和身子連接的地方，所以嘗試在這里斷開：
哎呦，我覺得還ok。
行，那再來個(gè)例子！
下圖是個(gè)消息的圖標(biāo)：
再來分析，它的外形是由一個(gè)矩形和一個(gè)三角形組成的：
我們還是在拼接處斷開，得到如下圖：
嗯，也還行！
所以一般來做斷線圖標(biāo)，我就會(huì)先利用這一個(gè)規(guī)律看可不可行。
如果可行，就繼續(xù)優(yōu)化細(xì)節(jié)，如果不可行再嘗試其他方法。
2.視覺復(fù)雜度要平衡
有時(shí)候，我們的圖標(biāo)不好將其拆解，這時(shí)候我們就可以嘗試去考慮圖標(biāo)的視覺復(fù)雜度。
來個(gè)例子，下圖是一個(gè)皇冠的圖標(biāo)：
經(jīng)過分析，我們可以得出，圖標(biāo)紅色區(qū)域的復(fù)雜程度要比藍(lán)色區(qū)域高：
所以我選擇在藍(lán)色區(qū)域斷口，來增加藍(lán)色區(qū)域的復(fù)雜程度，達(dá)到平衡的效果：
那如果在紅色區(qū)域斷開是什么樣的呢，我們來分析對(duì)比一下：
所以，通過對(duì)視覺上復(fù)雜程度的解析后發(fā)現(xiàn)，方案一會(huì)平衡協(xié)調(diào)很多！
再來個(gè)例子，下面是個(gè)通訊錄圖標(biāo)：
圖標(biāo)的左側(cè)要比右側(cè)復(fù)雜:
如果我們選擇在左側(cè)斷線，那左側(cè)就會(huì)更復(fù)雜，這樣兩邊的復(fù)雜度就會(huì)失調(diào)，所以我選擇在右邊斷線：
這樣圖標(biāo)左右都有細(xì)節(jié)，視覺平衡多了！
3.避免正中間處斷線
有朋友會(huì)說了，那有些圖標(biāo)沒有拼接處，復(fù)雜程度也都一樣，比如下面這種：
怎么辦呢？
很簡(jiǎn)單，這種圖標(biāo)只要盡量避免在正中間斷線就ok，因?yàn)檎虚g斷線顯得過于呆板：
其它地方都可以嘗試，例如左上角、左上角、右上角、右下角等等。
4.盡量讓圖標(biāo)一筆畫完
這也是一個(gè)很重要的知識(shí)點(diǎn)：如果可以的話盡量讓圖標(biāo)外輪廓一筆畫完，如下圖：
其實(shí)很多時(shí)候，只要我們能從拼接處斷線，基本都是可以一筆畫完的，所以大家注意一下就好了。
當(dāng)然，如果實(shí)在不能一筆畫下來，也不必勉強(qiáng)，因?yàn)閺?qiáng)扭的瓜不好看！
總結(jié)
這四個(gè)知識(shí)點(diǎn)就是目前為止菜心所整理的關(guān)于斷線圖標(biāo)的規(guī)律，個(gè)人經(jīng)驗(yàn)，供大家參考。
不過提醒大家，這些方法難免會(huì)有少數(shù)不適用的時(shí)候，遇到不適用的情況，千萬(wàn)不要因?yàn)橐?guī)則而被困住，多多嘗試，敢于不同，也許可以找到更合適的解決方案。
藍(lán)藍(lán)設(shè)計(jì)( www.alimai.net )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.alimai.net