前言

SVG 格式圖標(biāo)在軟件界面中有廣泛應(yīng)用，它與生俱來的矢量屬性，使其在高分辨率屏幕上的表現(xiàn)非常完美。SVG 是一個(gè)基于 XML 標(biāo)記語言的開放網(wǎng)絡(luò)標(biāo)準(zhǔn)格式，擁有跨設(shè)備多平臺(tái)的兼容效果。前面我們有分享過一篇關(guān)于 WPS 圖標(biāo)的文章《探索 WPS 3000 個(gè)圖標(biāo)設(shè)計(jì)背后的故事》，得到了很多網(wǎng)友的積極反饋。相信界面設(shè)計(jì)的小伙伴們都很熟悉 SVG 格式了，這次，我有一個(gè)棒的想法想分享給大家：利用 SVG 圖標(biāo)套色，來完成不同界面的適配。

什么是 SVG 圖標(biāo)套色？

圖標(biāo)套色的簡單來說就是利用 SVG 格式的文本屬性，使用 XML 格式標(biāo)準(zhǔn)，在 SVG 文檔中增加 CSS 樣式，通過修改 CSS 樣式屬性，精準(zhǔn)控制 SVG 格式圖標(biāo)顏色，通過修改透明度控制圖形顯示與否，從而變換圖標(biāo)的風(fēng)格外觀。

基本原理：修改 SVG 的樣式，生成不同風(fēng)格的圖標(biāo)

用處一：顏色適配

這里有幾個(gè)插件，都用到了“保存”、“打印”這些功能。因?yàn)橹黝}色不同，即使是同樣外形的圖標(biāo)，還是需要根據(jù)主題色的不同輸出適配各個(gè)插件的圖標(biāo)。采用圖標(biāo)套色的方法，就可以避免這類圖標(biāo)資源的重復(fù)輸出。

相同功能需要兩套不同主題色的圖標(biāo)

用處二：皮膚適配

現(xiàn)在多數(shù)軟件一般都有皮膚功能，不同用戶需求，衍生出風(fēng)格各異的皮膚，各種顏色，深淺不一，一套圖標(biāo)滿足不了所有，為了視覺效果需要對(duì)每個(gè)皮膚輸出特定顏色、風(fēng)格的圖標(biāo)。圖標(biāo)數(shù)量如果很多，投入的成本將隨皮膚數(shù)量呈幾何倍增加，圖標(biāo)套色就可以很好的解決這類問題，只需要通過修改圖標(biāo)顏色和風(fēng)格即可適配。

通過修改映射配置，可以得到不同顏色的圖標(biāo)

套色方法

我們先看看圖標(biāo)套色之后的效果：

修改映射配置，可以得到線、面不同風(fēng)格的圖標(biāo)

簡單來說，實(shí)現(xiàn)這種效果有下方五個(gè)步驟:

套色方法五個(gè)步驟

以下方幾個(gè)圖標(biāo)來做示例：

SVG 示例圖標(biāo)

第一步，確定圖標(biāo)線、面風(fēng)格

設(shè)計(jì)師將圖標(biāo)線、面風(fēng)格確定下來，并保證兩者效果上可以兼容，即輪廓一致。

同時(shí)兼容線、面兩種風(fēng)格效果

第二步，定義圖標(biāo)顏色

在確定了圖標(biāo)的風(fēng)格之后，將圖標(biāo)中用到的 7 種顏色，根據(jù)一深一淺再拆分為 14 種（具體幾種顏色可根據(jù)圖標(biāo)設(shè)計(jì)需要來定），深色用于填充線性圖形，淺色用于填充面性圖形。

根據(jù)線、面風(fēng)格需要，定義圖標(biāo)的顏色

第三步，給顏色定義樣式名

給 14 種顏色，分別定義好 CSS 樣式名（樣式名遵循 CSS 規(guī)則即可）。

給顏色定義樣式名

第四步，給 SVG 圖標(biāo)添加 CSS 內(nèi)部樣式

SVG 格式圖標(biāo)默認(rèn)是沒有 CSS 樣式，需要手動(dòng)將 CSS 內(nèi)部樣式添加到 SVG 文檔中，并將 SVG 路徑顏色與 CSS 樣式名關(guān)聯(lián)起來。

給 SVG 添加 CSS 樣式

第五步，樣式屬性配置機(jī)制

添加內(nèi)部樣式之后，需要開發(fā)小哥哥在軟件中增加對(duì) SVG 圖標(biāo) CSS 樣式屬性的映射機(jī)制。修改映射機(jī)制配置文件中 CSS 樣式屬性，就可以控制圖標(biāo)風(fēng)格變化。

修改配置代碼即可改變圖標(biāo)顏色

完成了以上五個(gè)步驟，通過修改軟件中的映射機(jī)制配置文件，就可以改變圖標(biāo)風(fēng)格。

應(yīng)用案例

了解了步驟方法，我們以 WPS 為例來講解圖標(biāo)套色在實(shí)際案例中的應(yīng)用：

