從1973年第一代圖形用戶界面的呱呱落地到今天百家爭鳴，圖形用戶界面竟然已經(jīng)走過了50年的發(fā)展歷程，更神奇的是，原來UI設計這個職業(yè)的起源也是因圖標的起源而起，后來圖標成了UI設計中最重要的視覺元素之一，接下來，我們一起走進圖標的世界，了解它神秘背后的故事。

目錄

一、 圖標的起源

二、 圖標設計的定義

三、 圖標的種類

四、 圖標設計8大原則

五、 圖標的6大作用

六、 提升圖標設計的4個小技巧

七、 5個圖標網(wǎng)站推薦

八、圖標的命名規(guī)范

一、圖標的起源

在計算機發(fā)展的早期，用戶界面主要是基于命令行的，由字母和數(shù)字組成，操作復雜且對普通用戶不友好，用戶需要記住大量的命令和參數(shù)才能使用計算機系統(tǒng)。

隨著計算機技術的發(fā)展，為了使計算機更易于使用和理解，程序員開始開發(fā)圖形化的元素來代表各種操作和功能，圖標概念由此誕生。最初的目的是幫助新手用戶能夠更方便地組織文件和執(zhí)行任務，而無需記住復雜的命令。

1. 施樂公司的開創(chuàng)性工作

1973年，美國施樂公司推出了第一批真正意義上具有圖形用戶界面的個人電腦——Xerox Alto。雖然這款電腦僅生產(chǎn)了約 2000 臺，但它為后來的計算機圖形界面發(fā)展奠定了基礎。它的界面中已經(jīng)出現(xiàn)了一些簡單的圖標，如垃圾桶、計算器、打印機、文件和文件夾等，這些圖標成為了后來圖標設計的雛形。

2. 蘋果公司的推動

1979年，史蒂夫·喬布斯參觀了施樂公司的原型機后，深受啟發(fā)，決定開發(fā)自己的圖形界面計算機。1983 年，蘋果公司推出了Apple Lisa，這是蘋果首臺圖形界面計算機，其界面中的圖標設計得到了進一步的發(fā)展。

在這一時期，現(xiàn)代圖標設計之母蘇珊·卡爾擔任蘋果的創(chuàng)意總監(jiān)，她設計的像素風格圖標簡潔、清晰、易于理解，具有很高的視覺平衡性，即使在今天看來也顯得活潑有趣。

3. 微軟的跟進與發(fā)展

1985年，微軟發(fā)布了 Windows 1.0操作系統(tǒng)，這是微軟在圖形用戶界面領域的重要嘗試。該系統(tǒng)中的圖標設計也借鑒了蘋果的一些理念，但也有自己的特點。隨著 Windows 操作系統(tǒng)的不斷發(fā)展和普及，圖標設計也逐漸成為了用戶界面設計中不可或缺的一部分。

二、圖標設計的定義？

圖標設計是一種設計活動，主要是創(chuàng)造出用于代表物體、動作、概念等各種元素的圖形符號。

這些圖形符號具有簡潔性，讓人能快速識別。比如手機桌面上的微信圖標，用兩個對話氣泡的簡單圖案就代表了這個軟件，讓人一眼就能明白。圖標設計在很多領域都有應用，像軟件界面、網(wǎng)站、移動應用等，能夠為用戶提供視覺引導，方便用戶操作。

三、圖標的種類

圖標在提升產(chǎn)品氣質上起著不可估量的地位，在界面中往往起著畫龍點睛的作用，無法想象在一個產(chǎn)品中，沒有圖標，界面會顯得多么的無聊和乏味，但是圖標也不能總用一種形式的圖標，這樣也會百看讓人生厭，因此也就衍生了圖標的多樣性，以下是我整理的常見圖標類型：

1. 從視覺表現(xiàn)上，有以下12大類圖標

2. 從功能上，有以下6大類圖標

?工具圖標：

工具圖標在B端項目中應用很廣泛，幾乎每個組件中都會包含這類圖標；比方說騰訊文檔上方的文檔編輯圖標就是屬于這種類型，它的裝飾性很小，更多是功能的承載。

?裝飾圖標：

在一些軟件產(chǎn)品中，會重點強調(diào)品牌、情感化設計，大量啟用3D化的裝飾圖標來提升界面的質感。

比方說騰訊電腦管家下面的這個界面設計，它就運用了大量具有裝飾性的圖標來傳遞信息表達品牌，并且中央還采用騰訊電腦管家的IP形象作為切入點，萌萌的形象無形中拉近了與受眾之間的距離。

?啟動圖標

在項目中，當用戶想表達品牌時，經(jīng)常會把LOGO圖標做成動態(tài)圖，來更好的傳遞品牌理念，比方說聯(lián)想電腦管家，在啟動頁時，就運用了動態(tài)啟動圖標，同時下面還附帶了一個slogan的文字動效，很好的向用戶傳遞了安全的理念。

? 進程提示圖標

在軟件界面中，經(jīng)常也需要進程的提示，這時候圖標就可以起到這樣的作用，比方說騰訊電腦管家在清理垃圾時，圖標里面的風扇就一直在轉，寓意當前清理工作正在進行中。

