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

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

首先：哪些東西要切出來(lái)？

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

<點(diǎn)圖片看大圖>m.tgudhdp.cn

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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