由于圖標(biāo)的幾何形狀，它們都具有不同的高度和寬度。為了在設(shè)計(jì)中正確使用ICON，我們就應(yīng)該將它們放置在大小始終相同的框架之中。
框架內(nèi)的圖標(biāo)需要與視覺中心對(duì)齊，這對(duì)于導(dǎo)出帶有框架的圖標(biāo)至關(guān)重要。
如果我們使用Figma，那就需要通過創(chuàng)建組件來節(jié)省時(shí)間。大家可以使用“實(shí)例功能”來快速替換圖標(biāo)。
使用柵格系統(tǒng)保證圖標(biāo)大小一致、視覺平衡，同時(shí)也能方便建立組件庫(kù)
我們前文提到過幾何圖形它們有視覺差，有的時(shí)候并不是說尺寸一樣，大小就一樣了，在設(shè)計(jì)過程中除了可以利用柵格系統(tǒng)保證圖標(biāo)大小統(tǒng)一之外，還需要注意以下幾個(gè)方面要保證統(tǒng)一：
圓角統(tǒng)一，就是
圖標(biāo)之間有相同造型
，然后又都有圓角的，那么他們就要
保持相同的圓角曲度
，比方說下面這組圖標(biāo)，圖標(biāo)的外形都是正方形且它們都帶有圓角，可是它們的圓角曲度卻明顯不一樣，這樣就看起了不夠規(guī)范和專業(yè)。
界面中同樣功能的圖標(biāo)，
樣式和風(fēng)格需要保持一致
，比方說這組圖標(biāo)樣式，風(fēng)格就保持著高度的一致，都是用的玻璃質(zhì)感的磨砂材質(zhì)。
這組扁平化圖標(biāo)，在右邊
相似的角度
都疊加了一個(gè)小色塊，增加了圖標(biāo)的層次感，相同的角度也增加了圖標(biāo)的一致性和系列感。
圖標(biāo)的粗細(xì)要統(tǒng)一
，這樣圖標(biāo)就會(huì)看起來比較精致，比方說下面的這組圖標(biāo)，圖標(biāo)外框線都是用的3px，圖標(biāo)里面的線都是用的2px，圖標(biāo)的粗細(xì)都保持一樣的粗細(xì)規(guī)律，這樣的圖標(biāo)看著也是同樣的美觀和一致。
下面是一組類似于插畫風(fēng)格的圖標(biāo)，圖標(biāo)的風(fēng)格是布線比較密集飽滿，
保證布線的疏密統(tǒng)一
，而三個(gè)圖標(biāo)都遵循了這樣的原則，看起來出奇的統(tǒng)一，所以它們看起來像是一組成套圖標(biāo)。
當(dāng)設(shè)計(jì)的圖標(biāo)是立體時(shí)，要
注意它們的透視要統(tǒng)一
，就像下面的這組2.5D圖標(biāo)，它們的設(shè)計(jì)透視就保持著高度的一致。
通過六組圖標(biāo)學(xué)習(xí)如何保證圖標(biāo)一致性
圖標(biāo)設(shè)計(jì)不僅需要美觀、實(shí)用，還需要
符合一定的規(guī)范和標(biāo)準(zhǔn)
。以下是關(guān)于圖標(biāo)設(shè)計(jì)的命名與輸出的詳細(xì)指南：
命名應(yīng)盡量簡(jiǎn)潔明了，
避免使用冗長(zhǎng)或復(fù)雜的名稱
。且所有命名只能為
小寫英文字母
，不要使用中文或首字母大寫的形式。遵循統(tǒng)一的命名規(guī)則，確保團(tuán)隊(duì)成員之間的協(xié)作效率。
組件_類別_功能_狀態(tài)@2x.png（例如：tabbar_icon_home_default@2x.png）。
模塊_類別_功能_狀態(tài)@2x.png（例如：bill_icon_search_pressed@2x.png）。
指獨(dú)立的可操作界面元素，如狀態(tài)欄、搜索欄等。
通常指頁(yè)面中的部分區(qū)塊，如背景、按鈕等。
指頁(yè)面或模塊中需要操作或點(diǎn)擊的點(diǎn)。
表示當(dāng)前切圖的狀態(tài)，如默認(rèn)狀態(tài)、點(diǎn)擊時(shí)狀態(tài)等。
ps：圖標(biāo)的命名一般用英文或者拼音，如果初學(xué)者對(duì)于英文命名不好理解，那么推薦下面這個(gè)網(wǎng)站，它將常用圖標(biāo)命名匯總非常方便。
根據(jù)不同平臺(tái)和設(shè)備的需求，圖標(biāo)可能需要不同的尺寸
。例如，iOS和Android平臺(tái)對(duì)圖標(biāo)的尺寸要求有所不同。常用的網(wǎng)格繪制尺寸包括：16、24、36、48、64、128、512、1024等。對(duì)于啟動(dòng)圖標(biāo)，iOS和Android通常使用1024×1024像素的尺寸。
位圖格式：
PNG、JPG
等，適用于大多數(shù)應(yīng)用場(chǎng)景。矢量格式：
SVG
，適用于需要無損縮放的場(chǎng)景。
GIF
格式：適用于動(dòng)態(tài)圖標(biāo)。
確保圖標(biāo)在不同尺寸下的顯示效果清晰銳利，避免出現(xiàn)半個(gè)像素等情況。對(duì)于需要透明背景的圖標(biāo)，確保導(dǎo)出時(shí)保留透明度信息。在導(dǎo)出過程中，
注意保持圖標(biāo)的視覺一致性和平衡感
。
隨著iOS 18系統(tǒng)的發(fā)布，蘋果公司再次對(duì)系統(tǒng)圖標(biāo)進(jìn)行了更新和優(yōu)化，旨在提升用戶體驗(yàn)和視覺美感。iOS 18不僅延續(xù)了蘋果一貫的簡(jiǎn)潔、直觀的設(shè)計(jì)風(fēng)格，還
引入了更多現(xiàn)代化的設(shè)計(jì)元素
，特別是在深色模式下的表現(xiàn)尤為突出。此次圖標(biāo)設(shè)計(jì)的更新，反映了蘋果對(duì)于細(xì)節(jié)的關(guān)注和對(duì)用戶需求的深刻理解。
-
iOS 1-3 擬物設(shè)計(jì)的巔峰：
在2007年，初代iPhone問世，iOS（當(dāng)時(shí)稱為iPhone OS）的圖標(biāo)設(shè)計(jì)以
擬物風(fēng)格
為主。蘋果通過逼真的紋理和立體感讓圖標(biāo)看起來栩栩如生。
隨著iOS的逐漸成熟，蘋果在iOS 4到iOS 6之間繼續(xù)使用擬物設(shè)計(jì)，但
在細(xì)節(jié)上進(jìn)行了更精細(xì)的打磨
。這一時(shí)期的圖標(biāo)在光影效果和材質(zhì)感上有了更高的表現(xiàn)。
iOS 1-6的圖標(biāo)設(shè)計(jì)
-
iOS 7-9 扁平化設(shè)計(jì)的到來：
2013年，iOS 7帶來了劃時(shí)代的
扁平化設(shè)計(jì)
。蘋果放棄了擬物化風(fēng)格，轉(zhuǎn)而采用更簡(jiǎn)潔、更現(xiàn)代的圖標(biāo)設(shè)計(jì)。通過去除多余的陰影和高光，圖標(biāo)變得更加輕盈。簡(jiǎn)約的設(shè)計(jì)語言讓整個(gè)系統(tǒng)顯得煥然一新。這一轉(zhuǎn)變不僅僅是設(shè)計(jì)風(fēng)格的變化，更標(biāo)志著蘋果設(shè)計(jì)哲學(xué)的更新。
-
iOS 10-12 細(xì)節(jié)優(yōu)化與動(dòng)態(tài)效果：
iOS 10到iOS 12在扁平化的基礎(chǔ)上，
加入了更多的動(dòng)態(tài)效果與視覺層次
。圖標(biāo)的顏色更加鮮艷，層次感更強(qiáng)。例如，信息圖標(biāo)變得更圓潤(rùn)，而音樂圖標(biāo)的顏色更加活潑。蘋果開始在圖標(biāo)中融入更多的交互動(dòng)畫，讓用戶體驗(yàn)更加生動(dòng)。
iOS 7-12的圖標(biāo)設(shè)計(jì)
-
iOS 13-15 簡(jiǎn)約與多樣性的結(jié)合：
在iOS 13到iOS 15之間，蘋果繼續(xù)優(yōu)化圖標(biāo)設(shè)計(jì)，
加入了深色模式
支持，允許用戶根據(jù)環(huán)境光線自動(dòng)調(diào)整顯示效果。
-
iOS 16-18 多彩的個(gè)性化時(shí)代：
進(jìn)入iOS 16，蘋果推出了
自定義鎖屏和小組件
功能，
圖標(biāo)也開始支持更多的自定義選項(xiàng)。
用戶可以通過Focus模式設(shè)置個(gè)性化的圖標(biāo)風(fēng)格，從而更好地表達(dá)自己的個(gè)性。iOS 17更是將這種個(gè)性化設(shè)計(jì)推向了新高度，用戶不僅可以定制App圖標(biāo)的形狀和顏色，還可以通過Widget讓桌面顯示更多動(dòng)態(tài)信息。
iOS 13-18的圖標(biāo)設(shè)計(jì)
iOS 18 將會(huì)允許用戶將主屏幕上的
圖標(biāo)放置在任何位置
，而不需要強(qiáng)制依次排列擺放
。
用戶可以在主屏幕的任意空白位置擺放 app 和小組件，可以把它們放在程序塢上方，以便快捷使用，也可以讓它們圍繞墻紙主體排布。
蘋果將允許用戶定制應(yīng)用程序圖標(biāo)， 可以
讓用戶更改應(yīng)用程序圖標(biāo)的顏色
。App 圖標(biāo)和小組件可通過深色或色彩效果變換外觀，用戶還可將它們的尺寸調(diào)大，創(chuàng)建最適合自己的體驗(yàn)。比如說可以將社交軟件圖標(biāo)設(shè)置為藍(lán)色、購(gòu)物軟件圖標(biāo)設(shè)置為橙色、銀行金融類的圖標(biāo)設(shè)置為綠色等等，這樣我們可以更加直觀的對(duì)應(yīng)用進(jìn)行分類以及查找。
用戶可自由調(diào)節(jié)布局以及圖標(biāo)的顏色
最初的Siri圖標(biāo)簡(jiǎn)單而又獨(dú)特。黑色背景上，「i」字母上方的綠色圖形像一個(gè)
對(duì)話氣泡
，簡(jiǎn)潔明了地表達(dá)了Siri作為語音助手的功能。蘋果正式收購(gòu)Siri并將其集成到iOS系統(tǒng)之后。圖標(biāo)采用了一個(gè)
麥克風(fēng)
的形象，背景則是金屬質(zhì)感非常強(qiáng)烈的圓圈，中央的麥克風(fēng)帶有漸變的紫色。這一設(shè)計(jì)與當(dāng)時(shí)的iOS擬物化設(shè)計(jì)風(fēng)格完全一致。第三和第四版圖標(biāo)繼續(xù)沿用麥克風(fēng)形象，但設(shè)計(jì)變得更加簡(jiǎn)潔，更符合開始流行起來的
扁平化
設(shè)計(jì)趨勢(shì)。從2016年開始，Siri圖標(biāo)的麥克風(fēng)移除并被
彩色的音頻波
取代，進(jìn)一步強(qiáng)調(diào)Siri的聲音識(shí)別和處理能力。2017年之后，Siri圖標(biāo)開始以
球體形狀
呈現(xiàn)，內(nèi)部是多層漸變色組成的動(dòng)態(tài)光芒，給人一種未來感和科技感。
如果你有注意到市面上五花八門的AI產(chǎn)品，你會(huì)發(fā)現(xiàn)，這些 AI 產(chǎn)品的品牌標(biāo)志設(shè)計(jì)也遵循了這一目標(biāo)，大多數(shù)都具有相同的特征：
不構(gòu)成威脅、抽象、簡(jiǎn)單和非擬人化
。從這一「創(chuàng)新」改變來看，重新設(shè)計(jì)的Siri標(biāo)志更加符合這一個(gè)性化要求。
Siri的歷史演變、新版Siri圖標(biāo)、Siri其他AI產(chǎn)品的圖標(biāo)對(duì)比
iii.實(shí)時(shí)生成表情符號(hào)
Genmoji是蘋果公司在iOS 18系統(tǒng)中引入的一項(xiàng)全新功能，它利用
生成式AI技術(shù)
，
讓用戶通過簡(jiǎn)單的文本描述就能自動(dòng)生成獨(dú)特的表情符號(hào)
。比如在發(fā)送短信的時(shí)候，可以根據(jù)當(dāng)時(shí)聊天的情形實(shí)時(shí)創(chuàng)建新的表情符號(hào)。這些表情符號(hào)不僅能夠反映你的心情和個(gè)性，還能適應(yīng)不同的對(duì)話和場(chǎng)合。
隨著技術(shù)的不斷進(jìn)步和用戶需求的變化，iOS系統(tǒng)的圖標(biāo)設(shè)計(jì)也將不斷創(chuàng)新和發(fā)展。未來可能會(huì)有更多
個(gè)性化和動(dòng)態(tài)化
的圖標(biāo)設(shè)計(jì)出現(xiàn)以滿足不同用戶的需求和偏好。同時(shí)隨著人工智能和機(jī)器學(xué)習(xí)技術(shù)的發(fā)展圖標(biāo)設(shè)計(jì)可能會(huì)
更加智能化和自動(dòng)化
從而提高設(shè)計(jì)效率和質(zhì)量。無論如何變化iOS圖標(biāo)設(shè)計(jì)都將繼續(xù)秉持簡(jiǎn)潔、一致、高辨識(shí)度和視覺吸引力的原則為用戶提供更好的使用體驗(yàn)。
通過前面的文章學(xué)習(xí)，相信大家已經(jīng)對(duì)圖標(biāo)設(shè)計(jì)了如指掌了，那么作為一名合格的設(shè)計(jì)師，我們?nèi)绾卫煤玫脑O(shè)計(jì)資源進(jìn)行提效呢？以下是一些優(yōu)秀的圖標(biāo)設(shè)計(jì)網(wǎng)站推薦：
擁有龐大的圖標(biāo)庫(kù)，包含超過89萬個(gè)圖標(biāo)和17936個(gè)圖標(biāo)集。支持多種格式下載，包括PNG、SVG、CSH等。部分圖標(biāo)收費(fèi)，但免費(fèi)圖標(biāo)數(shù)量也相當(dāng)可觀。
字節(jié)跳動(dòng)旗下的一款圖標(biāo)下載網(wǎng)站，相比Iconfont，圖標(biāo)種類不算太多，但圖標(biāo)的規(guī)范非常統(tǒng)一，也可在右側(cè)的操作欄更改圖標(biāo)屬性，另外還有免費(fèi)的插畫庫(kù)可供使用。
iconfont是阿里巴巴的圖標(biāo)庫(kù),應(yīng)該也是受眾最多的一個(gè)圖標(biāo)下載網(wǎng)站，給我們平時(shí)工作提效不少，造福了不少的設(shè)計(jì)師。
Ikonate是一款可以在線編輯的圖標(biāo)網(wǎng)站，涵蓋了常用的一些圖標(biāo)，可以調(diào)節(jié)線條的粗細(xì)和大小，導(dǎo)出的格式是SVG。
Iconduck的優(yōu)點(diǎn)是有273,858個(gè)免費(fèi)的圖標(biāo)庫(kù)和插畫庫(kù)供大家選擇，儲(chǔ)備夠豐富。
Icon8是一個(gè)專注于提供高質(zhì)量圖標(biāo)和設(shè)計(jì)資源的平臺(tái)。這里的圖標(biāo)涵蓋了扁平化、線條、顏色等多種風(fēng)格，都是由專業(yè)設(shè)計(jì)師和插畫師手繪制作，確保了其獨(dú)特性和高品質(zhì)。除了豐富的圖標(biāo)資源，Icon8還提供了字體、照片、音效、視頻、插圖等多元設(shè)計(jì)資源，滿足各種項(xiàng)目的需求。
推薦的六個(gè)圖標(biāo)網(wǎng)站
此外，在選擇這些圖標(biāo)設(shè)計(jì)網(wǎng)站時(shí)，還需要注意以下幾點(diǎn)：
確保所選網(wǎng)站的圖標(biāo)資源符合您的使用需求，特別是商業(yè)用途時(shí)要注意版權(quán)限制。
根據(jù)項(xiàng)目需求選擇合適的圖標(biāo)格式，如PNG、SVG等。
選擇那些定期更新圖標(biāo)資源的網(wǎng)站，以獲取最新的設(shè)計(jì)趨勢(shì)和素材。
圖標(biāo)設(shè)計(jì)是UI設(shè)計(jì)中不可或缺的一部分，它要求設(shè)計(jì)師具備良好的審美觀、對(duì)用戶的深刻理解以及不斷的創(chuàng)新能力。通過遵循設(shè)計(jì)原則、掌握設(shè)計(jì)技巧、應(yīng)對(duì)挑戰(zhàn)并關(guān)注未來趨勢(shì)，設(shè)計(jì)師可以創(chuàng)造出既直觀又吸引人的圖標(biāo)，為用戶提供更優(yōu)質(zhì)的體驗(yàn)。在未來，UI設(shè)計(jì)將繼續(xù)發(fā)揮其重要作用，成為連接用戶與數(shù)字世界的橋梁。設(shè)計(jì)師們需要注意以下三個(gè)未來圖標(biāo)設(shè)計(jì)的發(fā)展方向：
隨著AR/VR等新技術(shù)的應(yīng)用，未來的圖標(biāo)設(shè)計(jì)可能會(huì)變得更加互動(dòng)和個(gè)性化。新技術(shù)的應(yīng)用將為圖標(biāo)設(shè)計(jì)帶來更多的可能性和挑戰(zhàn)。
未來的圖標(biāo)設(shè)計(jì)可能會(huì)更加注重個(gè)性化和互動(dòng)性。未來的設(shè)計(jì)師需要更多地考慮到用戶的個(gè)性化需求和使用場(chǎng)景。
AI輔助設(shè)計(jì)工具可以幫助設(shè)計(jì)師更快地生成和優(yōu)化圖標(biāo)方案。人工智能的發(fā)展將為設(shè)計(jì)師提供更多的工具和支持，幫助他們更高效地完成工作。
設(shè)計(jì)師們只有不斷學(xué)習(xí)和進(jìn)步，才能在激烈的競(jìng)爭(zhēng)中保持領(lǐng)先。持續(xù)學(xué)習(xí)不僅是個(gè)人成長(zhǎng)的需要，也是行業(yè)發(fā)展的需求。
