UI 設計師使用 Sketch App 同時輸出 Icon System 給網頁、iOS App 及 Android App 的重點整理(2021版本）

Photo by Harpal Singh on Unsplash

UI 設計師在 Sketch 中使用 Symbols 及 Library 建立高複用性的 Design System，當輸出 Icon 給開發者時，多個檔案相互引用的 Symbols 及 Library 可能瞬間變成設計師與開發者的惡夢。

當有上百顆的 Icon 要同時匯出給網頁、iOS App 及 Android App 三個平台，匯出於 Zeplin 讓開發者自行下載是不可行的。如何系統化設定，輸出符合目前主流網頁前端、iOS App 及 Android App 所需的 Icon，將是設計師需要謹慎處理的，下列分享幾個注意的事項。

重點一：Icon 命名

1. iOS 及 Android App 的 Icon 輸出圖檔命名只能使用「英文全小寫」及「底線 “ _ “」，不要使用「英文大寫」及「中線 “-“」。
2. iOS 同一顆 icon 必須匯出三種解析度的 PNG 圖檔： @1x、@2x、@3x，Android必須匯出5種： mdpi、hdpi、xhdpi、xxhdpi、xxhdpi 以適應不同裝置之解析度。iOS 所輸出的圖檔，名稱必須包含 @2x @3x 不同解析度在 Icon 檔名之後。但 Android 與 iOS 不同，不可以包含解析度尾綴詞在圖檔名稱中。建議於 Android 提供不同解析度名稱的資料夾(mdpi、hdpi、xhdpi、xxhdpi、xxhdpi)，將相同解析度圖片放在同一個資料夾。特別要注意的是，各資料夾中相同圖形圖片，名稱必須完全一致。新版的 Sketch App 有提供預先設定好的 iOS /Android 出圖範例。
3. 必須清楚標示 Icon 不同狀態於名稱中，方便區分差異，例如：
   電腦版網頁：default / active / disabled + hover / clicked / focused
   手機版網頁：default / active / disabled
   iOS / Android: default / active / disabled
   若將 Icon 做成 button 形式，可能還會有 success / warning / error / loading 等形式。

提供 Android 不同解析度名稱的資料夾，各資料夾中相同圖形圖片，名稱必須完全一致。

iOS 輸出不同解析度圖檔時，名稱必須包含解析度在名稱中。

重點二：圖檔輸出前確定階層乾淨

1. 注意在產出 SVG 或 PDF 等向量圖檔時，不能有遮罩 Mask。會造成工程師使用 fill 改變顏色時難以指到正確階層。
2. 向量圖檔必須將所有圖塊轉成 Outline，在 Sketch 中 layer > Convert to Outline。如果沒有轉成 Outline，Icon 變換色彩時，改變的非框線而是 Icon 背景色。
3. 圖檔無論是輸出為 SVG 或 PNG，若要提供 Web 及 App 開發者能夠自動換色，必須提供單色 Icon (一種顏色，其餘區域透明)，若為雙色或彩色 Icon，當需要換色時，App 會變成要以換圖處理，Web 則需要針對該顆 Icon 客製化。
4. 切圖時建議重新命名於輸出的圖框上，可以不用調整原本 Symbols 和 Library 中 Design System 的命名方式，又能符合開發者所需要的圖檔名稱。
5. 整理一組乾淨的 Icon 集合 Artboard。若為由多支不同 Library symbols所集結而成的 Icon system，匯入至 Zeplin 輸出切圖的時候，將會以最原始的檔案所切出的圖塊邊界為邊界。舉例：同一個 Icon 原始檔案中切為 24*24，之後引用的檔案切圖為 30*30，輸出的圖檔將會以 24*24 的尺寸被切圖出來。

重點三：提供 SVG 圖檔給 Web，PNG 圖檔給原生 iOS 及 Android App (更新重點四)

1. 輸出給網頁的 Icon，目前以 SVG Sprite / Icon Fonts 為網頁圖片系統的主流，同一組 Icon 每一顆 Icon 切出來的尺寸大小必須一致，方便匯出後無論是使用 Icomoon 系統轉圖，或是用 node 合併 svg 圖檔，網頁開發者能動態快速的使用 position 定位。
2. 原生的 iOS 及 Android App 渲染圖片的方式與 Web 不同。原生 App 不像網頁瀏覽器一樣，每次開啟頁面重新載入圖片，而是當第一次下載 App 的時候，將圖片直接嵌入在 App 當中。SVG 圖檔每次開啟時會被裝置渲染， 相較之下 PNG 圖檔下載完即可直接呈現在 App 之中，使用 PNG圖檔也是原生 App 官方推薦的方式。

重點四：是否能提供向量圖給 App 取代 PNG 點陣圖？ iOS 11 中完整支援 PDF 向量格式的內容, Android 5.0 (API level 21) 支援 XML 向量圖格式

向量圖檔案有兩大優勢：相對點陣圖尺寸輕量化，且放大縮小不失真。不需要針對不同裝置提供不同解析度的圖面，可以大幅度縮減 App 大小。

1. iOS 從 Xcode 9 之後有支援向量圖檔， Sketch 可以直接匯出 PDF 檔，也可以使用 iOS 套件 SVGkit 從 SVG 轉檔為 PDF。在 Xcode 中勾選 Resizing 的 Preserve vector data，並設定 Scales 為 Singel Scale，pdf 圖檔便可自由縮放，匯入的 pdf 不會再轉為 SVG 圖檔，放大縮小也不會失真，更不用再匯入三張不同解析度的 PNG 圖片。
2. 從Android 5.0開始，Google提供 VectorDrawable 加載向量圖，SVG 檔案會以 XML文件形式配置。大幅度縮減 Android 匯出5種解析度圖檔所佔用的空間，以及處理適配解析度所需要的時間。
3. 有些人針對向量圖檔於 App 渲染效能提出疑慮，以及複雜圖像上 PNG 的表現將更為細膩，但現行 App Store 超過 100 MB 的應用將無法透過 4G 網路下載，尺寸精美的向量圖勢必會是未來趨勢。

Say hello! 我是 Angel,
這裏的內容如果有幫到你，希望能獲得一些拍手作為鼓勵 
工作上的合作歡迎隨時透過 Mail 聯繫我 contact@aneglho.design
– 
Thanks for watching!