1、切圖：
眾所周知，智能手機(jī)的屏幕大小都為雙數(shù)值，因?yàn)?px是智能手機(jī)能夠識別的最小單位，換句話就是1px不能在智能手機(jī)中被分為兩份。所以如果是單數(shù)切圖的話，手機(jī)系統(tǒng)就會自動拉伸切圖，從而導(dǎo)致切圖元素邊緣模糊，進(jìn)而造成開發(fā)出來的APP界面效果與原設(shè)計(jì)效果差距甚遠(yuǎn)。
2、圖標(biāo)切圖輸出應(yīng)根據(jù)標(biāo)準(zhǔn)適配：
在開發(fā)中由于各機(jī)型的屏幕分辨率不同，需要針對一些大屏機(jī)型進(jìn)行適配。為了適配大分辨率手機(jī)（例如iPhone 7 plus）圖標(biāo)在切圖的時候需要輸出@2X和@3X的切圖，其中@2X的切圖可以滿足雙平臺大部分機(jī)型的適配要求，@3X是用來適配iPhone手機(jī)的各種plus版本的手機(jī)
3、盡量降低圖片的大小
在切圖資源輸出中圖標(biāo)切圖輸出是很重要的部分。比如新手引導(dǎo)頁，啟動頁，默認(rèn)頁，廣告圖等，圖片切圖一般情況下文件大小都是相對較大，不利于用戶，在使用APP過程中加載頁面
圖片壓縮網(wǎng)：http://tinypng.org/
4、可點(diǎn)擊部件應(yīng)當(dāng)注意其點(diǎn)擊區(qū)域不小于44px
44px的點(diǎn)擊區(qū)域數(shù)值是iPhone 3（320*480px）普通顯示屏下制出來的，換算成物理尺寸后大致是在7~9mm之間
iphone 3（44*44px） ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
iphnoe 4以上（88*88px）
5.可點(diǎn)擊部件要把相關(guān)狀態(tài)都切圖輸出，比如正常狀態(tài)，點(diǎn)擊狀態(tài)，不可點(diǎn)擊狀態(tài)
在切圖過程中不僅要輸出正常狀態(tài)的切圖，更要注意不要遺漏其他狀態(tài)的切圖。這個也是設(shè)計(jì)師經(jīng)常會出現(xiàn)的失誤，比如在按鈕切圖的過程中可能會忽略點(diǎn)擊切圖的狀態(tài)。所以設(shè)計(jì)師在做設(shè)計(jì)圖時最好盡量把頁面出現(xiàn)的各種狀態(tài)展示出來，避免后期切圖的時候出現(xiàn)遺漏。
6、iOS平臺規(guī)則：
新建750*1334，分辨率72像素/英寸。中文用蘋方黑，英文用San Francisco，如果安不上可以用Helvetica代替。750*1334尺寸的換算關(guān)系1pt=2px，也就是說程序員拿到我們的px單位的標(biāo)注圖，自己除以2就是pt。
記住4px的倍數(shù)比較好。（24px，32px，48px等）以偶數(shù)為單位，不清楚的可以截圖量取大公司的APP界面作為參考。
750*1334px 設(shè)計(jì)稿尺寸：
狀態(tài)欄高：40px
導(dǎo)航欄高：88px
標(biāo)簽欄高：98px?
7、iOS平臺尺寸
8、安卓平臺規(guī)范
如果想一稿適配iOS，那就新建720*1280，分辨率72像素/英寸
記住要是偶數(shù)，最小字號20px,中文用NOTO/思源黑體（是一個字體，叫法不同而已），英文用Roboto
720*1280 設(shè)計(jì)稿尺寸：
狀態(tài)欄高：50px
導(dǎo)航欄高：96px
標(biāo)簽欄高：96px
9、安卓尺寸
10、啟動圖標(biāo)的切法
APP的桌面圖標(biāo)會被運(yùn)用在很多不同的地方展示，比如手機(jī)桌面，App Store，手機(jī)的設(shè)置列表。所以APP桌面圖標(biāo)需要很多個不同尺寸的切圖輸出，兩個平臺對相應(yīng)桌面圖標(biāo)設(shè)計(jì)輸出尺寸也不盡相同。在輸出的時候要把雙平臺的這些尺寸全部輸出切圖，桌面圖標(biāo)切圖只需要提供直角的圖標(biāo)切圖即可。手機(jī)系統(tǒng)會自動生成圓角效果。
11、啟動頁一類的圖片不需要切圖，或只需切有交互的一部分就可以了
12、正常的切圖方式（PS中）
（1）切片工具
（2）點(diǎn)擊圖標(biāo)——快速導(dǎo)出PNG——（要求圖片一定要是偶數(shù)，若不是導(dǎo)出為畫板可修改）
（3）給圖標(biāo)加個“.png”的后綴，選擇文件——生成——圖像資源
切圖工具：cutterman
13、切圖步驟：
（1）先聯(lián)系程序（了解明明習(xí)慣及需求）
（2）建立熱區(qū)，方便以后標(biāo)注（可有可無）
（3）若部件相互疊在一起需要單獨(dú)切
（4）圖標(biāo)是否有多重狀態(tài)（未點(diǎn)擊，可點(diǎn)擊，不可點(diǎn)擊）
14、點(diǎn)九切圖（安卓平臺）
安卓平臺的應(yīng)用軟件開發(fā)包的一種特殊的圖片形式，文件擴(kuò)展名為".9.png"
切圖：所有程序?qū)崿F(xiàn)不了的icon，文字，一些部件，需要切圖輸出。系統(tǒng)文字不用切，APP用的是特殊文字，文字包需要發(fā)送，文字如果變形處理過，需要切圖。
點(diǎn)九切圖介紹：剪切（上下左右留有一像素）——新建一層，鉛筆工具（#000，系統(tǒng)只識別這個顏色）——中間留兩個像素+左右弧度10px+描邊1px（則按鈕寬度22px）——鉛筆（#000）標(biāo)出中點(diǎn)兩個像素，高標(biāo)出出弧度外的區(qū)域——則鉛筆標(biāo)注出的寬高重疊的位置可無限延伸——打文字（鉛筆可在右側(cè)及下方標(biāo)注出文字所寫范圍）
相當(dāng)于把一張圖片分為9個部分（九宮格），分為四個角，四條邊，和中間可以無限延伸的區(qū)域
四個黑點(diǎn)的含義：
上方黑點(diǎn)：標(biāo)識可以左右無限延伸
左邊黑點(diǎn)：左邊選擇的行可以無限延伸
下方黑點(diǎn)：文字的輸入位置，為了保持下面不變形
右邊黑點(diǎn)：文字輸入的高，保持右邊不變形
15、總結(jié)切圖注意事項(xiàng)：
（1）所有的切圖必須是偶數(shù)
（2）所有部件，包括效果（陰影，發(fā)光）確保輸出整體尺寸為偶數(shù)
（3）所有字體也是偶數(shù)單位
（4）所有的變形字體把它當(dāng)成icon來切
（5）如果有背景，盡量用平鋪的背景圖案來設(shè)計(jì)（減少程序體積）
（6）切圖輸出格式：png-24
（7）會根據(jù)內(nèi)容更改的圖片，切一個給開發(fā)區(qū)測試（例如：專輯封面，用戶頭像）
（8）重復(fù)的東西只切一個
切圖軟件：Assistor PS
16、標(biāo)注
（1）將同類信息放在一起，整理排列，讓人一目了然
（2）不要重復(fù)標(biāo)注
（3）標(biāo)注和圖標(biāo)本身預(yù)留一些空間
17、頁面內(nèi)容過多，可以選擇兩屏，三屏
（1）橫向布局：元素左右的外間距，內(nèi)間距，橫向欄的高
（2）縱向布局：元素上下間距和高度
18、適配：
安卓：720*1280 ? ? 1080*1920
iOS：750*1334 ? ?1242*2208
19、設(shè)計(jì)師需要準(zhǔn)備：
切片三套（@1X，@2X，@3X）
@2X：安卓——720*1280 ? ? iOS：750*2208
@3X：安卓——1080*1920 ? ? iOS：1242*2208
20、iOS適配到安卓（720*1280——750*1334）
（1）把狀態(tài)欄改為50px
（2）列表，序列類圖標(biāo)，保持左邊不變，右邊向左邊縮進(jìn)30px（750——720）
（3）圖片1:1縮放
（4）Tab往上提
iPhone 6適配到iPhone 6 Plus，設(shè)計(jì)圖*1.5倍
21、三大應(yīng)用類別
任何平臺都可以分為原生應(yīng)用，web應(yīng)用和混合應(yīng)用
（1）原生應(yīng)用（Native APP框架）：
一種基于智能移動設(shè)備本地操作系統(tǒng)（如iOS，Android，WP操作系統(tǒng)），并使用對應(yīng)系統(tǒng)所適用的程序語言編寫運(yùn)行的第三方應(yīng)用程序，用于它直接與操作系統(tǒng)對接，代碼和界面都是針對所運(yùn)行的平臺開發(fā)和設(shè)計(jì)的，能很好地發(fā)揮出設(shè)備的性能，所以交互體驗(yàn)會更流暢。
（2）web應(yīng)用（web APP框架）：
一種采用HTML語言編寫的，存在于智能移動設(shè)備瀏覽器中的應(yīng)用程序，不需要下載安裝。可以說是觸屏版的網(wǎng)頁應(yīng)用，由于它不依賴于操作系統(tǒng)，因此開發(fā)了一款 webAPP 后，基本能應(yīng)用于各種系統(tǒng)平臺。
（3）混合應(yīng)用（Hybrid APP框架）：（例如：淘寶）
一種用NatIve技術(shù)來搭建APP的外殼，殼里的內(nèi)容由web技術(shù)來提供的移動應(yīng)用，間距"Native App"良好交互體驗(yàn)的優(yōu)勢和“web APP”跨平臺開發(fā)的優(yōu)勢。
22、加載方式：
對于Hybrid APP框架的頁面，由于同時存在 Native 和 web 部分，所以在加載內(nèi)容時，可以分開考慮加載方式：
（1）Native 部分：
可以根據(jù)需要把常規(guī)內(nèi)容存儲在用戶的手機(jī)上，加快加載的時間和減少重復(fù)加載相同內(nèi)容的麻煩。
（2）web部分：
web內(nèi)容區(qū)域是需要從網(wǎng)絡(luò)上加載內(nèi)容的，尤其在網(wǎng)絡(luò)條件不好時，需要設(shè)計(jì)友好的等待狀態(tài)，緩和用戶的焦慮情緒。
23、三大APP應(yīng)用框架：
（1）native APP ：需要為 iOS，Android 和 WP 系統(tǒng)各自開發(fā)一套APP，同時要維護(hù)多個版本，更新需要安裝資源可以存在本地，支持離線（開發(fā)耗時最長，最費(fèi)人力，但最穩(wěn)定）
（2）web APP（相當(dāng)于打開一個網(wǎng)頁：偏瀏覽為主）
新聞類，視頻類
只需要開發(fā)一套APP就可以運(yùn)用到不同的平臺上，只需要維護(hù)最新的版本，依賴網(wǎng)絡(luò)資源存在服務(wù)器上，更新無需下載，（開發(fā)耗時最少，容易出問題，耗資最少）
（3）Hybrid APP ：
既要偏瀏覽器，又有較大操作互動（例如：聊天，購物類APP）
native的部分由iOS和Android人員開發(fā)。
資源存在本地和服務(wù)器
大部分需要依賴網(wǎng)絡(luò)，算是中等投入
