移動(dòng)設(shè)計(jì),移動(dòng)應(yīng)用導(dǎo)航模式設(shè)計(jì)方法
移動(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ì)師的都看過(guò)《移動(dòng)應(yīng)用UI設(shè)計(jì)模式》這本書,但由于行業(yè)發(fā)展太快,里面的介紹的導(dǎo)航模式已經(jīng)發(fā)生很多變化。并且很多觀點(diǎn)已經(jīng)過(guò)時(shí)。
舉個(gè)例子:比如該書中介紹的“頁(yè)面輪盤式”導(dǎo)航,只能作為次級(jí)導(dǎo)航,而且說(shuō)“頁(yè)面輪盤式導(dǎo)航有一定的局限性。如果頁(yè)面超過(guò)8 個(gè),最好考慮使用列表菜單式導(dǎo)航。”
以現(xiàn)在觀點(diǎn)來(lái)看這些都是錯(cuò)誤的。
比如:最美應(yīng)用就用頁(yè)面輪盤作為主要導(dǎo)航模式,并且頁(yè)面遠(yuǎn)遠(yuǎn)超過(guò)了8個(gè)。
那么現(xiàn)在我們切入正題,如何來(lái)設(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)為這種分類方式,最為簡(jiǎn)潔而且有邏輯性):
1-1層級(jí)式之列表:
最常見(jiàn)的導(dǎo)航模式之一,即可作為主導(dǎo)航模式(例如:IOS自帶設(shè)置;IOS端QQ郵箱),也可以作為次級(jí)導(dǎo)航模式。
列表菜單很適合用來(lái)顯示較長(zhǎng)或擁有次級(jí)文字內(nèi)容的標(biāo)題。
這種導(dǎo)航結(jié)構(gòu)清晰,逐級(jí)引導(dǎo)用戶,能夠幫助用戶快速的定位去到對(duì)應(yīng)的頁(yè)面。
缺點(diǎn):用戶想要切換其他頁(yè)面必須先返回。
1-2層級(jí)式之抽屜式:
- 相關(guān)教程
- TA的教程
- 收藏
- 返回
- ps知識(shí)
- ps基礎(chǔ)教程
- ps技巧
- Victor_J_C
- 理論教程
學(xué)習(xí) · 提示
相關(guān)教程
推薦教程
- 移動(dòng)設(shè)計(jì),移動(dòng)應(yīng)用導(dǎo)航模式設(shè)計(jì)方法
- Photoshop初級(jí)教程-命令的技巧
- 調(diào)色知識(shí),簡(jiǎn)單實(shí)用的調(diào)色原理
- 用戶體驗(yàn),如何讓用戶心動(dòng)?
- 設(shè)計(jì)界面最常用最舒服的12種顏色(含色
- 圖片畫冊(cè)平面設(shè)計(jì)排版ps理論教程
- UI知識(shí),尺寸對(duì)UI設(shè)計(jì)的影響
- 用戶體驗(yàn),分享20個(gè)有影響力的包裝設(shè)計(jì)
- 顏色管理,讓自己的照片在網(wǎng)上正確地顯示
- 色彩知識(shí),講解顏色基礎(chǔ)知識(shí)和配色理論