代佳佳

摘要：為了解決UI設(shè)計師在繪制ICO格式圖標(biāo)時候，對格式和尺寸的錯誤理解，導(dǎo)致無法輸出適配性良好的Windows圖標(biāo)，提出了一種利用軟件轉(zhuǎn)換PNG格式圖標(biāo)為ICO格式圖標(biāo)的方法。根據(jù)ICO圖標(biāo)的屬性，以及當(dāng)前Windows系統(tǒng)的色彩深度和分辨率的迭代更新，對ICO圖標(biāo)制作的格式和尺寸進行了理論分析。在理論分析基礎(chǔ)上，結(jié)合當(dāng)下圖形設(shè)計軟件，成功輸出適配性良好的Windows圖標(biāo)，為UI設(shè)計師制作ICO格式圖標(biāo)提供了可行性的方案。

關(guān)鍵詞：ICO圖標(biāo);Windows系統(tǒng);UI設(shè)計;色彩深度;分辨率

中圖分類號：TP37? ? ? 文獻標(biāo)識碼：A

文章編號：1009-3044（2022）15-0052-03

隨著互聯(lián)網(wǎng)技術(shù)的飛速發(fā)展，國內(nèi)軟件領(lǐng)域興起一種新興行業(yè)：UI設(shè)計。UI設(shè)計即User Interface Design（用戶界面設(shè)計）。UI設(shè)計是對人機交互系統(tǒng)、操作系統(tǒng)和界面系統(tǒng)進行整體設(shè)計[1]。UI設(shè)計通常包含三個部分，第一是原型設(shè)計，即產(chǎn)品功能邏輯、需求分析、高/低保真頁面設(shè)計;第二是視覺設(shè)計，即根據(jù)原型設(shè)計稿完成色彩、圖標(biāo)、排版設(shè)計;第三是交互設(shè)計，即頁面邏輯、人機交互方式、交互動效等設(shè)計。

而UI設(shè)計也絕非一個獨立的環(huán)節(jié)，整個軟件的開發(fā)，至少由產(chǎn)品、UI設(shè)計、前端、后端、測試、運維等構(gòu)成，每種角色環(huán)環(huán)相扣，相互配合。與UI設(shè)計師工作銜接最多之一的前端工程師，有時會讓UI設(shè)計師提供一種格式為.ico的圖標(biāo)文件。大多UI設(shè)計在此之前從未接觸過這種文件格式。什么是ICO圖標(biāo)？要多大尺寸？怎么做？網(wǎng)上關(guān)于這方面的資料太少，也難以保證最終的可行性。

基于此，文章將詳細(xì)介紹一種ICO圖標(biāo)制作的可行性方法，避免設(shè)計師走彎路，幫助他們更順利地制作出適配性良好的ICO格式圖標(biāo)。

1? 什么是ICO圖標(biāo)

圖標(biāo)是具有指代意義的標(biāo)識性圖形，具有高度濃縮、快捷傳達信息以及便于記憶的特性[2]。UI圖標(biāo)設(shè)計廣義上的含義是指一切帶有指示性或命令的標(biāo)志和符號，狹義上的含義是指數(shù)字化顯示屏上顯示出來的圖形，也可以簡單地理解為用來指引用戶進行操作的圖形符號[3]。圖標(biāo)的主要作用是使程序更加具象、更容易被理解，而好的視覺表現(xiàn)力則更容易激發(fā)用戶的使用欲望，也可以讓用戶更好地理解產(chǎn)品和其應(yīng)用程序[4]。

ICO圖標(biāo)的全稱是icon file，是基于Windows開發(fā)的一種圖標(biāo)文件格式，后綴名為.ico。例如常見的桌面應(yīng)用程序QQ、微信、瀏覽器圖標(biāo)等就是.ico格式圖標(biāo)文件。ICO圖標(biāo)可以存儲單個圖案、多個尺寸、多個色板，即一個ICO圖標(biāo)可同時存儲多張不同尺寸的圖片，并且可以包含透明區(qū)域。

2? 為什么要制作ICO圖標(biāo)

2.1 初識ICO圖標(biāo)

