圖標(biāo)字體已經(jīng)存在很多年了，在各種項(xiàng)目中的應(yīng)用也比較普遍。 圖標(biāo)字體矢量圖形的特點(diǎn)和應(yīng)用已經(jīng)成為UI設(shè)計(jì)師應(yīng)該了解的重要方法。

?

1、制作圖標(biāo)字體的目的：

圖標(biāo)字體資源較小，也可以瘦身打包給App，方便管理。 可以解決不同顯示設(shè)備右圖標(biāo)的圖形清晰度問題，而且無需針對(duì)不同設(shè)備適配不同規(guī)格的圖像資源，節(jié)省了相當(dāng)大的工作量。 同時(shí)，后端也能受益于矢量技術(shù)的效率提升。

?

目前設(shè)計(jì)輸出圖標(biāo)資源主要涉及這種格式：

PDF/SVG：矢量格式包括 PDF 和 SVG。 使用 PDF 時(shí)也可以使用矢量。 無限放大和縮小不會(huì)影響圖像的清晰度，但PDF是根據(jù)不同設(shè)備的幀率手動(dòng)生成的。 利用資源來達(dá)到矢量的目的，所以PDF實(shí)際上會(huì)減少我們應(yīng)用程序的體積和資源消耗。 SVG對(duì)應(yīng)的是我們明天要介紹的圖標(biāo)字體。

PNG/JPG：大家都熟悉PNG和JPG格式，即傳統(tǒng)意義上的剪切。 每次切割后，都需要再次壓縮切割的大小，甚至更改切割的名稱，例如將命名規(guī)則與開發(fā)同步，無論是設(shè)計(jì)人員還是開發(fā)人員，都比較麻煩。 比如全屏等高清畫面的碼率就很高。 前幾年，一些舊資源使用@2x剪切圖像，在高幀率屏幕上會(huì)顯得模糊。 我們需要更換模糊的切片，費(fèi)時(shí)又費(fèi)力。

GIF/APNG/WebP：GIF也是大家都熟悉的動(dòng)畫格式。 GIF的缺點(diǎn)之一是顯示質(zhì)量不高，并且僅支持8位顏色。 APNG是一種越來越流行的動(dòng)畫格式，后面會(huì)簡(jiǎn)單介紹。 WebP也是一種越來越流行的新圖像格式，但iOS上的瀏覽器對(duì)它的支持不是很好。

2.圖標(biāo)字體的三大優(yōu)點(diǎn)：

2.1 輕量化

圖標(biāo)字體的數(shù)據(jù)大小比一系列圖像資源小得多。 圖標(biāo)字體加載后，圖標(biāo)將立即渲染，無需加載圖像資源。 可以降低計(jì)算需求，還可以配合HTML5離線存儲(chǔ)進(jìn)行性能優(yōu)化。 簡(jiǎn)單來說，它甚至對(duì)性能優(yōu)化也有一點(diǎn)幫助。

?

上圖是美圖秀秀工具模塊的圖標(biāo)資源大小對(duì)比。 可以看到，剪切塊大小為413kb，圖標(biāo)字體只需要41kb，相當(dāng)于體積縮小了10倍左右。

?

2.2 靈活性

圖標(biāo)字體更加靈活，易于控制，可全局管理。 它可以自定義大小、顏色、陰影和任何可用的 CSS 樣式，并且可以在任何背景中顯示。 但使用位圖必須為每張圖像輸出不同大小、不同治療效果的不同圖像資源。

?

2.3 兼容性

圖標(biāo)字體支持所有現(xiàn)代瀏覽器，包括較低版本的 IE。 中國(guó)聯(lián)通這邊，iOS和也都可以建立支持。

2.4 圖標(biāo)字體的缺點(diǎn)

圖標(biāo)字體只能以單色呈現(xiàn)。

3、生產(chǎn)工藝：

生產(chǎn)前基礎(chǔ)知識(shí)普及

