淺析移動(dòng)應(yīng)用的導(dǎo)航模型
![](http://image.woshipm.com/wp-files/img/75.jpg)
和網(wǎng)站一樣,移動(dòng)應(yīng)用也具有自己的信息架構(gòu),根據(jù)應(yīng)用的性質(zhì)以及核心功能界面之間的關(guān)系,來(lái)對(duì)其采用合理的信息結(jié)構(gòu),此時(shí),移動(dòng)應(yīng)用的導(dǎo)航模型便起到了穿針引線的效果,一個(gè)好的導(dǎo)航將使得應(yīng)用的信息架構(gòu)清晰明了,且操作簡(jiǎn)單高效。
移動(dòng)應(yīng)用的導(dǎo)航模型基本包括 平鋪?lái)?yè)面、標(biāo)簽tab、樹(shù)形列表、九宮格、以及目前較為流行的左側(cè)列表等,以下針對(duì)幾種常見(jiàn)的導(dǎo)航模型進(jìn)行簡(jiǎn)要分析和比較,以幫助我們選擇最合適的導(dǎo)航模型,提升移動(dòng)體驗(yàn)。
模型一:平鋪?lái)?yè)面
平鋪?lái)?yè)面,顧名思義就是一張或者一疊紙片,平鋪展示給用戶,用戶通過(guò)左右拂動(dòng)來(lái)切換不同的頁(yè)面,它適用于沒(méi)有信息層級(jí),沒(méi)有組織架構(gòu),且每個(gè)頁(yè)面的界面類型一致的應(yīng)用,一般在短小精煉的功能工具性應(yīng)用較為常見(jiàn),比如IOS自帶的天氣預(yù)報(bào)。平鋪?lái)?yè)面模型的優(yōu)點(diǎn)在于“頁(yè)面”元素的數(shù)量和順序可以隨意改變,且分頁(yè)標(biāo)簽高度只有6px,可供內(nèi)容展示的區(qū)域大;缺點(diǎn)在于頁(yè)面數(shù)量不能太大,否則瀏覽起來(lái)麻煩,用戶還需記得哪個(gè)“點(diǎn)”代表什么內(nèi)容;
模型二:tab標(biāo)簽欄
這種類型的導(dǎo)航模式最為常見(jiàn),它將界面最下方的區(qū)域作為導(dǎo)航區(qū),通過(guò)tab標(biāo)簽的形式劃分為3至5個(gè)標(biāo)簽,每個(gè)標(biāo)簽對(duì)應(yīng)不同功能。這種模型適合功能精煉層級(jí)較少且需要頻繁切換功能的應(yīng)用;它的優(yōu)點(diǎn)在于可以直接將最核心的tab界面最為默認(rèn)選中狀態(tài),用戶打開(kāi)應(yīng)用時(shí)便直接呈現(xiàn)出用戶最關(guān)心的信息內(nèi)容,比如社交應(yīng)用的信息流,郵件應(yīng)用的收件列表等;同時(shí),用戶可以在大部分頁(yè)面中直接切換tab標(biāo)簽而輕松跳轉(zhuǎn)頁(yè)面,并清晰告訴用戶該應(yīng)用的主要功能以及當(dāng)前所在功能;缺點(diǎn)在于tab標(biāo)簽數(shù)量有限,IOS HIG建議不超過(guò)5個(gè)標(biāo)簽,如有超過(guò)的功能菜單則統(tǒng)一放在“更多”標(biāo)簽中;同時(shí),該標(biāo)簽占據(jù)50px高度的區(qū)域,且在大部分界面中始終存在,占據(jù)著10%的信息展現(xiàn)區(qū)域。
模型三:樹(shù)形列表
樹(shù)形列表形式的導(dǎo)航模型在郵件系統(tǒng)比較常見(jiàn),它將每一級(jí)別的功能通過(guò)list列表形式展現(xiàn),點(diǎn)擊之后展開(kāi)下一級(jí)的lis列表,如此類推直到最終的功能展現(xiàn)界面。這種導(dǎo)航模型的優(yōu)勢(shì)在于可擴(kuò)展性大,能應(yīng)對(duì)具有大量的類別、功能和項(xiàng)目的應(yīng)用,比如購(gòu)物分類等,這種list的組織形式在web中比較常見(jiàn),用戶容易理解,并且可滿足用戶自定義列表的需要,比如對(duì)列表進(jìn)行新增、刪除、排序等,微信的應(yīng)用插件模式也采用了列表來(lái)展現(xiàn)。樹(shù)形列表的缺點(diǎn)在于層級(jí)深,父級(jí)的所有其它列表在子列表中不可見(jiàn),必須要返回到上一級(jí),來(lái)回返回比較麻煩,往往從一個(gè)子功能切換到另一個(gè)子功能時(shí)需要在漫漫路途上“奔波”;
模型四:九宮格
九宮格也是目前普遍使用的一種導(dǎo)航模型,它將應(yīng)用的所有一級(jí)功能縱橫排列在首頁(yè),多用簡(jiǎn)潔或精致的圖標(biāo)展示,同時(shí)配合功能菜單文字,因此首頁(yè)效果漂亮,可供設(shè)計(jì)師發(fā)揮的空間大。九宮格導(dǎo)航適合有多個(gè)同等重要頻道的應(yīng)用,特別是大而全的平臺(tái)級(jí)產(chǎn)品,比如facebook、QQ朋友、人人等;不過(guò)九宮格的缺點(diǎn)也比較明顯,其圖標(biāo)數(shù)量要適中控制,過(guò)多則可能出現(xiàn)左右分頁(yè),過(guò)少則可能為了堆砌菜單而在首屏添加不必要功能;同時(shí)菜單圖標(biāo)的橫豎排列使得眼動(dòng)軌跡往返移動(dòng),如果數(shù)量過(guò)多,則導(dǎo)致視覺(jué)定位頻繁,識(shí)別率下降,不如列表來(lái)得順暢利落;在九宮格導(dǎo)航模型中從一個(gè)子功能切換到另一個(gè)子功能時(shí)需要返回到主導(dǎo)航界面,操作效率底,所以越來(lái)越多的應(yīng)用通過(guò)添加快捷操作來(lái)實(shí)現(xiàn)快速返回到首頁(yè),比如facebook點(diǎn)擊導(dǎo)航欄的中央?yún)^(qū)域來(lái)回到首頁(yè);九宮格最大的缺點(diǎn)在于需要先選功能才能使用,無(wú)法去追求那個(gè)最剛性最頻繁最唯一的東西,并讓它直接展現(xiàn)給用戶,九宮格容易讓產(chǎn)品設(shè)計(jì)者停止做這樣的思考,相比之下,tab標(biāo)簽導(dǎo)航便通過(guò)默認(rèn)選中標(biāo)簽來(lái)實(shí)現(xiàn)了這一目標(biāo)。
模型五:左側(cè)導(dǎo)航
隨著path出現(xiàn),左側(cè)導(dǎo)航可以說(shuō)脫離了傳統(tǒng)的ios交互結(jié)構(gòu),這種新穎的導(dǎo)航模型也越來(lái)越受到大家的青睞??梢哉f(shuō)左側(cè)導(dǎo)航是集眾家之所長(zhǎng),取其精華去其糟粕,具有無(wú)限的功能拓展性,可實(shí)現(xiàn)用戶自定義;界面邏輯清晰,物理層次明了;視覺(jué)上搭配精美icon圖標(biāo),眼動(dòng)軌跡垂直單一,視覺(jué)負(fù)擔(dān)??;且不像九宮格專用首頁(yè)來(lái)展現(xiàn)導(dǎo)航,左側(cè)導(dǎo)航將首頁(yè)展現(xiàn)的舞臺(tái)留給了最核心的功能,它僅是一個(gè)“附屬功能”,隨叫隨到,不喧賓奪主,卻又給人留下深刻印象;所以我們可以看見(jiàn)越來(lái)越多應(yīng)用采用了這種導(dǎo)航模式,如最新版的facebook、QQ朋友、National Parks等等,可謂時(shí)下潮流;當(dāng)然左側(cè)導(dǎo)航目前在一些應(yīng)用中也存在不足,比如調(diào)用該導(dǎo)航時(shí)必須到首頁(yè)點(diǎn)擊左上角的“列表”圖標(biāo),而不能在任何界面通過(guò)某種手勢(shì)來(lái)隨叫隨到。
來(lái)源:zleee
- 目前還沒(méi)評(píng)論,等你發(fā)揮!