圖標設計是什么意思？詳解圖標(ICON)設計的類型、規(guī)范及設計原則

2023-08-28 09:47:02

圖標設計是什么意思

一、圖標設計是什么意思

圖標設計（英文：Icon Design）也成為ICON設計，圖標可分為廣義、狹義兩種，廣義指的是現(xiàn)實世界中的圖形符號、且有明確指向的含義，而狹義的圖標指的設備界面中的象形圖和表意文字，這些設備泛指承載互聯(lián)網(wǎng)產(chǎn)品的載體，如手機、電腦、iPad…等。在 UI設計中，圖標設計主要具是針對狹義的概念。

二、圖標的設計類型

從微觀角度來看，圖標的主要組成元素包括線、面、顏色、文字等，元素可以組合的常見圖標類型共分為線性、面性、線面結合、文字四種。

1、線性圖標

主要是通過元素"線"去延伸，基于線的粗細大小、端點類型、圓角、描邊、顏色等基礎屬性塑造成型。常用于調性簡潔的產(chǎn)品設計，如移動端的標題欄、頁面的次要功能設計；B 端后臺業(yè)務類產(chǎn)品。細分有"單色、多色、漸變色、透明度/疊加、斷點"五種類型。

線性圖標

2、面性圖標

相比較線性圖標應用場景更加豐富，視覺表現(xiàn)力更強、更突出，常用于主要功能圖標，細分"單色、多色、漸變色、透明度/疊加"四種類型。

面性圖標

3、線面圖標

線和面相結合而成的一種類型圖標，這種圖標的比較難駕馭，一般產(chǎn)品的主要功能設計都會比較克制。市面上這種類型圖標的應用比較少。這種圖標的設計也是非?？简炘O計師的設計功底，細分"單色、多色、漸變色、透明度/疊加"四種類型。

線面圖標

4、文字圖標

通過文字表達圖標語義的一種設計類型。常用語學習類，工具類和語義特殊難表達的功能。

文字圖標

三、圖標的設計風格

可以基于圖標類型，通過設計技法、軟件等創(chuàng)新設計出不同風格的圖標。

1、擬物化圖標

這類圖標的特點是通過細節(jié)和光影還原現(xiàn)實物品的造型和質感，能給用戶極強的代入感，用戶可通過對現(xiàn)實事物的聯(lián)想，快速領會圖標表達的意圖。但是隨著 ICON 的發(fā)展，擬物圖標也帶來了一些問題，因為用戶關注的核心永遠都是信息本身，華麗的視覺元素或許在用戶使用的初期，起到賞心悅目的裝飾，但久而久之，這都將成為對用戶獲取信息的一種干擾，所以現(xiàn)在擬物化的圖標很少運用在 APP 界面之內。

擬物化圖標

2、輕質感圖標

相較于擬物風格不會有太多復雜的視覺元素，層次簡單，用色素雅干凈，采用輕投影、輕漸變的方法設計，這類圖標具有一定的立體感，能給人輕盈、簡潔、精致的感覺，在界面設計中，一般在面積比較大的區(qū)域我們會使用加入輕質感的圖標。

輕質感圖標

3、毛玻璃效果圖標

通過元素疊加背景虛化的方式形成的玻璃模糊質感，毛玻璃風格圖標層次豐富、通透感強。

毛玻璃效果圖標

4、2.5D圖標

也稱等軸側風格，通過軸側拉伸的設計手法，表現(xiàn)形式十分突出有震撼力。

2.5D圖標

5、新擬態(tài)圖標

利用光影原理融合背景形成的一種立體感的效果。應用場景比較受限制，對背景顏色依賴性比較高。

新擬態(tài)圖標

6、扁平圖標

設計組成元素簡單干凈，外形突出，信息轉達直觀。

扁平圖標

7、卡通圖標

主要是使用插畫的設計手法，常用于可愛、溫暖特性的產(chǎn)品。

卡通圖標

8、實物貼圖圖標

用實際具體的物品來表達，如得物的鞋類商品及使用鞋的商品，盒馬果蔬類商品就是用水果和蔬菜去表達。這類圖標更貼合業(yè)務，表達簡單易懂。

實物貼圖圖標

9、C4D圖標

屬于 3D 設計軟件延伸出來的一種新的風格。圖標質感很強，表現(xiàn)力豐富。

C4D圖標

10、IP 形象圖標

常用于產(chǎn)品底部 tab"首頁"功能和 logo 的啟動圖標上，主要便于增加產(chǎn)品的辨識度。

IP 形象圖標

四、圖標的設計應用

1、業(yè)務和設備類型