絕大多數(shù)UI設(shè)計師第一次接觸ICO圖標(biāo)，都是在開發(fā)Windows系統(tǒng)軟件的時候，前端工程師要求設(shè)計師提供的。在以往的工作經(jīng)歷乃至專業(yè)知識培訓(xùn)中，UI設(shè)計師繪制和交付圖標(biāo)的格式都是.png，甚至于當(dāng)前最新版本的專業(yè)繪圖軟件Illustrator和Photoshop都不支持導(dǎo)出.ico格式。于是大部分設(shè)計師尋求網(wǎng)絡(luò)幫助，會發(fā)現(xiàn)網(wǎng)上信息參差不齊，提供了各式各樣轉(zhuǎn)換格式的工具。有的工具確實可以轉(zhuǎn)換，可是前端替換后發(fā)現(xiàn)在桌面顯示正常，在任務(wù)欄、狀態(tài)欄等其他地方，要么有像素鋸齒，要么有白邊，要么透明區(qū)域沒法正常顯示……即使設(shè)計師以非常大尺寸的PNG圖片來轉(zhuǎn)換ICO，圖標(biāo)應(yīng)用在任務(wù)欄處也會嚴(yán)重失真。那么是否是因為計算機在使用圖標(biāo)文件時候不是只有一張圖片，而很可能是很多張不同尺寸的圖片來自適應(yīng)計算機不同的顯示環(huán)境。

大多UI設(shè)計在初次接觸ICO圖標(biāo)制作的時候，被卡的最多就在這里：不懂ICO圖標(biāo)并非一個尺寸的單張圖片，以為計算機可以非常智能地根據(jù)當(dāng)前的顯示環(huán)境來縮放提供的大圖。因此怎么也想不明白，即使已經(jīng)給了高清大圖，可為什么顯示出來的會有鋸齒，有白邊，甚至更多問題。

2.2 ICO圖標(biāo)的優(yōu)勢

隨著計算機技術(shù)的發(fā)展，Windows系統(tǒng)的色彩深度和分辨率不斷迭代更新，計算機操作系統(tǒng)和顯示屏也越來越高級化和多樣化，這就意味著一個尺寸的圖標(biāo)已無法滿足不同操作系統(tǒng)、不同顯示設(shè)備，甚至是不同顯示環(huán)境下的展示需求。

以Windows11為例，一個應(yīng)用圖標(biāo)可能出現(xiàn)在桌面、任務(wù)欄、狀態(tài)欄，還可能以超大圖標(biāo)、大圖標(biāo)、中圖標(biāo)、小圖標(biāo)、平鋪、內(nèi)容等方式顯示，每一種情況下其顯示尺寸均不一樣?；贗CO圖標(biāo)可以存儲單個圖案、多個尺寸、多個色板的特性，ICO圖標(biāo)可根據(jù)當(dāng)前的操作系統(tǒng)和顯示環(huán)境，以一定的標(biāo)準(zhǔn)選擇最合適的一張圖像來顯示。此外，ICO圖標(biāo)支持透明通道，所需內(nèi)存小。由此相較于PNG格式，ICO圖標(biāo)的優(yōu)勢便顯而易見。

3? ICO圖標(biāo)的設(shè)計尺寸分析

3.1 Windows圖標(biāo)的常用尺寸及常見應(yīng)用環(huán)境

上面說過一個應(yīng)用程序圖標(biāo)在不同的操作系統(tǒng)、不同的顯示環(huán)境下顯示尺寸都不一樣，那么一個可用的ICO圖標(biāo)應(yīng)該包含哪些尺寸呢？

常見尺寸及常見應(yīng)用環(huán)境：

16×16px（狀態(tài)欄、小圖標(biāo)、列表、詳細(xì)信息等）;

24×24px（任務(wù)欄等）;

32×32px（Windows XP桌面圖標(biāo)）;

48×48px（Windows7/8/10/11桌面圖標(biāo)、中圖標(biāo)、平鋪等）;

64×64px（圖標(biāo)放大后使用）;

96×96px（大圖標(biāo)展示）;

128×128px（應(yīng)用程序圖標(biāo)）;

256×256px（超大圖標(biāo)展示）。

大于256×256px的圖片可以使用PNG格式進行壓縮（需要Windows Vista或更高版本），Windows10和Windows11支持更大尺寸512×512px和768×768px。7ABD40FB-A7EB-4270-A803-81E2C2F84682

