我們先來看看導航的定義。所謂的導航指的是：引導用戶訪問APP的欄目、菜單、分類等布局結構形式的總稱。

　　也就是說，導航主要是引導用戶，告訴用戶怎么找到自己想要的信息或完成用戶自己想要完成的任務。可見，導航在一個APP中的重要性是非常高的。導航設計的合理性關系著用戶是否能夠找到信息和完成任務。

　　那么，導航設計究竟應該如何做呢?這個說實話，不同的APP，導航設計既可能是相似的，也可能是完全不同的。因此，導航設計究竟應該如何做的答案只能是：根據APP的情況來定。

　　不過，雖然我們不能給出一個標準答案說：APP導航這樣設計就可以了。但在眾多的APP導航設計中，我們能夠找到一些常見的設計模式，以此來作為一個參考，輔助我們的APP導航設計。

　　下面，我將就APP導航設計的常見模式進行一個總結。

　　首先，我將定義一個叫做原始導航的導航。原始導航是一個最最粗糙的導航，通過純文字的鏈接入口來導航。如下圖：

　　看到原始導航，是不是覺得弱爆了，怎么可能有這樣的導航呢?所以，我把它定義為原始導航，然后在此基礎上通過不斷的演變來形成我們常見的導航模式。

一、標簽導航(選項卡導航)

　　有了原始導航，你可能會說，原始導航這種入口的擺放方式太占空間了，就五個入口就占據了整個界面。有沒有一種更加省空間的導航模式呢?當然有。

　　首先，我們將五個入口放到界面的下方，就會形成常見的底部標簽導航。

　　通常，底部標簽導航有3～4標簽，一般不會超過5個，有更多的選項操作時可將最后一項設置為更多，將一些次要功能放置在更多里。這是一種非常常見的導航模式。如果你的應用需要用戶頻繁的在不同分頁切換，可以采用這種導航。雖然它還是會占用一定的界面空間，但比起原始導航來說好多了。現在很多APP(包括iso和android)都在用這種模式。

　　當然，如果你在五個標簽中，有一個標簽是最重要或最頻繁使用的，想要重點突出，可以使用下面變形的底部標簽導航。

　　這種底部標簽導航模式并不常見，但在一些APP中還是可以看到它的應用。比如微博的底部標簽導航。

　　其次，我們將標簽放到界面的上方，就會形成常見的頂部標簽導航。

　　頂部標簽導航在ios app中一般當作二級導航。在android app中，這種導航模式以前被用作一級導航，但自從google推出了“抽屜導航”作為一級導航后，頂部標簽導航就被常用為二級導航了。

　　作為一個二級導航，頂部標簽導航應用于多種情境下，可以固定數量，展示有限的幾個標簽。也可以擴大一定的數量，變成向左滑動展現更多標簽。甚至可以像網易新聞那樣，衍生出訂閱功能。頂部標簽導航也是一種非常常見的導航模式。

二、抽屜導航

　　說完標簽導航，你可能會說，我是有六七個導航，但其中只有一個導航是主要的，別的雖然有用，但用戶非常非常少用。這種情況下能不能只顯示主要的內容，其它導航隱藏起來呢?這樣還可以更近一步地節省頁面空間。

　　當然可以。在這種情況下你可以使用抽屜導航。

　　抽屜導航是將菜單隱藏在當前頁面后，點擊導航入口即可像拉抽屜一樣拉出菜單。這種導航的優點是：節省頁面展示空間，讓用戶將更多的注意力聚焦到當前頁面。比較適合于不那么需要頻繁切換內容的應用，例如對設置、關于等內容的隱藏。缺點是：對于那些需要經常在不同導航間切換或者核心功能有一堆入口的app不適用。抽屜導航設計需要注意的是一定要提供菜單畫出的過渡動畫。

四：下拉導航

