移動設(shè)計,移動應(yīng)用導(dǎo)航模式設(shè)計方法

來源:站酷 作者:Victor_J_C 學(xué)習(xí):3331人次

移動應(yīng)用的導(dǎo)航和現(xiàn)實世界中的路標或者地圖的作用很類似。它是應(yīng)用軟件的虛擬框架,對用戶具有指示標識以及識別的功能。

如何要讓用戶在使用中迅速掌握應(yīng)用的框架結(jié)構(gòu),并且獲得良好的體驗,導(dǎo)航的設(shè)計方法是十分重要的。

相信做設(shè)計師的都看過《移動應(yīng)用UI設(shè)計模式》這本書,但由于行業(yè)發(fā)展太快,里面的介紹的導(dǎo)航模式已經(jīng)發(fā)生很多變化。并且很多觀點已經(jīng)過時。

舉個例子:比如該書中介紹的“頁面輪盤式”導(dǎo)航,只能作為次級導(dǎo)航,而且說“頁面輪盤式導(dǎo)航有一定的局限性。如果頁面超過8 個,最好考慮使用列表菜單式導(dǎo)航。”

以現(xiàn)在觀點來看這些都是錯誤的。

比如:最美應(yīng)用就用頁面輪盤作為主要導(dǎo)航模式,并且頁面遠遠超過了8個。

移動設(shè)計,移動應(yīng)用導(dǎo)航模式設(shè)計方法

 

那么現(xiàn)在我們切入正題,如何來設(shè)計導(dǎo)航模式?

首先用什么導(dǎo)航模式,取決于產(chǎn)品的信息架構(gòu)及用戶的需求,APP的導(dǎo)航應(yīng)該與應(yīng)用的結(jié)構(gòu)和意圖相契合。一個好的設(shè)計,用戶是不會注意到導(dǎo)航本身的,用戶關(guān)注的是產(chǎn)品信息和功能使用。

《IOS人機界面指南》把導(dǎo)航分為3類(注:個人認為這種分類方式,最為簡潔而且有邏輯性):

移動設(shè)計,移動應(yīng)用導(dǎo)航模式設(shè)計方法

1-1層級式之列表:

最常見的導(dǎo)航模式之一,即可作為主導(dǎo)航模式(例如:IOS自帶設(shè)置;IOS端QQ郵箱),也可以作為次級導(dǎo)航模式。

列表菜單很適合用來顯示較長或擁有次級文字內(nèi)容的標題。

這種導(dǎo)航結(jié)構(gòu)清晰,逐級引導(dǎo)用戶,能夠幫助用戶快速的定位去到對應(yīng)的頁面。

缺點:用戶想要切換其他頁面必須先返回。

移動設(shè)計,移動應(yīng)用導(dǎo)航模式設(shè)計方法

1-2層級式之抽屜式:

學(xué)習(xí) · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
暫無評論,交個作業(yè)支持一下吧~

關(guān)注大神微博加入>>

網(wǎng)友求助,請回答!