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