? 狀態(tài)提示圖標

軟件在運行過程中難免會出現(xiàn)bug或者內(nèi)容為空的時候，這時候狀態(tài)提示圖標就尤為重要，可以大大減輕人們的焦慮情緒。

? 增加界面趣味性的圖標

圖標不僅在理解和使用上給人們提效了，而且有時添加動效的圖標還能給人帶來絲絲驚喜和愉悅。

比方說聯(lián)想的這個動態(tài)加載圖標，看著就很有趣，讓人忍不住多欣賞一下。

四、圖標設計8大原則

雖然現(xiàn)在AI盛行，很多酷炫的效果可以用AI實現(xiàn)，但是一些讓圖標看起來更加專業(yè)精致、耐看的秘密我們還是需要知道的，了解這些設計原則，我們可以事半功倍，當AI生產(chǎn)有偏差時，我們自己可以優(yōu)化、修復和調(diào)整。

1. 大小統(tǒng)一

圖標大小統(tǒng)一，就是一組圖標放置在一起，圖標大小要看起來差不多，不能忽大忽小，比方說這組圖標的第三個圖標，電腦圖標明顯過高，跟其他圖標放在一起就顯得不是那么的協(xié)調(diào)美觀和統(tǒng)一。

在大小統(tǒng)一這方面，我們記得就是幾何圖形它們有視覺差，有的時候并不是說尺寸一樣，大小就一樣了，比方說下面這組圖形，左邊的這組它們高度一樣，可是看起來大小并不太一樣，明顯中間的三角形顯得?。挥疫叺倪@組，三角形比左右兩邊的都要高，可是它們放在一起看起來大小就是差不多的，這就是幾何圖形帶來的視覺差，就是我們在做圖的時候，要記得多去感受，設計中的美很多不是用1+1=2能解釋清楚的，它就是一種感受，放下心中的浮躁，我們還是能感受到它們之間的區(qū)別，這種美也沒那么玄乎，只要用心，一定可以做出大小一致的圖標。

2. 圓角統(tǒng)一

圓角統(tǒng)一，就是圖標之間有相同造型，然后又都有圓角的，那么他們就要保持相同的圓角曲度，比方說下面這組圖標，圖標的外形都是正方形且它們都帶有圓角，可是它們的圓角曲度卻明顯不一樣，這樣就看起了不夠規(guī)范和專業(yè)。

3. 風格統(tǒng)一

界面中同樣功能的圖標，樣式和風格需要保持一致，比方說這組圖標樣式，風格就保持著高度的一致，都是用的玻璃質感的磨砂材質。

4. 角度統(tǒng)一

這組扁平化圖標，在右邊相似的角度都疊加了一個小色塊，增加了圖標的層次感，相同的角度也增加了圖標的一致性和系列感。

5. 粗細統(tǒng)一

圖標的粗細要統(tǒng)一，這樣圖標就會看起來比較精致，比方說下面的這組圖標，圖標外框線都是用的3px，圖標里面的線都是用的2px，圖標的粗細都保持一樣的粗細規(guī)律，這樣的圖標看著也是同樣的美觀和一致。

6. 疏密統(tǒng)一

下面是一組類似于插畫風格的圖標，圖標的風格是布線比較密集飽滿，而三個圖標都遵循了這樣的原則，看起來出奇的統(tǒng)一，所以它們看起來像是一組成套圖標。

7. 透視統(tǒng)一

當設計的圖標是立體時，要注意它們的透視要統(tǒng)一，就像下面的這組2.5D圖標，它們的設計透視就保持著高度的一致。

8. 易識別

圖標的優(yōu)劣首先取決于其能否讓用戶一目了然地理解其代表的意義，這是很重要的圖標設計原則。

下面的這組手機主題圖標，識別性就非常的高，簡潔且好理解。

五、圖標的6大作用

圖標在界面設計中扮演著至關重要的角色，它們遍布于應用程序的各個角落。無論是導航欄、工具欄還是標簽欄，亦或是首頁、詳情頁、個人中心頁，功能圖標都隨處可見。圖標的主要作用在于傳達信息，相比文字，它們能更直接地傳遞概念，并且能夠為用戶的視覺體驗增添樂趣。

1. 提升界面的使用效率

功能圖標常以簡潔的圖形呈現(xiàn)，它們便于用戶識別和記憶。這種設計讓用戶能夠迅速定位到所需的功能，無需耗費時間閱讀文字說明或瀏覽冗長的菜單選項，大大提升了界面的使用效率。

華為云的這個界面，文字信息很多，因為有了圖標的存在，人們尋找起來特別高效，能高效定位到想要的信息。

2. 增加用戶的滿意度

圖標不僅可以提升界面使用效率，還能提升用戶的體感和滿意度，精美的圖標讓人看著都是賞心悅目的，就像我們在大街上看到一個美女，都忍不住多駐留一伙一樣。

華為云這組精美的圖標動效就給了我很大的視覺享受，圖標設計精致，配色舒適，還有動效，給足了用戶滿足感。

