以移動端產品的導航設計為例，談如何選好產品的設計框架

移動端產品導航的設計沒有最好之說，只有最合適，根據你的產品採取最合適的導航設計，所有導航設計都需要突出產品的核心點，盡量做到任務路徑的扁平化。

產品設計就如現實生活中裝修房子一樣，當我們有個一間清水房，需要思考如何裝修出自己心中的「Dreamhouse」的時候，無論是自己裝修還是找裝修公司設計，第一步肯定是「選型」，是歐美風、田園風還是現代都市風？你的「選型」決定了你的房子後續的設計，產品的「選型」也影響著後續產品的迭代和跨平台。

合理選型，充分考慮可擴展

產品設計的第一步就是「選型」。從零開始設計，以終為始，從需求分析到框架選型，我們需要思考如何滿足後續的可拓展性。如何讓我們的架構更加有邏輯規則，成為標準化容器介面，這個成個產品經理需要考慮的第一要務了。

學過產品的同學應該都知道用戶體驗要素的五層結構，從結構層到表現層就描述了需求到產品設計的過程，從抽象到具體，層層遞進用戶。

• 在結構層，我們需要弄清楚「連接」將單個頁面連接在一起，用戶從哪裡來，到哪裡去？這就需要我們考慮好一款產品的框架，即為導航。導航通常是帶領用戶去到他們想去的地方的工具。底部導航應該用於到達幾個重要性相近的頂級頁面。這些頁面要求可以從App中的任意位置直接進入。
• 到了框架層，我們就要針對於單個頁面的具體布局和交互方式，做更為詳盡的思考和討論
• 最終到了表現層就可以讓ui設計師盡情的包裝產品，讓用戶看到一個漂亮的視覺體驗。

四大框架，根據定位選模型

常見的移動端導航框架包括：Tab、抽屜式、列表式、九宮格

Tab

Tab式導航是目前移動端市場上最被廣泛使用的導航設計，諸如QQ、微信、淘寶、微博、美團、京東、大眾點評、攜程等APP使用的都是Tab式導航。可見，Tab式導航，是移動應用中最普遍、最常用的導航模式，且這是符合拇指熱區操作的一種導航模式。從類型的角度來看Tab式導航還細分為底部Tab式導航、頂部Tab式導航、底部Tab的擴展導航這三種。

Tips：這些時候建議PM選擇Tab導航：

• 某項功能必須固定在底部，那麼其他Tab只能固定在頂部，但為了方便操作；
• 為了帶給用戶更好的沉浸式體驗，可以將Tab放在頂部，如新聞、小說等。

抽屜式

抽屜式導航是指菜單藏在當前頁面后，點擊入口后就像抽屜一樣拉出菜單，抽屜式導航比較適合核心功能突出且較為單一的產品。當你的產品信息層級有非常多的頁面和內容，難以在一屏內顯示全部內容，那麼你一定首先會想到去設計一個底部或頂部的Tab導航，但導航太多無疑顯得臃腫，而且使用戶難以點擊，那麼這個時候，抽屜式導航是個不錯的選擇。

Tips：這些時候建議PM選擇抽屜式導航：

• 為了讓主頁面看上去乾淨美觀，可以把輔助功能，如用戶設置這類低頻操作內容需要顯示在其他頁面里；
• 需要用戶有一定參與的信息層級，最好不好放置在抽屜欄；
• 在大屏時代使用抽屜欄，手勢操作顯得尤為重要，從屏幕邊緣喚出抽屜欄是個不錯的選擇。

列表式

列表式導航是將入口或內容按照列表的樣式依次展現在頁面之上，列表式導航比較適合內容型產品作為主導航或者一般性產品作為輔助導航。導航結構簡單清晰、易於理解、冷靜高效，能夠幫助用戶快速定位到對應內容。列表式導航包括兩類：直接用作主要導航、或者作為輔助導航展示二級或者更深層級的內容。

Tips：這些時候建議PM選擇列表式導航：

• 列表式導航大多作為輔助導航來展示二級甚至更深層次的內容，若要作為主導航
• 如果該App主要表達的信息層級較為單一，且並不會在入口間頻繁且反覆跳轉，那麼將列表式導航作為主導航是一種不錯的選擇。

九宮格

九宮格導航是將各個入口都平鋪展示在頁面上，此類導航適合功能較多且功能之間較為獨立的產品。

Tips：這些時候建議PM選擇九宮格導航：

• 九宮格式導航適合入口相互獨立互斥，且不需要交叉使用的信息歸類。
• 一旦入口需要有所交集，必然導致更多的操作負累，這個時候只能根據產品特性做出權衡，如果不適合，建議果斷拒絕這種方式。

除以上四類主流導航以外，現在比較常見一種導航，我們索性稱之為「螺旋式導航」，其作用就解決簡單的底部Tab式導航難以滿足更多的操作功能的問題，變現形式就是在Tab的基礎上，通過二級導航對主要功能做擴展，同時給產品設計添加個性化。如：微博和QQ空間、閑魚。

另外還一種很偏歐美風的平鋪式導航，這種導航方式很容易帶來高大上的視覺體驗，最大程度的保證了頁面的簡潔性和內容的完整性，且一般都會結合滑動切換的手勢，操作起來也非常方便。譬如：天氣通、淘寶的每日好店。

小Q來總結

移動端產品導航的設計沒有最好之說，只有最合適，根據你的產品採取最合適的導航設計，所有導航設計都需要突出產品的核心點，盡量做到任務路徑的扁平化。當然，除了當下已有的設計模式，未來一定會有更多更新的導航設計和交互體驗，或者有更多綜合型的導航模型出現，讓產品經理在設計產品之初能找到更自由合理的框架模式。

作者：Mandy權，，一名快樂的產品經理！

本文由 @Mandy權 原創發佈於人人都是產品經理。未經許可，禁止轉載。