今天25學(xué)堂跟大家分享一套非常完整的而且快速上手的APP界面設(shè)計流程。開始設(shè)計APP界面的之前,首先你的會一點UI設(shè)計?;蛘哒f是對PS軟件使用有一定的基礎(chǔ)。
至于你還沒有來得及去看下APP設(shè)計規(guī)范,也沒關(guān)系,通過這個系列教程,可以讓你快速的理解和操作APP界面設(shè)計。
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首頁的繪制和構(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ī)范,確切的說,整個屏幕你都可以隨便做,但是我們這里說的是正常頁面。
上圖當(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個欄:點擊查看詳細的解讀
(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里面的矩形工具。如下圖:
使用矩形工具的所有工具搭配我們收集的圖標(biāo)素材,組合成我們想要表達啊APP圖標(biāo)效果。
這里就不多講啦,各位可以去嘗試下各種圖標(biāo)風(fēng)格。
如下圖的圖標(biāo)風(fēng)格。
(3)主體視圖的UI繪制。
這塊只要你找準(zhǔn)一個跟你需要繪制的同行或類似的APP來臨摹即可。比如下面的APP首頁設(shè)計。很簡單的吧! 就是幾個圖標(biāo)和一個背景圖。 作為一名APP設(shè)計新手,你可以完成臨摹別人設(shè)計好的APP效果圖。
當(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è)計吧!
最近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的頂部和底部是通用的。
以上是25學(xué)堂的原創(chuàng)文章。關(guān)于APP設(shè)計的第一篇文章。下面我們繼續(xù)跟大家分享APP設(shè)計。
全站高品質(zhì)素材免費下載!