1、制作圖標(biāo)前注意統(tǒng)一圖標(biāo)的畫布模板規(guī)格，使用網(wǎng)格勾勒?qǐng)D標(biāo)；

2、制作工具方面，雖然SVG和SVG都可以制作，但在圖標(biāo)輪廓方面不如Adobe方便快捷，而且輪廓圖形制作成svg時(shí)可能會(huì)出現(xiàn)錯(cuò)誤。 圖標(biāo)輪廓的工作此時(shí)也可以完成，但是導(dǎo)入的SVG會(huì)有顏色通道信息，并且最終的圖標(biāo)字體不支持改變顏色。 這需要你的注意；

3、將Adobe中繪制的圖形保存為SVG格式，必須是擴(kuò)展圖形；

4、防止繪制圖形過程中出現(xiàn)斷點(diǎn)現(xiàn)象；

5、不要使用色調(diào)疊加的方法來設(shè)計(jì)圖標(biāo)形狀，不要使用漸變色。

?

繪制完一套完整的圖標(biāo)后，就可以開始編寫規(guī)范文檔，將一些繪制規(guī)則用簡(jiǎn)潔通用的方式記錄下來，以便團(tuán)隊(duì)中的其他伙伴可以參考。

?

源文件中視口區(qū)分中英文名稱、Grid、切片大小區(qū)域，畫布區(qū)域按功能模塊區(qū)分，圖標(biāo)的相關(guān)信息組織在一個(gè)源文件中。

制作SVG需要展開圖標(biāo)，所有圖標(biāo)都需要展開，路徑需要閉合。 使用Adobe的資源導(dǎo)入面板導(dǎo)入我們一次性制作的圖標(biāo)。 如果需要切成片，也可以輕松導(dǎo)入圖片資源，同時(shí)也可以方便填寫片的名稱。 命名此步驟要方便得多。

總體來說，Adobe是目前制作圖標(biāo)字體最方便的工具，無論是繪制圖標(biāo)還是管理文件。

?

輸出SVG后，就可以使用網(wǎng)站生成圖標(biāo)字體了，比如大家熟悉的阿里巴巴圖標(biāo)庫，還有一個(gè)比較出名的.io，這里我們選擇制作。

?

將所有圖標(biāo)添加到網(wǎng)站中，您可以選擇哪些需要生成字體，哪些不需要。 一些圖標(biāo)可以根據(jù)我們的需要添加或刪除。

?

接下來就是為圖標(biāo)輸入通配符，每個(gè)圖標(biāo)都對(duì)應(yīng)對(duì)應(yīng)的通配符，開發(fā)根據(jù)這個(gè)值來調(diào)用圖標(biāo)。

這里可以對(duì)比一下阿里巴巴圖標(biāo)庫的制作流程。 這一步會(huì)比較麻煩。 您需要點(diǎn)擊每個(gè)圖標(biāo)來更改通配符，這不直觀并且需要更多時(shí)間。 為此，我們不選擇阿里巴巴圖標(biāo)庫來制作圖標(biāo)字體。

?

對(duì)比：阿里巴巴圖標(biāo)庫-輸入通配符步驟

?

通配符設(shè)置規(guī)則：大模塊-特定功能-圖標(biāo)語義-狀態(tài)，這樣正好形成四個(gè)字母數(shù)字組合，形成按鍵名稱。

通配符是16位補(bǔ)碼，字母a到fsketch安卓圖標(biāo)模版，數(shù)字0到9，超出此范圍不支持。

?

導(dǎo)入后會(huì)生成資源包。 字體文件夾包含我們的字體文件。 我們可以在筆記本上安裝這個(gè)字體包。

包中還有一個(gè)demo.html文件需要注意。 如果你用系統(tǒng)檢查這個(gè)文件，你會(huì)發(fā)現(xiàn)旁邊有兩個(gè)小圖形sketch安卓圖標(biāo)模版，這說明 5.0以下的圖標(biāo)顯示有問題，我們需要更改通配符。

