切圖是無法直接用代碼實(shí)現(xiàn)的元素，是UI設(shè)計(jì)師的重要輸出和交付物。切圖看似簡單，其實(shí)有很多專業(yè)細(xì)節(jié)需要了解，也有各種提高切圖效率的方法。本文將全面介紹UI設(shè)計(jì)中關(guān)于如何切圖所需的所有知識(shí)。

本文概述：

什么是UI設(shè)計(jì)摳圖？

裁剪是UI設(shè)計(jì)中的一個(gè)重要步驟，它將無法直接用代碼實(shí)現(xiàn)的設(shè)計(jì)元素分解成不同的圖形元素，以便在開發(fā)過程中被編程語言識(shí)別和應(yīng)用。裁剪不僅包括圖片元素的裁剪，還包括不同圖形元素的組合和命名，以及到圖形元素的鏈接和注釋。通過裁剪，設(shè)計(jì)師可以將設(shè)計(jì)轉(zhuǎn)化為實(shí)際的應(yīng)用元素，以保證程序開發(fā)工作能夠順利進(jìn)行，以及用戶最終看到的界面清晰明了。

圖片切圖是前端做的還是美工做的？

切圖不屬于前端或美術(shù)設(shè)計(jì)的范疇，而是 UI 設(shè)計(jì)的一部分。切圖的結(jié)果雖然可以被前端開發(fā)人員用來編程實(shí)現(xiàn)，但它是 UI 設(shè)計(jì)師將設(shè)計(jì)理念實(shí)現(xiàn)的工作。UI 設(shè)計(jì)師需要根據(jù)設(shè)計(jì)圖裁剪出適合開發(fā)人員的圖形元素，而前端開發(fā)人員則負(fù)責(zé)將這些圖形元素轉(zhuǎn)換成實(shí)際的界面。

但切圖工作并不一定要由UI設(shè)計(jì)師來做，如果前端開發(fā)工程師能夠很方便的獲取設(shè)計(jì)稿上的設(shè)計(jì)元素，直接切圖的效率和最終效果可能更好。切圖也不一定全都用png格式，有時(shí)候jpg就可以，用svg格式的話體積更小，效果更好。這時(shí)候開發(fā)者對(duì)于實(shí)際應(yīng)用場景中的設(shè)計(jì)元素，以及什么樣的圖片格式更好，體積更小，有了更清晰的認(rèn)識(shí)。如果前端開發(fā)工程師能夠直接切圖，體驗(yàn)是可以一致的。

如果追求完美，設(shè)計(jì)師應(yīng)該學(xué)習(xí)一些前端開發(fā)的基本知識(shí)，將正確的切圖直接發(fā)送到前端，才能達(dá)到最佳效果。下面的內(nèi)容將重點(diǎn)介紹UI設(shè)計(jì)師需要知道的切圖知識(shí)。

UI設(shè)計(jì)裁剪規(guī)范

UI設(shè)計(jì)中圖片的切圖有固定的套路和流程，掌握相關(guān)的知識(shí)可以保證開發(fā)中最終的還原度。

格式：應(yīng)該剪裁哪種格式？

裁剪格式的選擇需要根據(jù)公司規(guī)范、實(shí)現(xiàn)方式、開發(fā)平臺(tái)等來確定，如果公司有裁剪規(guī)范，那么就按照規(guī)范進(jìn)行裁剪。

其他情況可按照以下原則考慮：

如果嫌麻煩，可以使用一些自動(dòng)切圖工具，比如 這樣的產(chǎn)品，可以通過插件直接上傳所有格式的圖片，開發(fā)者按需下載，還可以自動(dòng)壓縮切圖文件的大?。?/p>

尺寸：應(yīng)該剪多大？

一般iOS提供@1x、@2x、@3x三種放大倍數(shù)；提供mdpi、hdmpi、xhdpi、五種放大倍數(shù)。微信小程序提供@2x（設(shè)計(jì)尺寸等于750時(shí)為1x，設(shè)計(jì)尺寸等于375時(shí)為2x），網(wǎng)頁一般提供@1x和@2x。如果嫌麻煩或者需要投遞到多個(gè)平臺(tái)，也可以參考格式部分，使用等產(chǎn)品一鍵投遞截圖，會(huì)自動(dòng)生成不同平臺(tái)尺寸和格式的截圖。

