一套icon還要改改改改幾遍？四招提升你的效率

來自專欄艾體驗AIUX5 人贊了文章

如果說表達的形式是一個設計師創意的體現，那麼最終的輸出就是一個設計師基礎技能的體現。在實際的繪製過程中，初級設計師或多或少都會遇上一些小麻煩，從而降低了整體的效率。

icon輸出模糊不清

你這套圖標怎麼那麼糊？你再重新導吧，導到清楚為止！

sketch是一款矢量圖標繪製軟體，即使將icon放大超多倍，也依舊可以看得十分清晰。但在最終輸出的時候，向開發提供的卻不是矢量的文件。

眼瞅著icon繪製完成，結果在檢查的時候，卻發現輸出的icon十分地模糊。這就奇怪了，為什麼參數和其他人的並無差異，但最終輸出的icon卻比其他人的要模糊呢？

舉個例子：同樣都是2px，1號矩形完全對齊了像素，2號矩形沒有對齊像素，在沒有顯示像素的情況下，看起來都是十分清晰的。

但在開啟了「顯示像素」模式後，差異就來了！此時，1號矩形依舊是十分清晰的，然而2號矩形的左右兩邊就出現了淺色的模糊像素。

正是沒有注意到這樣的一些細枝末節，就導致最終輸出時，沒有對齊的像素邊緣就會被處理為模糊的狀態(造成像素沒有對齊的原因千差萬別，這裡就不細數了)。

如果說創意是設計師的高階技能，那細節就該是設計師的基礎表現。還沒學會走，又怎麼能指望穩健地跑呢？

視覺大小不一致

這兩個圖標，怎麼看上去不一樣大啊？你能不能在放大的同時縮小一點啊！

下面兩個圖形，你認為哪個更大呢？是不是覺得矩形要比圓形大一點(僅長寬，不是面積)？

由於視覺上的差異，儘管看上去矩形要比圓形大，但實際上它們的長和寬都是相等的，單看數值，他們是完全一樣的。

這就使得不少的初級設計師認為，只要將這些數值奉為圭臬，自己就能成長為一代大師。殊不知，對於數值的掌握，機器更甚於人......

下面兩個例子中，圖片中的icon長寬數值是完全一樣的，但看上去卻是參差不齊。

那麼在實際的繪製過程中，如何做到視覺大小的統一呢？結合實際情況，可以將icon歸納為下面的四種基本型。

隨後可以依據需要繪製的icon大小，先構建如下這樣的輔助圖形，從而幫助我們統一icon的視覺大小(僅供參考，實際尺寸可以根據需求來)。

有了輔助圖形來幫助我們規範icon的尺寸，最終繪製出來的icon視覺大小也能保持相對的一致。

當然，人並不是完全理性的，這也就決定了在視覺設計時，設計師必須要保有自身的感性。正如那句話一樣「規則，是用來讓我們學會經驗。而經驗值則是讓我們拿來打破規則的」

統一視覺風格

這一套圖標，si~就是感覺怪怪的，你能不能再出一套方案給我啊！

下面這兩張圖你認為哪種是我們說的統一性呢(上述問題可能就是視覺的統一性在作怪)？

儘管圖1的icon看上去是一種統一性，但是卻也失去了icon的辨識度；反而圖二的icon雖然形態各異，但卻會認為他們是一組關聯的icon。

左邊的圖，就像一對雙胞胎姐妹出門穿了不同的衣服，儘管從外貌上很容易就能知道她們是「關聯的姐妹」，但是我們卻很難分辨出「誰是誰」；

而右邊的圖，就像讀書時參加的團體活動一樣，大家都穿上了統一的制服，很容易就讓別人知道這是一個整體，同時大家的相貌各異，所以又很容易區分出來不同的人。

統一視覺風格並不是說icon都需要使用一樣的元素，而是在保持各自基礎形態下，搭配上統一的色彩、基礎元素、相似的特點、線條等等。

比如下面這張圖，它們利用了統一的斷點、黑灰元素色、圓點、圓角等，從而保持了視覺的一致性。

△圖片來源自dribbble

彩蛋時間

你看看隔壁小王畫一套圖標多快，再看看你？你就不能再快一點嗎？

在繪製icon時，經常會讓圖形之間進行布爾運算，從而切割出自己想要的形。

在AI中繪製複雜圖形，就自帶一個非常好用的功能叫做「分割」，使用這個功能可以非常快捷地分割圖形。

但在sketch中，並沒有這樣一個方便的原生功能，那麼這裡就向大家介紹一款類似AI中分割的插件——separate shapes（後台回復「分割插件」即可獲得下載鏈接哦）

只需2步，就可以快速地完成圖形分割！

首先，在sketch中選擇兩個需要進行分割的重疊形狀圖層

最後，使用快捷鍵 control ? + alt ? + - 就可以快速地實現圖形的分割啦。

△圖片源自http://sketch.im

每周，艾體驗都會向大家分享一些有關於設計師/設計的文章，也許是乾貨；也許是案例；也許是一些好玩的事情；也許是一些心理學的分享......

如果，艾體驗分享的內容正是你喜歡的，不妨關注關注我們（微信公眾號搜索：aiux217）吧！想和你交個朋友！

http://weixin.qq.com/r/0irx6XbEQSs_rTKK93-A (二維碼自動識別)