　　講完抽屜導航后，還有另外一種類似的導航模式同樣可以節省頁面空間，并且隱藏次要入口，這就是下拉導航。

　　下拉導航，與抽屜式導航的目的相同，都是為了突出內容。一般位于產品頂部，通過點擊呼出導航菜單。導航菜單以浮窗形式位于界面上層，可通過點擊導航菜單以外的區域使其收起。下拉導航的菜單與界面的連貫性比抽屜式要好，容易讓用戶感知當前位置。但由于是位于屏幕上方，相對隱蔽而且不能結合手勢操作，所以該菜單形式也不適合于頻繁的切換功能使用。考慮到導航菜單的可用面積較小，所以一般采用列表的形式展示菜單內容。

　　下拉導航有一種比較常見的變式，就是下來菜單中展示兩級甚至多級(一般就是兩級，沒見過更多的)，很多人稱其為超級菜單導航。如下：

　　這種導航模式說實話用得比較少。但最近在各種O2O形態的APP中有比較多的使用(可能跟分類級別多而且不好組織有關)。比如：美團、百度外賣等都有用超級菜單。

五、宮格導航

　　我在原始導航里設定了5個入口。可是，如果有7、8個甚至10多個入口呢?而且這些入口你也不好說到底哪個對用戶是最重要的，重要性差不多，怎么辦?OK，宮格導航可以解決這個問題。

　　宮格導航將主要入口全部聚合在頁面，讓用戶做出選擇。這樣的組織方式雖然無法讓用戶第一時間看到內容或執行操作，用戶的選擇壓力也比較大。但卻能夠讓用戶整體上了解APP提供的服務，從而選擇自己所需要的那個服務。

　　目前來說，這種導航模式越來越少用在一級導航了。不過，作為二級導航，作為一系列工具入口的聚合，或作為內容列表的一種圖形化呈現形式，還是存在在各種APP里。如：zakeer的核心頁面就是宮格導航，但其與訂閱功能結合，沒有讓所有宮格斗展示出了。各種手機界面打開后的app展示頁面基本上都是宮格模式的。

　　由于受到卡片式設計的影響，宮格模式的變形也非常多。接下來簡單說一下這些變形。

　　首先，可以將宮格的卡片變大，宮格與宮格時間不留空白，如下圖：

　　是不是和錘子手機的宮格展示布局一樣了?

　　上面這種展現方式所能展現的卡片數量有限。如果我們將其稍做調整，增加縱向滾動功能，就可以增加卡片數量的展現，可以說是無限的。如下圖：

　　優酷安卓app里的“頻道”模塊采取的就是這種模式。

　　如果更進一步，是不是可以對上面這種無限的展示宮格進行分類呢?當然可以。然后我們就有了下面這種導航模式：

　　當然，每個分類下能夠展示的數量可以更多，并不限于3個。

　　這時，如果我們想要在分類下，展示更多的內容，但又想多展示分類，怎么辦?可以在以上的導航模式中再進一步變形，如圖：

　　允許每行宮格橫向滑動展示更多，這樣就擴展了展示的數量，又不會減少分類數量的展示。

　　宮格導航還有沒有別的變式呢?當然有。比如：

　　可以通過變化宮格導航中卡片的大小，來凸顯宮格中內容的不同重要性。

　　可以將宮格導航和訂閱功能結合，形成獨特的訂閱導航。

　　……

　　變化形式根據不同的需要很可能有很多種。一般來講，常見的這些導航模式就夠了。

六、列表導航

　　列表式APP導航是我們在APP設計種必不可少的一個信息承載模式。當然作為一個APP的導航也是非常方便的。這種導航模式從原始導航中很好轉換，只要將列表左對齊，增加向右箭頭表明是否還有下級即可。如圖：

　　目前來看，列表導航通常用于二級頁，由于它與宮格導航一樣，不會默認展示任何實質內容，所以通常app不會在首頁使用它。這種導航結構清晰，易于理解，冷靜高效，能夠幫助用戶快速的定位去到對應的頁面。