業(yè)務類型常見的主要為 B、C 端業(yè)務，設備類型常見為移動端、網(wǎng)頁端，其他覆蓋的終端設備和業(yè)務不做過多贅述。圖標的設計應用主要想重點介紹這幾年比較主流的 B 端網(wǎng)頁類大廠項目。這些風格的主要特點就是專業(yè)，嚴謹、科技感、震撼力強。現(xiàn)下 B 端 C 化已經(jīng)成為了新的趨勢，越來越多新的設計風格也會逐步融入到 B 端的業(yè)務中。

圖標設計的應用

2、應用場景

應用場景這說明舉例主要以移動端為主，常應用于功能、啟動、導航、氛圍感圖標。其他應用場景這里就不一一舉例了。

五、圖標設計的原則

圖標設計的基本原則就是要盡可能的發(fā)揮圖標的優(yōu)點：比文字直觀，比文字漂亮，減少圖標的缺點：不如文字表達的準確。因此圖標設計的基本原則可以簡單的歸納一下幾點。

1、可識別性原則

可識別性原則，意思是說，圖標的圖形，要能準確表達相應的操作。換言之，就是我看到一個圖標，就要明白他所代表的含義，這是圖標設計的靈魂?？梢援斨疅o愧稱之為圖標設計的第一原則。

2、差異性原則

差異性原則，什么意思呢？意思是如果一個界面上有六個圖標，我一眼看上去，要能第一時間感覺到他們之間的差異性，否則我怎么辨認呢？這是圖標設計中很重要的一條原則，但也是在設計中最容易被忽略的一條，圖標和文字相比,它的優(yōu)越性在于它更直觀一些，但是如果圖標設計失去了這一點。

3、合適的精細度，元素個數(shù)

首先我們要明確一個點，圖標的主要作用是用的，代替文字，第二才是美觀。但圖標設計者往往陷入了一個誤區(qū)，片面的追求精細，高光和質感。其實，圖標的可用性隨著精細度的變化，是一個類似于波峰的曲線。在初始階段，圖標可用性會隨著精細度的變化而上升，但是達到一定精細度以后，圖標的可用性往往會隨著圖標的精細度而下降。

4、風格統(tǒng)一性原則

經(jīng)常會看到很多界面上，往往會堆砌著各種不同風格的圖標，顯然，這些圖標都是從互聯(lián)網(wǎng)上收集起來，由于沒有完全配套的圖標，只能東拼西湊，導致界面粗制濫造，業(yè)余。

5、與環(huán)境的協(xié)調性

圖標是沒有單獨存在的，圖標最終是要放置在界面上才會起作用的。因此，圖標的設計，要考慮圖標所處的環(huán)境，比如你的界面是森林和大地，你就可以考慮用石塊，木頭，或者蘑菇，野花設計一系列的圖標。

如果你的界面是平面的，簡約的，你可以考慮用一些簡單的平面的符號或者圖形來設計你的圖標，這樣整個界面會很協(xié)調，不要認為這樣的圖標是簡陋的，其實這樣的圖標的可識別性非常強的，在簡潔的界面里，會透露出一種簡約之美。

6、視覺效果

追求視覺效果，一定是要在保證差異性，可識別性，統(tǒng)一性，協(xié)調性原則的基礎上，要先滿足基本的功能需求，才可以考慮更高層次的要求--情感需求。

圖標設計的視覺效果，很大程度上取決于設計師的天賦、美感和藝術修養(yǎng)，有些設計師做了很多年的設計，作品一堆，拿出來一看，粗糙，刺眼，土氣。

7、原創(chuàng)性

這一條對圖標設計師提出了更高的要求，這是一個挑戰(zhàn)，但我認為，圖標設計的原創(chuàng)性并不是必要的，因為常用的圖標風格種類已經(jīng)很多，易用性較高的風格也就那么多種，過度追求圖標的原創(chuàng)性和藝術效果，會導致圖標設計另辟蹊徑，這樣做往往會降低圖標的易用性降低，也就是說所謂的好看不實用。當然，這里也要看你的產(chǎn)品的側重點，如果考慮更多的是情感化的設計，完美的藝術效果，這樣做也無可厚非。

六、圖標設計規(guī)范

1、網(wǎng)格尺寸比例

為了保持圖標元素的平衡，尺寸大小需要保持一致，在UI界面設計中，網(wǎng)格的大小必須要是4或12的倍數(shù)（安卓是8的倍數(shù)，iOS是4的是倍數(shù)）。@2x下作圖要保證是4的倍數(shù)，這樣可以整除2，適配@1x的屏幕；@3x下作圖就需要是12的倍數(shù)了，這個數(shù)值可以整除2、3、4，適配@1x和@2x的屏幕，常見的網(wǎng)格尺寸有 16、24、36、48、64、128、512、1024，這些網(wǎng)格尺寸并非固定，也會根據(jù)設計中的特殊尺寸而變化。界面中通常使用的圖標尺寸24*24px、48*48px。

