想繪制線性圖標(biāo)，這里有 6 個(gè)前輩為你踩過(guò)的坑

我們作為 UI 設(shè)計(jì)師，一開始入門接觸最多的就是圖標(biāo)，而現(xiàn)在很多設(shè)計(jì)師都鐘愛線性圖標(biāo)，導(dǎo)致很多新手設(shè)計(jì)師也跟隨主流的腳步選擇線性圖標(biāo)去設(shè)計(jì)，但是線性圖標(biāo)是不是真的像我們看起來(lái)那么簡(jiǎn)單呢？

線性圖標(biāo)的特征

目前市面上的線性圖標(biāo)以 2px、3px 最為主流。為什么大部分的產(chǎn)品會(huì)使用 2px 和 3px 的線性圖標(biāo)呢？因?yàn)閳D標(biāo)線條的寬度越大，可展示的細(xì)節(jié)就越少，但是圖標(biāo)的表現(xiàn)力卻能夠得到極大的提升，這也是為什么面性圖標(biāo)的直觀表現(xiàn)力一直都比線性要好的原因。如下圖最右面性和線性圖標(biāo)的對(duì)比圖：

線性圖標(biāo)線條的寬度越小，能展示的細(xì)節(jié)就越豐富，同時(shí)直觀的表現(xiàn)力也會(huì)降低，因?yàn)闁|西太多會(huì)產(chǎn)生視覺干擾。如下圖：

當(dāng)然現(xiàn)在也有少數(shù)一些產(chǎn)品的線性圖標(biāo)用 1px 和 4px，而且也在圖標(biāo)上做了減法，所有我們會(huì)看到一些用 1px 的圖標(biāo)整個(gè)圖形表現(xiàn)很簡(jiǎn)單，但是因?yàn)榫€條太細(xì)，導(dǎo)致整個(gè)底部操作欄的圖標(biāo)視覺表現(xiàn)上偏弱，如下圖所示：

而 4px 的圖標(biāo)會(huì)顯得略微厚重，如下圖所示：

因此線性圖標(biāo)表達(dá)力最好的是在 2px 和 3px，同時(shí)減少一些圖標(biāo)細(xì)節(jié)，能夠更大的提升圖標(biāo)的表達(dá)力。但是同樣的圖形，面性的圖標(biāo)直觀表現(xiàn)力要優(yōu)于線性圖標(biāo)，因此面性圖標(biāo)更易上手。

描邊怎么選？

以 sketch 來(lái)畫圖標(biāo)舉例，首先我們需要遵循像素網(wǎng)格，點(diǎn)擊 sketch 頂部右上角，選擇顯示像素，你會(huì)發(fā)現(xiàn)你的界面從矢量變成了像素，這么做的好處是能夠保證我們的圖標(biāo)在畫的時(shí)候能看出來(lái)有沒有虛邊。

在畫線性圖標(biāo)的時(shí)候，我們首先面對(duì)的問(wèn)題就是選擇的是內(nèi)描邊、外描邊還是居中？

這個(gè)時(shí)候我們面對(duì)的是兩種情況，當(dāng)你的描邊像素是偶數(shù)的時(shí)候，比如：2px，4px，居中，內(nèi)外描邊視覺上看起來(lái)都是可以的，就算是在顯示像素網(wǎng)格的情況下，也不會(huì)發(fā)生虛邊的情況。如下圖所示：

但是如果描邊數(shù)值變成奇數(shù)的時(shí)候，比如：1px，3px，5px，這個(gè)時(shí)候就不能用居中，應(yīng)該使用內(nèi)或者外描邊，因?yàn)榫又械拿柽厱?huì)模糊掉。如下圖所示：

在做閉合路徑的線性圖標(biāo)時(shí)，通常采用內(nèi)描邊的對(duì)齊方式，因?yàn)橥饷柽叺氖噶繄D形視覺上其實(shí)是比實(shí)際數(shù)值要大的，不利于我們控制圖標(biāo)大小。而且描邊的數(shù)值一定不要出現(xiàn) 2.31 或者 1.68 這樣的情況。

