今天25學(xué)堂跟大家分享一套非常完整的而且快速上手的APP界面設(shè)計(jì)流程。開始設(shè)計(jì)APP界面的之前，首先你的會(huì)一點(diǎn)UI設(shè)計(jì)?；蛘哒f是對PS軟件使用有一定的基礎(chǔ)。

至于你還沒有來得及去看下APP設(shè)計(jì)規(guī)范，也沒關(guān)系，通過這個(gè)系列教程，可以讓你快速的理解和操作APP界面設(shè)計(jì)。

25學(xué)堂就從從PS文檔的建立，設(shè)計(jì)稿出圖，標(biāo)注，切片資源輸出的各個(gè)方面寫出來，包括切片命名和一些切片技巧分享給大家。

第一步：PS文檔的建立。

據(jù)到今天為止，iphone手機(jī)常用的有iphone4、iphone5、iphone6和iphone6 plus系列。

25學(xué)堂跟大家講解的APP設(shè)計(jì)流程的界面尺寸是iphone6 的尺寸 【全部的APP設(shè)計(jì)尺寸】

尺寸大?。?/b>750*1334 ? ?

iphone6 ?目前是我做設(shè)計(jì)稿的設(shè)計(jì)尺寸，IPhone6的尺寸，向下可以適配4，5，向上可以適配6 plus；我記得IP6推出后，我問我的設(shè)計(jì)總監(jiān)(從業(yè)12年)應(yīng)該用什么尺寸設(shè)計(jì)，他是就用IP6的尺寸吧，好適配，切出來就是@2x了，上下都能照顧到。如下圖：

第二步：APP首頁的繪制和構(gòu)建

一個(gè)完整的APP界面包括狀態(tài)欄、導(dǎo)航欄、內(nèi)容視圖和標(biāo)簽欄。

文檔建立之初就設(shè)置好參考線是個(gè)很好的工作習(xí)慣，我希望更多的設(shè)計(jì)師可以養(yǎng)成更完美的工作習(xí)慣。

上下的參考線很容易設(shè)置，因?yàn)槭歉鶕?jù)IPhone自身系統(tǒng)設(shè)置的，左右的參考線我習(xí)慣設(shè)置為24px，也就是顯示內(nèi)容距離邊框的距離。通過對國內(nèi)國外各種APP的對比，覺得24px更適合一些，不寬不窄，這個(gè)完全是設(shè)計(jì)師個(gè)人的設(shè)計(jì)習(xí)慣，所以不要當(dāng)成什么規(guī)范，確切的說，整個(gè)屏幕你都可以隨便做，但是我們這里說的是正常頁面。

上圖當(dāng)中的首頁視圖區(qū)域是設(shè)計(jì)師自由發(fā)揮的區(qū)域。這里25學(xué)堂繪制了一個(gè)banner區(qū)域、主題導(dǎo)航區(qū)域和其他區(qū)域三個(gè)部分。

在第一屏幕有限空間里面 25學(xué)堂的老譚同學(xué)建議大家放置3到3.5個(gè)重要的欄目即可。

操作系統(tǒng)的規(guī)范課外閱讀：在ios系統(tǒng)當(dāng)中總共包含7個(gè)欄：點(diǎn)擊查看詳細(xì)的解讀

（1）狀態(tài)欄如何來繪制：

一般新手設(shè)計(jì)師要去繪制它，其實(shí)不用了。為了教大家快速上手設(shè)計(jì)APP界面。

直接可以挪用設(shè)計(jì)大神們已經(jīng)設(shè)計(jì)好的狀態(tài)欄。比如從APP設(shè)計(jì)模板當(dāng)中去獲取。

在這里，25學(xué)堂已經(jīng)分享了一個(gè)狀態(tài)欄的UI控件。從百度網(wǎng)盤下載

（2）導(dǎo)航欄的UI繪制

導(dǎo)航的布局一般分為：左邊圖標(biāo) ?——中間主體文字（字體大小34-38px）—— 右邊圖標(biāo)

如果你還沒有獨(dú)立繪制圖標(biāo)形狀的能力，可以從網(wǎng)上下載相應(yīng)的圖標(biāo)素材下來使用。

比如：25學(xué)堂圖標(biāo)素材庫??和 ?阿里巴巴矢量圖標(biāo)字體庫或者是你自己收集的那些常用APP圖標(biāo)素材庫當(dāng)中挑選出來，拖到到我們剛剛建立的APP界面PSD當(dāng)中。

從這里開始，我們就要反復(fù)多效率的使用ps里面的矩形工具。如下圖：

使用矩形工具的所有工具搭配我們收集的圖標(biāo)素材，組合成我們想要表達(dá)啊APP圖標(biāo)效果。

這里就不多講啦，各位可以去嘗試下各種圖標(biāo)風(fēng)格。

如下圖的圖標(biāo)風(fēng)格。

（3）主體視圖的UI繪制。

這塊只要你找準(zhǔn)一個(gè)跟你需要繪制的同行或類似的APP來臨摹即可。比如下面的APP首頁設(shè)計(jì)。很簡單的吧！ 就是幾個(gè)圖標(biāo)和一個(gè)背景圖。 作為一名APP設(shè)計(jì)新手，你可以完成臨摹別人設(shè)計(jì)好的APP效果圖。

當(dāng)然你可以先從 繪制首頁主體框架之后，再去繪制里面的細(xì)節(jié)模塊。

你可以 ? 從整理布局到分模塊設(shè)計(jì)的設(shè)計(jì)理念進(jìn)行繪制。

一般來說，如果前期交互原型和產(chǎn)品風(fēng)格確定了，一天可以出八到九個(gè)頁面是沒有問題的，一個(gè)項(xiàng)目如果50多個(gè)界面，大概一周就可以完成。 至于臨摹慢的問題，APP設(shè)計(jì)其實(shí)有規(guī)范，包括不同模塊的字號，大小。

速度跟不上，一是規(guī)范不熟，二是做的少，臨摹APP其實(shí)沒必要去分毫不差，重點(diǎn)在視覺效果的協(xié)調(diào)，即使是已經(jīng)上線的APP,它的設(shè)計(jì)本身也可能存在問題，所以臨摹要靈活！

第四部分：就是繪制標(biāo)簽欄的UI。

一般情況下，APP標(biāo)簽欄最多放置4-5個(gè)菜單欄目。

標(biāo)簽欄的UI組成也很簡單，先等分劃分區(qū)域，每塊區(qū)域是圖標(biāo)+文字的組合。

最后，25學(xué)堂奉上一款APP設(shè)計(jì)視頻教程。對于UI設(shè)計(jì)不是很熟練的小白可以照著視頻的步驟開始設(shè)計(jì)吧！