3. 減少人們認知的成本

圖標很多的造型都來源于生活，來源于我們熟悉的事物，在界面中運用我們熟悉的圖形會大大降低人們的認知成本，也會讓更多人產(chǎn)生共鳴，它的傳達作用不受語言和國界的束縛，是一種高效的界面表達語言。

華為云的這組圖標就是運用了人們?nèi)粘Ｉ钪蟹浅Ｊ煜さ脑?，共鳴感很強，人們學習和理解的成本很低。

4. 提升品牌形象

仔細觀察會發(fā)現(xiàn)，在生活中有很多的軟件產(chǎn)品，會把企業(yè)的LOGO融入到日常產(chǎn)品的圖標設計中，大大提升了品牌的一個曝光度。

騰訊云就有這樣的小心思，它會把騰訊云LOGO融入到banner圖標設計中，傳遞了信息，同時也加強了品牌的曝光。

5. 圖標可以增加界面的豐富度

有圖標的界面，頁面看起來豐富度更高，層次感更強，信息表達上也會更加的清晰整潔。

360AI辦公這個界面之所以看起來這么豐富，很大原因是在于圖標的應用，界面中有大圖標、小型面圖標，還有線性小圖標，有對比，整個頁面就看起來豐盈了不少。

6. 減少界面的枯燥感

千篇一律的文字，難免會產(chǎn)生枯燥感，讓人不愿多駐留；圖標多彩的配色以及Q萌的造型會讓人心生愉悅。

佐糖的這個界面，若不是有圖標的潤色，光只有功能點和文字介紹，估計會乏味不少，但是有了多彩圖標的加入，瞬間氛圍感都熱鬧了不少。

六、提升圖標設計的4個小技巧

1. 大量臨摹，刻意練習

任何一項技能的獲得，最開始都離不開臨摹，作為剛接觸UI設計的職場新人，可以先從臨摹入手，先臨摹簡單的，然后循序漸進，臨摹難度大點的，這樣圖標設計能力也會慢慢提升。

2. 多積累好的樣本

想要繪制好看的圖標，首先要見過好看的圖標，所以我們?nèi)粘ＲB(yǎng)成多收集好圖標好設計的習慣，這樣當面臨新的需求設計時，也不至于手忙腳亂，不知如何下手。

3. 學會分析

看到好看的圖標設計時，我們要學會分析，這組圖標好，它好在哪，哪里打動了你，你分析了這些，你自己在設計的時候也會不自覺的運用到其中的智慧和思路，這樣我們就可以隨時原創(chuàng)出符合自己需求的圖標設計來。

4. 明確目標與受眾

目標受眾不同，他們對圖形的期望也會不一樣，比方說在設計兒童產(chǎn)品界面和B端產(chǎn)品界面時，所用的顏色和形狀都是有考究的。

兒童類產(chǎn)品的圖標設計，形狀會比較圓潤，色彩也比較多彩；但是B端類產(chǎn)品的圖標設計用色就會很克制，形狀也不會過于圓潤。

七、5個圖標網(wǎng)站推薦

1. Iconfont(https://www.iconfont.cn)

iconfont是阿里巴巴的圖標庫,應該也是受眾最多的一個圖標下載網(wǎng)站，給我們平時工作提效不少，造福了不少的設計師。

2. IconPark(https://iconpark.oceanengine.com)

IconPark是字節(jié)跳動旗下的一款圖標下載網(wǎng)站，它可以在線把一個圖標實現(xiàn)多種風格的切換，線性、面線、線面結合，并且線的粗細大小可以調(diào)節(jié)，非常的方便。

3. Ikonate(https://ikonate.com)

Ikonate是一款可以在線編輯的圖標網(wǎng)站，涵蓋了常用的一些圖標，可以調(diào)節(jié)線條的粗細和大小，導出的格式是SVG。

4. Iconfinder(https://www.iconfinder.com)

Iconfinder的優(yōu)點，我覺得是造型夠豐富，滿足你有時候無法腦補的痛點。

5. Iconduck(https://iconduck.com)

Iconduck的優(yōu)點是有273,858個免費的圖標庫和插畫庫供大家選擇，儲備夠豐富。

八、圖標的命名規(guī)范

圖標一般有四種狀態(tài)，正常normal (nor)、高亮highlight (hig)、選中selected (sel)、不可用disable (dis)四種狀態(tài)，一個好的命名習慣會給自己的合作搭檔帶來很好的體驗，通常在寫界面的時候，前端都是用英文對元素進行命名的，這里我列舉一下我經(jīng)常合作同事的一個命名規(guī)范，供大家參考：

模塊-類別-功能-狀態(tài)

例如：Nav_button_message_sel

總結

在深入探索了圖標設計的豐富世界之后，我相信大家未來能夠根據(jù)不同的場合挑選出恰當?shù)膱D標風格和樣式。

通過持續(xù)的總結和歸納，我對圖標設計的理解也變得更加深刻。雖然這份總結可能還有待完善之處，請大家多多海涵，期待在下一篇文章中再次與大家相見。