如上圖，有小數(shù)點(diǎn)的描邊同樣也會(huì)出現(xiàn)虛邊的問(wèn)題，而這種情況經(jīng)常會(huì)出現(xiàn)在圖標(biāo)的等比縮放之后，因此我們?cè)诳s放圖標(biāo)之后，需要每個(gè)小細(xì)節(jié)都確認(rèn)一下。

選擇鋼筆還是布爾運(yùn)算？

很多新手一開始畫圖標(biāo)的時(shí)候都不知道選擇鋼筆還是矢量圖形，或者認(rèn)為用鋼筆會(huì)簡(jiǎn)單上手易操作，我一般不太建議大家用鋼筆去畫圖標(biāo)。

首先是因?yàn)殇摴P畫的線條如果不是閉合的狀態(tài)，就只有居中描邊這一個(gè)選項(xiàng)，這就意味著你的圖標(biāo)線條必須是偶數(shù)才會(huì)不虛邊，而且需要自己手動(dòng)調(diào)整參數(shù)，因?yàn)榫€條很容易后面會(huì)有小數(shù)點(diǎn)，嚴(yán)重影響效率。

如果鋼筆是在閉合的狀態(tài)下，就會(huì)有跟矢量圖形一樣，會(huì)有三種描邊的選項(xiàng)，但也僅僅只是在很正常的圖形下沒有區(qū)別，一旦我們的圖標(biāo)稍微復(fù)雜一些的時(shí)候，就不太好用了。

舉個(gè)簡(jiǎn)單的例子來(lái)說(shuō)，我們一般畫插畫的時(shí)候，應(yīng)該都是先畫草圖，修修改改才會(huì)選擇放到軟件里用鋼筆開始勾做初稿，為什么呢？因?yàn)橥耆珱]有草圖的時(shí)候，用鋼筆勾會(huì)把握不好度，容易失去視覺平衡。

用鋼筆畫圖標(biāo)是一樣的道理，除非我們是臨摹，照著別人畫好的臨摹，用鋼筆不會(huì)出現(xiàn)太大的問(wèn)題。如果自己二次創(chuàng)作呢？難道需要自己先畫草圖嗎？（僅針對(duì)線性圖標(biāo)），如下圖所示：

愛心，WiFi，設(shè)置這些平時(shí)我們剛開始看到不知道怎么下手的圖標(biāo)，第一個(gè)想到的是不是就是用鋼筆畫？其實(shí)用簡(jiǎn)單的布爾運(yùn)算就能解決。

因此能用布爾運(yùn)算解決的問(wèn)題，就不要用鋼筆來(lái)解決，不止描邊容易虛邊，同時(shí)還更耗費(fèi)精力和時(shí)間。

斷點(diǎn)圖標(biāo)怎么處理？

相信大家都看了手機(jī)上很多產(chǎn)品的線性圖標(biāo)，配上斷線的方式來(lái)讓圖標(biāo)變得更俏皮，斷線的規(guī)則我們就不多說(shuō)了，這里要說(shuō)的是根據(jù)上面得到的結(jié)論，我們要如何處理斷點(diǎn)圖標(biāo)。

為了讓圖標(biāo)更有親和力，大部分的斷點(diǎn)圖標(biāo)都會(huì)選擇將端口變成圓形，如下圖所示：

因此為了達(dá)到這樣的效果，就需要將描邊改成居中，如果選擇內(nèi)描邊或者外描邊就會(huì)變得復(fù)雜很多，因?yàn)榫€不居中的情況下是無(wú)法直接設(shè)置成斷線處弧形的。如果直接設(shè)置，會(huì)變成下圖所示：

這無(wú)疑增加了設(shè)計(jì)的工作難度，為什么要將線條端口變成圓形呢，同理可參照按鈕為什么都選擇圓角矩形作為底部的道理。因?yàn)橹敝钡那懈罹€會(huì)讓圖標(biāo)整個(gè)變得很生硬，沒有親和力，讓用戶對(duì)界面整體營(yíng)造的氛圍產(chǎn)生抵觸心理。