一個圖標系統(tǒng)包括網(wǎng)格尺寸和圖標元素兩部分，設定好網(wǎng)格尺寸后，就需要用 keyline 來約束圖標形狀的長、寬比例了。最終設計的圖標大小并不是跟隨網(wǎng)格尺寸，而是根據(jù)不同的形狀占比受制于圖標 keyline，最終形成統(tǒng)一的視覺大小。

圖標網(wǎng)格尺寸比例

從上圖中可以看出，相同尺寸的圖標在真實的視覺中相差很大，這就好比一個 100 像素的圓形、跟 100 像素的方形相比，站在邏輯角度，大小是相同的，但在視覺上，一定是方形顯得更大。所以我們常說的圖標大小相同，并非真實尺寸，而是視覺感受。

為保持圖標視覺上的一致性和平衡感，需要先繪制 keyline 用來指導、規(guī)范圖標設計。keyline 由圓形、正方形、長方形-橫、長方形-豎、三角形和對角線組成，網(wǎng)格的大小需保持 4 的倍數(shù)，便于不同尺寸的圖標都能適配，可使用 24*24px 的網(wǎng)格尺寸為基準，其他尺寸的圖標可通過增加倍數(shù)以此類推，如 48*48px、72*72px……

下圖是以 24px 尺寸的網(wǎng)格參考基準示例（出血為 2px）：

網(wǎng)格參考基準示例

當把圖標畫在網(wǎng)格上時可以很好的規(guī)范圖標，讓它們從整體的視覺上看著統(tǒng)一規(guī)范。

網(wǎng)格參考基準示例二

網(wǎng)格參考基準示例

3、像素統(tǒng)一

在設計一整套系統(tǒng)化的圖標時，我們一定要注意圖標的像素大小，要運用相同的網(wǎng)格尺寸設計相同線條粗細的圖標，包括曲線，角度以及內部和外部筆劃。這樣圖標看起來才更統(tǒng)一，也有利于后期圖標的迭代更新。

圖標繪制基于48x48px畫布繪制的線性圖標，線寬默認為4px，不同場景縮放比例使用：

● 圖標為32x32px時，線寬3px（基準線寬）

● 圖標為24x24px時，線寬2px（基準線寬）

● 圖標為16x16px時，線寬2px（基準線寬）

像素統(tǒng)一

4、圖標的曲率

曲率簡單來講就是圖標中帶有圓角的邊角度數(shù)，只要是帶有圓角的矩形就都會有一定的曲率。在圖標中曲率的呈現(xiàn)方式有兩種：外曲、內曲。

圖標的曲率

外曲與內曲并不一定同時存在，在特定情況下內部結構可以是直角（無曲率）。如下圖：當內部結構都是圓角時會發(fā)現(xiàn)整個圖標稍顯臃腫，這時我們可以把部分內部圓角直接變?yōu)橹苯牵ㄒ部梢愿淖兦蚀笮。?，改變后就會發(fā)現(xiàn)圖標的整體結構會顯得更加協(xié)調。需要注意的是如果一個圖標做了這樣的處理，在同等情況下的圖標都要做一樣的處理，不然圖標會顯得非常雜亂，不統(tǒng)一。

5、傾斜角度

根據(jù)像素的網(wǎng)格線來設置兩條對角線，會讓你的圖標看起來更清晰。在傾斜的角度選擇上，不要出現(xiàn) 7.8°、14.2°這樣的奇怪數(shù)值。我們可以將 15°的增量用于傾斜角度（也可以采用其他有規(guī)律的角度方案），這樣會使得整體的圖形變化顯得更加規(guī)律，也能夠滿足不同圖形的角度需求。

傾斜角度

6、斷點形態(tài)

在做很多圖標時都會用斷點的缺口來打破"全包邊圖標"的沉悶感，使圖標具有透氣性，如果想給圖標添加斷點，那么要保證斷點的形態(tài)保持一致。

斷點形態(tài)

7、圖標間距

確保圖標內每個細節(jié)和元素都有足夠的空間，圖標的相鄰元素之間的空間在整個圖標中不應太小，我們可以定義最小間隙以避免輪廓"粘住"，在 24px 尺寸下的間距不得小于 1px。

圖標間距

8. 透視

如果在做圖標時牽涉到了透視需求，那么就一定要保證圖標的透視角度一致。

