新型SEO思維就是從一個全新的層次上提升seo優化的水平,達到網絡信息最佳化的展示效果!
我叫mt4国服第一盗贼 > 網站運營 > App運營 > 移動APP導航設計的10種模式

我叫mt4德鲁伊:移動APP導航設計的10種模式

時間:2015-01-05   文章來源:馬海祥博客   訪問次數:

我叫mt4国服第一盗贼 www.nijqb.icu 當確定了移動APP的設計需求和APP產品設計流程之后,我們就要開始著手設計APP界面UI或是APP原型圖啦,這個時候我們都要面臨的第一個問題就是如何將信息以最優的方式組合起來?也就是我們常說的APP導航模式。

可以說,一個良好的APP導航設計模式決策對整個app的核心體驗起到關鍵作用,有一些優秀的app就是基于這些模式做了一些創新的優化方案,今天,馬海祥也總結了目前通用且流行的模式,并討論了這些模式適用的場景,希望幫助交互設計師更快的作出較合理的信息組織決策。

1、Tabbar導航

移動APP導航設計的10種模式-馬海祥博客

Tabbar的導航方式是由誰發明的馬海祥不得而知,不過相信大家都同意是由蘋果將其傳播開來,不僅很多蘋果的官方應用采用了這種設計,蘋果同樣大力推薦應用開發者優先采用這種方式,從某種角度來說,tabbar基本就是導航的標準設計。

Tabbar導航主要用于二級頁,本質和標簽導航相同,當應用層級較多的情況下,可以采用tab導航,典型場景是用于改變的當前的視圖,或對當前頁面內容進行分類查看。

Tabbar的優點很明顯,用戶完成切換的成本很低,只需要一次點擊操作,而放在屏幕底部對主體內容的視覺沖擊可以說是最小的,這樣用戶就不會在瀏覽主體內容時受到過多的干擾。

至于缺點,馬海祥覺得也同樣明顯,那就是受制于屏幕寬度的限制,通常4到5個功能項的切換會比較合適,過多的話將會顯著提高用戶的切換成本。

2、app標簽導航

移動APP導航設計的10種模式-馬海祥博客

標簽導航位于頁面底部,通常包含5個標簽是比較合適的數量,這種導航是非常常見的,如果你的應用需要用戶頻繁的在不同分頁切換,可以采用這種導航,如微信最新版的APP界面設計圖。

不過,它的缺點是會占用一定高度的空間。

3、APP宮格導航(比如九宮格)

移動APP導航設計的10種模式-馬海祥博客

這種宮格導航是將主要入口全部聚合在頁面,讓用戶做出選擇。

但在馬海祥看來,這樣的組織方式無法讓用戶在第一時間看到內容,選擇壓力較大,采用這種導航的應用已經越來越少,往往用在二級頁作為內容列表的一種圖形化形式呈現,或是作為一系列工具入口的聚合。

4、APP舵式導航

移動APP導航設計的10種模式-馬海祥博客

目前流行一種標簽導航的變體,個人把它稱為“舵式導航”,因為它的樣式很像輪船上用來指揮的船舵,兩側是其他操作按鈕。

當頁面有處于同一層級的幾大部分內容,同時又需要一個非常重要且頻繁操作的入口,就可以采用這種APP導航模式。

5、APP抽屜式導航模式

移動APP導航設計的10種模式-馬海祥博客

抽屜導航是講菜單隱藏在當前頁面后,點擊入口即可像拉抽屜一樣拉出菜單,這種導航的優點是節省頁面展示空間,讓用戶將更多的注意力聚焦到當前頁面。

在馬海祥看來,此種APP導航模式比較適合于不那么需要頻繁切換內容的應用,例如對設置、關于等內容的隱藏,這種導航設計需要注意的是一定要提供菜單畫出的過渡動畫。

自從path應用以來,這種抽屜式導航菜單非常受到大家的喜愛,之前也在馬海祥博客上《詳解APP軟件開發過程中的解構和重構》一文中重點介紹了這種模式的設計原理。

6、滑動式的導航

移動APP導航設計的10種模式-馬海祥博客

導航并不一定只發生在功能項之間,例如新聞類應用需要在不同類別的新聞之間進行切換瀏覽。

通常來說,這種切換的頻率要比功能項切換更高,切換項的數量也會比較多,像常見的新聞類別就有七八種。

我記得在網易新聞早期的iOS版本中采用了抽屜式app導航的方式進行新聞類別的切換,這種方式在高頻率切換時需要過多的操作次數,當需要在相鄰類別連續切換時更是缺乏操作的連續性,新的iOS版網易新聞對新聞類別的切換重新進行了設計。

7、列表式APP導航

移動APP導航設計的10種模式-馬海祥博客

列表式APP導航是我們在APP設計種必不可少的一個信息承載模式,當然作為一個APP的導航也是非常方便的。

不過目前來看,列表導航通常用于二級頁,由于它與宮格導航一樣,不會默認展示任何實質內容,所以通常app不會在首頁使用它。

在馬海祥看來,這種導航結構清晰,易于理解,冷靜高效,能夠幫助用戶快速的定位去到對應的頁面,列表項目可以通過間距、標題等進行分組。

8、大圖輪播導航或大圖上面的導航設計

移動APP導航設計的10種模式-馬海祥博客

當你的應用信息足夠扁平,可以嘗試輪播導航,如果應用得當,能夠給人耳目一新的體驗。

這種導航能夠最大程度的保證應用的頁面簡潔性,操作也是最方便的。

但是缺點是不能夠快速的定位對應的分頁內容。

9、底部菜單導航

移動APP導航設計的10種模式-馬海祥博客

使用底部菜單導航的APP,相對來說,都是一些功能菜單比較少的APP應用,因為底部空間位置有限,只能主要列出應用程序重要的功能。

10、APP混合組合導航

移動APP導航設計的10種模式-馬海祥博客

當用戶需要聚焦內容,同時又需要一些快捷入口能夠連接到某些頁面時,就可以采用組合導航。

組合導航上方用宮格的形式展現快捷入口,與標簽導航不同的是,這些宮格入口之間不需要是平級的關系,也不必包含整個層級的內容,你可以將它理解為一種圖形化的文字鏈。

這種導航比較靈活,能適應架構的快速調整。

馬海祥博客點評:

導航的設計是App設計發展過程中很值得玩味的地方,由于移動設備特別是智能手機的屏幕尺寸有限,設計者們通?;嶠聊豢占渚×苛舾魈迥諶?,優秀的導航設計會讓用戶輕松到達目的地而又不會干擾和困惑用戶。

本文為我叫mt4国服第一盗贼原創文章,如想轉載,請注明原文網址摘自于//www.nijqb.icu/App/1016.html,注明出處;否則,禁止轉載;謝謝配合!

相關熱詞搜索: app app設計 移動app app導航 app模式

上一篇:如何成功打造一個3億用戶的App產品
下一篇:關于App推廣運營的8條隱藏技巧

今日話題更多>

SEO研究院 更多 >>