'UI設計！你想繪製線性圖標？看這裡有 6 個前輩為你踩過的坑'

文章來源：優設網

• 編輯 : 土撥鼠
• 作者 : 潘糰子

我們作為 UI 設計師，一開始入門接觸最多的就是圖標，而現在很多設計師都鍾愛線性圖標，導致很多新手設計師也跟隨主流的腳步選擇線性圖標去設計，但是線性圖標是不是真的像我們看起來那麼簡單呢？

線性圖標的特徵

目前市面上的線性圖標以 2px、3px 最為主流。為什麼大部分的產品會使用 2px 和 3px 的線性圖標呢？因為圖標線條的寬度越大，可展示的細節就越少，但是圖標的表現力卻能夠得到極大的提升，這也是為什麼面性圖標的直觀表現力一直都比線性要好的原因。如下圖最右面性和線性圖標的對比圖：

線性圖標線條的寬度越小，能展示的細節就越豐富，同時直觀的表現力也會降低，因為東西太多會產生視覺干擾。如下圖：

當然現在也有少數一些產品的線性圖標用 1px 和 4px，而且也在圖標上做了減法，所有我們會看到一些用 1px 的圖標整個圖形表現很簡單，但是因為線條太細，導致整個底部操作欄的圖標視覺表現上偏弱，如下圖所示：

而 4px 的圖標會顯得略微厚重，如下圖所示：

因此線性圖標表達力最好的是在 2px 和 3px，同時減少一些圖標細節，能夠更大的提升圖標的表達力。但是同樣的圖形，面性的圖標直觀表現力要優於線性圖標，因此面性圖標更易上手。

描邊怎麼選？

以 sketch 來畫圖標舉例，首先我們需要遵循像素網格，點擊 sketch 頂部右上角，選擇顯示像素，你會發現你的界面從矢量變成了像素，這麼做的好處是能夠保證我們的圖標在畫的時候能看出來有沒有虛邊。

在畫線性圖標的時候，我們首先面對的問題就是選擇的是內描邊、外描邊還是居中？

這個時候我們面對的是兩種情況，當你的描邊像素是偶數的時候，比如：2px，4px，居中，內外描邊視覺上看起來都是可以的，就算是在顯示像素網格的情況下，也不會發生虛邊的情況。如下圖所示：

但是如果描邊數值變成奇數的時候，比如：1px，3px，5px，這個時候就不能用居中，應該使用內或者外描邊，因為居中的描邊會模糊掉。如下圖所示：

在做閉合路徑的線性圖標時，通常採用內描邊的對齊方式，因為外描邊的矢量圖形視覺上其實是比實際數值要大的，不利於我們控制圖標大小。而且描邊的數值一定不要出現 2.31 或者 1.68 這樣的情況。

如上圖，有小數點的描邊同樣也會出現虛邊的問題，而這種情況經常會出現在圖標的等比縮放之後，因此我們在縮放圖標之後，需要每個小細節都確認一下。

選擇鋼筆還是布爾運算？

很多新手一開始畫圖標的時候都不知道選擇鋼筆還是矢量圖形，或者認為用鋼筆會簡單上手易操作，我一般不太建議大家用鋼筆去畫圖標。

首先是因為鋼筆畫的線條如果不是閉合的狀態，就只有居中描邊這一個選項，這就意味著你的圖標線條必須是偶數才會不虛邊，而且需要自己手動調整參數，因為線條很容易後面會有小數點，嚴重影響效率。

如果鋼筆是在閉合的狀態下，就會有跟矢量圖形一樣，會有三種描邊的選項，但也僅僅只是在很正常的圖形下沒有區別，一旦我們的圖標稍微複雜一些的時候，就不太好用了。

舉個簡單的例子來說，我們一般畫插畫的時候，應該都是先畫草圖，修修改改才會選擇放到軟件裡用鋼筆開始勾做初稿，為什麼呢？因為完全沒有草圖的時候，用鋼筆勾會把握不好度，容易失去視覺平衡。

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

愛心，WiFi，設置這些平時我們剛開始看到不知道怎麼下手的圖標，第一個想到的是不是就是用鋼筆畫？其實用簡單的布爾運算就能解決。

因此能用布爾運算解決的問題，就不要用鋼筆來解決，不止描邊容易虛邊，同時還更耗費精力和時間。

斷點圖標怎麼處理？

相信大家都看了手機上很多產品的線性圖標，配上斷線的方式來讓圖標變得更俏皮，斷線的規則我們就不多說了，這裡要說的是根據上面得到的結論，我們要如何處理斷點圖標。

為了讓圖標更有親和力，大部分的斷點圖標都會選擇將端口變成圓形，如下圖所示：

因此為了達到這樣的效果，就需要將描邊改成居中，如果選擇內描邊或者外描邊就會變得複雜很多，因為線不居中的情況下是無法直接設置成斷線處弧形的。如果直接設置，會變成下圖所示：

這無疑增加了設計的工作難度，為什麼要將線條端口變成圓形呢，同理可參照按鈕為什麼都選擇圓角矩形作為底部的道理。因為直直的切割線會讓圖標整個變得很生硬，沒有親和力，讓用戶對界面整體營造的氛圍產生牴觸心理。

線性圖標的注意事項

1. 為什麼你的圖標不清晰？

上面圍繞畫線性圖標會引起虛邊的問題說了那麼多，大家應該都知道為什麼畫線性圖標總是不清晰了。因為如果我們在畫的時候沒有注意虛邊的問題，開發實現的時候，圖標經過倍率縮放就會變模糊，如下圖所示：

如果我們在 @2x 倍率下繪製的描邊為 3px、5px 等不能被 2 整除的數值，那麼在適配到 @1x、@3x 時，會因為出現小數點導致圖標邊緣變虛，如下圖所示：

或者如果是偶數居中，在倍率更改後變成奇數邊緣還是會變虛，如下圖所示：

這個時候需要我們手動修改和校正相應的參數後，才能夠確保輸出的切圖清晰可靠，而這一切都是我們在具備以上的知識之後才能夠有意識地去完成這些信息。

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

當我們都具備了這些知識時候，圖標中還是會出現虛邊怎麼辦呢，如下圖所示：

像圓形，斜的直線等這些都是不可避免會出現虛線的怎麼辦呢？這種屬於不可避免出現，並且目前也沒有技術拯救的情況，除非換別的圖標，目前來說還沒有找到別的方法來解決。

3. 新手該不該選擇線性圖標？

我並不是很建議新手設計在剛開始接觸圖標設計的時候，採用斷點線性圖標，首先是因為處理起來比較麻煩，要處理端點的變化，還要避免虛邊的問題，在上線實現階段，切圖就是一個很大的工作量。

其次也要避免使用斷點圖標，雖然很多圖標斷點之後的確更耐看，但是介於產品規範及視覺一致性，整個產品的圖標都需要斷點，因此在一些簡單的圖標上斷點就成了最大的工作難點，如下圖界面中經常出現的圖標，要怎麼確定斷點呢？

總結

雖然只是小小的線性圖標，但都是設計師需要了解的一些很細節的知識，這樣在前期設計的時候能夠規避一些問題，同時也能保證產品上線的細節和質量。

新手設計師在一開始設計圖標的時候不建議使用斷點圖標，除了要懂得避免虛邊，還有手動適配不同尺寸的切圖，以及解決斷點圖標的問題。

這在一定程度上會需要投入更多的精力來避免這些問題，而且面性的表現方式優於線性，因此不建議新手設計師一上來就選擇線性圖標。

源文地址：https://www.uisdc.com/6-line-icon-design-skills