切圖教程，APP怎么切圖和標(biāo)注

本篇教程跟大家分享UI設(shè)計的一些知識，就是APP怎么切圖和標(biāo)注，還不懂的同學(xué)，趕緊了解一下。

首先：哪些東西要切出來？

簡單來說就是代碼不好實現(xiàn)的東西就直接切成一張圖放到軟件里面展示，例如圖片，小圖標(biāo)，和一些不好實現(xiàn)或者實現(xiàn)成本太高的效果。下面以支付寶和QQ為例。

<點(diǎn)圖片看大圖>theoat.com.cn

以上圈出來的就是需要切出來的，廣告欄的是獲取已經(jīng)做好的廣告圖所以不用切，只需要標(biāo)注出大小就行，QQ的頭像都是用戶可以自定義的，程序會直接獲取用戶設(shè)置的頭像，所以也不用切，只需要確定大小。

知道了哪些東西要切，那就很簡單了，我們知道ps里面有一個切片工具，可以做一些切圖，切切簡單的還行，遇上APP需要切幾套圖那這個小米加步槍的家伙就肯定不能讓你裝逼讓你飛了。所以我們可以選擇一些切圖神器：這里我推薦cutterman，可以去官網(wǎng)上下載，注意這個插件只能安裝到完整版的ps上，所以小伙伴們要用的話不要裝綠色版哦，具體怎么裝可以去看官網(wǎng)介紹。

以下是cutterman界面，我們看下它有三個選項卡，分別對應(yīng)的是切蘋果的，安卓的，pc的，看過上篇文章的看下這個界面就應(yīng)該知道怎么用吧，先選切那種系統(tǒng)下的，然后再選擇切哪種分辨率的。操作比較簡單，不做詳細(xì)講解，不懂的可以去看我錄的切圖適配視頻教程。

選擇好保存的文件夾，然后選中圖層點(diǎn)擊導(dǎo)出選中圖層就會自動切出你想要的圖了，簡單到?jīng)]朋友。

這里注意一下：使用cutterman切安卓圖的時候會生成十個文件夾，有drawable和mipmap兩種類型的文件夾，這是因為安卓開發(fā)軟件Android Studio里面有了mipmap 目錄和drawable 目錄，其實兩者都是一樣的，有的安卓開發(fā)采用了mipmap的目錄結(jié)構(gòu)，然后對應(yīng)的設(shè)計師找Cut君提需求，說每次都要把drawable目錄名字改成mipmap，很煩人，希望能生成mipmap的目錄，于是現(xiàn)在輸出安卓的時候，會同時生成drawable和mipmap兩個目錄，里面的圖片是一樣一樣滴，大家根據(jù)自己的研發(fā)需要，給對應(yīng)的目錄即可，目前用的最多的還是drawable。

當(dāng)然切圖的插件也不只這個，網(wǎng)上有很多，裝不好ps完整版的人也可以去找找其他支持綠色版的切圖插件。

關(guān)于切圖命名：

cutterman在切圖的時候是直接根據(jù)圖層名命名的，可以先把圖層命好名再切，在軟件開發(fā)里面圖片名一般都是用英文的，因此切圖應(yīng)該用英文命名。至于選擇哪種英文命名法，般程序里面有三種命名方法，匈牙利命名法， 駱駝命名法，帕斯卡命名法，團(tuán)隊開發(fā)一般會選擇一種統(tǒng)一下，沒有寫過程序的孩子對這些是沒概念的，所以這些東西最好先和程序員溝通一下使用哪種。如果程序員哥哥心地善良，說不定你直接給他中文的他也會答應(yīng)滴。不過因為APP切圖要切多套，讓程序員每套圖去命一次名也麻煩，因此設(shè)計師切圖時最好先命好，以后要改個圖也方便。

關(guān)于標(biāo)注：

為了更好的還原設(shè)計效果，設(shè)計師除了要給切圖外還要給一套標(biāo)注圖。標(biāo)注方面網(wǎng)上也有很多插件，比如cutterman的作者也做了一款叫Parker，不過要花錢買，也有很多免費(fèi)的，如馬克鰻，像素大廚等，選擇一種自己用的習(xí)慣的即可。

至于哪些要標(biāo)注，這個沒什么嚴(yán)格的規(guī)定，你盡量標(biāo)詳細(xì)點(diǎn)讓程序員好理解就行，不要老想著是不是不專業(yè)，這些工作只是為了降低溝通成本并使設(shè)計效果更好的還原，不需要那么多套路。標(biāo)注圖是給程序員看的，所以如果不清楚要及時跟程序溝通。

關(guān)于標(biāo)注單位是用px還是dp/pt，這個也問題不大，問下程序要哪種你就給他標(biāo)哪種，只要搞清楚設(shè)計稿在哪個ppi等級下做的就行，例如你如果用750*1334的設(shè)計，那么你要用pt/dp標(biāo)注直接像素除以2即是，用720*1280設(shè)計也是一樣，不用分安卓ios也沒事，都是像素值除以2。如果是用1242x2208尺寸設(shè)計，那么就得除以3，一般以iPhone設(shè)計的情況下標(biāo)注用px即可，讓開發(fā)自己除以2換算成pt/dp也是很快的。

雖然這些東西在新手看起來有點(diǎn)專業(yè)，但是要明白，所有的這些工作都是為了把產(chǎn)品做好，即使標(biāo)注的再詳細(xì)在實際開發(fā)過程中還是會有很多問題，很多程序員看到那么多密密麻麻的數(shù)字也不一定都會去認(rèn)真看，因此有時間還是要去盯一下，不然做出來的產(chǎn)品肯定會有很多細(xì)節(jié)問題，要做好一款好的軟件產(chǎn)品，都是各方面的同事努力拼出來的。正因為如此在互聯(lián)網(wǎng)團(tuán)隊里面要多和小伙伴們溝通，多去了解別人的工作。不要以為寫個規(guī)范標(biāo)注下就完事了。

關(guān)于規(guī)范：

我們在網(wǎng)上經(jīng)常能看到很多設(shè)計師寫的這種UI設(shè)計規(guī)范，在很多公司里為了使不同的設(shè)計師統(tǒng)一視覺方向會做一套視覺規(guī)范，很多大公司都會有，國外一些公司要求尤其嚴(yán)格。但是要搞清楚這個東西主要還是給設(shè)計師看的，你要真給一個這玩意給程序員開發(fā)，他會分分鐘會給你做成渣的，以程序員的心態(tài)他才不會認(rèn)真看這堆東西。我們看到站酷等很多設(shè)計平臺上很多設(shè)計師發(fā)作品喜歡寫個這東西，其實就是為了顯得專業(yè)點(diǎn)，實際開發(fā)中用途有限，程序員還是愿意看你的詳細(xì)標(biāo)注，而標(biāo)注再詳細(xì)，你不去盯一下還是會給你做的各種粗糙，所以為了保證效果最后還是得去驗收一遍。

在團(tuán)隊合作中，如果要寫這種規(guī)范，要想清楚這些東西用途在哪，給誰看再去寫。如果在創(chuàng)業(yè)公司小團(tuán)隊里僅僅為了顯得自己專業(yè)而去花時間寫個這東西，意義就不大了。

<點(diǎn)圖片看大圖>

最后，希望大家看了文章能多去想，一個問題要想完全明白，一定要去搞清楚它的原理，我知道很多小白看完了還是會有很多東西不清楚，比如點(diǎn)9的圖怎么做，標(biāo)注要不要百分比....留點(diǎn)坑給你們自己補(bǔ)吧。