移動(dòng)端產(chǎn)品導(dǎo)航的設(shè)計(jì)沒有最好之說，只有最合適，根據(jù)你的產(chǎn)品采取最合適的導(dǎo)航設(shè)計(jì)，所有導(dǎo)航設(shè)計(jì)都需要突出產(chǎn)品的核心點(diǎn)，盡量做到任務(wù)路徑的扁平化。

產(chǎn)品設(shè)計(jì)就如現(xiàn)實(shí)生活中裝修房子一樣，當(dāng)我們有個(gè)一間清水房，需要思考如何裝修出自己心中的「Dreamhouse」的時(shí)候，無論是自己裝修還是找裝修公司設(shè)計(jì)，第一步肯定是「選型」，是歐美風(fēng)、田園風(fēng)還是現(xiàn)代都市風(fēng)？你的「選型」決定了你的房子后續(xù)的設(shè)計(jì)，產(chǎn)品的「選型」也影響著后續(xù)產(chǎn)品的迭代和跨平臺(tái)。

合理選型，充分考慮可擴(kuò)展

產(chǎn)品設(shè)計(jì)的第一步就是「選型」。從零開始設(shè)計(jì)，以終為始，從需求分析到框架選型，我們需要思考如何滿足后續(xù)的可拓展性。如何讓我們的架構(gòu)更加有邏輯規(guī)則，成為標(biāo)準(zhǔn)化容器接口，這個(gè)成個(gè)產(chǎn)品經(jīng)理需要考慮的第一要?jiǎng)?wù)了。

學(xué)過產(chǎn)品的同學(xué)應(yīng)該都知道用戶體驗(yàn)要素的五層結(jié)構(gòu)，從結(jié)構(gòu)層到表現(xiàn)層就描述了需求到產(chǎn)品設(shè)計(jì)的過程，從抽象到具體，層層遞進(jìn)用戶。

1. 在結(jié)構(gòu)層，我們需要弄清楚「連接」將單個(gè)頁面連接在一起，用戶從哪里來，到哪里去？這就需要我們考慮好一款產(chǎn)品的框架，即為導(dǎo)航。導(dǎo)航通常是帶領(lǐng)用戶去到他們想去的地方的工具。底部導(dǎo)航應(yīng)該用于到達(dá)幾個(gè)重要性相近的頂級(jí)頁面。這些頁面要求可以從App中的任意位置直接進(jìn)入。
2. 到了框架層，我們就要針對(duì)于單個(gè)頁面的具體布局和交互方式，做更為詳盡的思考和討論
3. 最終到了表現(xiàn)層就可以讓ui設(shè)計(jì)師盡情的包裝產(chǎn)品，讓用戶看到一個(gè)漂亮的視覺體驗(yàn)。

四大框架，根據(jù)定位選模型

常見的移動(dòng)端導(dǎo)航框架包括：Tab、抽屜式、列表式、九宮格

Tab

Tab式導(dǎo)航是目前移動(dòng)端市場(chǎng)上最被廣泛使用的導(dǎo)航設(shè)計(jì)，諸如QQ、微信、淘寶、微博、美團(tuán)、京東、大眾點(diǎn)評(píng)、攜程等APP使用的都是Tab式導(dǎo)航?？梢姡琓ab式導(dǎo)航，是移動(dòng)應(yīng)用中最普遍、最常用的導(dǎo)航模式，且這是符合拇指熱區(qū)操作的一種導(dǎo)航模式。從類型的角度來看Tab式導(dǎo)航還細(xì)分為底部Tab式導(dǎo)航、頂部Tab式導(dǎo)航、底部Tab的擴(kuò)展導(dǎo)航這三種。

Tips：這些時(shí)候建議PM選擇Tab導(dǎo)航：

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

抽屜式

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

Tips：這些時(shí)候建議PM選擇抽屜式導(dǎo)航：

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

列表式

列表式導(dǎo)航是將入口或內(nèi)容按照列表的樣式依次展現(xiàn)在頁面之上，列表式導(dǎo)航比較適合內(nèi)容型產(chǎn)品作為主導(dǎo)航或者一般性產(chǎn)品作為輔助導(dǎo)航。導(dǎo)航結(jié)構(gòu)簡單清晰、易于理解、冷靜高效，能夠幫助用戶快速定位到對(duì)應(yīng)內(nèi)容。列表式導(dǎo)航包括兩類：直接用作主要導(dǎo)航、或者作為輔助導(dǎo)航展示二級(jí)或者更深層級(jí)的內(nèi)容。

Tips：這些時(shí)候建議PM選擇列表式導(dǎo)航：

• 列表式導(dǎo)航大多作為輔助導(dǎo)航來展示二級(jí)甚至更深層次的內(nèi)容，若要作為主導(dǎo)航
• 如果該App主要表達(dá)的信息層級(jí)較為單一，且并不會(huì)在入口間頻繁且反復(fù)跳轉(zhuǎn)，那么將列表式導(dǎo)航作為主導(dǎo)航是一種不錯(cuò)的選擇。

九宮格

九宮格導(dǎo)航是將各個(gè)入口都平鋪展示在頁面上，此類導(dǎo)航適合功能較多且功能之間較為獨(dú)立的產(chǎn)品。

Tips：這些時(shí)候建議PM選擇九宮格導(dǎo)航：

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

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

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

小Q來總結(jié)

移動(dòng)端產(chǎn)品導(dǎo)航的設(shè)計(jì)沒有最好之說，只有最合適，根據(jù)你的產(chǎn)品采取最合適的導(dǎo)航設(shè)計(jì)，所有導(dǎo)航設(shè)計(jì)都需要突出產(chǎn)品的核心點(diǎn)，盡量做到任務(wù)路徑的扁平化。當(dāng)然，除了當(dāng)下已有的設(shè)計(jì)模式，未來一定會(huì)有更多更新的導(dǎo)航設(shè)計(jì)和交互體驗(yàn)，或者有更多綜合型的導(dǎo)航模型出現(xiàn)，讓產(chǎn)品經(jīng)理在設(shè)計(jì)產(chǎn)品之初能找到更自由合理的框架模式。

作者：Mandy權(quán)，微信公眾號(hào)：PMandyQ，一名快樂的產(chǎn)品經(jīng)理！

本文由 @Mandy權(quán) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。