UI 設(shè)計(jì)師從零開(kāi)始做一個(gè)App 要經(jīng)歷哪些流程？這個(gè)系列的文章會(huì)為新手一一講解。本篇會(huì)為你講解界面設(shè)計(jì)中基礎(chǔ)的知識(shí)點(diǎn)（設(shè)計(jì)稿尺寸、圖標(biāo)/字體設(shè)計(jì)等），實(shí)用高效，新手來(lái)收。

先來(lái)看看整個(gè)目錄：

• 項(xiàng)目立項(xiàng)
• 項(xiàng)目預(yù)估時(shí)間
• 界面設(shè)計(jì)
• 切圖標(biāo)注
• 視覺(jué)還原
• 上線(xiàn)準(zhǔn)備

上期回顧：《從零開(kāi)始做APP 系列之項(xiàng)目立項(xiàng)+預(yù)估時(shí)間篇》

界面設(shè)計(jì)篇

目前在行業(yè)里，關(guān)于APP界面設(shè)計(jì)規(guī)范也是層次不齊，很多都還停留在6的設(shè)備和iOS 9的系統(tǒng)之上，而現(xiàn)在最新的是iPhone 7和iOS 10了（更新?lián)Q代真的很快），我這里說(shuō)的是最新的iOS 界面設(shè)計(jì)規(guī)范（Android設(shè)計(jì)規(guī)范，我們下次見(jiàn)）

一. 關(guān)于設(shè)計(jì)工具

俗話(huà)說(shuō)：工欲善其事必先利其器，好的工具可以讓我們的工作效率更高，做界面設(shè)計(jì)我們用的最多的就是PS和AI了，如果你是Mac用戶(hù)，可以嘗試一下Sketch，軟件的版本當(dāng)然是推薦高版本，因?yàn)楣δ芨鼜?qiáng)大，作圖的速度也就更快。

我個(gè)人剛接觸PS是從8.0開(kāi)始，8.0 - CS4 - CS 5 - CS 6 - CC - CC 2014 - CC 2015，一直到現(xiàn)在的最新的CC 2017，深刻體會(huì)，新的版本更好用。也可以根據(jù)個(gè)人習(xí)慣，選擇自己順手的工具就好。

二. 設(shè)計(jì)稿尺寸

在看設(shè)計(jì)稿尺寸之前，我們先來(lái)了解一下APP界面設(shè)計(jì)構(gòu)成。

界面構(gòu)成由：布局層、圖文排版層和圖標(biāo)層。

在iPhone 6還沒(méi)出的時(shí)候，都是用640x1136 px來(lái)做設(shè)計(jì)稿的，自從6的發(fā)布，所有的設(shè)計(jì)稿尺寸以750x1334 px來(lái)做設(shè)計(jì)稿尺寸。

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

iPhone界面設(shè)計(jì)規(guī)范：

iPhone 界面尺寸：

以750x1334px作為設(shè)計(jì)稿標(biāo)準(zhǔn)尺寸的原由：

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

2. 大屏幕時(shí)代依然以小尺寸作為設(shè)計(jì)尺寸，會(huì)限制設(shè)計(jì)師的設(shè)計(jì)視角。

3. 設(shè)計(jì)安卓版本時(shí)只需做最小的設(shè)計(jì)調(diào)整，提升設(shè)計(jì)效率。

所以做設(shè)計(jì)稿時(shí)請(qǐng)以750 x 1334 px來(lái)做設(shè)計(jì)稿。

在文檔建立參考線(xiàn)是一個(gè)很好的習(xí)慣，我希望大家也可以養(yǎng)成這個(gè)習(xí)慣，上下很容易設(shè)置，左右我習(xí)慣設(shè)置24 px的距離，我通過(guò)對(duì)國(guó)內(nèi)外很多APP就行了對(duì)比，總結(jié)是24 px更合理，這個(gè)是我的個(gè)人習(xí)慣，所以也不要當(dāng)做是明文規(guī)則，你設(shè)置為30 px，也是可以的。

這里再給大家略過(guò)下iPad的設(shè)計(jì)規(guī)范：

三.?圖標(biāo)設(shè)計(jì)

iPhone 圖標(biāo)尺寸：

圖標(biāo)設(shè)計(jì)請(qǐng)用柵格化系統(tǒng)進(jìn)行設(shè)計(jì)。

設(shè)計(jì)尺寸：1024 x 1024 px，盡可能的采用黃金比例設(shè)計(jì)。

四.?關(guān)于設(shè)計(jì)字體

先來(lái)看一下字體的歷史演變過(guò)程

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

關(guān)于字體大小的問(wèn)題：

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

文字大小只是一個(gè)范圍，這要根據(jù)設(shè)計(jì)的視覺(jué)效果來(lái)決定，不要死記硬背，但是切記，字體大小要用偶數(shù)。

歡迎關(guān)注作者公眾號(hào)：UI妹兒

「從零開(kāi)始設(shè)計(jì)App 之UI規(guī)范系列」

1. 《一份超實(shí)用的設(shè)計(jì)規(guī)范制定指南》
2. 《實(shí)用必收！如何建立一套UI設(shè)計(jì)規(guī)范？（附眾多神器）》
3. 《基礎(chǔ)小課堂！從零開(kāi)始教你做高保真原型圖+UI 設(shè)計(jì)規(guī)范》
4. 《UI丨歷經(jīng)實(shí)戰(zhàn)，我總結(jié)了這四個(gè)界面設(shè)計(jì)規(guī)范的經(jīng)驗(yàn)》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

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

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛(ài)好者也準(zhǔn)備了貼心的知識(shí)樹(shù)專(zhuān)欄。開(kāi)啟免費(fèi)自學(xué)新篇章，按照我們的專(zhuān)欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺(jué)效果。

設(shè)計(jì)導(dǎo)航：國(guó)內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備：http://hao.uisdc.com