閱讀1681
導航是用戶獲取自己想要的資訊以及完成任務的重要途徑， app導航設計直接影響著用戶的操作體驗， 一個好的導航設計可以讓使用者快速的瞭解到產品的功能和資訊組織架構。
那麼app的導航設計該如何做呢， 說實話不同的app根據自己的實際情況採取一種導航或者多種導航結合的形式， 比如快手app為了讓更多的資訊流展示， 則採用標籤式導航和抽屜式導航結合的形式。
那麼我就把常見的導航形式整理出來， 給大家做設計的時候提供參考。
一、標籤式導航
標籤式導航又稱為tab式導航， 現在大多數app採取的主流形式， 一般分為底部導航、頂部導航、底部和頂部雙tab導航
1、底部標籤導航
底部導航一般採用3-4個標籤， 最多不會超過5個， 有更多的選項操作的時候將最後一項設置為更多， 將一些次要的功能放在更多裡面， 這是一種非常常見的導航形式。
優點：適合在幾類資訊之間頻繁切換使用， 彼此之間相互獨立， 用戶可以迅速的在不同層級找到自己想要的資訊。
缺點：佔用一定的高度， 如果使用者是小螢幕手機， 使用者體驗不是太好。
2、頂部標籤導航
頂部導航在ios app中一般用作二級導航， 在andriod app中這種導航模式一般用作一級導航， 但自從穀歌推出”抽屜式導航“以後， 頂部標籤導航一般就用作二級導航， 當內容分類較多的時候一般採用頂部標籤導航設計模式。
優點：可以固定數量， 也可以不固定數量， 像網易新聞用戶端那樣， 可以左右滑動， 衍生更多標籤。
缺點：佔有一定的高度空間， 小屏手機體驗不是太好。
二、底部和頂部雙tab導航
標籤式導航一般放在底部， 如果產品分類內容較多， 則採用頂部和底部結合的導航形式， 例如下圖的今日頭條和愛奇藝。
三、抽屜式導航
有的人可能會說， 我雖然有6-7個左右標籤， 但是只有一些標籤是主要的， 其他標籤用戶很少使用， 這個時候一般採用抽屜式導航。 抽屜式導航是指將一些不常用的功能隱藏在當前頁面， 當需要用到的時候點擊入口或者側滑即可像抽屜一樣展開， 上面也說了， 這種適合不需要經常切換的次要功能， 比如設置、關於、會員等， 快手和QQ是採用這種導航形式。
優點：節省頁面空間， 使用者更多的注意力集中在當前內容， 而且不用擔心小屏手機用戶體驗問題， 適合不那麼頻繁切換內容的應用。
缺點：次功能入口比較隱藏， 用戶不容易發現， 同時次功能需要二次點擊， 增加用戶使用成本。
四、下拉式導航
和抽屜式導航類似， 下拉式導航也是隱藏次要入口的一種形式，一般位於產品頂部，點擊呼出導航功能表，導航的功能表以浮層的形式位於介面上層，通過點擊導航功能表以外的區域使其收起，下拉式導航的面積一般較小，所以採用清單的形式展現功能表內容居多，這種導航形式一般用作篩選內容。比如下圖的拍拍貸和美團。
優點：與介面的連貫性比抽屜式導航要好，同時用戶能夠感知當前位置。
缺點：由於位於螢幕上方，且相對隱蔽，不能結合手勢的左右滑動操作，所以也不利於頻繁切換使用。
五、宮格導航
宮格導航主要將入口全部集中在主頁面中，各個入口之間相互獨立，沒有太多的交集，無法跳轉互通。
優點：讓使用者整體瞭解app的服務，從而選擇自己需要的那個服務。
缺點：使用者無法第一時間看到內容或者執行操作，選擇的壓力會比較大。
由於上述優缺點，這種導航形式越來越少用在一級導航、一般作為工具入口的集合（例如：美圖秀秀）或者內容清單的一種圖形化表現形式（比如快手app的視頻流）
宮格導航的變式有很多，比如上圖的美圖秀秀增加橫向滑動來增加導航入口的數量，支付寶通過縱向滑動來增加導航入口的數量，快手通過控制卡片的大小來顯得不單調和凸顯主要的內容。
六、列表導航
列表導航是現有app中一種主要的資訊承載模式，清單導航和宮格導航類似，屬於二級導航，只不過有時候列表導航太長，不利於用戶操作的時候才會採用宮格導航，通常不會展示任何實質功能。
優點：導航結構清晰，易於使用者理解，用戶能夠快速找到自己想要的資訊。
缺點：如果列表太多，一屏承載不下，使用者需要下拉才能操作，這個時候不如宮格導航的用戶體驗好。
七、舵式導航
優點：突出重要且頻繁操作的入口
缺點：功能入口過多時，該模式顯得笨重不實用。
八、點聚式導航
當需要更多展示內容和功能，需要極端簡化其入口，一般可以使用點聚式導航。（其實我覺得上面的駝式導航就是點聚式導航和tab導航的結合體），點聚式導航將核心功能聚合到主介面展示，方便使用者呼出使用，由於點聚式導航佔用空間小，一般融入一些動態的效果，讓導航更具有趣味性，一般視頻拍攝、編輯類app會採用這種導航形式。
優點：靈活、有趣，介面更加開闊。
缺點：隱藏了功能，且隱藏功能不能太多，不然顯示後，使用者較難反應。
九、輪播導航
app首頁的banner廣告位就是採用輪播導航，當應用資訊足夠扁平的時候則採用輪播導航。
優點：頁面比較簡潔，導航不會佔用太多空間，同時左右滑動即可，操作比較便捷。
缺點：承載的入口數量有限，如果超過10個則顯得有點多。
總結：
本文由 @德藝雙馨產品劉 原創發佈於產品壹佰，未經許可，禁止轉載。
下拉式導航也是隱藏次要入口的一種形式，一般位於產品頂部，點擊呼出導航功能表，導航的功能表以浮層的形式位於介面上層，通過點擊導航功能表以外的區域使其收起，下拉式導航的面積一般較小，所以採用清單的形式展現功能表內容居多，這種導航形式一般用作篩選內容。比如下圖的拍拍貸和美團。優點：與介面的連貫性比抽屜式導航要好，同時用戶能夠感知當前位置。
缺點：由於位於螢幕上方，且相對隱蔽，不能結合手勢的左右滑動操作，所以也不利於頻繁切換使用。
五、宮格導航
宮格導航主要將入口全部集中在主頁面中，各個入口之間相互獨立，沒有太多的交集，無法跳轉互通。
優點：讓使用者整體瞭解app的服務，從而選擇自己需要的那個服務。
缺點：使用者無法第一時間看到內容或者執行操作，選擇的壓力會比較大。
由於上述優缺點，這種導航形式越來越少用在一級導航、一般作為工具入口的集合（例如：美圖秀秀）或者內容清單的一種圖形化表現形式（比如快手app的視頻流）
宮格導航的變式有很多，比如上圖的美圖秀秀增加橫向滑動來增加導航入口的數量，支付寶通過縱向滑動來增加導航入口的數量，快手通過控制卡片的大小來顯得不單調和凸顯主要的內容。
六、列表導航
列表導航是現有app中一種主要的資訊承載模式，清單導航和宮格導航類似，屬於二級導航，只不過有時候列表導航太長，不利於用戶操作的時候才會採用宮格導航，通常不會展示任何實質功能。
優點：導航結構清晰，易於使用者理解，用戶能夠快速找到自己想要的資訊。
缺點：如果列表太多，一屏承載不下，使用者需要下拉才能操作，這個時候不如宮格導航的用戶體驗好。
七、舵式導航
優點：突出重要且頻繁操作的入口
缺點：功能入口過多時，該模式顯得笨重不實用。
八、點聚式導航
當需要更多展示內容和功能，需要極端簡化其入口，一般可以使用點聚式導航。（其實我覺得上面的駝式導航就是點聚式導航和tab導航的結合體），點聚式導航將核心功能聚合到主介面展示，方便使用者呼出使用，由於點聚式導航佔用空間小，一般融入一些動態的效果，讓導航更具有趣味性，一般視頻拍攝、編輯類app會採用這種導航形式。
優點：靈活、有趣，介面更加開闊。
缺點：隱藏了功能，且隱藏功能不能太多，不然顯示後，使用者較難反應。
九、輪播導航
app首頁的banner廣告位就是採用輪播導航，當應用資訊足夠扁平的時候則採用輪播導航。
優點：頁面比較簡潔，導航不會佔用太多空間，同時左右滑動即可，操作比較便捷。
缺點：承載的入口數量有限，如果超過10個則顯得有點多。
總結：
本文由 @德藝雙馨產品劉 原創發佈於產品壹佰，未經許可，禁止轉載。