UI新手都頭疼尺寸問題，其實並不複雜，關鍵是設計本身比較難把握。虎哥總結一個精簡版的設計流程方法。

以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×1136、750×1334、1242×2208）這個可別傻乎乎的用Cutterman切幾套圖，這就尷尬了。

 

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

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

 

測試介面：

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

 

乾貨資料：

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

      

      

1. 三分鐘搞清iPhone X 設計尺寸和適配
2. 移動端介面設計之尺寸篇（淘寶版）
3. iPhone6 & 6 Plus 視覺設計適配說明
4. 新手福利！超全面的UI設計切圖規範
5. UI適配攻略·教程④一稿配雙平臺
6. h5移動端頁面設計學習文件
7. Dribbble 2016十大設計趨勢總結
8. 圖示設計的三個小原則
9. 新設計趨勢來臨，解讀 iOS 10 設計指南
10. 一份詳盡全面的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介面，多分析找規律。”