3.2 ICO圖標(biāo)的設(shè)計尺寸分析

在進入理論分析之前，先來了解兩個概念：色彩深度和分辨率。

1）色彩深度。也叫位分辨率，是計算機圖形學(xué)領(lǐng)域中用來表示在位圖或視頻幀緩沖區(qū)中存儲單個像素點的顏色所用的位數(shù)[5]，即一個像素中，每個顏色分量（Red、Green、Blue、Alpha通道）的比特數(shù)。所謂“位”指的是二進制位或是比特。一個像素點在用二進制數(shù)表示的時候，除了紅、綠、藍三個位，還會有一位或幾位屬性位。例如當(dāng)一個像素是8位時，若R、G、B三個分量各占2位，剩下的2位就是α（Alpha）通道位，那么這個像素一共有22×22×22×22=256種顏色;即一個像素點可以顯示的顏色是2n種，n是這個像素點的位數(shù)，也就是色彩深度。

色彩深度越高，可顯示的顏色也就越多。常見的有1位，21=2種顏色（黑白）;4位，24=16種顏色;8位，28=256種顏色;24位，224=16，777，216種顏色（真彩色）等。

2）分辨率。又稱解析度、解像度，可以細(xì)分為顯示分辨率、圖像分辨率、打印分辨率和掃描分辨率等，分辨率決定了位圖圖像細(xì)節(jié)的精細(xì)程度[6]。單位為每英寸像素（ppi-電子設(shè)備常用），或每英寸點（dpi-打印常用）。包含的數(shù)據(jù)越多，圖形文件越大，越能表現(xiàn)豐富的細(xì)節(jié)。但更大的文件需要耗用更多的計算機資源，更多的內(nèi)存，更大的硬盤空間等[7]。

屏幕分辨率代表屏幕圖像的細(xì)膩程度，指某個大小一定的屏幕所包含的像素點的數(shù)量。屏幕上所有畫面都是由像素點組成的，顯示器包含的像素越多，畫面就越細(xì)膩，也就是說兩塊同樣大小的屏幕，畫面的細(xì)膩程度取決于該屏幕所包含的像素點數(shù)量，即分辨率，而不是屏幕越大畫面越高清。

3）設(shè)計尺寸分析。圖標(biāo)在Windows系統(tǒng)上的應(yīng)用，除了分辨率不同，色彩深度也不同。這是因為微軟在不斷更新操作系統(tǒng)的過程中，也不斷升級了更先進的色彩深度。比如Windows 1.x （1985） 和 Windows 2.x （1987）時候，是單色顏色模式（黑白）的圖標(biāo);Windows 3.0 （1990）時，可以顯示16色;從Windows XP開始，已經(jīng)支持RGB/A-32色了;為了可以兼容不同的顯示環(huán)境和操作系統(tǒng)，就意味著ICO圖標(biāo)包含的圖片，是不同分辨率和色彩深度的組合。

文章介紹的ICO圖標(biāo)轉(zhuǎn)換工具Axialis IconWorkshop，能夠提供多種分辨率和色彩深度的格式供選擇。但是，ICO圖標(biāo)并不是包含的格式越全越好，因為格式越全，包含的圖片數(shù)就越多，則導(dǎo)致ICO圖標(biāo)所占內(nèi)存過大。從開發(fā)原則上講，在保證應(yīng)用程序可用的前提下，包文件肯定是越小越輕量越好。

圖1是Windows11操作系統(tǒng)下QQ應(yīng)用圖標(biāo)在Axialis IconWorkshop中打開的尺寸，文件大小是31.7k，可見像騰訊這樣的大廠，也不會使用全套尺寸的ICO。

當(dāng)然如果不嫌包大，那么全面的尺寸肯定能夠提供不同操作系統(tǒng)、不同顯示環(huán)境下最完美的圖像顯示。這就跟做UI設(shè)計時候選擇的設(shè)計尺寸，會以主流機型為標(biāo)準(zhǔn)是一樣的;ICO圖標(biāo)包含的格式，也盡可能遵循這一標(biāo)準(zhǔn)即可。

