移動端界面設計之尺寸篇

畫布尺寸：

新建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上實時觀看效果。

 

標注工具：

1. 馬克鰻
2. PxCook 像素大廚
3. Parker標
4. 一鍵標注神器－zeplin

 

界面的圖標切圖：

用Cutterman選中@2x @3x導出。

 

啟動圖標：

做1024×1024尺寸，一般做方形無圓角。然后用 IconTemplate 自動切圖一套圖標資源丟給程序員就ok了。

 

交接給程序：

最好是一個界面一個文件夾。文件夾里包括：界面效果圖，標注文件圖，切圖資源文件包。

 

引導頁：

值得注意的是引導頁切圖需要單獨設計多套（640×1136、750×1334、1242×2208）這個可別傻乎乎的用Cutterman切幾套圖，這就尷尬了。

 

適配方法3個原則：（不清楚的在網站搜索適配2字）

1. 文字流式
2. 控件彈性
3. 圖片等比縮放

 

測試界面：

程序實現DEMO版本以后，咱們要在測試機上好好檢查下界面問題，及時跟程序溝通並更改。

 

干貨資料：

可以看看下面這幾篇文章：

1. 移動端界面設計之尺寸篇（淘寶版）
2. iPhone6 & 6 Plus 視覺設計適配說明
3. 新手福利！超全面的UI設計切圖規范
4. UI適配攻略·教程④一稿配雙平台
5. h5移動端頁面設計學習文檔
6. Dribbble 2016十大設計趨勢總結
7. 圖標設計的三個小原則
8. 新設計趨勢來臨，解讀 iOS 10 設計指南
9. 一份詳盡全面的UI設計字體與排版指南

 

以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可以在安卓手機上實時觀看效果。

 

標注工具：

1. 馬克鰻
2. PxCook 像素大廚
3. Parker標
4. 一鍵標注神器－zeplin

標注的時候，如果是720×1280尺寸設計的，就選對應的xhdpi，如果是1080×1920尺寸設計的，就選對應的xxhdpi。

界面的圖標切圖：

用Cutterman選中下面所示，根據需要選擇不同分辨率的導出。

 

界面中重復利用的資源切圖需要做成點9圖片：

   

主要是一些按鈕，單色或半透明的背景塊。圖標不用做點9。

 

啟動圖標：

做1024×1024尺寸，安卓對圖標的樣式沒有要求，你可以做各種形狀都行，一般做方形無圓角的，各家手機廠商的定制系統會自己加圓角。

然后用 IconTemplate 自動切圖一套圖標資源丟給程序員就ok了。

 

交接給程序：

最好是一個界面一個文件夾。文件夾里包括：界面效果圖，標注文件圖，切圖資源文件包。

 

引導頁：

值得注意的是引導頁切圖需要單獨設計多套（480×800、720×1280、1080×1920）這個可別傻乎乎的用Cutterman切幾套圖，這就尷尬了。

 

適配方法3個原則：（不清楚的在網站搜索適配2字）

1. 文字流式
2. 控件彈性
3. 圖片等比縮放

 

測試界面：

程序實現DEMO版本以后，咱們要在測試機上好好檢查下界面問題，及時跟程序溝通並更改。

 

干貨資料：

 

可以看看下面這幾篇文章：

1. 安卓1080P界面設計規范解讀
2. 6個技巧幫你把IOS的UI轉換成安卓！
3. Material Design 安卓5.1L （UI kit包下載！）
4. 天天喊着學UI,知道安卓和iOS的區別嗎?
5. UI設計師不可不知的安卓屏幕知識

最后說句：“對界面上的字號，間距不清楚的，多動手去截圖，量一量優秀APP界面，多分析找規律。”