想繪制線性圖標,這里有 6 個前輩為你踩過的坑 - 優設網 - UISDC

想繪制線性圖標,這里有 6 個前輩為你踩過的坑

2019/09/06 12524評論 9

我們作為 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. 新手該不該選擇線性圖標?

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

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

總結

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

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

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

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址://www.utsvcz.com.cn/6-line-icon-design-skills

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

sketch 界面設計 版式設計 排版布局 職場 優設專訪 設計師干貨 優設大課堂 設計達人 配色 web前端開發 視覺設計 素材下載 AI教程 設計理論 設計流程 神器下載 字體下載 設計師專訪 psd下載 設計規范 海報設計 設計趨勢 用戶體驗設計 動效設計 平面設計 logo設計 圖標設計 ICON 產品設計 神器推薦 App設計 字體設計 職場規劃 酷站推薦 交互設計 ui設計 優秀網頁設計 設計師職場 ps技巧 酷站 用戶體驗 PS教程 網頁設計 經驗分享

您還沒有登錄

優設啟用更安全省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!優設網是極具人氣的設計師平臺
2012年成立至今,一直專注于設計師的學習成長交流

把好文章收藏到微信

打開微信,掃碼分享
學設計 優設網 在這里