切片的命名約定

剪切圖一般用英文命名，沒有特別的標(biāo)準(zhǔn)，只要能表達(dá)剪切圖的真實(shí)含義即可。

如果有多個(gè)單詞，可以用“-”連接，或者將首字母大寫。

如何剪切UI設(shè)計(jì)圖給開發(fā)人員？

傳統(tǒng)方式設(shè)計(jì)師會(huì)手動(dòng)在設(shè)計(jì)軟件中導(dǎo)出所有剪裁圖，標(biāo)注、打包后發(fā)送給開發(fā)人員，這種交付方式效率很低，現(xiàn)在大部分交付都是借助自動(dòng)化工具自動(dòng)完成的，下面介紹一些常用工具及介紹。

工具主要分為兩類，一類是協(xié)同平臺(tái)，優(yōu)先支持多種主流設(shè)計(jì)工具通過插件的方式進(jìn)行設(shè)計(jì)交付；一類是設(shè)計(jì)工具，自帶交付功能。通過這兩類工具，設(shè)計(jì)師可以一鍵分享設(shè)計(jì)稿給開發(fā)者，開發(fā)者可以獲得相應(yīng)的批注和摳圖。

什么圖片切割軟件可以進(jìn)行圖片切割？（協(xié)作平臺(tái)）

它是一種廣泛使用的原型設(shè)計(jì)和設(shè)計(jì)協(xié)作工具，為設(shè)計(jì)師、開發(fā)人員和產(chǎn)品經(jīng)理等團(tuán)隊(duì)成員提供了一個(gè)分享想法和協(xié)作設(shè)計(jì)的平臺(tái)。

除了切割和標(biāo)記之外，它還具有以下優(yōu)點(diǎn)：

簡單易用：界面設(shè)計(jì)簡潔，操作方便，即使沒有專業(yè)設(shè)計(jì)經(jīng)驗(yàn)，也能快速上手。 高保真原型設(shè)計(jì)：支持高保真交互原型設(shè)計(jì)，可實(shí)現(xiàn)復(fù)雜的動(dòng)效和用戶交互體驗(yàn)，讓產(chǎn)品設(shè)計(jì)更加逼真生動(dòng)。 多人協(xié)作：支持多人協(xié)同設(shè)計(jì)評(píng)審，設(shè)計(jì)師、開發(fā)者、產(chǎn)品經(jīng)理可在同一平臺(tái)實(shí)時(shí)協(xié)作，提高團(tuán)隊(duì)溝通效率。 兼容性強(qiáng)：支持與其他設(shè)計(jì)工具集成，可導(dǎo)入多種文件格式，包括、、、等常用設(shè)計(jì)軟件的文件。 安全可靠：采用先進(jìn)的加密技術(shù)，保障用戶數(shù)據(jù)和隱私安全。（協(xié)作平臺(tái)）

它是一個(gè)專門為設(shè)計(jì)師和開發(fā)人員設(shè)計(jì)的協(xié)作平臺(tái)，可以幫助團(tuán)隊(duì)更有效地管理和溝通設(shè)計(jì)規(guī)范和代碼。

除了切割和標(biāo)記外，主要功能還包括：

自動(dòng)標(biāo)注：可自動(dòng)從設(shè)計(jì)圖中提取標(biāo)注信息，包括顏色、字體、排版等，并提供詳細(xì)的文檔和注釋，方便開發(fā)者閱讀理解。 響應(yīng)式設(shè)計(jì)：支持多種設(shè)備和屏幕尺寸，可幫助開發(fā)者保證設(shè)計(jì)在各種設(shè)備上的顯示效果。 版本控制：支持版本控制，可記錄設(shè)計(jì)規(guī)范的每一次修改，并提供回滾功能，避免出錯(cuò)。 集成：可與、、Xcode等多種設(shè)計(jì)工具和開發(fā)工具集成，方便團(tuán)隊(duì)成員協(xié)作。 標(biāo)注和注釋：支持添加標(biāo)注和注釋，方便團(tuán)隊(duì)成員溝通、討論設(shè)計(jì)問題。 協(xié)作（協(xié)作平臺(tái)）

