今天來一篇線性圖標(biāo)的原創(chuàng)文章。

2021年，先來局賀詞吧  設(shè)計(jì)友友新年快樂??！

花了一周多的時(shí)間對(duì)之前項(xiàng)目中一組線性圖標(biāo)進(jìn)行優(yōu)化，真心覺得越簡(jiǎn)單的設(shè)計(jì)是越難做，但阻礙不了探索的心，越難越要去吃透它。

這是最終優(yōu)化的圖標(biāo)

我復(fù)盤下圖標(biāo)優(yōu)化的整個(gè)思路吧。

1.找優(yōu)秀的參考圖

2.設(shè)計(jì)分析

通過上面2個(gè)案例，總結(jié)出圖標(biāo)的設(shè)計(jì)原則：

1、設(shè)計(jì)風(fēng)格

圖標(biāo)一般都有它的品牌基調(diào)，有相同的共性，有圖標(biāo)圓形的外輪廓，保持了一致性，而且都是極簡(jiǎn)風(fēng)格，識(shí)別度高。

剛正形

圓潤(rùn)形

2、描邊、圓角

顏色、形狀的粗細(xì)和圓角大小都保持一致。

3、角度

角度也是圖標(biāo)組成的一部分，也需要去統(tǒng)一規(guī)范

就跟我們平時(shí)做界面設(shè)計(jì)的時(shí)候會(huì)以倍數(shù)定出幾個(gè)邊距數(shù)值

圖標(biāo)也不例外，會(huì)按照一定的倍數(shù)來制定規(guī)范，這里是15°的倍數(shù)：

4、視覺大小

圖標(biāo)大小從視覺上看起來都保持一致，不會(huì)有太大的偏差。

圖標(biāo)它也有尺寸規(guī)范。這個(gè)比例由長(zhǎng)與寬構(gòu)成，有圓形 、 豎形 、方形 、橫形 。 

提醒一下，由于感官視覺的關(guān)系，這些大小都是可以微調(diào)的，以整體協(xié)調(diào)性為主。 

這里的分析還不全面，跟著后面的深入，會(huì)進(jìn)一步優(yōu)化知識(shí)點(diǎn)。

2.優(yōu)化圖標(biāo)

基操就是要?jiǎng)悠饋?，一直給自己挑刺，一直去優(yōu)化，沒有最好，只有更好。

我這期間花了4天的時(shí)間只優(yōu)化這組圖標(biāo)，一共經(jīng)歷了5個(gè)版本的迭代優(yōu)化。

前期尺寸規(guī)范這些我就不細(xì)說了，直接上圖了。

圖標(biāo)問題：

1、不夠圓潤(rùn)，圓角不統(tǒng)一

2、輔助圓形比較單調(diào)，都同一形狀

3、風(fēng)格可以再統(tǒng)一

優(yōu)化思路：

1、圓角增大，調(diào)整比例，元素之間更緊湊

2、輔助圖形可以根據(jù)造型去做適當(dāng)?shù)母淖?/p>

3、保持統(tǒng)一性，形成簡(jiǎn)約風(fēng)格

在2.0基礎(chǔ)上也優(yōu)化了2版，但是還是不滿意，展開說太長(zhǎng)，我就簡(jiǎn)單說下吧

點(diǎn)綴的造型有點(diǎn)不自然，沒有那種很舒服的感覺

中規(guī)中矩，沒什么差異性，圖標(biāo)風(fēng)格不統(tǒng)一。

沒思路的時(shí)候就停下來去看看別人的優(yōu)秀案例，去尋找靈感，靠自己擠腦子是很難有結(jié)論，而且還費(fèi)時(shí)間。

重新比較優(yōu)化的3個(gè)版本，我個(gè)人而言最喜歡2.0版本，于是又開始擼起袖子干了。

圖標(biāo)問題：

1、圖標(biāo)不夠飽滿

2、圖標(biāo)比較普通，沒有差異性

優(yōu)化思路：

在2.0基礎(chǔ)上增加斷點(diǎn)，增大描邊線條

描邊大小從4px改為6px，變得更飽滿

色塊點(diǎn)綴，并占據(jù)一定的比例關(guān)系

色塊作為識(shí)別標(biāo)示，目的就是提高視覺識(shí)別性。

整體優(yōu)化：

1、統(tǒng)一斷點(diǎn)的距離

2、調(diào)整斷點(diǎn)的位置

我們嘗試往復(fù)雜程度低的區(qū)域做斷點(diǎn)

這樣視覺上是不是更平衡了點(diǎn)

3、減少重復(fù)性

最后優(yōu)化的圖標(biāo)

最后

線性圖標(biāo)看起來簡(jiǎn)單，但實(shí)際上是最講究造型能力的，我這份總結(jié)只是冰山一角，它還可以很多方式去打造差異化，比如品牌打造法的方式、我這里用的特別淺，所以也沒細(xì)說。

以上就是最近對(duì)線性圖標(biāo)的一些心得。但目前對(duì)圖標(biāo)認(rèn)識(shí)還比較膚淺，后續(xù)會(huì)持續(xù)探索，希望對(duì)你們有用。