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é)還原
上線準(zhǔn)備
目前在行業(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))
俗話說(shuō)：工欲善其事必先利其器，好的工具可以讓我們的工作效率更高，做界面設(shè)計(jì)我們用的最多的就是PS和AI了，如果你是Mac用戶，可以嘗試一下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ì)稿尺寸之前，我們先來(lái)了解一下APP界面設(shè)計(jì)構(gòu)成。
界面構(gòu)成由：布局層、圖文排版層和圖標(biāo)層。
在iPhone 6還沒(méi)出的時(shí)候，都是用640×1136 px來(lái)做設(shè)計(jì)稿的，自從6的發(fā)布，所有的設(shè)計(jì)稿尺寸以750×1334 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ì)稿。
在文檔建立參考線是一個(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ī)范：
iPhone 圖標(biāo)尺寸：
圖標(biāo)設(shè)計(jì)請(qǐng)用柵格化系統(tǒng)進(jìn)行設(shè)計(jì)。
設(shè)計(jì)尺寸：1024 x 1024 px，盡可能的采用黃金比例設(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ù)。
以上就是上海網(wǎng)站制作公司——海淘科技為你推出《APP界面設(shè)計(jì)零基礎(chǔ)教程》的全部?jī)?nèi)容。想看更多的內(nèi)容，可點(diǎn)擊：營(yíng)銷(xiāo)研究分析，于此同時(shí)，海淘科技還提供了網(wǎng)站建設(shè)案例，可點(diǎn)擊：化工網(wǎng)頁(yè)設(shè)計(jì)案例
