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

標籤：style   blog   http   color   io   os   ar   使用   sp   

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

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

也許我們對比和瞭解了其他一些常用的APP導航設計模式。

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

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

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

8種移動導航

第一種：app標籤導航

標籤導航位於頁面底部，通常包含5個標籤是比較合適的數量。這種導航是非常常見的，如果你的應用需要使用者頻繁的在不同分頁切換，可以採用這種導航。它的缺點是會佔用一定高度的空間。如最新版的APP介面設計圖。

app標籤導航

第二種：APP舵式導航

目前流行一種標籤導航的變體，個人把它稱為“舵式導航”，因為它的樣式很像輪船上用來指揮的船舵，兩側是其他動作按鈕。當頁面有處於同一層級的幾大部分內容，同時又需要一個非常重要且頻繁操作的入口，就可以採用這種APP導航模式。如葡萄社APP。

app舵式導航

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

抽屜導航是講菜單隱藏在當前頁面後，點擊入口即可像拉抽屜一樣拉出菜單，這種導航的優點是節省頁面展示空間，讓使用者將更多的注意力聚焦到當前頁面。比較適 合於不那麼需要頻繁切換內容的應用，例如對設定、關於等內容的隱藏。這種導航設計需要注意的是一定要提供菜單畫出的過渡動畫。

自從path應用以來，這種抽屜式導覽功能表非常受到大家的喜愛。

app抽屜式導航

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

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

app宮格導航

第五種：APP混合組合導航

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

         

app混合組合導航

第六種：列表式APP導航

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

不過目前來看，列表導航通常用於二級頁，由於它與宮格導航一樣，不會預設展示任何實質內容，所以通常app不會在首頁使用它。這種導航結構清晰，易於理解，冷靜高效，能夠協助使用者快速的定位去到對應的頁面。清單項目可以通過間距、標題等進行分組。

app列表式導航

第七種：tab導航

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

tab導航

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

當你的應用資訊足夠扁平，可以嘗試輪播導航，如果應用得當，能夠給人耳目一新的體驗。這種導航能夠最大程度的保證應用的頁面簡潔性，操作也是最方便的。但是缺點是不能夠快速的定位對應的分頁內容。

大圖輪播導航

------------------------------------------------------------------

有什麼問題，大家可以一起交流……

更多精彩關於關注博主的訂閱號：非常周末

搜尋：非常周末

你可以掃描一下關注即可：

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