案例一：前面有提到我們的四大組件，WPS 由文字、表格、演示、PDF 四組件組成。每個(gè)組件都有各自的主題色，文字主題色為藍(lán)色，表格綠色，演示橘黃色，PDF 紅色。多數(shù)圖標(biāo)都含有主題色，但外形是一樣的，因各組件主題色不同而導(dǎo)致了很多圖標(biāo)的重復(fù)輸出。

套色用處之一的顏色適配，可以讓圖標(biāo)變色以適應(yīng)不同的組件色，避免圖標(biāo)的重復(fù)。

不同主題色圖標(biāo)的變換效果

案例二：WPS 有推出多個(gè)風(fēng)格各異的皮膚，因?yàn)閳D標(biāo)數(shù)量的關(guān)系，無法每個(gè)皮膚都輸出一套圖標(biāo)，目前只能使用默認(rèn)的線性圖標(biāo)。也因時(shí)間和維護(hù)成本而導(dǎo)致圖標(biāo)風(fēng)格的單一。

套色用處之二的皮膚適配，能使圖標(biāo)改變風(fēng)格以適應(yīng)不同的皮膚，既能滿足圖標(biāo)風(fēng)格多樣，又能滿足時(shí)間和維護(hù)成本的可控。

不同風(fēng)格圖標(biāo)的變換效果

案例三：深色模式的配色與淺色模式大相徑庭，圖標(biāo)使用的顏色也截然不同，適配需要輸出兩套圖標(biāo)資源，因不同深淺色模式而導(dǎo)致的圖標(biāo)資源重復(fù)輸出。WPS 組件功能區(qū)的圖標(biāo)有幾千個(gè)，輸出和維護(hù)都很費(fèi)精力。

套色用處之二的皮膚適配，在深淺色模式下也能適用，改變圖標(biāo)顏色以適應(yīng)不同的深淺色模式，避免圖標(biāo)的重復(fù)輸出。

深淺色模式下圖標(biāo)的變換效果

總結(jié)

通過以上的案例不難發(fā)現(xiàn)，SVG 圖標(biāo)套色技術(shù)的價(jià)值，主要有以下幾個(gè)方面：

1. 時(shí)間和維護(hù)成本的降低

利用圖標(biāo)套色方法，設(shè)計(jì)師只需要輸出一套圖標(biāo)資源，就完成了多組件、多風(fēng)格、深淺色模式適配。開發(fā)小哥哥也可以刪掉適配用的冗余代碼，提升了圖標(biāo)的管理和軟件運(yùn)行效率；

2. 個(gè)性化需求的滿足

后期可以增加自定義擴(kuò)展，讓用戶配置圖標(biāo)風(fēng)格，更好地滿足個(gè)性化需求；

3. 服務(wù)器資源的節(jié)約

更少圖標(biāo)資源，更小壓縮包，更少空間和寬帶的占用。

采用新技術(shù)，幫助設(shè)計(jì)、開發(fā)更好地完成多場景適配，降低了整體流程的執(zhí)行難度，為項(xiàng)目節(jié)省了大量時(shí)間，避免過多精力投入在重復(fù)工作中，為最終完成目標(biāo)創(chuàng)造了有利條件。同時(shí)也解放了生產(chǎn)力，有了更多的時(shí)間可以去關(guān)注高價(jià)值的項(xiàng)目。

工作中經(jīng)常能遇到重復(fù)的內(nèi)容，這都有提升和優(yōu)化的空間，尋找更高效的方法，讓工作變得輕松簡單。

作者：金山辦公CED

轉(zhuǎn)載請(qǐng)注明：優(yōu)設(shè)網(wǎng)

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

更多精彩文章：

圖標(biāo)定制設(shè)計(jì)之一：6大章節(jié)！圖標(biāo)設(shè)計(jì)基礎(chǔ)知識(shí)全方位入門指南

圖標(biāo)定制設(shè)計(jì)之二：超全總結(jié)！金剛區(qū)圖標(biāo)設(shè)計(jì)的 10 大風(fēng)格

圖標(biāo)定制設(shè)計(jì)之三：想讓圖標(biāo)更精致？先掌握這11個(gè)容易忽略的設(shè)計(jì)細(xì)節(jié)！

圖標(biāo)定制設(shè)計(jì)之四：學(xué)會(huì)SVG圖標(biāo)的高級(jí)用法，界面適配效率翻一倍！

圖標(biāo)定制設(shè)計(jì)之五：研究微軟 Fluent 圖標(biāo)規(guī)范后，我總結(jié)了這9個(gè)知識(shí)點(diǎn)！

圖標(biāo)定制設(shè)計(jì)之六：為什么別人的圖標(biāo)設(shè)計(jì)又快又好？來看騰訊高手總結(jié)的知識(shí)點(diǎn)！

圖標(biāo)定制設(shè)計(jì)之七：客戶說B端圖標(biāo)太普通沒新意，該怎么解決？

圖標(biāo)定制設(shè)計(jì)之八：從6個(gè)方面幫你快速掌握?qǐng)D標(biāo)設(shè)計(jì)規(guī)范

圖標(biāo)定制設(shè)計(jì)之九：不止畫圖標(biāo)！5 個(gè)金剛區(qū)的交互設(shè)計(jì)思考

圖標(biāo)定制設(shè)計(jì)之十：這6種類型的菜單圖標(biāo)和用法，這篇全總結(jié)了！