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

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

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

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

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

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

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

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

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

 

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

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

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

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

1-1層級(jí)式之列表:

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

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

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

缺點(diǎn):用戶想要切換其他頁面必須先返回。

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

1-2層級(jí)式之抽屜式:

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

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

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

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