　　自然，如果你想要對列表進行分類也是可以的。這樣邏輯上會更加清晰。如下：

　　如果說雖然可以分類，但實在不知道如何確定分類名稱。把分類名稱去掉也是可以的。只是用間距將每一組列表隔開也能起到梳理邏輯的作用。

　　對于列表導航來說，還有一種常見的變式：將列表下內容中的核心內容展示出來，常見的是核心數據展現。如下：

　　這種變式有時候也被成為儀表式導航，通過標題和核心數據來展現核心內容，同時作為導航使用。這種導航模式可以參見各種互聯網金融APP中的產品列表。

七、輪播導航

　　如果我們將原始導航中的5個入口共處一個頁面變成每個頁面僅限一個入口可以嗎?或者說，我們將宮格導航變成一宮格呢?會有一種新的導航模式嗎?

　　按照上面的假設，我們會有一種常見的導航模式：輪播導航。如下：

　　當然，只有應用信息足夠扁平，可以嘗試輪播導航。輪播導航如果應用得當，能夠給人耳目一新的體驗。輪播導航能夠大程度的保證應用的頁面簡潔性，操作也是最方便的，只需要手指左右滑動。缺點也很明顯：承載入口的數量有限，超過10個可能就優點多了。這種導航常見于查看圖片，也經常與其他導航模式結合，作為banner廣告呈現。

八、點聚導航

　　如果一個界面，因為內容或功能展示的需求，需要極端簡化其入口，應該如何做?點聚導航是一種選擇。

　　當層級框架比較復雜，幾個并列的模塊中都有用戶頻繁使用的核心內容，但有需要簡化頁面時，會考慮使用點聚式導航。點聚式導航將多個核心功能聚匯到主界面中顯示，方便用戶呼出使用。由于點聚式占用空間小，一般會融入一些動態的互動效果，讓導航更具趣味性。很多圖片拍攝及編輯、視頻拍攝及編輯類APP會使用這類導航。

九、隱喻導航

　　如果原始導航中的五個入口，變成游戲界面中的五個關卡，只是簡單地將其按照上下順序列出來就會不太適用。游戲對導航的要求不僅要可用，更要和整個游戲的風格等匹配。因此，有了隱喻導航這種模式，用頁面模仿應用的隱喻對象。這種導航主要用于游戲，但在幫助導航 人們組織事物(如日記、書籍等)，并對其進行分類的應用中也能看到。

十、關于導航的一些其它想法：

　　雖然每個導航模式有常見的用法，但并沒有絕對的限定，要具體情況具體分析。比如頂部標簽導航可以作為一級導航，但與抽屜導航結合的話，可能就會變成二級導航。

　　就目前的情況來看，很少有APP能夠只用一種導航模式，至少需要兩種。絕大多數的APP都在混合使用多種導航模式。很多APP甚至可能使用多大七八種導航模式，有的一個界面就可能用三到四種導航模式。

　　導航模式混合使用并不可怕，關鍵是要在設計上做好文章，確保用戶能夠獲得良好的用戶體驗。

　　導航的具體設計方式多種多樣，有只有文字的，有文字圖標結合的，有圖片文字結合的，有圖片文字圖標結合的、有只有圖標的……具體的形式不在這里多談。用什么樣的形式取決于內容需要什么樣的展現形式。

　　文中的導航模式只是一種參考，這些模式其實還有各種各樣的變形。只要能夠引導用戶清晰明確地找到信息或完成任務的導航都是優秀的導航，并不一定非得使用某種導航。

　　關于導航就寫到這里。完。

文章題目：APP設計之--導航
分享網址：http://www.js-pz168.com/news/170386.html

網站建設、網絡推廣公司-創新互聯，是專注品牌與效果的網站制作，網絡營銷seo公司；服務項目有App設計等

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