透視

9. 視覺重心

非中心對稱圖形物理對齊時視覺上會有偏離感，多個不同形狀的圖標視覺重心并不在一條水平線上，需要微調才能保證平衡感。

視覺重心

10. 圖形整潔

在圖形的處理上，不要留有多余的節(jié)點，干掉多余的節(jié)點，保持圖形的整潔。

圖形整潔

11. 命名

ICON 命名要求較為嚴格，涉及到我們切圖給開發(fā)，所以我們命名爭取做對，且需嚴格遵守規(guī)則，正確的命名原則：類型_位置_功能_狀態(tài)_大小。

圖標命名

切圖命名參考

七、圖標的評判標準

當圖標設計完后，我們應該如何去評判一個圖標的好壞？很多設計師并沒有完整的評判體系，其實我們可以從這五個維度對圖標進行評判：識別性、圖標氣質、協(xié)調性、一致性、品牌調性。

1、識別性

圖標最主要的用途就是輔助用戶理解信息，特別是對于當圖標單獨存在時，一定不能讓用戶產(chǎn)生疑慮。要想圖標達到高識別，我們可以從這 2 個方向入手：大眾認知隱喻、真實世界映射。

(1)、大眾認知隱喻

在互聯(lián)網(wǎng)普及的今天，許多界面的隱喻圖標已被廣大用戶熟知認可，對于這類隱喻圖標用戶不用思考身體就已做出反應，我們在設計圖標時可以從隱喻圖標中添加修改部分元素，從而形成新的圖標，這樣既能保證圖標的識別性，也能做出差異化。

大眾認知隱喻

(2)、真實世界映射

選擇真實世界中的物品映射，能使人下意識對圖標的作用有近似預期，降低學習成本，提高識別度。

真實世界映射

2、圖標氣質

每個 App 應該有自己獨特的產(chǎn)品氣質，而我們所做的圖標就是要跟隨產(chǎn)品的氣質。例如當你要做一款二次元產(chǎn)品，你的圖標氣質就應該偏活潑、可愛、萌、青春，而不是剛硬、嚴謹、規(guī)矩。

圖標氣質

3、一致性

一致性是圖標的基礎，我們在繪制整套圖標時要確保它們的基礎屬性全部一致，細節(jié)統(tǒng)一，圖標內容的統(tǒng)一在視覺上也更加和諧美觀。圖標是否具有一致性，就要從以下七個方向去評判：尺寸大小、圖形角度、拐角（曲率）、描邊、間距、透視、顏色。

3-1 尺寸大?。壕W(wǎng)格大小是否統(tǒng)一、是否遵守圖標的 keyline 規(guī)則。

3-2 圖形角度：是否遵循設定的角度規(guī)范（15°的增量用于傾斜角度）

3-3 拐角（曲率）：拐角的曲率是否統(tǒng)一，如果圖形太多且復雜，那么我們可以根據(jù)圖標的特性去設定曲率的規(guī)則，例如可以設定當邊角像素在 1-2px 時內外曲率為 2px；當邊角像素在 3px 時內外曲為 2px，內曲為 1px；當邊角像素大于或等于 4px 時，外曲為 2px，內部則為直角。

3-4 描邊：描邊大小是否一致。

3-5 間距：是否遵守間距規(guī)范。

3-6 透視：透視是否一致，避免在同一套圖標中出現(xiàn)正視圖/側視圖混雜的情況。

3-7 顏色：在圖標的配色上要保持一致的規(guī)律，采用相同的顏色是比較常見的配色方式。如果采用不同色相的配色方式。也需要保持整體的配色協(xié)調，避免出現(xiàn)飽和度、明度反差過大的配色。

圖標設計的一致性

4、協(xié)調性

一致性代表的是圖標的基礎，而協(xié)調性則代表圖標的整體狀態(tài)，協(xié)調性的呈現(xiàn)狀態(tài)是驗證一致性是否合理的標準，當協(xié)調性存在問題時，我們就要反過來查看一致性存在的誤區(qū)并給予修改。在圖標的協(xié)調性上我們主要審視這三點：視覺大小、飽滿度、透析感。

(1)、視覺大小

視覺大小對標的是一致性的尺寸大小與描邊大小，當你發(fā)現(xiàn)圖標視覺大小不對等時，你就要回過去查看你的網(wǎng)格與 keyline 是否運用正確，確保正確后再查看你的圖標是否按照 keyline 的規(guī)范繪制以及描邊大小是否一致。（同樣尺寸下的圖標，從光感上來看描邊粗的圖標視覺偏大）

視覺大小協(xié)調

(2)、飽滿度

