同學們關于切圖的問題每周都有，尤其是關于切圖中使用 SVG 的問題絡繹不絕。這次分享就是針對切圖中的幾個常見問題開展。

希望能解決大家工作中的實際問題，不要再和沒有經(jīng)驗的開發(fā)菜雞互啄。

切圖是在進入開發(fā)階段后提供給程序員相關圖形文件的過程，很多設計師對這個過程可以說是毫無認識，只把它當成是程序員的工作，最終如果實現(xiàn)效果不佳，切圖文件有錯誤，那么問題都是程序員的……

實際上，切圖是一種交付過程，是 ——?把切圖文件有效交付給程序員進行開發(fā)的過程。

要具備切圖的能力，就需要知道切圖的工作流和切圖文件的規(guī)則與邏輯。我們首先來解析幾種常見的切圖交付方式：

• 上傳藍湖

• 提供源文件

• 上傳iconfont

• 獨立導出傳送

目前最常見的就是使用上傳藍湖的方式，即在設計源文件中使用導出或切圖工具，標記相應圖形，再上傳到藍湖中，團隊成員再進對應的頁面中進行下載。

這屬于我最不喜歡的切圖交付方式，原因有很多，最大的原因就是切圖文件是具有多樣性的，不是簡單打個標記就能完美交付。其它方面，還包括多了一個文件的中轉(zhuǎn)平臺，需要保持這個平臺和源文件實時更新，只依靠設計稿的切圖無法保證切圖文件的完整性（比如圖標不同狀態(tài)）。這在后面的分享中會有解釋。

第二種提供源文件，也是很常見的切圖交付方法。如果使用本地設計工具如 Sketch、XD 的直接提供源文件讓他們自己導出，使用 Figma、即時設計等云設計工具可以添加程序員進團隊中自己完成切圖工作。

這個操作適用標注交付但不太適合切圖，因為這涉及到軟件功能的認識，想要獲得有效的切圖就勢必涉及組件、蒙板、圖層的對應邏輯。程序員當然不會想為了獲得切圖還要學一遍軟件的使用，雖然設計軟件不難，但就像大多數(shù)設計師也根本不想學更簡單的 HTML CSS……

還有個更致命的問題，也是我最近才想到的。很多同學項目的程序員反感訪問源文件，并不是因為它們就比藍湖差，而是你們在完成源文件以后是從來不整理文件結構的，導致工程模塊畫板非常的混亂，找個切圖文件和大海撈針沒什么區(qū)別。

所以，想要直接使用源文件進行切圖，是需要具備很多先決條件的，程序員有一定的切圖操作內(nèi)部培訓，設計師有良好的切圖源文件整理的習慣。

除此之外，還有近幾年也特別流行的使用 iconfont 交付切圖的做法，即在 iconfont 中創(chuàng)建一個線上資源庫，并將平臺上的圖標或自己設計好的圖標上傳上去讓開發(fā)遠程調(diào)用。

這是出問題最多的交付方式，因為很多初級設計和開發(fā)對 iconfont 文件格式的支持一無所知，總在如何獲得“五彩斑斕的黑” 這種無解的問題上浪費時間。同時，iconfont 的切圖范圍只包含一般矢量圖標，而正常項目的切圖可不止這一種類型，這就直接讓切圖的過程變得更復雜和混亂，容錯性降低。

最后一種方式，就是設計師根據(jù)標注的方式，直接使用設計文件導出切圖文件，交付給開發(fā)。

這是我最建議使用的方式，因為設計稿中的圖形元素在落地后要實現(xiàn)什么效果，必須是設計師本人最清楚的。如果我們要用前面幾種方式交付，就需要根據(jù)它們的特性產(chǎn)生很多額外的操作和溝通，直接導出交付則可以省去無數(shù)的麻煩，且根本不必浪費多少時間。

這么做的前提是，你得對切圖足夠了解，能引導團隊接受和使用這種模式。所以下面，我就要更具體介紹切圖有關的細節(jié)和邏輯。

切圖的文件包含兩種格式類型，矢量和位圖。矢量的格式包含 SVG、EPS、PDF、OTF、TTF 等，位圖則由 WEBP、PNG、GIF、BMP、JPG 等。

平心而論，任何設計師都有必要系統(tǒng)的了解一遍不同圖形文件格式的差異和使用場景，而篇幅關系我顯然不可能全部詳細介紹過去，所以我只針對重點的幾個格式說明。

首先說位圖和矢量格式的差異，矢量圖形是通過點線面的數(shù)值來繪制出圖形和上色的，所以不管怎么放大，渲染出的結果都是不會模糊和損失細節(jié)的。

而位圖，則是通過記錄像素點色彩的方式保存的，每次打開位圖就是讀取對應像素點色彩的顯示過程，任何位圖文件記憶的像素和色彩信息有限，所以它無法無損放大。

位圖格式

之所以它們還有更多細分格式，原因就在于對保存和顯示的需求不同。首先說位圖，一張完整的位圖所包含的數(shù)據(jù)量是很大的，比如4000W像素的相機拍出的位圖就高達 20-30MB 每張，不僅保存占空間，打開渲染也慢。

所以，JPG 就是用來解決這個問題的格式之一，它通過特殊的算法來壓縮位圖的數(shù)據(jù)量，讓文件體積減少一半甚至幾倍也能獲得相近的顯示效果。同時，它也支持通過犧牲圖片顯示精度的方式來進一步降低圖片體積。

