怎樣設計圖标才能向用戶快速傳達其确切含義并能留下深刻印象，是設計師們面臨的一個大難題。

圖标設計原則

圖标設計的基本原則包括：辨識度高、風格統一、視覺美觀、圖标的辨識度高，表意準确，能讓用戶一眼就明白圖标的含義；圖标的風格統一，使整個界面具有很好的整體感；圖标的視覺美觀，能提高用戶的關注度，使用戶獲得良好的體驗感。

為了提高圖标的辨識度，圖标設計不能過于個性化，讓用戶難以理解。通常做設計之前，會參考同行業成熟産品的共性和特性。圖标的風格統一從圖标的尺寸、線面類型、色彩、圓角 大小、透明度、傾斜角度、投影、漸變樣式、風格等方面着手。

圖标設計步驟

制作一個好圖标，既要考慮圖标的辨識度、美觀性和統一度，也要考慮圖标應用界面的文化、未來顯示的載體以及不同産品的特殊要求等。

圖标設計過程大緻分為三個步驟：借鑒線上産品尺寸， 确定圖标的尺寸大小，如 Tab 欄圖标大小 48px× 48px，首頁圖标大小 56px×56px，金剛區圖标大小 90px× 90px；利用現實圖庫提煉實物圖的共性形狀，參考借鑒成熟的圖标庫。

在設計制作完成圖标後，還得做任務測試，進行設計細節自查，如設計的統一度、呼吸感、色彩情緒、業務聯系是否符合要求；開展辨識度測試，遮住圖标文字描述字段，做基于無背景的和有背景的圖标可識别測試，看用戶能否理解圖标的含義。

金剛區圖标設計

金剛區是 APP 首頁的主圖标區， 位于頁面中上部， Banner 欄下面，其内容往往随公司活動需要随時靈活調整。因此，金剛區圖标具有需求層次高、色彩豐富、以面性圖标為主的特點。

在設計之初，确定金剛區圖标尺寸等基礎規範：多借鑒成功産品的布局及尺寸，大多數産品金剛區圖标尺寸為 90px 左右；設計圖标良好的呼吸感，設計圖标内部的呼吸感滿足黃金分割比，圖标和文字距離統一，圖标四周距離統一為圖文距離的倍數。

在繪制圖标形狀前，還需進行造型再設計，主要考慮保證造型表意 的準确性及造型的簡潔性。顔色方面，金剛區圖标色彩豐富，圖标的配色主要考慮 色彩情緒對圖标辨識度的影響。

配色過程通常為：确定主題色，選取主題色的鄰近色和對比色，結合圖标的功能表 達及色彩情緒，從主題色及其鄰近色和對比色中選取合适的色彩。在配色中注意控制各色相的飽和度和明度在統一比例， 以保證各圖标色調的和諧統一。

Tab欄圖标設計

相對于金剛區圖标的設計，Tab欄圖标在外形設計和樣式設計上要簡單很多。Tab欄圖标設計尺寸通常為 48px。Tab欄圖标設計根據用戶群體及APP主題表達确定圖标風格。

例如：如金融類 APP的給人穩重可靠感，Tab欄圖标做成 4px的線性圖标，90 度直角棱角分明， 選中圖标為面性圖标；電商類 APP的用戶寬泛，設計必須迎合不同年齡層次的用戶，采用簡約圖标設計風格，Tab欄圖标采用 3px 線性圖标，4px圓角，選中圖标有錯層陰影和色彩變化。

總的來說，好的設計既要好看又要好用。圖标布局以業務、功能和需求為出發點，安排重要功能圖标 靠前放置，引導用戶使用相關功能；有良好的預見性，利用有效的圖标辨識度完美展示其功能内容，利用色彩情緒喚起用戶正确的情緒。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!