是一項(xiàng)基于云端的服務(wù)，旨在為產(chǎn)品設(shè)計(jì)師、開發(fā)人員和團(tuán)隊(duì)提供全面、高效的產(chǎn)品設(shè)計(jì)協(xié)作工具。

主要功能包括：

實(shí)時(shí)協(xié)作：團(tuán)隊(duì)成員可在同一文檔中同時(shí)工作，實(shí)時(shí)更新設(shè)計(jì)稿，避免版本混亂、溝通不暢等問題。 智能+手動(dòng)標(biāo)注： 可自動(dòng)從設(shè)計(jì)稿中提取標(biāo)注信息，結(jié)合設(shè)計(jì)說明功能，為開發(fā)者提供詳細(xì)的設(shè)計(jì)標(biāo)注信息； 設(shè)計(jì)規(guī)范管理： 支持上傳設(shè)計(jì)規(guī)范、關(guān)聯(lián)變量和組件代碼，開發(fā)者可直接在設(shè)計(jì)稿上獲取規(guī)范信息； 全視圖畫板： 提供全視圖畫板功能，方便產(chǎn)品經(jīng)理與設(shè)計(jì)師溝通產(chǎn)品需求、展示設(shè)計(jì)效果。 多樣標(biāo)注： 支持添加多種標(biāo)注樣式，方便團(tuán)隊(duì)成員溝通討論設(shè)計(jì)問題。 快速交互原型： 支持快速交互原型，可幫助產(chǎn)品經(jīng)理、設(shè)計(jì)師快速構(gòu)建產(chǎn)品原型，進(jìn)行用戶測試并收集反饋。 團(tuán)隊(duì)管理： 提供團(tuán)隊(duì)管理功能，可創(chuàng)建多個(gè)項(xiàng)目、對(duì)團(tuán)隊(duì)成員進(jìn)行分組、設(shè)置不同權(quán)限，管理團(tuán)隊(duì)信息和任務(wù)。 Figma（設(shè)計(jì)工具）

Figma 是一款云端協(xié)作矢量圖形編輯器，支持多人實(shí)時(shí)協(xié)作，可用于設(shè)計(jì)網(wǎng)頁和應(yīng)用界面，是目前最流行的在線協(xié)作 UI 設(shè)計(jì)工具之一。

Figma 的主要優(yōu)點(diǎn)包括：

實(shí)時(shí)協(xié)作：多個(gè)團(tuán)隊(duì)成員可以同時(shí)編輯同一個(gè)設(shè)計(jì)文件，實(shí)現(xiàn)實(shí)時(shí)協(xié)作。 豐富的功能和工具：Figma 提供了豐富的設(shè)計(jì)工具和功能，如遮罩、羽化、傾斜、曲線、布爾運(yùn)算等，滿足各種設(shè)計(jì)需求。 響應(yīng)式設(shè)計(jì)：Figma 支持響應(yīng)式設(shè)計(jì)，可以輕松創(chuàng)建適應(yīng)不同設(shè)備和屏幕尺寸的設(shè)計(jì)。 自動(dòng)保存和版本控制：Figma 自動(dòng)保存設(shè)計(jì)文件，避免因意外斷電或錯(cuò)誤操作導(dǎo)致數(shù)據(jù)丟失。它還支持版本控制，因此您可以查看和回滾到以前的版本。 社區(qū)和資源共享：Figma 擁有龐大的社區(qū)，用戶可以在其中分享自己的設(shè)計(jì)文件，也可以從其他人的設(shè)計(jì)中獲取靈感和資源。 DT（設(shè)計(jì)工具）

DT是推出的一款網(wǎng)頁設(shè)計(jì)工具，旨在為中國設(shè)計(jì)師提供快捷、高效的設(shè)計(jì)環(huán)境。

DT主要功能包括：