因為JPG體積小，所以在需要通過網(wǎng)絡讀取、訪問的場景中自然而然成為主流的格式。如啟動頁、H5背景、廣告Banner、商品圖等。

但因為 JPG 作為一個壓縮格式，不帶透明度通道（節(jié)省空間），所以它沒辦法輸出透明底的圖片，類似圖標、懸浮圖形、LOGO 等，就只能選擇 PNG 格式。

PNG 是一個無損的位圖格式，雖然它保存圖片的體積相對 JPG 大得多，但多數(shù)需要用到 PNG 的切圖場景都是較小的圖形，所以在面對圖標這些關鍵的界面元素時，我們就會使用 PNG 來導出，保留最大的圖形精度和細節(jié)。

還有一個不得不說的格式，就是 GIF，它是一個支持動態(tài)的位圖格式，但是本身對圖形色彩的支持不佳，所以我們只用它來輸出一些網(wǎng)頁中的簡單動畫元素。如 Loading、表情包、動態(tài)廣告等。GIF 動畫實際上就是若干位圖進行輪播，所以文件體積也并不小。

可能有同學會問不是有 Lottie了嗎，為什么還需要用 GIF。因為GIF是位圖的動畫，而 Lottie 的本質(zhì)是矢量動畫，要導出哪種是由動畫的類型決定的。

同時，我前面還強調(diào)了一個特性，就是網(wǎng)頁端。因為移動端對 GIF 的支持一言難盡，而電腦端瀏覽器對 GIF 的支持則非常友好，所以 GIF 主要的面向場景都是以網(wǎng)頁形式為主的對象。

但不管換什么位圖格式，它們依舊是位圖，脫離不了位圖無法無損放大的限制。所以在移動端，為了滿足不同屏幕密度和精度的顯示需要，位圖格式的導出就需要使用 1x、2x、3x 的倍率。

如果實在不能理解移動端屏幕分辨率的基礎知識，就記得只要選了 JPG 還是 PNG 導出移動端切圖，就導出 1x、2x、3x 出來給開發(fā)，讓他們自己選。

網(wǎng)頁端基本不需要糾結倍率問題，因為針對電腦視網(wǎng)膜屏幕輸出 2x 位圖的做法只在高端品牌類項目中可能應用，絕對不會出現(xiàn)在B端項目中。

矢量格式

位圖的限制很多，為什么不直接使用矢量格式？因為矢量格式對圖形的表現(xiàn)力跟不上，它沒辦法記錄有大量細節(jié)、色彩、模糊的圖像。只適合用來記錄一些相對簡單的圖形和輪廓。比如工具圖標、圖形 LOGO、文字、按鈕等。

最常用的矢量格式就是 SVG，它是安卓和網(wǎng)頁中通用的格式。其次是 PDF，雖然它不是一個純粹的矢量格式，但 iOS 端的切圖會用它，所以在切圖的領域就把它先算成矢量格式。

還有就是 TTF、OTF 這類字體文件，它們本質(zhì)上就是一個矢量圖形的合集，不管你保存的是文字圖形還是圖標符號，對它們來說都一樣。不管是使用 iconfont 的線上工具，還是團隊自己合成圖標字體文件，本質(zhì)上也是矢量圖形文件。

矢量格式雖然具備無損縮放和體積小的優(yōu)勢，不需要導出 1x、2x、3x的文件便于管理，但是，它們的缺陷是相當明顯的，除了不支持攝影圖等復雜圖像以外 ——?SVG 和字體文件只支持純色填充或基礎漸變。

看過我們前面圖標分享的同學應該都知道，進階的圖標風格中，包含比較豐富的用色方式，如果多色的線型圖標，或多漸變的裝飾圖標，以及插畫、攝影、3D類風格，這些風格是注定無法在矢量格式中使用的?（PDF能用是因為它也可以放位圖）。

更簡單點解釋，就是 SVG 或字體文件，就是把設計文件的原有圖層輪廓化并合并成一個圖層，你們可以自己想象只有一個圖層的圖標你能做什么？

所以，當項目的圖標要進行切圖時，使用了多種色彩和復雜漸變方式的圖標直接排除矢量選項，因為它從根本上無法實現(xiàn)。如果開發(fā)一定要讓你用 iconfont 或 SVG 給出，只能內(nèi)部做次討論，是要把原有設計改成普通的線性或面性支持矢量格式，還是這些圖形用 PNG 切圖不管原先的實現(xiàn)方式。

這又引發(fā)一個很現(xiàn)實的問題，主流 C 端項目的圖標幾乎都會包含裝飾性圖標，那么勢必要使用位圖切圖，既用位圖又用矢量的做法讓開發(fā)的圖形元素調(diào)用毫無統(tǒng)一性可言，即不優(yōu)雅也不簡潔。

所以設計師能真正衡量其中利弊的話，就強烈建議使用全位圖的格式輸出切圖。只在 LOGO 等 VI 元素上使用矢量格式。

結尾

切圖的掃盲就先分享到這里，希望看完后的同學再也不會在格式上的問題糾纏不清。

下一篇內(nèi)容，我就會針對切圖的一些常見問題做分享，進一步解析切圖中的技巧和要點。

我們下篇再賤～

新一期B端產(chǎn)品設計課程還在招生中，掃描下方二維碼加我報名課程～

課程介紹：