做一全套的APP設(shè)計(jì)，流程是：

1、界面設(shè)計(jì)：設(shè)計(jì)IOS界面；設(shè)計(jì)Android界面。

2、切圖：切IOS的2倍圖和3倍圖；切Android的hdpi,xhdpi,xxhdpi這三個(gè)尺寸的圖。

3、標(biāo)注：以px為單位標(biāo)注IOS界面的尺寸；以dp為單位標(biāo)andriod的尺寸。

----------------------------------------------------------------------

IOS端_界面設(shè)計(jì)

————————

一、界面設(shè)計(jì)：

1、【界面分類】：IOS有 iphone5/5s/5c、 iphone6\6 plus、iphone7\7 plus、iphone8\8 plus、iphoneX等分辨率。

2、【設(shè)計(jì)方法】： 以iphone8為標(biāo)準(zhǔn)進(jìn)行界面設(shè)計(jì)，讓開發(fā)進(jìn)行適配。即750px*1334px以基準(zhǔn)（72像素\英寸）。

3、【設(shè)計(jì)標(biāo)準(zhǔn)】：750*1334界面——狀態(tài)欄40px； 導(dǎo)航欄88px；標(biāo)簽欄98px；工具欄88px；文字最大34px; 最小18px；常用28px。

————————

二、切圖：（所有開發(fā)寫不出來的都得切，如icon, 默認(rèn)頭像，背景圖等）

1、【切圖尺寸】：IOS 只用切【二倍圖】和【三倍圖】。注意：有些button, 需要更改顏色，切一個(gè)“被點(diǎn)擊的狀態(tài)”（如btn-xxx-pressed@2x,btn-xxxx-pressed@3x）。

2、【切圖命名】：如btn-xxxx@2x,btn-xxx@3x(按紐); img-xxx@2x,img-xxxx@3x(圖像); bg-xxx@2x,bg-xxx@3x(背景圖)

3、【方法一】：【photoshop圖層-右鍵-導(dǎo)出為...】

 設(shè)置大小（@1x+@2x)；設(shè)置好icon的畫布尺寸（如導(dǎo)航欄上的幾個(gè)icon的畫布尺寸應(yīng)保持一致）

     

       

【方法二】：【sketch-選中icon-右下角-make exportable】

（如需切相同尺寸的icon，需建立相同尺寸的畫布，并選擇整個(gè)畫布整體導(dǎo)出）

————————

三、標(biāo)注： 

1、【標(biāo)注內(nèi)容】：顏色＼長(zhǎng)寬＼字號(hào)＼距離；

2、【標(biāo)注單位】：IOS的標(biāo)注以px為單位進(jìn)行標(biāo)注。（注意：數(shù)字最好為偶數(shù)）

3、【標(biāo)注軟件一】: 標(biāo)注神器－parker/markman，標(biāo)注前請(qǐng)?jiān)凇霸O(shè)置”里將單位改為px； 

 

【標(biāo)注軟件二（強(qiáng)烈推薦）】：zeplin軟件——無需標(biāo)注，只需將界面導(dǎo)入zeplin，開發(fā)直接訪問zeplin，即可查看所有的尺寸、間距、色值、字體、字號(hào)等。

下載地址：https://zeplin.io/，軟件圖標(biāo)和界面如下：

                                          

                           

Android設(shè)計(jì)：

————————

一、界面設(shè)計(jì)：

1、【界面分類】：Android的尺寸非常多，非常雜。總的說來，就分為這幾種模式：idpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi。

2、【設(shè)計(jì)方法】：以xhdpi為基準(zhǔn)進(jìn)行界面設(shè)計(jì)，讓開發(fā)進(jìn)行適配。即以720px*1280px為標(biāo)準(zhǔn)(72像素\英寸)。

3、【設(shè)計(jì)標(biāo)準(zhǔn)】： 720px*1280px界面——狀態(tài)欄50px, 導(dǎo)航欄96px，標(biāo)簽欄96px，工具欄96px，實(shí)體鍵96px；文字最大36px;最小18px；常用28px。

————————

二、切圖：

1、【分類】：Android 的切圖需要切三個(gè)尺寸的：hdpi, xhdpi, xxhdpi。

2、【方法一】：切圖神器－cutterman，也可以一鍵切出hdpi, xhdpi, xxhdpi三個(gè)尺寸的圖, 而且還可以切出“點(diǎn)九圖”。  

    【方法二】：photoshop、sketch、illustrator皆可直接導(dǎo)出icon。

————————

三、標(biāo)注：

1、【單位】：Android的標(biāo)注以dp為單位。（parker里, 在“設(shè)置”里將單位改為dp）

2、【標(biāo)注軟件】：同上，推薦zeplin軟件（建立文件夾時(shí)需選擇安卓版本）

----------------------------------------------------------------------

補(bǔ)充 _ 2019/4/10:

目前流行的是以【一倍圖】的分辨率來進(jìn)行設(shè)計(jì)，也就是sketch、PS、AI上給的分辨率：

iPhone 8的分辨率是750*1334，而sketch、PS、AI上iPhone 8給的分辨率是375*667.

意思是設(shè)計(jì)平臺(tái)鼓勵(lì)設(shè)計(jì)師用一倍圖來設(shè)計(jì)，一方面是因?yàn)殚_發(fā)環(huán)境是以一倍圖的環(huán)境來開發(fā)的，因此一倍圖的設(shè)計(jì)稿無需開發(fā)再進(jìn)行換算。

另一方面是icon導(dǎo)出時(shí)：@2x就是iPhone 8的尺寸、@3x就是plus的尺寸。利于icon尺寸的整數(shù)換算。

所以推薦大家用【一倍圖】的分辨率來設(shè)計(jì)。icon切圖分別導(dǎo)出2倍圖和3倍圖供開發(fā)使用。（而且sketch提供的IOS控件也是1倍圖的尺寸啊～～）

作者：Hmyu

轉(zhuǎn)載請(qǐng)注明：站酷

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( m.dzxscac.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司