例如當(dāng)前研發(fā)的產(chǎn)品應(yīng)用于Windows XP系統(tǒng)，那么最大尺寸就不需要選擇256×256 - RGB/A，因為雖然Windows XP支持RGB/A-32色，但卻不支持256×256px尺寸，即使選擇了這一尺寸也只是浪費內(nèi)存。

而當(dāng)下Windows已出11版本，將支持768×768 - RGB/A格式，那么在選擇制作尺寸時候，可以勾選可支持的最大尺寸768×768 - RGB/A，但事實上如同騰訊、360、Adobe等產(chǎn)品，并沒有在已出Windows 11操作系統(tǒng)將最大尺寸改為768×768px，這可能是因為當(dāng)前操作系統(tǒng)下最大的圖標(biāo)尺寸也只到256×256px，因此即使新的操作系統(tǒng)支持這個尺寸，也沒有必要選擇更大尺寸占用更多空間。

此外，同時創(chuàng)建基本尺寸128×128 - RGB/A，96×96 - RGB/A，64×64 - RGB/A，48×48 - RGB/A，32×32 - RGB/A，24×24 - RGB/A，16×16 - RGB/A，32×32 - 256色，16×16 - 256色，32×32 - 16色，16×16 - 16色即可;太低的操作系統(tǒng)市場占有率逐年降低，因此沒必要選擇太多顏色深度低的格式。

以下是選擇不同“最大尺寸”格式，同一圖標(biāo)在Windows11不同環(huán)境下的展示效果及文件大小測試，案例1最大尺寸為128×128px，在“超大圖標(biāo)（256×256px）”模式下無法正常顯示，而案例2和案例3均能在Windows11各種環(huán)境下正常顯示，且案例2相比于案例3文件更小更輕量。由此可見，256×256px尺寸設(shè)計已能滿足當(dāng)下操作系統(tǒng)的需求。

以上提供的格式方案，基本可以全面覆蓋主流操作系統(tǒng)的各種環(huán)境所需，若想獲得更小更輕量的ICO文件，需要跟前后端工程師以及產(chǎn)品經(jīng)理詳細(xì)溝通圖標(biāo)的應(yīng)用環(huán)境，比如僅僅用于放在任務(wù)欄或狀態(tài)欄，那么可能只需要24px或者16px的尺寸足矣。

當(dāng)軟件需要升級更新的時候，如果當(dāng)下操作系統(tǒng)也隨之升級，比如Windows出現(xiàn)更大尺寸圖標(biāo)（如512×512px和768×768px）的應(yīng)用，就需要重新更改ICO的最高尺寸設(shè)定值了。其實隨著操作系統(tǒng)的不斷迭代更新，硬盤容量的持續(xù)擴大，需要向下兼容的操作系統(tǒng)越來越多，也決定了如今的軟件包內(nèi)存越來越大，包括里邊的ICO文件。

4? ICO圖標(biāo)具體制作方法

4.1 工具介紹

一個完整的ICO格式圖標(biāo)，一般會用到Adobe Illustrator，Adobe Photoshop、Axialis IconWorkshop這幾個軟件。7ABD40FB-A7EB-4270-A803-81E2C2F84682

Adobe Illustrator（AI），是畫矢量圖用的。一般像logo、圖標(biāo)、圖表、儀表盤等都會通過這個軟件繪制，特點是可無限放大，不會有像素點。

Adobe Photoshop（PS），是用來處理位圖圖像的。一般像手繪、插畫、照片、調(diào)色等都會用PS處理，特點是非常強大，可以“無中生有、以假亂真”。

Axialis IconWorkshop、是ICO圖標(biāo)的輸出工具。Axialis IconWorkshop可以制作基于Windows、Macintosh、Unix等操作系統(tǒng)的圖標(biāo)，并提供了全面的制作格式供選擇。

4.2 具體步驟

雖然ICO圖標(biāo)是位圖，甚至可以直接使用Axialis IconWorkshop繪制，但還是建議設(shè)計師使用Illustrator進行原始圖標(biāo)繪制。因為圖標(biāo)不同于插畫，是標(biāo)志，需要有嚴(yán)格的尺寸標(biāo)準(zhǔn)和便于記憶的產(chǎn)品特征，是一個像素點誤差都不能有的。就像華為、小米、百度的logo一樣，代表著一個產(chǎn)品、甚至一個企業(yè)的形象。AI繪制圖標(biāo)，后期可擴展性更強，也很難像位圖一樣有信息丟失。

