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

圖標設(shè)計原則

圖標設(shè)計的基本原則包括：辨識度高、風(fēng)格統(tǒng)一、視覺美觀、圖標的辨識度高，表意準確，能讓用戶一眼就明白圖標的含義；圖標的風(fēng)格統(tǒng)一，使整個界面具有很好的整體感；圖標的視覺美觀，能提高用戶的關(guān)注度，使用戶獲得良好的體驗感。

為了提高圖標的辨識度，圖標設(shè)計不能過于個性化，讓用戶難以理解。通常做設(shè)計之前，會參考同行業(yè)成熟產(chǎn)品的共性和特性。圖標的風(fēng)格統(tǒng)一從圖標的尺寸、線面類型、色彩、圓角 大小、透明度、傾斜角度、投影、漸變樣式、風(fēng)格等方面著手。

圖標設(shè)計步驟

制作一個好圖標，既要考慮圖標的辨識度、美觀性和統(tǒng)一度，也要考慮圖標應(yīng)用界面的文化、未來顯示的載體以及不同產(chǎn)品的特殊要求等。

圖標設(shè)計過程大致分為三個步驟：借鑒線上產(chǎn)品尺寸， 確定圖標的尺寸大小，如 Tab 欄圖標大小 48px× 48px，首頁圖標大小 56px×56px，金剛區(qū)圖標大小 90px× 90px；利用現(xiàn)實圖庫提煉實物圖的共性形狀，參考借鑒成熟的圖標庫。

在設(shè)計制作完成圖標后，還得做任務(wù)測試，進行設(shè)計細節(jié)自查，如設(shè)計的統(tǒng)一度、呼吸感、色彩情緒、業(yè)務(wù)聯(lián)系是否符合要求；開展辨識度測試，遮住圖標文字描述字段，做基于無背景的和有背景的圖標可識別測試，看用戶能否理解圖標的含義。

金剛區(qū)圖標設(shè)計

金剛區(qū)是 APP 首頁的主圖標區(qū)， 位于頁面中上部， Banner 欄下面，其內(nèi)容往往隨公司活動需要隨時靈活調(diào)整。因此，金剛區(qū)圖標具有需求層次高、色彩豐富、以面性圖標為主的特點。

在設(shè)計之初，確定金剛區(qū)圖標尺寸等基礎(chǔ)規(guī)范：多借鑒成功產(chǎn)品的布局及尺寸，大多數(shù)產(chǎn)品金剛區(qū)圖標尺寸為 90px 左右；設(shè)計圖標良好的呼吸感，設(shè)計圖標內(nèi)部的呼吸感滿足黃金分割比，圖標和文字距離統(tǒng)一，圖標四周距離統(tǒng)一為圖文距離的倍數(shù)。

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

配色過程通常為：確定主題色，選取主題色的鄰近色和對比色，結(jié)合圖標的功能表 達及色彩情緒，從主題色及其鄰近色和對比色中選取合適的色彩。在配色中注意控制各色相的飽和度和明度在統(tǒng)一比例， 以保證各圖標色調(diào)的和諧統(tǒng)一。

Tab欄圖標設(shè)計

相對于金剛區(qū)圖標的設(shè)計，Tab欄圖標在外形設(shè)計和樣式設(shè)計上要簡單很多。Tab欄圖標設(shè)計尺寸通常為 48px。Tab欄圖標設(shè)計根據(jù)用戶群體及APP主題表達確定圖標風(fēng)格。

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

總的來說，好的設(shè)計既要好看又要好用。圖標布局以業(yè)務(wù)、功能和需求為出發(fā)點，安排重要功能圖標 靠前放置，引導(dǎo)用戶使用相關(guān)功能；有良好的預(yù)見性，利用有效的圖標辨識度完美展示其功能內(nèi)容，利用色彩情緒喚起用戶正確的情緒。