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