移动端界面设计之尺寸篇
畫布尺寸：
新建750×1334 ?分辨率72，像素/英寸。
?
常見的字體大小：
24px、26px、28px、30px、32px、34px，36px等等。記住是偶數(shù)的。最小字號20px。
?
字體：
中文用蘋方黑，英文用San Francisco，如果安不上也可以用Helvetica代替。
app所用的字體大禮包下載（虎哥整理的）
?
ios開發(fā)里單位是pt
750×1334尺寸的換算關(guān)系 1pt=2px，也就是說程序員拿到我們的px單位的標(biāo)注稿，自己除以2就是pt了。
?
界面里的小圖標(biāo)常見的尺寸：
24px、32px，48px等，記住4的倍數(shù)比較好。
注意圖標(biāo)的尺寸要統(tǒng)一尺寸，以眼睛觀察為主調(diào)整尺寸看上去一樣。方形的比圓形的看著要大，需要調(diào)整下。
?
界面上的間距和元素尺寸：
以偶數(shù)為單位，不清楚的可以截圖量大公司的APP界面作為參考。
750 x 1334?設(shè)計稿尺寸：
狀態(tài)欄高度：40 px
導(dǎo)航欄高度：88 px
標(biāo)簽欄高度：98 px
?
設(shè)計稿實時預(yù)覽：
安裝一個Ps Mirror可以在iphone上實時觀看效果。
?
標(biāo)注工具：
?
界面的圖標(biāo)切圖：
用Cutterman選中@2x @3x導(dǎo)出。
?
啟動圖標(biāo)：
做1024×1024尺寸，一般做方形無圓角。然后用?IconTemplate?自動切圖一套圖標(biāo)資源丟給程序員就ok了。
?
交接給程序：
最好是一個界面一個文件夾。文件夾里包括：界面效果圖，標(biāo)注文件圖，切圖資源文件包。
?
引導(dǎo)頁：
值得注意的是引導(dǎo)頁切圖需要單獨設(shè)計多套（640×1136、750×1334、1242×2208）這個可別傻乎乎的用Cutterman切幾套圖，這就尷尬了。
?
適配方法3個原則：（不清楚的在網(wǎng)站搜索適配2字）
?
測試界面：
程序?qū)崿F(xiàn)DEMO版本以后，咱們要在測試機上好好檢查下界面問題，及時跟程序溝通并更改。
?
干貨資料：
可以看看下面這幾篇文章：
?
以PS工具設(shè)計安卓界面。
畫布尺寸：
如果想一稿適配ios，那就新建720×1280 ?分辨率72，像素/英寸。
如果單獨設(shè)計安卓MD新規(guī)范的，那就新建1080×1920 ?分辨率72，像素/英寸。
?
720×1280常見的字體大小：
24px、26px、28px、30px、32px、34px，36px等等。記住是偶數(shù)的。最小字號20px。
?
字體：
中文用Noto/思源黑體（是一個字體，叫法不同而已），英文用Roboto。
app所用的字體大禮包下載（虎哥整理的）
?
單位換算
距離單位是DP
文字單位是SP
720×1280尺寸的換算關(guān)系 1dp=2px，文字1sp=2px。也就是說程序員拿到我們的px單位的標(biāo)注稿，自己除以2就是dp和sp了。
1080×1920尺寸就是1dp=3px，文字1sp=3px
?
界面里的小圖標(biāo)常見的尺寸：
24px、32px，48px等，記住4的倍數(shù)比較好。
注意圖標(biāo)的尺寸要統(tǒng)一尺寸，以眼睛觀察為主調(diào)整尺寸看上去一樣。方形的比圓形的看著要大，需要調(diào)整下。
移動端界面設(shè)計之尺寸篇（淘寶版）
?
界面上的間距和元素尺寸：
最新規(guī)范MD的做法：
8dp原則 ??柵格系統(tǒng)的最小單位是8dp，一切距離、尺寸都應(yīng)該是8dp的整數(shù)倍。
?
常見一般常用做法：
直接把ios的設(shè)計稿照搬過來，只不過狀態(tài)欄，導(dǎo)航欄，標(biāo)簽欄按照安卓的來。
720 x 1280 設(shè)計稿尺寸：
狀態(tài)欄高度：50 px
導(dǎo)航欄高度：96 px
標(biāo)簽欄高度：96 px
?
設(shè)計稿實時預(yù)覽：
安裝一個Ps Mirror可以在安卓手機上實時觀看效果。
?
標(biāo)注工具：
標(biāo)注的時候，如果是720×1280尺寸設(shè)計的，就選對應(yīng)的xhdpi，如果是1080×1920尺寸設(shè)計的，就選對應(yīng)的xxhdpi。
界面的圖標(biāo)切圖：
用Cutterman選中下面所示，根據(jù)需要選擇不同分辨率的導(dǎo)出。
?
界面中重復(fù)利用的資源切圖需要做成點9圖片：
? ?
主要是一些按鈕，單色或半透明的背景塊。圖標(biāo)不用做點9。
?
啟動圖標(biāo)：
做1024×1024尺寸，安卓對圖標(biāo)的樣式?jīng)]有要求，你可以做各種形狀都行，一般做方形無圓角的，各家手機廠商的定制系統(tǒng)會自己加圓角。
然后用?IconTemplate?自動切圖一套圖標(biāo)資源丟給程序員就ok了。
?
交接給程序：
最好是一個界面一個文件夾。文件夾里包括：界面效果圖，標(biāo)注文件圖，切圖資源文件包。
?
引導(dǎo)頁：
值得注意的是引導(dǎo)頁切圖需要單獨設(shè)計多套（480×800、720×1280、1080×1920）這個可別傻乎乎的用Cutterman切幾套圖，這就尷尬了。
?
適配方法3個原則：（不清楚的在網(wǎng)站搜索適配2字）
?
測試界面：
程序?qū)崿F(xiàn)DEMO版本以后，咱們要在測試機上好好檢查下界面問題，及時跟程序溝通并更改。
?
干貨資料：
?
可以看看下面這幾篇文章：
最后說句：“對界面上的字號，間距不清楚的，多動手去截圖，量一量優(yōu)秀APP界面，多分析找規(guī)律。”
總結(jié)
以上是生活随笔為你收集整理的移动端界面设计之尺寸篇的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： EASY UI tree如何根据部分值来
- 下一篇： 微信支付获取prepay_id以及回调地