高效設(shè)計(jì)： DT提供了豐富的設(shè)計(jì)工具，包括布爾運(yùn)算、貝塞爾曲線、路徑合并、輪廓繪制、剪刀等，還有高斯模糊、背景模糊設(shè)置，可以幫助設(shè)計(jì)師快速實(shí)現(xiàn)設(shè)計(jì)靈感。 所見即所得： DT支持將顏色、文本樣式、圖層樣式等保存為資源，并可重復(fù)添加到組件資源中，方便設(shè)計(jì)師管理和復(fù)用設(shè)計(jì)資源，提高設(shè)計(jì)效率。 原子設(shè)計(jì)： DT支持原子設(shè)計(jì)，修改顏色A或者圓角會(huì)影響所有引用顏色A和圓角的組件的樣式。 實(shí)時(shí)協(xié)作： DT支持多人實(shí)時(shí)編輯，設(shè)計(jì)師可以與其他團(tuán)隊(duì)成員實(shí)時(shí)討論、評(píng)論，實(shí)現(xiàn)無縫協(xié)作。 便捷功能： DT還提供了一些實(shí)用便捷的小功能，比如旋轉(zhuǎn)副本、智能分布、等比例縮放等，可以幫助設(shè)計(jì)師更高效地設(shè)計(jì)。 零成本遷移： DT獨(dú)家支持組件級(jí)智能排版功能，可完美兼容，并支持自動(dòng)排版、自動(dòng)換行功能；可完美兼容Figma，官方還支持直接導(dǎo)入、figma文件；需要切哪些圖層？

不管是手動(dòng)還是自動(dòng)切割，設(shè)計(jì)師都需要確定需要切割哪些層，這樣才能保證設(shè)計(jì)稿的最終效果。很多開發(fā)人員對(duì)設(shè)計(jì)軟件的使用不是很熟悉，所以不能直接讓開發(fā)人員在設(shè)計(jì)軟件里切割，最好做好相關(guān)的切割標(biāo)記。

設(shè)計(jì)師可以參考以下思路來確定哪些層需要切割：

通過判斷設(shè)計(jì)稿上的元素是否可以用代碼實(shí)現(xiàn)來決定是否需要對(duì)圖片進(jìn)行裁切，如果效果無法用代碼實(shí)現(xiàn)，就必須進(jìn)行裁切。但這不是唯一標(biāo)準(zhǔn)，有時(shí)候?yàn)榱颂岣唛_發(fā)效率，降低開發(fā)成本，一些難以實(shí)現(xiàn)的元素也可以進(jìn)行裁切。舉幾個(gè)例子就容易理解了sketch怎么合并圖層，比如：圖片、動(dòng)畫圖片、多色非線性漸變形狀填充、圖標(biāo)等，這些元素都是無法實(shí)現(xiàn)的或者實(shí)現(xiàn)成本很高的元素，需要進(jìn)行裁切。

還有一些占位圖是不需要裁剪的，比如用戶頭像，用戶上傳的圖片等，這些素材只是在設(shè)計(jì)稿中作為占位符sketch怎么合并圖層，開發(fā)者不會(huì)用到這些素材，而是直接使用用戶上傳的圖片。

總之要把握一個(gè)原則：開發(fā)實(shí)現(xiàn)不了就截圖，判斷不了就咨詢開發(fā)；

總結(jié)

本文主要介紹UI設(shè)計(jì)中切圖的相關(guān)知識(shí)與規(guī)范，包括切圖的概念、目的、規(guī)范、流程、工具等。切圖是UI設(shè)計(jì)中的一個(gè)重要步驟，它將無法直接用代碼實(shí)現(xiàn)的設(shè)計(jì)元素分解成不同的圖形元素，以便在開發(fā)過程中被編程語言識(shí)別和應(yīng)用。

圖片裁剪不僅包括圖片元素的裁剪，還包括不同圖元的組合、命名，以及圖元的鏈接、注釋等。圖片裁剪的規(guī)范包括格式、大小、命名等。掌握相關(guān)知識(shí)可以保證開發(fā)最終的還原。具備圖片裁剪功能的工具有， ， DT等。

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