?

?

?

可以在上面安裝圖標(biāo)字體插件，這樣我們就可以在. 您可以自由改變大小、顏色，甚至將其變成形狀蒙版來使用。

4.動(dòng)畫中圖標(biāo)的輸出工具：

?

目前輸出這種路徑動(dòng)畫主要有兩種方式，一種是設(shè)計(jì)團(tuán)隊(duì)（），另一種是聚集時(shí)代的SVGA（）。 從官網(wǎng)可以看出，SVGA的主要特點(diǎn)是動(dòng)畫矢量圖片的實(shí)現(xiàn)。 動(dòng)畫支持在路徑上比較好，但是涉及到需要圖片資源的時(shí)候會(huì)比較麻煩，因?yàn)樾枰狝fter插件導(dǎo)入的透明通道的PNG圖片資源會(huì)有黑邊，而那些有問題的剪切需要自動(dòng)替換，保證動(dòng)畫效果。 SVGA的出現(xiàn)，按照官方的說法，就是為了解決這個(gè)問題。 官方?jīng)]有解決這個(gè)問題，但是西西漢化版插件解決了這個(gè)問題，具體可以查看。 使用After時(shí)，建議使用中文版本。 英文版導(dǎo)入的文件可能會(huì)出現(xiàn)亂碼。

?

輸出資源中包含的文件

?

這是一個(gè)簡(jiǎn)單的動(dòng)畫資源。 可以看到使用SVGA會(huì)比資源小很多，而且只有一個(gè)文件，但是json+.

但SVGA在其他方面如何支持特定屬性還有待驗(yàn)證，目前是比較成熟的實(shí)現(xiàn)工具。 這兩種格式可以同時(shí)存在于App中，但不建議這樣做。

最后推薦APNG格式。 在推薦新功能時(shí)，圖標(biāo)可能需要?jiǎng)赢嫽晕脩酎c(diǎn)擊，或者有有趣的表情符號(hào)。 這時(shí)候APNG格式就是一個(gè)很好的解決方案。

?

APNG格式可以理解為由PNG序列幀組成的動(dòng)畫，但并未得到PNG的官方認(rèn)可。

iOS10之后，消息中的表情動(dòng)畫采用APNG格式，也支持APNG。

如果你在筆記本瀏覽器上遇到不支持APNG的東西，它也可能會(huì)顯示第一幀，這是一個(gè)靜態(tài)PNG。 與GIF格式相比，GIF的顯示效果不佳。 APNG在體積較小的情況下可以保證更好的療效。 APNG的制作需要使用工具。 （gif 和 apng 效果對(duì)比：#125）

?

在After中完成動(dòng)畫后，將序列幀拖到此面板中即可將其轉(zhuǎn)換為APNG格式，非常方便快捷。 （下載鏈接：）

總結(jié)：

如果圖標(biāo)字體涉及整套圖標(biāo)，需要替換修改，沒有更快的方法來替換。 只能自動(dòng)在網(wǎng)站上一一替換圖標(biāo)，或者新建一個(gè)項(xiàng)目重新開始，重新輸入各個(gè)通配符。 此外，圖標(biāo)字體在美觀、清晰度、工程、尺寸、性能、靈活性、過渡動(dòng)畫、幀率適配等方面都優(yōu)于傳統(tǒng)圖像格式。花更多的時(shí)間專注于設(shè)計(jì)圖標(biāo)和優(yōu)化界面，減少?gòu)?fù)雜和重復(fù)勞動(dòng)。 圖標(biāo)字體還有特別簡(jiǎn)單易用的工具，可以提高動(dòng)畫效果方面的工作效率。 我相信未來會(huì)有更多的工具支持更復(fù)雜的動(dòng)畫。

如有侵權(quán)請(qǐng)聯(lián)系刪除！