UI 設計師從零開始做一個App 要經歷哪些流程？這個系列的文章會為新手一一講解。本篇會為你講解界面設計中基礎的知識點（設計稿尺寸、圖標/字體設計等），實用高效，新手來收。

先來看看整個目錄：

• 項目立項
• 項目預估時間
• 界面設計
• 切圖標注
• 視覺還原
• 上線準備

上期回顧：《從零開始做APP 系列之項目立項+預估時間篇》

界面設計篇

目前在行業里，關于APP界面設計規范也是層次不齊，很多都還停留在6的設備和iOS 9的系統之上，而現在最新的是iPhone 7和iOS 10了（更新換代真的很快），我這里說的是最新的iOS 界面設計規范（Android設計規范，我們下次見）

一. 關于設計工具

俗話說：工欲善其事必先利其器，好的工具可以讓我們的工作效率更高，做界面設計我們用的最多的就是PS和AI了，如果你是Mac用戶，可以嘗試一下Sketch，軟件的版本當然是推薦高版本，因為功能更強大，作圖的速度也就更快。

我個人剛接觸PS是從8.0開始，8.0 - CS4 - CS 5 - CS 6 - CC - CC 2014 - CC 2015，一直到現在的最新的CC 2017，深刻體會，新的版本更好用。也可以根據個人習慣，選擇自己順手的工具就好。

二. 設計稿尺寸

在看設計稿尺寸之前，我們先來了解一下APP界面設計構成。

界面構成由：布局層、圖文排版層和圖標層。

在iPhone 6還沒出的時候，都是用640x1136 px來做設計稿的，自從6的發布，所有的設計稿尺寸以750x1334 px來做設計稿尺寸。

再帶大家來看看，到目前為止所有iPhone的尺寸（1-3代就不用考慮了）：

iPhone界面設計規范：

iPhone 界面尺寸：

以750x1334px作為設計稿標準尺寸的原由：

1. 從中間尺寸向上和向下適配的時候界面調整的幅度最小，最方便適配。

2. 大屏幕時代依然以小尺寸作為設計尺寸，會限制設計師的設計視角。

3. 設計安卓版本時只需做最小的設計調整，提升設計效率。

所以做設計稿時請以750 x 1334 px來做設計稿。

在文檔建立參考線是一個很好的習慣，我希望大家也可以養成這個習慣，上下很容易設置，左右我習慣設置24 px的距離，我通過對國內外很多APP就行了對比，總結是24 px更合理，這個是我的個人習慣，所以也不要當做是明文規則，你設置為30 px，也是可以的。

這里再給大家略過下iPad的設計規范：

三.?圖標設計

iPhone 圖標尺寸：

圖標設計請用柵格化系統進行設計。

設計尺寸：1024 x 1024 px，盡可能的采用黃金比例設計。

四.?關于設計字體

先來看一下字體的歷史演變過程

• iOS 9：英文字體為Helvetica Neue
• iOS 9：中文字體由為冬青黑
• iOS 10：英文字體為San Francisco
• iOS 10：中文字體為蘋方

關于字體大小的問題：

• 頂部操作欄文字大小 34-38px
• 標題文字大小 28-34px
• 正文文字大小 26-30px
• 輔助性文字大小 20-24px
• Tab bar文字大小 20px

文字大小只是一個范圍，這要根據設計的視覺效果來決定，不要死記硬背，但是切記，字體大小要用偶數。

歡迎關注作者公眾號：UI妹兒

「從零開始設計App 之UI規范系列」

1. 《一份超實用的設計規范制定指南》
2. 《實用必收！如何建立一套UI設計規范？（附眾多神器）》
3. 《基礎小課堂！從零開始教你做高保真原型圖+UI 設計規范》
4. 《UI丨歷經實戰，我總結了這四個界面設計規范的經驗》

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備：http://hao.uisdc.com