小白學(xué)習(xí)APP界面設(shè)計,從設(shè)計APP首頁開始

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

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

application_1x

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

 

第一步:PS文檔的建立。

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

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

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

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

APP畫布的建立

 

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

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

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

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

APP首頁設(shè)計稿

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

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

 

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

ios UI控件

 

 

(1)狀態(tài)欄如何來繪制:

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

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

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

 

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

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

如果你還沒有獨立繪制圖標(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里面的矩形工具。如下圖:

開始學(xué)習(xí)PS矩形工具

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

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

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

app設(shè)計

(3)主體視圖的UI繪制。

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

APP設(shè)計立體效果圖

阿里巴巴APP設(shè)計

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

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

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

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

 

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

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

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

 

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

14032141

最近APP設(shè)計群里,很多新入門的APP設(shè)計者,都在想求救APP設(shè)計大神來指導(dǎo)或者開APP設(shè)計公開課。 于是,25學(xué)堂的小編花費了一些心思,在網(wǎng)上收集了這么一套完整的APP界面設(shè)計制作視頻教程與大家分享。

繪制完成了首頁,大家一定的要把APPUI界面放到真機上面測試下。也可以邊繪制邊到真機上看下UI效果。

1、移動設(shè)備中實時預(yù)覽APP設(shè)計效果圖的2款國產(chǎn)神器

2、快速在移動終端上預(yù)覽APP界面設(shè)計效果圖的方法

確定好APP首頁風(fēng)格之后,就要另存為一個PSD版本,或者把APP首頁的所有圖層放到一個文件夾里面。

才能繼續(xù)開始下面的APP列表頁面的UI繪制。 這個時候,APP的頂部和底部是通用的。

appmei2

以上是25學(xué)堂的原創(chuàng)文章。關(guān)于APP設(shè)計的第一篇文章。下面我們繼續(xù)跟大家分享APP設(shè)計。

每天更新,
全站高品質(zhì)素材免費下載!