線性圖標(biāo)的注意事項(xiàng)

1. 為什么你的圖標(biāo)不清晰？

上面圍繞畫線性圖標(biāo)會(huì)引起虛邊的問(wèn)題說(shuō)了那么多，大家應(yīng)該都知道為什么畫線性圖標(biāo)總是不清晰了。因?yàn)槿绻覀冊(cè)诋嫷臅r(shí)候沒有注意虛邊的問(wèn)題，開發(fā)實(shí)現(xiàn)的時(shí)候，圖標(biāo)經(jīng)過(guò)倍率縮放就會(huì)變模糊，如下圖所示：

如果我們?cè)?@2x 倍率下繪制的描邊為 3px、5px 等不能被 2 整除的數(shù)值，那么在適配到 @1x、@3x 時(shí)，會(huì)因?yàn)槌霈F(xiàn)小數(shù)點(diǎn)導(dǎo)致圖標(biāo)邊緣變虛，如下圖所示：

或者如果是偶數(shù)居中，在倍率更改后變成奇數(shù)邊緣還是會(huì)變虛，如下圖所示：

這個(gè)時(shí)候需要我們手動(dòng)修改和校正相應(yīng)的參數(shù)后，才能夠確保輸出的切圖清晰可靠，而這一切都是我們?cè)诰邆湟陨系闹R(shí)之后才能夠有意識(shí)地去完成這些信息。

2. 修改了還是虛邊怎么辦？

當(dāng)我們都具備了這些知識(shí)時(shí)候，圖標(biāo)中還是會(huì)出現(xiàn)虛邊怎么辦呢，如下圖所示：

像圓形，斜的直線等這些都是不可避免會(huì)出現(xiàn)虛線的怎么辦呢？這種屬于不可避免出現(xiàn)，并且目前也沒有技術(shù)拯救的情況，除非換別的圖標(biāo)，目前來(lái)說(shuō)還沒有找到別的方法來(lái)解決。

3. 新手該不該選擇線性圖標(biāo)？

我并不是很建議新手設(shè)計(jì)在剛開始接觸圖標(biāo)設(shè)計(jì)的時(shí)候，采用斷點(diǎn)線性圖標(biāo)，首先是因?yàn)樘幚砥饋?lái)比較麻煩，要處理端點(diǎn)的變化，還要避免虛邊的問(wèn)題，在上線實(shí)現(xiàn)階段，切圖就是一個(gè)很大的工作量。

其次也要避免使用斷點(diǎn)圖標(biāo)，雖然很多圖標(biāo)斷點(diǎn)之后的確更耐看，但是介于產(chǎn)品規(guī)范及視覺一致性，整個(gè)產(chǎn)品的圖標(biāo)都需要斷點(diǎn)，因此在一些簡(jiǎn)單的圖標(biāo)上斷點(diǎn)就成了最大的工作難點(diǎn)，如下圖界面中經(jīng)常出現(xiàn)的圖標(biāo)，要怎么確定斷點(diǎn)呢？

總結(jié)

雖然只是小小的線性圖標(biāo)，但都是設(shè)計(jì)師需要了解的一些很細(xì)節(jié)的知識(shí)，這樣在前期設(shè)計(jì)的時(shí)候能夠規(guī)避一些問(wèn)題，同時(shí)也能保證產(chǎn)品上線的細(xì)節(jié)和質(zhì)量。

新手設(shè)計(jì)師在一開始設(shè)計(jì)圖標(biāo)的時(shí)候不建議使用斷點(diǎn)圖標(biāo)，除了要懂得避免虛邊，還有手動(dòng)適配不同尺寸的切圖，以及解決斷點(diǎn)圖標(biāo)的問(wèn)題。

這在一定程度上會(huì)需要投入更多的精力來(lái)避免這些問(wèn)題，而且面性的表現(xiàn)方式優(yōu)于線性，因此不建議新手設(shè)計(jì)師一上來(lái)就選擇線性圖標(biāo)。