飽滿度對標的一致性的間距，當你發(fā)現(xiàn)圖標不夠飽滿時，你就要去查看你設定的間距值是否偏大，是否合理。

飽滿度協(xié)調

(3)、透析感

透析感簡單來說就是留白區(qū)域。透析感對標的也是一致性的間距，當元素的描邊過大時，我們就要合理的設定間距的最小值，不然整個圖標就顯得非常臃腫。

透析感協(xié)調

5、品牌調性

品牌調性是我們經(jīng)常提到的緯度，我們打開很多 APP 都會發(fā)現(xiàn)他們的圖標設計都非常普通，沒有任何特色，過于大眾化，雖然都做了一些形式上的改變，但總是與品牌缺乏聯(lián)動性。其實我們可以結合品牌調性，在圖標上做更多的聯(lián)動、創(chuàng)新。

(1)、品牌顏色

色彩是圖標設計中重要的構成元素之一，我們可以直接提取品牌色作為圖標設計視覺元素。

當然品牌顏色除了可以直接用外，還可以在提取時適當調整色彩的飽和度、明度，做更多的形式變化。

(2)、品牌 LOGO

提取品牌 LOGO 是最常用的使用方式，我們從品牌中提取出來的圖標一般運用在 APP 首頁標簽。因為首頁是 APP 中最重要的頁面，也是進入 APP 默認的頁面，把首頁圖標替換成品牌 LOGO，能反復加強了用戶對 App 的 logo 印象，這樣不但使 App 內外形成了視覺聯(lián)系，同時也二次傳遞了品牌形象。

(3)、品牌元素

可以在品牌中提取它識別性較強的局部元素作為圖標。品牌提取的元素并不只是所見到的品牌視覺形象，還可以提取與品牌內容強相關的元素。

(4)、品牌名稱

如果你的品牌還不為大眾所熟知，那么為了強化用戶對品牌名稱的認知，可以把品牌名稱直接放入標簽欄中。

八、圖標設計注意事項

1、識別性

圖標存在的意義，主要是為了快速傳遞信息，不能讓其成了無用的裝飾品。隨著互聯(lián)網(wǎng)的普及、時間的積累，人們對一些線上圖標信息的隱喻已根深蒂固，早就形成了慣性思維，所以我們設計的圖標必須要符合用戶的認知，能讓用戶快速理解，即便出現(xiàn)個別特殊情況，也要用文字清楚的標注說明，否則一旦讓用戶產(chǎn)生疑惑，圖標就起了負面作用，在很大程度上影響使用體驗。符合認知的圖標能讓用戶下意識的理解且接近心理預期，減少學習成本，提升使用效率。

2、簡潔美觀

圖標是將現(xiàn)實世界中的事件/事務用抽象的圖形表現(xiàn)出來，如果過于追求完美而設計的太復雜，還不如直接上圖片來的快，所以不能過于展現(xiàn)真實物品的細節(jié)，最終設計出正確而不失真的圖標尤為重要，這樣既能用于傳遞信息，又便于用戶快速且清晰感知。

3、視覺對齊

為確保視覺平衡，異形元素在使用系統(tǒng)自動對齊后，會有一定的偏差，需手動微調進行視覺對齊。

4、保持一致

針對大型項目，要想整個家族的圖標更加和諧，保持相同的樣式及設計原則著實不易，尤其是在多人完成設計的情況下，事先有一個清晰的設計原則和規(guī)范是必不可少的。圖標都有著對應的視覺重量，例如描邊粗細、填充模式、繁簡程度等屬性，需要做的就是控制好這些關鍵因素，讓整體看起來視覺重量相同且能相互關聯(lián)組合到一起，保持所有圖標的一致性。

5、最小間隙

單個圖標的各元素之間要有呼吸感，需要適當?shù)牧舭?，如果描邊過大，整個條看起來感覺像糊成一團或臃腫不堪，如果存在類似問題，可通過減小描邊值或降低圖標的復雜程度來解決。

6、使用 2 的倍數(shù)

以偶數(shù)為單位的設計便于數(shù)據(jù)的計算（2 的倍數(shù)），例如正負形間距、描邊值等，在 iOS@2x 設計下，@1x 也不會出現(xiàn)小數(shù)點。在移動端設計中，最小的圖標為 24px，可被 2、3、4、6、8、12 整除，也是可以被整除最多的數(shù)值，因此，可靈活的等比縮放。

7、延展性

即便做好了前面的一切，圖標設計工作也并未完成，需要做的是持續(xù)測試圖標的可用性，做好后續(xù)的完善與優(yōu)化，沒有最好、只有更好，以確保上線后的效果和后續(xù)的迭代。