15年設計老司機私密分享圖標製作流程,原來差距在這……

我們每天都在設計圖標,並且保持這樣的狀態超過15年。身為設計師,想必你已經閱讀過很多關於圖標設計的文章,但是今天的文章不一樣,今天我們的文章不會花費很長時間來單獨介紹某一個圖標的設計,而是設計任何一套圖標應當遵循的基本流程,以及一定要注意的8個關鍵的注意事項,你可以將這些東西帶入到一些現成的案例當中去驗證。

這個注意事項清單,也可以被視作為給設計師所編寫的圖標設計指南,即使設計趨勢發生變化,這些規則和經驗依然適用。遵循這些規則和技巧,能夠確保圖標從設計到使用都可以更加無縫和順暢。

我們並沒有重新發明輪子,相反,我們會以這種方式來呈現我們的工作流程細節,希望它也能幫你有效地組織工作。

15年設計老司機私密分享圖標製作流程,原來差距在這……


循序漸進地設計圖標

像我們需要系統而大量地設計圖標,設計流程是最重要的事情。正如你所看到的,繪製流程在圖標繪製之前,就已經開始了。

1.瞭解你要創建的圖標的含義。明白不同圖標的使用場景,不同的圖標分別代表著什麼,瞭解哪些圖標需要使用隱喻,哪些圖標使用現實世界中真實的形象。

2.梳理出圖標正確的隱喻,腦暴出可能的符號和形象。記住圖標的含義和形象之間的關聯,以最佳的形式呈現圖標,直指本質。藉助詞典和單詞集來獲取圖標相關的概念的關鍵詞,同義詞和定義。簡化和抽象你的想法,你會找到一個抽象概念「翻譯」出來的對象。

3.不要拘泥於現在當前的任務和狀態,儘量進行徹底的調研,儘可能地蒐集相關參考資料。可能有人已經為這一主題設計了很不錯的圖標版本,可以參考已有的設計,獲取靈感。

4.確定圖標的樣式。圖標應該是扁平的,線性的,Material Design,是用符號還是藉助手繪來呈現。有的 UI界面有很清晰的要求,比如 iOS 平臺和 Material Design,如果 UI 有非常清晰固定的設計風格,那麼圖標的設計需要儘量貼近。

5.按照選定的方式來呈現設計,看看它最終呈現是否正確。保持整體設計的一致性。

6.注意圖標要矢量化,連基本的草圖都應該是矢量化的。

7.在 UI 佈局中測試圖標的設計。

Icons8 的實戰案例

按照上面的流程,能夠繪製出不同樣式足夠優秀的圖標合集。下面是我們在這樣的流程下所設計出來的圖標示例。

15年設計老司機私密分享圖標製作流程,原來差距在這……

▲ Material, Outline: Science and Studies Icons

15年設計老司機私密分享圖標製作流程,原來差距在這……

▲ Carbon Copy: Animals

15年設計老司機私密分享圖標製作流程,原來差距在這……

▲ Nolan Icons: Aging

注意事項清單

如果你像我們一樣每天設計圖標的話,也會碰到各種各樣的問題。其中最重要的是下面的注意事項清單,它們能夠確保我們不同的人在不同的時期不同狀態下,設計出來的圖標能夠協調到一個主題、一個系統當中。如果你也要設計圖標的話,可以將下面的清單打印出來,貼在自己的桌子旁邊作為參考。

1. 像素完美

讓圖標踩在每個像素點上,確保清晰不模糊。

15年設計老司機私密分享圖標製作流程,原來差距在這……


2. 視覺重量

用斜視的方法來感知圖標,看看成套的圖標是否都具有相同的大小。斜視、調整、再看、再調整,直至均勻理想。為了保持總體視覺重量的一致性,我們會使用「完美的圓形和正方形」來和所有的新圖標進行對比。

15年設計老司機私密分享圖標製作流程,原來差距在這……


3. 幾何圖形

儘量使用簡單堅實的幾何形狀來繪製所有必要的線條,它們會讓你的圖標顯得更加牢固可靠,具有吸引力和說服力。

15年設計老司機私密分享圖標製作流程,原來差距在這……


4. 清晰簡潔

刪除所有無法傳達圖標概念的細節,避免讓圖標顯得沉重而複雜。

15年設計老司機私密分享圖標製作流程,原來差距在這……


5. 足夠的空間

確保圖標內每個細節和元素都有足夠的空間,不會顯得過於擁擠或者空曠。

15年設計老司機私密分享圖標製作流程,原來差距在這……


6. 對比度

在黑色和白色的背景上檢查圖標的全部細節,看看是否其中的每種顏色都是可見的,以及元素之間的對比是否足夠。

15年設計老司機私密分享圖標製作流程,原來差距在這……


7. 視覺統一

檢查線條的粗細重量,邊角的大小,配色方案,細節層次和設計元素在整個合集中是否是不變且一致的。

15年設計老司機私密分享圖標製作流程,原來差距在這……


15年設計老司機私密分享圖標製作流程,原來差距在這……


15年設計老司機私密分享圖標製作流程,原來差距在這……


8. 圖層排序

確保圖標中圖層順序清晰而規整。這是一種良好的習慣和專業的精神。


分享到:


相關文章: