2022-5-5 博博
《一款A(yù)PP設(shè)計的從0到1》這是一篇系列文章干貨，上次U妹講的是關(guān)于APP項目立項和預(yù)估時間篇，今天U妹來說一下，APP界面設(shè)計和iPad界面設(shè)計規(guī)范。
往期回顧：
《一款A(yù)PP設(shè)計的從0到1之：項目立項篇》
《一款A(yù)PP設(shè)計的從0到1之：項目預(yù)估時間篇》
這次U妹接著上次的茬繼續(xù)，繼續(xù)之前先來看看整個目錄（滿滿的干貨）
U妹列了一個小小的目錄：
一、項目立項
二、項目預(yù)估時間
三、界面設(shè)計
四、切圖標(biāo)注
五、視覺還原
六、上線準(zhǔn)備
界面設(shè)計篇
我是一名UI設(shè)計師，所以U妹這里說的都是從設(shè)計師的角度去闡述一款A(yù)PP從無到有的一個過程中，設(shè)計師應(yīng)該干的事。
目前在行業(yè)里，關(guān)于APP界面設(shè)計規(guī)范也是層次不齊，很多都還停留在6的設(shè)備和ios 9的系統(tǒng)之上，而現(xiàn)在最新的是iphone 7和iOS 10了（更新?lián)Q代真的很快），我這里說的是最新的iOS 界面設(shè)計規(guī)范（Android設(shè)計規(guī)范，我們下次見）
一、關(guān)于設(shè)計工具
俗話說：工欲善其事必先利其器，好的工具可以讓我們的工作效率更高，做界面設(shè)計我們用的最多的就是PS和AI了，如果你是Mac用戶，可以嘗試一下sketch，軟件的版本當(dāng)然是推薦高版本，因為功能更強大，作圖的速度也就更快。
我個人剛接觸ps是從8.0開始，8.0 - CS4 - CS 5 - CS 6 - CC - CC 2014 - CC 2015，一直到現(xiàn)在的最新的CC 2017，深刻體會，新的版本更好用。也可以根據(jù)個人習(xí)慣，選擇自己順手的工具就好。
二、設(shè)計稿尺寸
在看設(shè)計稿尺寸之前，我們先來了解一下APP界面設(shè)計構(gòu)成
界面構(gòu)成由：布局層、圖文排版層和圖標(biāo)層。
在iPhone 6還沒出的時候，都是用640x1136 px來做設(shè)計稿的，自從6的發(fā)布，所有的設(shè)計稿尺寸以750x1334 px來做設(shè)計稿尺寸
U妹再帶大家來看看，到目前為止所有iPhone的尺寸（1-3代就不用考慮了）：
iPhone界面設(shè)計規(guī)范：
iPhone 界面尺寸：
以750x1334px作為設(shè)計稿標(biāo)準(zhǔn)尺寸的原由：
1. 從中間尺寸向上和向下適配的時候界面調(diào)整的幅度最小，最方便適配。
2. 大屏幕時代依然以小尺寸作為設(shè)計尺寸，會限制設(shè)計師的設(shè)計視角。
3. 設(shè)計安卓版本時只需做最小的設(shè)計調(diào)整，提升設(shè)計效率。
所以做設(shè)計稿事請以750x1334px來做設(shè)計稿
在文檔建立參考線是一個很好的習(xí)慣，我希望大家也可以養(yǎng)成這個習(xí)慣，上下很容易設(shè)置，左右我習(xí)慣設(shè)置24 px的距離，我通過對國內(nèi)外很多APP就行了對比，總結(jié)是24 px更合理，這個是我的個人習(xí)慣，所以也不要當(dāng)做是明文規(guī)則，你設(shè)置為30 px，也是可以的。
然后就可以開始你的設(shè)計了
這里U妹再給大家略過一下iPad的設(shè)計規(guī)范：
三、圖標(biāo)設(shè)計
iPhone 圖標(biāo)尺寸：
圖標(biāo)設(shè)計請用柵格化系統(tǒng)進行設(shè)計
設(shè)計尺寸：1024x1024px，竟可能的采用黃金比例設(shè)計
四、關(guān)于設(shè)計字體
先來看一下字體的歷史演變過程：
iOS 9：英文字體為Helvetica Neue
iOS 9：中文字體由為冬青黑
↓↓↓
iOS 10：英文字體為San Francisco
iOS 10：中文字體為蘋方
關(guān)于字體大小的問題：
頂部操作欄文字大小 34-38px
標(biāo)題文字大小 28-34px
正文文字大小 26-30px
輔助性文字大小 20-24px
Tab bar文字大小 20px
文字大小只是一個范圍，這要根據(jù)設(shè)計的視覺效果來決定，不要死記硬背，但是切記，字體大小要用偶數(shù)。
關(guān)于界面設(shè)計就說到這里了，好的工作方法才能讓自己事半功倍，你覺得對自己有幫助，那可以借鑒學(xué)習(xí)我的方法，在具體工作中也要靈活應(yīng)用，有不足之處或問題也可給U妹留言，下期U妹帶你一起來看看界面切圖標(biāo)注，我們下期再見！
藍(lán)藍(lán)設(shè)計的小編 http://m.wtxcl.cn