從1973年第一代圖形用戶界面的呱呱落地到今天百家爭鳴，圖形用戶界面竟然已經(jīng)走過了50年的發(fā)展歷程，更神奇的是，原來UI設(shè)計這個職業(yè)的起源也是因圖標(biāo)的起源而起，后來圖標(biāo)成了UI設(shè)計中最重要的視覺元素之一，接下來，我們一起走進圖標(biāo)的世界，了解它神秘背后的故事。
六、 提升圖標(biāo)設(shè)計的4個小技巧
在計算機發(fā)展的早期，用戶界面主要是基于命令行的，由字母和數(shù)字組成，操作復(fù)雜且對普通用戶不友好，用戶需要記住大量的命令和參數(shù)才能使用計算機系統(tǒng)。
隨著計算機技術(shù)的發(fā)展，為了使計算機更易于使用和理解，程序員開始開發(fā)圖形化的元素來代表各種操作和功能，圖標(biāo)概念由此誕生。最初的目的是幫助新手用戶能夠更方便地組織文件和執(zhí)行任務(wù)，而無需記住復(fù)雜的命令。
1973年，美國施樂公司推出了第一批真正意義上具有圖形用戶界面的個人電腦——Xerox Alto。雖然這款電腦僅生產(chǎn)了約 2000 臺，但它為后來的計算機圖形界面發(fā)展奠定了基礎(chǔ)。它的界面中已經(jīng)出現(xiàn)了一些簡單的圖標(biāo)，如垃圾桶、計算器、打印機、文件和文件夾等，這些圖標(biāo)成為了后來圖標(biāo)設(shè)計的雛形。
1979年，史蒂夫·喬布斯參觀了施樂公司的原型機后，深受啟發(fā)，決定開發(fā)自己的圖形界面計算機。1983 年，蘋果公司推出了Apple Lisa，這是蘋果首臺圖形界面計算機，其界面中的圖標(biāo)設(shè)計得到了進一步的發(fā)展。
在這一時期，現(xiàn)代圖標(biāo)設(shè)計之母蘇珊·卡爾擔(dān)任蘋果的創(chuàng)意總監(jiān)，她設(shè)計的像素風(fēng)格圖標(biāo)簡潔、清晰、易于理解，具有很高的視覺平衡性，即使在今天看來也顯得活潑有趣。
1985年，微軟發(fā)布了 Windows 1.0操作系統(tǒng)，這是微軟在圖形用戶界面領(lǐng)域的重要嘗試。該系統(tǒng)中的圖標(biāo)設(shè)計也借鑒了蘋果的一些理念，但也有自己的特點。隨著 Windows 操作系統(tǒng)的不斷發(fā)展和普及，圖標(biāo)設(shè)計也逐漸成為了用戶界面設(shè)計中不可或缺的一部分。
圖標(biāo)設(shè)計是一種設(shè)計活動，主要是創(chuàng)造出用于代表物體、動作、概念等各種元素的圖形符號。
這些圖形符號具有簡潔性，讓人能快速識別。比如手機桌面上的微信圖標(biāo)，用兩個對話氣泡的簡單圖案就代表了這個軟件，讓人一眼就能明白。圖標(biāo)設(shè)計在很多領(lǐng)域都有應(yīng)用，像軟件界面、網(wǎng)站、移動應(yīng)用等，能夠為用戶提供視覺引導(dǎo)，方便用戶操作。
圖標(biāo)在提升產(chǎn)品氣質(zhì)上起著不可估量的地位，在界面中往往起著畫龍點睛的作用，無法想象在一個產(chǎn)品中，沒有圖標(biāo)，界面會顯得多么的無聊和乏味，但是圖標(biāo)也不能總用一種形式的圖標(biāo)，這樣也會百看讓人生厭，因此也就衍生了圖標(biāo)的多樣性，以下是我整理的常見圖標(biāo)類型：
工具圖標(biāo)在B端項目中應(yīng)用很廣泛，幾乎每個組件中都會包含這類圖標(biāo)；比方說騰訊文檔上方的文檔編輯圖標(biāo)就是屬于這種類型，它的裝飾性很小，更多是功能的承載。
在一些軟件產(chǎn)品中，會重點強調(diào)品牌、情感化設(shè)計，大量啟用3D化的裝飾圖標(biāo)來提升界面的質(zhì)感。
比方說騰訊電腦管家下面的這個界面設(shè)計，它就運用了大量具有裝飾性的圖標(biāo)來傳遞信息表達品牌，并且中央還采用騰訊電腦管家的IP形象作為切入點，萌萌的形象無形中拉近了與受眾之間的距離。
在項目中，當(dāng)用戶想表達品牌時，經(jīng)常會把LOGO圖標(biāo)做成動態(tài)圖，來更好的傳遞品牌理念，比方說聯(lián)想電腦管家，在啟動頁時，就運用了動態(tài)啟動圖標(biāo)，同時下面還附帶了一個slogan的文字動效，很好的向用戶傳遞了安全的理念。
在軟件界面中，經(jīng)常也需要進程的提示，這時候圖標(biāo)就可以起到這樣的作用，比方說騰訊電腦管家在清理垃圾時，圖標(biāo)里面的風(fēng)扇就一直在轉(zhuǎn)，寓意當(dāng)前清理工作正在進行中。
軟件在運行過程中難免會出現(xiàn)bug或者內(nèi)容為空的時候，這時候狀態(tài)提示圖標(biāo)就尤為重要，可以大大減輕人們的焦慮情緒。
圖標(biāo)不僅在理解和使用上給人們提效了，而且有時添加動效的圖標(biāo)還能給人帶來絲絲驚喜和愉悅。
比方說聯(lián)想的這個動態(tài)加載圖標(biāo)，看著就很有趣，讓人忍不住多欣賞一下。
雖然現(xiàn)在AI盛行，很多酷炫的效果可以用AI實現(xiàn)，但是一些讓圖標(biāo)看起來更加專業(yè)精致、耐看的秘密我們還是需要知道的，了解這些設(shè)計原則，我們可以事半功倍，當(dāng)AI生產(chǎn)有偏差時，我們自己可以優(yōu)化、修復(fù)和調(diào)整。
圖標(biāo)大小統(tǒng)一，就是一組圖標(biāo)放置在一起，圖標(biāo)大小要看起來差不多，不能忽大忽小，比方說這組圖標(biāo)的第三個圖標(biāo)，電腦圖標(biāo)明顯過高，跟其他圖標(biāo)放在一起就顯得不是那么的協(xié)調(diào)美觀和統(tǒng)一。
在大小統(tǒng)一這方面，我們記得就是幾何圖形它們有視覺差，有的時候并不是說尺寸一樣，大小就一樣了，比方說下面這組圖形，左邊的這組它們高度一樣，可是看起來大小并不太一樣，明顯中間的三角形顯得??；右邊的這組，三角形比左右兩邊的都要高，可是它們放在一起看起來大小就是差不多的，這就是幾何圖形帶來的視覺差，就是我們在做圖的時候，要記得多去感受，設(shè)計中的美很多不是用1+1=2能解釋清楚的，它就是一種感受，放下心中的浮躁，我們還是能感受到它們之間的區(qū)別，這種美也沒那么玄乎，只要用心，一定可以做出大小一致的圖標(biāo)。
圓角統(tǒng)一，就是圖標(biāo)之間有相同造型，然后又都有圓角的，那么他們就要保持相同的圓角曲度，比方說下面這組圖標(biāo)，圖標(biāo)的外形都是正方形且它們都帶有圓角，可是它們的圓角曲度卻明顯不一樣，這樣就看起了不夠規(guī)范和專業(yè)。
界面中同樣功能的圖標(biāo)，樣式和風(fēng)格需要保持一致，比方說這組圖標(biāo)樣式，風(fēng)格就保持著高度的一致，都是用的玻璃質(zhì)感的磨砂材質(zhì)。
這組扁平化圖標(biāo)，在右邊相似的角度都疊加了一個小色塊，增加了圖標(biāo)的層次感，相同的角度也增加了圖標(biāo)的一致性和系列感。
圖標(biāo)的粗細要統(tǒng)一，這樣圖標(biāo)就會看起來比較精致，比方說下面的這組圖標(biāo)，圖標(biāo)外框線都是用的3px，圖標(biāo)里面的線都是用的2px，圖標(biāo)的粗細都保持一樣的粗細規(guī)律，這樣的圖標(biāo)看著也是同樣的美觀和一致。
下面是一組類似于插畫風(fēng)格的圖標(biāo)，圖標(biāo)的風(fēng)格是布線比較密集飽滿，而三個圖標(biāo)都遵循了這樣的原則，看起來出奇的統(tǒng)一，所以它們看起來像是一組成套圖標(biāo)。
當(dāng)設(shè)計的圖標(biāo)是立體時，要注意它們的透視要統(tǒng)一，就像下面的這組2.5D圖標(biāo)，它們的設(shè)計透視就保持著高度的一致。
圖標(biāo)的優(yōu)劣首先取決于其能否讓用戶一目了然地理解其代表的意義，這是很重要的圖標(biāo)設(shè)計原則。
下面的這組手機主題圖標(biāo)，識別性就非常的高，簡潔且好理解。
圖標(biāo)在界面設(shè)計中扮演著至關(guān)重要的角色，它們遍布于應(yīng)用程序的各個角落。無論是導(dǎo)航欄、工具欄還是標(biāo)簽欄，亦或是首頁、詳情頁、個人中心頁，功能圖標(biāo)都隨處可見。圖標(biāo)的主要作用在于傳達信息，相比文字，它們能更直接地傳遞概念，并且能夠為用戶的視覺體驗增添樂趣。
功能圖標(biāo)常以簡潔的圖形呈現(xiàn)，它們便于用戶識別和記憶。這種設(shè)計讓用戶能夠迅速定位到所需的功能，無需耗費時間閱讀文字說明或瀏覽冗長的菜單選項，大大提升了界面的使用效率。
華為云的這個界面，文字信息很多，因為有了圖標(biāo)的存在，人們尋找起來特別高效，能高效定位到想要的信息。
圖標(biāo)不僅可以提升界面使用效率，還能提升用戶的體感和滿意度，精美的圖標(biāo)讓人看著都是賞心悅目的，就像我們在大街上看到一個美女，都忍不住多駐留一伙一樣。
華為云這組精美的圖標(biāo)動效就給了我很大的視覺享受，圖標(biāo)設(shè)計精致，配色舒適，還有動效，給足了用戶滿足感。
圖標(biāo)很多的造型都來源于生活，來源于我們熟悉的事物，在界面中運用我們熟悉的圖形會大大降低人們的認知成本，也會讓更多人產(chǎn)生共鳴，它的傳達作用不受語言和國界的束縛，是一種高效的界面表達語言。
華為云的這組圖標(biāo)就是運用了人們?nèi)粘Ｉ钪蟹浅Ｊ煜さ脑兀缠Q感很強，人們學(xué)習(xí)和理解的成本很低。
仔細觀察會發(fā)現(xiàn)，在生活中有很多的軟件產(chǎn)品，會把企業(yè)的LOGO融入到日常產(chǎn)品的圖標(biāo)設(shè)計中，大大提升了品牌的一個曝光度。
騰訊云就有這樣的小心思，它會把騰訊云LOGO融入到banner圖標(biāo)設(shè)計中，傳遞了信息，同時也加強了品牌的曝光。
有圖標(biāo)的界面，頁面看起來豐富度更高，層次感更強，信息表達上也會更加的清晰整潔。
360AI辦公這個界面之所以看起來這么豐富，很大原因是在于圖標(biāo)的應(yīng)用，界面中有大圖標(biāo)、小型面圖標(biāo)，還有線性小圖標(biāo)，有對比，整個頁面就看起來豐盈了不少。
千篇一律的文字，難免會產(chǎn)生枯燥感，讓人不愿多駐留；圖標(biāo)多彩的配色以及Q萌的造型會讓人心生愉悅。
佐糖的這個界面，若不是有圖標(biāo)的潤色，光只有功能點和文字介紹，估計會乏味不少，但是有了多彩圖標(biāo)的加入，瞬間氛圍感都熱鬧了不少。
任何一項技能的獲得，最開始都離不開臨摹，作為剛接觸UI設(shè)計的職場新人，可以先從臨摹入手，先臨摹簡單的，然后循序漸進，臨摹難度大點的，這樣圖標(biāo)設(shè)計能力也會慢慢提升。
想要繪制好看的圖標(biāo)，首先要見過好看的圖標(biāo)，所以我們?nèi)粘ＲB(yǎng)成多收集好圖標(biāo)好設(shè)計的習(xí)慣，這樣當(dāng)面臨新的需求設(shè)計時，也不至于手忙腳亂，不知如何下手。
看到好看的圖標(biāo)設(shè)計時，我們要學(xué)會分析，這組圖標(biāo)好，它好在哪，哪里打動了你，你分析了這些，你自己在設(shè)計的時候也會不自覺的運用到其中的智慧和思路，這樣我們就可以隨時原創(chuàng)出符合自己需求的圖標(biāo)設(shè)計來。
目標(biāo)受眾不同，他們對圖形的期望也會不一樣，比方說在設(shè)計兒童產(chǎn)品界面和B端產(chǎn)品界面時，所用的顏色和形狀都是有考究的。
兒童類產(chǎn)品的圖標(biāo)設(shè)計，形狀會比較圓潤，色彩也比較多彩；但是B端類產(chǎn)品的圖標(biāo)設(shè)計用色就會很克制，形狀也不會過于圓潤。
1、Iconfont
(https://www.iconfont.cn/)
iconfont是阿里巴巴的圖標(biāo)庫,應(yīng)該也是受眾最多的一個圖標(biāo)下載網(wǎng)站，給我們平時工作提效不少，造福了不少的設(shè)計師。
2、IconPark
(https://iconpark.oceanengine.com/)
IconPark是字節(jié)跳動旗下的一款圖標(biāo)下載網(wǎng)站，它可以在線把一個圖標(biāo)實現(xiàn)多種風(fēng)格的切換，線性、面線、線面結(jié)合，并且線的粗細大小可以調(diào)節(jié)，非常的方便。
Ikonate是一款可以在線編輯的圖標(biāo)網(wǎng)站，涵蓋了常用的一些圖標(biāo)，可以調(diào)節(jié)線條的粗細和大小，導(dǎo)出的格式是SVG。
4、Iconfinder
(https://www.iconfinder.com)
Iconfinder的優(yōu)點，我覺得是造型夠豐富，滿足你有時候無法腦補的痛點。
5、Iconduck
(https://iconduck.com/)
Iconduck的優(yōu)點是有273,858個免費的圖標(biāo)庫和插畫庫供大家選擇，儲備夠豐富。
圖標(biāo)一般有四種狀態(tài)，正常normal (nor)、高亮highlight (hig)、選中selected (sel)、不可用disable (dis)四種狀態(tài)，一個好的命名習(xí)慣會給自己的合作搭檔帶來很好的體驗，通常在寫界面的時候，前端都是用英文對元素進行命名的，這里我列舉一下我經(jīng)常合作同事的一個命名規(guī)范，供大家參考：
例如：Nav_button_message_sel
在深入探索了圖標(biāo)設(shè)計的豐富世界之后，我相信大家未來能夠根據(jù)不同的場合挑選出恰當(dāng)?shù)膱D標(biāo)風(fēng)格和樣式。通過持續(xù)的總結(jié)和歸納，我對圖標(biāo)設(shè)計的理解也變得更加深刻。雖然這份總結(jié)可能還有待完善之處，請大家多多海涵，期待在下一篇文章中再次與大家相見。
作者：姝斐suphie鏈接：https://www.zcool.com.cn/article/ZMTY0MDI2MA==.html來源：站酷著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
