8種移動APP導航設計模式對照

當咱們肯定了移動APP的設計需求和APP產品設計流程以後，開始着手設計APP界面UI或是APP原型圖啦。這個時候咱們都要面臨的第一個問題就是怎樣將信息以最優的方式組合起來？

或許咱們對照和了解了其它一些常用的APP導航設計模式。

而且良好的APP導航設計模式決策對整個app的核心體驗起到關鍵做用。

有一些優秀的app基於這些模式作了一些創新的優化方案。本文總結了眼下通用且流行的模式。並討論了這些模式適用的場景，但願幫助交互設計師更快的做出較合理的信息組織決策。

先來看看8種移動APP導航設計模式對照圖吧。

8種移動導航

第一種：app標籤導航

標籤導航位於頁面底部，一般包括5個標籤是比較合適的數量。這樣的導航是很常見的，假設你的應用需要用戶頻繁的在不一樣分頁切換，可以採用這樣的導航。它的缺點是會佔用必定高度的空間。如微信最新版的APP界面設計圖。

app標籤導航

另一種：APP舵式導航

眼下流行一種標籤導航的變體，我的把它稱爲「舵式導航」，因爲它的樣式很是像輪船上用來指揮的船舵，兩側是其它操做button。當頁面有處於同一層級的幾大部份內容，同一時候又需要一個很是重要且頻繁操做的入口。就可以採用這樣的APP導航模式。

例如如下圖葡萄社APP。

app舵式導航

第三種：APP抽屜式導航模式

抽屜導航是講菜單隱藏在當前頁面後，點擊入口就能夠像拉抽屜同樣拉出菜單，這樣的導航的長處是節省頁面展現空間，讓用戶將不少其它的注意力聚焦到當前頁面。比較適 合於不那麼需要頻繁切換內容的應用，好比對設置、關於等內容的隱藏。這樣的導航設計需要注意的是必定要提供菜單畫出的過渡動畫。

自從path應用以來。這樣的抽屜式導航菜單很受到你們的喜好。

app抽屜式導航

第四種：APP宮格導航（比方九宮格）

這樣的宮格導航是將主要入口全部聚合在頁面，讓用戶作出選擇。這樣的組織方式沒法讓用戶在第一時間看到內容。選擇壓力較大。採用這樣的導航的應用已經愈來愈少。每每用在二級頁做爲內容列表的一種圖形化形式呈現，或是做爲一系列工具入口的聚合。

app宮格導航

第五種：APP混合組合導航

當用戶需要聚焦內容，同一時候又需要一些快捷入口可以鏈接到某些頁面時。就可以採用組合導航。

組合導航上方用宮格的形式展示快捷入口。與標籤導航不一樣的是。這 些宮格入口之間不需要是平級的關係。也沒必要包括整個層級的內容。你可以將它理解爲一種圖形化的文字鏈。

這樣的導航比較靈活，能適應架構的高速調整。

app混合組合導航

第六種：列表式APP導航

列表式APP導航是咱們在APP設計種不可缺乏的一個信息承載模式。固然做爲一個APP的導航也是很方便的。

只是眼下來看，列表導航通常用於二級頁，由於它與宮格導航同樣，不會默認展現不論什麼實質內容，因此一般app不會在首頁使用它。這樣的導航結構清晰。易於理解，冷靜高效，能夠幫助用戶高速的定位去到相應的頁面。列表項目能夠經過間距、標題等進行分組。

app列表式導航

第七種：tab導航

用於二級頁。本質和標籤導航一樣，當應用層級較多的狀況下，可以採用tab導航，典型場景是用於改變的當前的視圖，或對當前頁面內容進行分類查看。

tab導航

第八種：大圖輪播導航或是 大圖上面的導航設計

當你的應用信息足夠扁平，能夠嘗試輪播導航，假設應用得當，能夠給人耳目一新的體驗。這樣的導航能夠最大程度的保證應用的頁面簡潔性。操做也是最方便的。

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

大圖輪播導航