原始尺寸，建議繪制1080×1080px尺寸即可。

ICO圖標(biāo)制作步驟：

1）保存好上面步驟導(dǎo)出的大圖PNG，打開Axialis IconWorkshop，點擊左上角：文件-新建-來自一個圖像的圖標(biāo)項目;然后選擇彈出窗口第一項：用于Microsoft Windows的新圖標(biāo)項目。

2）尺寸選擇，按照上文3.2章節(jié)思路來勾選即可，圖3是Axialis IconWorkshop格式選擇界面截圖。

其他選項解釋：①調(diào)整大小時應(yīng)用濾鏡：可調(diào)整滑塊位置，平滑則縮小圖標(biāo)時會變模糊，但邊緣將盡量保持光滑;銳利則縮小圖標(biāo)時會盡可能保證清晰，但邊緣會變鋒利;②對256色、16色和單色格式進行抖動：是指在這幾種顏色模式下當(dāng)缺少顏色信息時，會混合擴散旁邊顏色以達到更好的效果;③PNG壓縮圖像：在上文介紹過，大于256×256px的圖片應(yīng)用于Windows Vista及以上操作系統(tǒng)中時可以被PNG壓縮。

3）選擇好格式之后點擊“確定”，進入編輯界面，在中間窗口中，左邊是新建時添加的所有格式圖片，中間窗口是編輯/預(yù)覽區(qū)，若沒有問題，點擊左上角保存，選擇相應(yīng)保存路徑，選擇后綴名為.ico格式即可。這樣多尺寸的ICO圖標(biāo)就做好了。

5 結(jié)束語

文章通過對ICO圖標(biāo)在Windows操作系統(tǒng)中的應(yīng)用環(huán)境和尺寸分析，以及ICO圖標(biāo)的詳細(xì)制作過程描述，比較全面和系統(tǒng)性地概括了ICO圖標(biāo)的設(shè)計原理和方法。而制作ICO圖標(biāo)的方法也不止文中提到的一種，希望文章能讓讀者同時意識到，原理重于方法，只有真正明白是什么，為什么，才能知道該怎么做。因為互聯(lián)網(wǎng)本身就是一個與時俱進的行業(yè)，新的技術(shù)會不斷產(chǎn)生，新的工具也會迭代。只有掌握底層原理，才算打好穩(wěn)固的基石，那么未來所有的技術(shù)更新都是萬變不離其宗。

在此，希望所有從事UI設(shè)計的工作者，永遠可以保持發(fā)現(xiàn)問題，追尋根源的好奇心;能夠懂得學(xué)無止境，并溫故知新，樂此不疲。

參考文獻：

[1] 宣吉.淺析UI設(shè)計中可用性的價值和意義[J].數(shù)字通信世界，2021（12）：252-254.

[2] 莊宜君，汪春燕.傳統(tǒng)圖案元素在UI圖標(biāo)設(shè)計中的運用[J].流行色，2021（2）：62-63.

[3] 李倩.基于用戶體驗的UI界面中圖標(biāo)設(shè)計研究[D].沈陽：沈陽師范大學(xué)，2018.

[4] 高敏欽.移動UI設(shè)計中微質(zhì)感圖標(biāo)的繪制技巧與運用[J].信息與電腦（理論版），2021，33（20）：254-256.

[5] 唐敏，滕奇志，熊淑華.基于圖像平均的色深擴展研究及應(yīng)用[J].電子測量技術(shù)，2021，44（12）：81-86.

[6] 王新穎，李少勇.InDesign+Photoshop印前技術(shù)與圖文設(shè)計標(biāo)準(zhǔn)教程 [M].北京：中國鐵道出版社，2012.

[7] 孫啟善，裴祥喜，秦浩.AutoCAD+3ds Max+VRay+Photoshop室內(nèi)外效果圖設(shè)計手冊[M].北京：北京希望電子出版社，2014.

【通聯(lián)編輯：謝媛媛】7ABD40FB-A7EB-4270-A803-81E2C2F84682