移動端界面設計之尺寸篇（更新）

以PS工具設計IOS界面。

畫布尺寸：

新建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×113六、750×133四、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界面，多分析找規律。」

 

虎哥整理。

2016年12月10日更新。

 

轉載請註明：學UI網 » 移動端界面設計之尺寸篇（更新）