UI圖標設計能做到這幾點，就可以了

圖標設計是界面設計最重要的組

成部分之一，作為UI視覺設計師，這項技能已經是我們必須要掌握的基本技能，那圖標設計要遵循什麼樣的原則呢？

「識別性」、「符合行為習慣」、「原創性」、「易用性」···

上面這些原則都是大的標準，在圖標設計的時候起到了指導性的意義，但是這些規則其實都被大家說爛了，如果你對上面這幾點還不太了解，可以自行百度一下，這裡我就不多說了，我要分享的是能夠幫助你提升專業度的一些實戰經驗，如果你所做的圖標能做到以下這幾點，那麼恭喜你，你及格了！

（本文沒有對圖標進行詳細的分類，所談範圍也只是app中一些功能性圖標的設計經驗）

還是先來看下大綱：

一、像素對齊

二、多用布爾運算

三、獨特的風格

四、視覺大小的統一

五、2017年圖標的流行趨勢預測

一、像素對齊

我記得以前在小公司的時候，一個人負責整個app的交互設計與視覺設計，設計團隊只有兩個人，有什麼問題都沒人可以請教，當時困惑我最大的一個問題就是：為什麼我做的圖標總是發虛的呢？直到來了大公司和前輩們學習之後，才知道原來是因為像素沒有對齊。

我們來看下面這張圖：

圖片背景的網格就是我們所說的像素網格，我標明紅點是想告訴大家，第一條豎線做到了像素對齊，而第二條豎線沒有做到。我們沒有看到二者的區別是因為現在是在矢量圖形的環境下顯示的，如果導出來圖片就會變成下面這樣：

這就是圖標發虛的原因，因為我們沒有嚴格的做到像素對齊，尤其是在做較小尺寸的圖標時，如果不嚴格的遵循像素對齊，那最終的顯示效果就會出現問題，比如說下面這種情況：

所以在你通往專業UI設計師的路上，這一點是必須要注意的。

二、多用布爾運算

在做圖標的時候，能用基本圖形進行布爾運算的時候，盡量不要使用鋼筆，這樣做的好處有如下幾點：

1.讓你的圖標更加規範

2.對圖形結構理解更加深刻

3.後期更改形狀更加方便

舉個例子，下面這個圖標

如果我們使用鋼筆直接去畫，其實我們很難畫的特別規範，而且後期調整也很麻煩，最正確的方法就是去思考他的結構，這樣一個外形是否可以使用基本圖形進行組合來實現，在經過思考與嘗試後，我們會發現，其實他是用一個圓形和三個矩形組合而成的，如下圖：

在平時，我們可以多去嘗試分析並練習一些好看的圖標或者真實的物體，去理解其中的結構與製作方法，當你積累的經驗足夠多時，你就可以很自如的去設計你想要的精美圖標了。

三、獨特的風格

作為專業視覺設計師的你，在時間充足的情況下，千萬不要去網上下幾個圖標直接拿來用，你會上癮的，並且也會被一些行內人進行批判，因為他們很容易就能看出來你做的圖標是直接在網上下載的，比如下面這樣的圖標：

我們在做系列圖標的時候，一定要在前期給圖標設定一個風格及原則，使之看起來與眾不同，例如下面的圖標：

一眼看上去，我們就可以看出上面圖標的特點，線條是斷開的、所有的圖標都是一筆畫出來的，這些都可以讓你的圖標變得與眾不同。再比如你也可以從顏色上做文章，如下圖：

其實方法還有很多，大家可以多多嘗試與創新。

在這裡值得一提就是，我們在做線性圖標時，一定要保證描邊粗細相同、圓角相同，如果這些基礎的規則都沒有遵循，那也就談不上風格的統一、創新了。

四、視覺大小統一

看上面這張圖，同樣都是44x44px尺寸的形狀，方形就會比圓形看著大一些，雖然我們統一了物理尺寸，但是在視覺大小上沒有進行統一。

在進行圖標設計的時候，我們會使用柵格輔助線來幫助我們更加嚴格謹慎，但一定不要被輔助線困住，學會靈活運用，保持視覺上的大小統一。

再舉個英文字體的例子，如下圖：

雖然在設計的時候，使用了輔助線，但是設計者並沒有被輔助線所束縛，為了達到視覺大小的統一，將曲線字母（例如o）進行了適當的放大，這樣整體看起來才會和諧穩固。

設計圖標的時候也是一樣，不僅僅是圖標的大小，包括元素與元素的距離、正形與負形的比例都是我們需要考慮的內容，如果有哪些內容自己還不太清楚，那就需要利用業餘的時間去好好補充一下系統知識了。

五、2017年圖標的流行趨勢預測

觀察了很多app的改版，發現功能性圖標的變化趨勢在某種程度上有一定的共性可尋，在這裡我來分享兩個自己的預測：

1.利用局部顏色差異來突顯圖標風格

這種風格一直出現在dribbble網站上的概念圖標，現在也慢慢的在移動app上面使用起來，如果現在你正在尋找圖標風格，這個方向不妨一試。

2.閱讀類app圖標的無色化

底部導航圖標的無色化風格，在閱讀類app開始慢慢流行起來，這種情況也可以理解，是為了讓用戶更好的聚焦閱讀內容，優化閱讀體驗。

但不知道以後其它類型的app圖標會不會也走這個風格路線呢？

總結：以上就是我本次分享的內容，其實一些很基本的原則，例如：識別性、易用性，也都是十分重要的，但我覺得沒什麼好解釋的，就沒有特別拿出來闡述，希望大家能把所有重要的原則都銘記於心，不斷地分析、練習，也許未來的圖標設計大師就是你了！

想要獲取更多PS圖片處理知識加微信號PSxiangyun.也可加群參加每晚精彩直播課程免費學習!

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！