APP導(dǎo)航承載著用戶獲取所需內(nèi)容的快速途徑。它看似簡(jiǎn)單，卻是產(chǎn)品設(shè)計(jì)中最需要考量的一部分。APP導(dǎo)航的設(shè)計(jì)，會(huì)直接影響用戶對(duì)APP的體驗(yàn)感受。所以導(dǎo)航菜單設(shè)計(jì)需要考慮周全，發(fā)揮導(dǎo)航的價(jià)值，為構(gòu)筑“怦然心動(dòng)”的產(chǎn)品打下基礎(chǔ)。

APP導(dǎo)航，按排列方式分為：列表式和網(wǎng)格式（矩陣）兩大類，再由此演變成其他類別。

常見的主導(dǎo)航有：標(biāo)簽式、抽屜式、菜單式、桌面式、點(diǎn)聚式等。主導(dǎo)航和二級(jí)導(dǎo)航也可以相互轉(zhuǎn)化，即列表式與網(wǎng)格式的相互轉(zhuǎn)化。

一、標(biāo)簽式導(dǎo)航易用性：★★★★★趣味性：★

標(biāo)簽式導(dǎo)航是最常見的一種導(dǎo)航形式，它能讓用戶直觀了解到APP的核心功能，與此同時(shí)使用上能夠在幾個(gè)標(biāo)簽中快速切換。標(biāo)簽的分類最好可以控制在5個(gè)以內(nèi)，視覺表現(xiàn)上需把當(dāng)前用戶位置突顯，頁(yè)面間的切換快速又不容易迷失，簡(jiǎn)單高效。標(biāo)簽欄位置也可根據(jù)需要融入LOGO或者產(chǎn)品核心功能（如拍照）等，豐富標(biāo)簽欄的樣式。

二、抽屜式導(dǎo)航易用性：★★趣味性：★★★★

抽屜式導(dǎo)航強(qiáng)調(diào)內(nèi)容，凸顯內(nèi)容，弱化導(dǎo)航界面。抽屜式導(dǎo)航在形式上一般位于當(dāng)前界面的后方，通過(guò)左（右）上角或指滑動(dòng)手勢(shì)呼出。帶有動(dòng)畫效果，形式上比較吸引眼球。由于導(dǎo)航界面是隱藏在屏幕之外，展開之后整一頁(yè)面都是導(dǎo)航菜單內(nèi)容，所以可擴(kuò)展和個(gè)性化的空間很大。但是有利也有弊，由于是整個(gè)導(dǎo)航的隱藏，先是用戶不易發(fā)現(xiàn)，再是給用戶在切換功能帶來(lái)了操作成本。到達(dá)導(dǎo)航菜單界面之后也需有明確的提示告知用戶當(dāng)前位置，防止用戶“迷路”，這也是許多抽屜式右（左）側(cè)留有前界面的原因。

三、桌面式導(dǎo)航易用性：★★趣味性：★★

桌面式導(dǎo)航，類似PC或手機(jī)桌面的各個(gè)應(yīng)用的入口。每個(gè)入口相對(duì)的內(nèi)容比較獨(dú)立，一般進(jìn)入某個(gè)入口之后只處理相關(guān)該入口的內(nèi)容。若要到其他入口就需要再返回總匯界面，也就是最初始的位置。這種導(dǎo)航方式在工具類或者雜志類比較適合，每個(gè)工具或者雜志的類型都各不相同。但這種導(dǎo)航不適合需要頻繁切換任務(wù)的情況，目前桌面導(dǎo)航作為主導(dǎo)航的應(yīng)用比較少，多用于做二級(jí)導(dǎo)航。

四、菜單式導(dǎo)航易用性：★★趣味性： ★★★

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

五、點(diǎn)聚式導(dǎo)航易用性：★★趣味性：★★★★★

點(diǎn)聚式導(dǎo)航，它將多個(gè)核心功能聚匯到主界面中顯示，方便用戶呼出使用。由于點(diǎn)聚式占用空間小，所以它常出現(xiàn)在一些主要的流程界面中。一般會(huì)融入一些動(dòng)態(tài)的互動(dòng)效果，讓導(dǎo)航更具趣味性。在漸漸的演變中，點(diǎn)聚式會(huì)搭載其他導(dǎo)航樣式出現(xiàn)（如標(biāo)簽式）。

在設(shè)計(jì)過(guò)程中，按照實(shí)際需求，結(jié)合內(nèi)容選擇最為合適的導(dǎo)航形式，切忌跟風(fēng)或者先從形式入手從而忽略導(dǎo)航菜單自身的特點(diǎn)。

作者：李煜佳UX

來(lái)源：ui中國(guó)

原文鏈接：http://www.ui.cn/detail/51826.html