最近做一套跟華為生態(tài)相關(guān)的產(chǎn)品方案PPT里的架構(gòu)圖、網(wǎng)頁Demo的側(cè)邊欄、給客戶演示的原型都需要統(tǒng)一的視覺語言。配色倒是好說真正難搞的是圖標。以前我都是去各種圖標站搜“華為風格”搜出來的東西要么是第三方自制的風格跟官方差著一截要么授權(quán)標注不清用在商業(yè)項目里心里沒底。后來朋友提醒了一句華為官方有免費圖標庫2024年版已經(jīng)放出來了SVG、PNG、字體文件都齊下載不用花錢。我當時第一反應是這種東西為什么不早說。把整套圖標庫下載下來之后我把從下載、解壓、選格式、接進PPT、接進前端項目到處理各種版權(quán)細節(jié)的完整過程走了一遍。這篇文章不聊虛的就講清楚這套2024版華為圖標庫到底能干什么、怎么下、怎么用、有哪些坑。無論你是做UI的設計師、寫頁面的前端、準備華為ICT大賽答辯PPT的學生還是給公司做華為云相關(guān)方案的產(chǎn)品經(jīng)理應該都能在這里面找到直接能用的東西。1. 華為這套免費圖標庫到底解決了什么問題1.1 華為為什么要公開自己的圖標庫先說一個很多非設計崗的朋友不理解的事圖標庫不是畫幾個圖形那么簡單。華為的產(chǎn)品線太多了手機、平板、路由器、智慧屏、云服務、開發(fā)者工具如果每個團隊各畫各的圖標用戶看到的界面就會像拼盤一樣雜亂。所以華為需要一套統(tǒng)一的圖標語言華為官方確實是有一套相對完整的設計規(guī)范體系圖標庫就是這套體系里的重要組成部分。過去這套圖標庫主要對內(nèi)使用外部人很難拿到。但華為這些年在做生態(tài)生態(tài)里的開發(fā)者需要開發(fā)HarmonyOS應用需要在官網(wǎng)上介紹自己的產(chǎn)品需要做和華為相關(guān)的技術(shù)分享PPT。如果生態(tài)伙伴拿不到官方圖標就只能自己畫畫出來風格必然不統(tǒng)一。所以華為放出一套免費圖標庫本質(zhì)上是在為生態(tài)做基礎設施——讓所有圍繞華為生態(tài)做設計、做開發(fā)、做內(nèi)容的人都能站在同一套視覺標準上。對用戶來說這解決了最實際的問題你不用再滿網(wǎng)找“華為風圖標”不用擔心版權(quán)糾紛打開下載鏈接就能拿到風格統(tǒng)一的整套資源。1.2 2024版圖標庫的幾個明顯變化網(wǎng)上很多舊的圖標庫資源還是兩三年以前的包圖標數(shù)量少、風格偏老舊、不支持深淺色模式。2024版我實際用下來的感受有幾點變化比較明顯。第一是圖標數(shù)量多了很多尤其是設備類和網(wǎng)絡類圖標。華為的AI、IoT、通信設備相關(guān)產(chǎn)品線擴張很快圖標庫也隨之一批一批補進來了。做項目時找路由器、交換機、云主機、攝像頭、傳感器這類圖標基本不用去別處找替代品。第二是深淺色雙套支持已經(jīng)是標配。不像以前只提供一套深色圖標深色方案里還得自己手動反白2024版直接按Light和Dark兩個目錄分好前端接進去非常省事。第三是圖標風格整體更克制了。華為這套圖標的基礎特征是幾何化、切角利落偏線性為主平時用普通線條大小看很舒服放大縮小都不容易變形。2024版的線條粗細和圓角比例明顯經(jīng)過一輪統(tǒng)一校準混在一起用不會讓人感覺“這是幾個人分頭畫的”。1.3 先搞清楚“免費”的邊界在哪里免費兩個字最容易讓人忽略細節(jié)。按照官方這類設計資源的通行規(guī)則華為圖標庫的“免費”一般指可以用于個人項目、商業(yè)項目、學習交流但有幾個紅線你要先記住具體以下載頁面展示的License條款為準。不能用它去注冊商標、申請Logo不能把圖標庫整體或部分打包后二次銷售也不能把圖標做成“華為官方同款圖標集”拿去賣。使用的時候通常需要標注來源比如在文檔里注明“圖標來自華為官方圖標庫”或者按授權(quán)要求附上出處。另外千萬別把“華為圖標庫”理解成“華為品牌Logo庫”。品牌Logo歸品牌規(guī)范管不歸圖標庫管那個是不能隨意下載改色的。2. 下載渠道與文件選擇避免下到亂七八糟的“整合包”2.1 我推薦的官方下載路徑下載渠道這件事我踩過一次坑。以前圖省事在一個第三方素材站花積分下載了一個“華為2024最新圖標庫”解壓以后發(fā)現(xiàn)圖標數(shù)量少得可憐而且有幾個圖標的線條明顯是描出來的根本不是官方矢量源文件在4K屏上一放大就露餡。后來我老老實實走官方渠道華為圖標庫的官方發(fā)布位置主要在華為開發(fā)者官網(wǎng)的設計資源欄目和HarmonyOS設計資源相關(guān)頁面通常需要注冊登錄華為賬號才可以下載。注冊賬號是免費的下載也不需要付費。另外華為生態(tài)里還有一些配套工具也會內(nèi)置圖標資源比如華為官方的一些開發(fā)者工具組件庫會同步更新圖標文件。如果你的項目本來就用這些工具可以直接在工具內(nèi)部拉取版本更同步。如果你在網(wǎng)上看到第三方整理的“華為圖標庫合集”我不建議直接用。倒不是說一定有問題而是你沒法確認它的版本是不是最新的也沒法確認它是否完整保留了授權(quán)說明。圖標這玩意兒差一個版本風格細節(jié)可能就變了。為了省幾步登錄操作去冒版本不確定的風險不劃算。2.2 按你的實際用途選對下載內(nèi)容進到下載頁之后你會發(fā)現(xiàn)官方提供了好幾種格式有些人一下子就懵了。其實選擇邏輯很簡單按你的使用場景來。做UI設計稿、需要高質(zhì)量矢量編輯的優(yōu)先下載Sketch或Figma格式。這兩個格式里面圖標是帶符號和樣式的可以批量改色、批量調(diào)整適合設計團隊維護統(tǒng)一的UI組件庫。做前端開發(fā)需要把圖標接進網(wǎng)頁或App的下載SVG源文件或者字體文件Font。SVG更適合現(xiàn)代前端工程化后面我會詳細講怎么接。寫文檔、做PPT、畫架構(gòu)圖的下載PNG或者SVG都行。如果你用的Office版本比較新我建議直接下SVG因為SVG在PowerPoint里可以無損改色比PNG好用得多。另外注意看下載包里有沒有Light和Dark兩套。2024版圖標庫對深淺色模式做了專門適配如果你的項目有暗色模式需求記得把兩套都下載下來別只下個淺色的。2.3 解壓后的文件結(jié)構(gòu)以及快速判斷版本新舊下載下來的ZIP包解壓后目錄結(jié)構(gòu)通常是按業(yè)務場景分層組織的。我實際拿到的包大致是下面這種結(jié)構(gòu)huawei_icons_2024/ ├── LICENSE.txt ├── README.md ├── font/ │ ├── huawei-icons.ttf │ ├── huawei-icons.woff │ └── huawei-icons.woff2 ├── svg/ │ ├── color/ 彩色圖標多色 │ ├── light/ 淺色模式單色線性 │ └── dark/ 深色模式單色反白 ├── png/ │ └── 32px 64px 128px 等不同尺寸 └── sketch/ 或 figma/ └── 對應平臺的設計源文件有一個小細節(jié)能幫你快速判斷版本新舊看文件名里的版本號或者看圖標目錄里是否有最新的AI、大模型、云原生這類新增品類。如果包里連這些都沒收那大概率是舊版。另外看下LICENSE.txt和README.md這兩個文件在不在在的話說明發(fā)布比較規(guī)范不在的話就要警惕是不是被別人重新打包過。拿到包先別急著拖進項目我習慣先翻一遍SVG目錄和font目錄確認里面圖標數(shù)量跟官方頁面標注一致再確認一下文件命名有沒有統(tǒng)一規(guī)律。這一步花不了五分鐘但能避免后面拿到山寨包還當正版用。3. 從解壓到真正用進項目三套接法3.1 匯報和文檔場景PPT、Word、公眾號配圖先講最輕量的用法把圖標接進PPT。很多人對SVG有個誤解以為SVG只能在網(wǎng)頁里用其實從Office 2016開始PowerPoint就支持直接插入SVG文件而且插入之后可以像普通形狀一樣改顏色。操作步驟非常簡單在SVG目錄里找到你想要的圖標直接拖進PPT畫布。選中圖標在“形狀填充”或“圖形格式”里調(diào)整填充顏色單色線性圖標可以直接修改。調(diào)整大小的時候按住Shift鍵等比例縮放圖標不會變形。這里有一個老手才知道的技巧如果拖進去的SVG圖標是多個元素組合在一起的選中后無法整體改色此時可以右鍵“組合”按鈕找到“取消組合”取消一到兩次之后圖標會拆成獨立的矢量形狀這時再逐個改色或者統(tǒng)一選中改色就能完全變成你自己的風格。從PPT 2016之后的版本通常剛插入的SVG默認就是“圖形”對象可以直接改填充色只有從舊版軟件粘貼過來的才需要取消組合。Word和公眾號配圖的邏輯也差不多。Word里能用同樣的方式改顏色公眾號編輯器不能直接拖SVG需要先用設計工具把圖標導出成PNG再上傳。導出PNG的時候務必把尺寸設置得比實際顯示大兩倍以上不要用默認的200×200小圖否則公眾號文章在高清屏上會顯得圖標邊緣發(fā)虛。3.2 前端項目場景SVG Sprite與IconFont的代碼級接入前端場景是我這次重點研究的。2024版圖標庫提供了多種接入方式你拿到手之后不要一股腦把幾百個SVG全部塞進項目里那樣打包體積會非常難看。推薦的做法是按需引入。先看SVG Sprite方式。SVG Sprite的原理是把所有圖標Ping合成到一個SVG文件里然后用雪碧圖技術(shù)來引用。如果是自動化程度更高的項目推薦直接用SVG Sprite插件的方式在打包的時候自動按需生成雪碧圖。Vite項目里可以這樣配置// vite.config.js import { createSvgIconsPlugin } from vite-plugin-svg-icons import path from path export default defineConfig({ plugins: [ createSvgIconsPlugin({ iconDirs: [path.resolve(process.cwd(), src/assets/icons)], symbolId: icon-[name], }), ], })把需要用到的SVG文件放到src/assets/icons目錄下在頁面里用統(tǒng)一的SVG組件引用template svg aria-hiddentrue classsvg-icon use xlink:href#icon-communication-router / /svg /template這樣可以做到只打包實際用到的圖標同時CSS可以統(tǒng)一控制圖標的尺寸和顏色.svg-icon { width: 1em; height: 1em; fill: currentColor; vertical-align: -0.15em; }因為官方的大多數(shù)圖標是單色的fill設置成currentColor就可以讓圖標顏色跟隨文字顏色變化深淺色模式切換時只要換文字顏色圖標就自動跟著變這是很優(yōu)雅的方案。第二種是IconFont方式。這種方式比較傳統(tǒng)適合老項目或者對加載體積比較敏感的輕量頁面。它把圖標做成字體文件通過Unicode字符來引用也可以選擇一個偷懶但實用的方式去阿里的iconfont項目管理里手動上傳你需要的華為圖標SVG生成自己的圖標字體。為什么我不建議全量引用官方的Font文件因為官方Font文件包含了幾百個圖標但你可能只用得到二三十個全量引入意味著用戶要額外下載上百KB的字體文件完全沒有必要。自己傳一份精簡版體積能縮小到10KB左右。3.3 設計稿場景Figma和Sketch里的組件庫管理設計團隊用官方圖標庫的方式我個人建議不要直接拿官方文件當設計文件的底圖也不要直接改官方源文件。正確的打開方式是把官方圖標導入到團隊的組件庫里形成自己的Team Library。在Figma里操作的話把下載的Figma格式圖標文件作為庫文件通過“Library”功能分享給團隊。團隊成員在設計時直接通過Assets面板拖拽調(diào)用圖標自帶尺寸規(guī)范不會出現(xiàn)“這個圖標怎么比那個大一圈”的問題。團隊庫做好之后還要做幾件事給每個圖標補充中文和英文的別名標簽方便團隊成員搜索。把線性和面性圖標、淺色和深色圖標做好命名區(qū)分。把圖標網(wǎng)格、常用尺寸16、24、32、48預設成樣式供團隊一鍵調(diào)用。這些工作雖然前期要花一兩個小時但對團隊協(xié)作效率的提升非常明顯。尤其是做多頁面、多端適配的項目統(tǒng)一圖標來源能讓設計評審時少吵很多架。3.4 一個貫穿全流程的示例深淺色模式適配深淺色模式的適配算是我用了這套圖標庫之后感受最深的一個環(huán)節(jié)。以前做官網(wǎng)的暗色模式圖標需要設計師手動出一套反白版前端拿著兩套圖標來回切換。華為2024版圖標庫直接給你分好了Light和Dark兩套目錄前端只要在CSS里根據(jù)主題變量切換圖標路徑即可。如果項目里用的是SVG Sprite方式主題切換時引用不同的Sprite文件。如果是把SVG作為單獨組件引入可以封裝一個Icon組件根據(jù)主題自動切換圖標源template svg classapp-icon aria-hiddentrue use :xlink:hreficonUrl / /svg /template script setup import { computed } from vue import { useTheme } from /stores/theme const props defineProps({ name: String, }) const theme useTheme() const iconUrl computed(() { return theme.isDark ? #dark-${props.name} : #light-${props.name} }) /script這樣一來產(chǎn)品切換主題時圖標跟著自動換不需要在業(yè)務代碼里做任何額外的判斷。4. 實測中遇到的坑和版權(quán)紅線的具體邊界4.1 命名規(guī)則與檢索技巧英文名比中文名好找圖標庫資源一多找圖標就成了效率殺手。我一開始在文件夾里按中文語義猜文件名比如想找“路由器”猜了router、wifi、hub等好幾個詞浪費了不少時間。后來發(fā)現(xiàn)官方圖標的命名有穩(wěn)定的前綴和語義邏輯當你掌握了它的分類規(guī)律以后查找效率會提升不少。觀察下來主流的命名方式是語義型前綴加關(guān)鍵字例如device-開頭設備類如device-router、device-servercomm-開頭通信業(yè)務類如comm-network、comm-signalcloud-開頭云計算相關(guān)如cloud-storage、cloud-functionsecurity-開頭安全類如security-lock、security-shieldai-開頭人工智能相關(guān)如ai-model、ai-chip如果你要找“防火墻”搜firewall沒有那大概率它在security-前綴下。如果搜“數(shù)據(jù)庫”找不到database那試試storage或者data-開頭的系列。想快速從幾百個文件里定位目標用搜索功能按前綴過濾比逐個翻目錄快得多。還有一個小竅門官方分發(fā)文件夾里的SVG文件名通常和網(wǎng)頁端展示的圖標名稱是對應的。你可以在官方在線預覽頁面直接搜到圖標然后記下它的英文名再到本地文件夾里精準定位這樣就不會被中文語義帶偏了。4.2 授權(quán)范圍什么能做什么不能做用這套圖標庫最需要繃緊的就是授權(quán)這條線。網(wǎng)上搜華為圖標庫的人很多是要做教程、做PPT、做非商業(yè)開源項目這部分人大可以放心用。但如果你在公司項目里使用或者要做一個商業(yè)化產(chǎn)品有幾個邊界必須清楚。第一可以用于商業(yè)項目但通常需要標注來源。請在設計稿說明頁、網(wǎng)站頁腳或者項目README里注明圖標來源具體署名方式以官方License要求為準。第二不能直接申請商標或作為Logo主體。圖標庫里的圖形是華為的設計資產(chǎn)商標注冊屬于典型的高風險使用場景。說得直白一點哪怕你把圖標改了個顏色、調(diào)了一下角度也不能拿去申請注冊商標因為核心圖形跟原版仍然構(gòu)成實質(zhì)性近似。第三不能二次分發(fā)獲利。把圖標庫整理成付費資源包去賣或者整合到自己的模板產(chǎn)品里收費這都是明令禁止的行為。哪怕你做了二次加工甲方付費買了你的成品也不行因為素材來源本身就是禁止商售的。第四不能造成官方合作誤解。做演示文稿或者視頻的時候如果大量使用華為圖標又沒有做任何說明容易讓觀眾誤以為你和華為有官方合作。嚴謹?shù)淖龇ㄊ羌右豁摗癙resented with icons from HUAWEI Icon Library”之類的聲明。4.3 渲染兼容性PPT改色、瀏覽器回退、清晰度問題先說一下PPT里SVG改色的坑。新版PowerPoint對SVG支持確實不錯但如果你拖入的SVG帶有多個復雜路徑或者圖標內(nèi)部用了漸變改色時可能出現(xiàn)“顏色沒反應”的情況。這時候先檢查圖標是不是被PowerPoint自動轉(zhuǎn)換成了圖片格式真轉(zhuǎn)成圖片的話建議重新拖入一個未編輯過的SVG文件然后用“圖形格式”菜單的“形狀填充”修改。另外PPT的“取消組合”操作對SVG是有效的但對部分從字體文件復制過來的圖形無效。如果拖入的是從IconFont復制的形狀要么重新單獨下載那個SVG文件再拖入要么就用Figma把它導出成PNG來用。網(wǎng)頁端使用華為圖標庫最大的兼容性風險在低版本瀏覽器對SVG外部引用的支持。舊瀏覽器上直接用use標簽引用外部SVG Sprite可能會出現(xiàn)圖標看不見的情況。這時候需要把Sprite里的SVG內(nèi)容直接內(nèi)聯(lián)到頁面里或者用IconFont代替再或者引入svg4everybody這類兼容庫。如果你維護的是ToB系統(tǒng)用戶可能還在用老版的內(nèi)置瀏覽器訪問這個問題尤其要重視。再提一個清晰度問題。有些人習慣從PNG目錄里直接挑一張128px的圖放到網(wǎng)頁上做2倍圖這在手機上能用但在高分屏上就會糊。SVG是矢量格式任何尺寸都不會糊所以前端場景能選SVG就不要選PNG這是我從很多項目里總結(jié)出來的經(jīng)驗。實際下載和使用圖標庫這兩天我個人最大的感受是一套設計規(guī)范級別的免費圖標庫價值遠遠不止“省了畫圖的時間”。它讓設計師和開發(fā)者在做華為相關(guān)項目時不用再靠肉眼猜“華為風格到底長什么樣”也為作品的專業(yè)度提供了基礎的保障。建議不要一次性把所有圖標都導入到項目里先梳理一遍自己的實際使用場景把需要的那幾十個挑出來用官方文件或者精簡版本就好維護成本會低很多。