為什麼新手設計師要對斷點圖標Say No

關於繪製線性圖標的一些必備知識

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


為什麼新手設計師要對斷點圖標Say No


今天就跟大家說一下繪製線性圖標的一些技巧和注意點,我將這些分成了一下幾點:

一、線性圖標的特徵

二、描邊怎麼選?

三、選擇鋼筆還是布爾運算?

四、斷點圖標怎麼處理?

五、線性圖標的注意事項

六、劃重點

一、線性圖標的特徵

目前市面上的線性圖標以2px、3px最為主流,如下圖:


為什麼新手設計師要對斷點圖標Say No


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


為什麼新手設計師要對斷點圖標Say No


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


為什麼新手設計師要對斷點圖標Say No


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


為什麼新手設計師要對斷點圖標Say No


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


為什麼新手設計師要對斷點圖標Say No


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

二、描邊怎麼選?

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


為什麼新手設計師要對斷點圖標Say No


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

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


為什麼新手設計師要對斷點圖標Say No


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


為什麼新手設計師要對斷點圖標Say No


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


為什麼新手設計師要對斷點圖標Say No


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

三、選擇鋼筆還是布爾運算?

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

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

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


為什麼新手設計師要對斷點圖標Say No


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

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


為什麼新手設計師要對斷點圖標Say No


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


為什麼新手設計師要對斷點圖標Say No


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

四、斷點圖標怎麼處理?

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

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


為什麼新手設計師要對斷點圖標Say No


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


為什麼新手設計師要對斷點圖標Say No


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

五、線性圖標的注意事項

1、為什麼你的圖標不清晰?

我們上面圍繞畫線性圖標會引起虛邊的問題說了那麼多,就是為了讓大家知道如果我們在畫的時候沒有注意虛邊的問題,開發實現的時候,圖標經過倍率縮放就會變模糊,如下圖所示:


為什麼新手設計師要對斷點圖標Say No


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


為什麼新手設計師要對斷點圖標Say No


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


為什麼新手設計師要對斷點圖標Say No


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

2、修改了還是虛邊怎麼辦?

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


為什麼新手設計師要對斷點圖標Say No


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

3、新手該不該選擇線性圖標?

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

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


為什麼新手設計師要對斷點圖標Say No


六、劃重點

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

為什麼新手設計師要對斷點圖標Say No

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


為什麼新手設計師要對斷點圖標Say No


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


分享到:


相關文章: