不可錯過的手機APP常見8種介面導航樣式

前言：相信每個移動開發project師都會遇到，當一個專案開發啟動時，須要考慮搭建怎麼的框架。一個好的框架。也會決定著一個APP的前途與命運。框架的風格，如今常見的有八種：標籤導航、舵式導航、抽屜導航、宮格導航、組合導航、列表導航、tab導航、輪播導航。近期在網上收集到一些資料。正好和大家分享一下。感謝原作者的貢獻。

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

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

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

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

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

第一種：app標籤導航

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

app標籤導航

另外一種：APP舵式導航

眼下流行一種標籤導航的變體。個人把它稱為“舵式導航”，由於它的樣式非常像輪船上用來指揮的船舵，兩側是其它操作button。當頁面有處於同一層級的幾大部分內容，同一時候又須要一個非常重要且頻繁操作的入口，就能夠採用這樣的APP導航模式。

例如以下圖葡萄社APP。

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

抽屜導航是講選單隱藏在當前頁面後，點選入口就可以像拉抽屜一樣拉出選單，這樣的導航的長處是節省頁面展示空間，讓使用者將很多其它的注意力聚焦到當前頁面。比較適 合於不那麼須要頻繁切換內容的應用，比如對設定、關於等內容的隱藏。

這樣的導航設計須要注意的是一定要提供選單畫出的過渡動畫。

自從path應用以來，這樣的抽屜式導航選單很受到大家的喜愛。

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

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

第五種：APP混合組合導航

當用戶須要聚焦內容。同一時候又須要一些快捷入口能夠連線到某些頁面時，就能夠採用組合導航。組合導航上方用宮格的形式展現快捷入口，與標籤導航不同的是。這 些宮格入口之間不須要是平級的關係，也不必包括整個層級的內容，你能夠將它理解為一種圖形化的文字鏈。這樣的導航比較靈活，能適應架構的高速調整。

第六種：列表式APP導航

列表式APP導航是我們在APP設計種不可缺少的一個資訊承載模式。

當然作為一個APP的導航也是很方便的。

只是眼下來看，列表導航通經常使用於二級頁，因為它與宮格導航一樣，不會預設展示不論什麼實質內容，所以通常app不會在首頁使用它。

這樣的導航結構清晰，易於理解。冷靜高效，可以幫助使用者高速的定位去到相應的頁面。列表專案可以通過間距、標題等進行分組。

第七種：tab導航

用於二級頁，本質和標籤導航同樣，當應用層級較多的情況下，能夠採用tab導航，典型場景是用於改變的當前的檢視。或對當前頁面內容進行分類檢視。

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

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

可是缺點是不可以高速的定位相應的分頁內容。