切圖外包過程揭秘

時間：2023-04-18 01:14:02 | 來源：網(wǎng)站運營

時間：2023-04-18 01:14:02 來源：網(wǎng)站運營

切圖外包過程揭秘：一個產(chǎn)品從構(gòu)思到落地，需要以下環(huán)節(jié)：

發(fā)現(xiàn)商機 - 市場調(diào)研 - 頭腦風暴 - 產(chǎn)品策劃/功能設(shè)計 - 原型繪制 - 交互設(shè)計 - 項目立項 - 流向圖繪制 - UI設(shè)計 - 切圖標注 - 技術(shù)研發(fā) - 產(chǎn)品測試 - 項目上線

切圖作為連接設(shè)計與技術(shù)兩者的工作模塊，缺其不可。合格的、嚴謹?shù)那袌D可以大大減少技術(shù)人員開發(fā)返工率，減少技術(shù)人員的開發(fā)工期，提升開發(fā)流暢度，從而減少項目人力成本。




### 一、切圖介紹

切圖是指將設(shè)計稿切成便于制作開發(fā)的圖片素材，供給工程師們在產(chǎn)品開發(fā)中使用，最終開發(fā)出有利于交互，擁有良好視覺感的產(chǎn)品。

互聯(lián)網(wǎng)企業(yè)基本執(zhí)行團隊由產(chǎn)品部門、設(shè)計部門、技術(shù)部門（APP組、Web組、java組）組成，與非互聯(lián)網(wǎng)企業(yè)團隊存在著部分相同的執(zhí)行人員，因此非互聯(lián)網(wǎng)企業(yè)在開發(fā)產(chǎn)品時需要將一部分工作外包出去，切圖便是其中一項工作。




### 二、切圖前期準備

- 準備好PSD源文件

- 文件最好按頁面為單位，一個頁面分成一個psd，或者一個頁面一個組；刪除隱藏、廢棄的圖層。

- 頁面命名（關(guān)鍵），一個常規(guī)產(chǎn)品均60頁+，設(shè)計師們需要根據(jù)頁面命名設(shè)置切圖命名，頁面命名可以防止設(shè)計師漏切頁面，也可以提高工程師們在開發(fā)中使用切圖查缺補漏的效率。




### 三、切圖需要用到的工具

- 設(shè)計軟件 Photoshop——俗稱“PS”，設(shè)計師用來繪制產(chǎn)品設(shè)計稿用到的圖像處理軟件

- 切圖插件 Cutterman—— Photoshop軟件里的切圖插件，可在 Cutterman官網(wǎng)上下載安裝。




### 四、設(shè)計稿尺寸對切圖的影響

切圖師需要在正確的設(shè)計稿尺寸下進行切圖，切圖素材才能正常供給開發(fā)人員使用。否則產(chǎn)品開發(fā)落地后會出現(xiàn)圖標變形，像素低下的情況。




### 五、手機端常用的幾種設(shè)計尺寸：

APP-iOS端 750x1334px 640x1136px

APP-Android端 720x1080px 640x960px

- iOS：一般采用750x1334的來設(shè)計，切圖直接適配750x1334 分辨率的機型，并向上向下適配主流分辨率（@2x/@3x）

- Android：一般采用720 x 1280來設(shè)計，切圖直接適配720 x 1280分辨率的機型，并向上向下適配主流分辨率（xhdpi）




### 六、切圖格式與大小

格式：PNG，

內(nèi)存：大素材或者圖片進行壓縮，常用的工具有ppduck，業(yè)內(nèi)較優(yōu)秀圖片壓縮工具，壓縮出來既保持了清晰度又減小的K值。




### 七 切圖命名

- 模塊_類別_功能_狀態(tài)@2x.png

- 舉例：mail_icon_search_pressed@2x.png（對應(yīng)的中文為：郵件_圖標_搜索_默認@2x.png）

### 八 打包交付

有了以上7個步驟的切圖后，剩下就是與項目一起查缺補漏，整合出完整的切圖文件夾，最好打包完成。




切圖雖然是產(chǎn)品落地中非核心環(huán)節(jié)，但它卻肩負著設(shè)計稿順利交棒到技術(shù)生產(chǎn)線的使命，已經(jīng)成為UI設(shè)計師必懂的知識之一，且要求設(shè)計師有著細膩、嚴謹?shù)膽B(tài)度對待這份工作。杭州蘆葦信息科技有限公司成立于2015年，是一家綜合性軟件與信息服務(wù)企業(yè)。我們以專業(yè)，可信賴為服務(wù)理念，提供從咨詢、解決方案、外包服務(wù)到IT人才培養(yǎng)的“端到端”軟件及信息服務(wù)，業(yè)務(wù)已覆蓋地產(chǎn)、快消、高科技、金融與銀行、電信、公共服務(wù)等多個領(lǐng)域！