看了很多總結(jié)導(dǎo)航的文章，其實(shí)都基本雷同，但是都覺(jué)得不夠細(xì)致，也不是從我們常用的產(chǎn)品去分析的，因此用自己的思路重新分析了一遍，這篇文章應(yīng)該說(shuō)是站在巨人的肩膀上，總結(jié)自己的一些淺見(jiàn)。
任何網(wǎng)站的組織信息都需要以某種導(dǎo)航框架固定起來(lái)，就像是建筑工人拔地而起的高樓大廈一樣，地基非常重要，之后你想要蓋多少層樓、每層樓有多少間房，都在地基的基礎(chǔ)上構(gòu)成，而一個(gè)新的網(wǎng)站也是這樣，合適的導(dǎo)航框架，決定了網(wǎng)站之后的延伸和擴(kuò)展。
不同的產(chǎn)品需求和商業(yè)目標(biāo)決定了不同的導(dǎo)航框架的設(shè)計(jì)模式，而交互設(shè)計(jì)的 步，就是決定導(dǎo)航的框架設(shè)計(jì)，框架確定后，才能開始逐漸豐富血肉。
壹 先，我們要為組織信息分層，在這一步驟，一定要做好信息層級(jí)的扁平化，不能把擁有 的組織信息都鋪出來(lái)，這樣做只會(huì)讓用戶心煩意亂找不到想要的重要操作，也不能把層級(jí)做的很深，用戶沒(méi)有那么多耐心跟你玩躲貓貓，一定要將做核心、更 穩(wěn)固、更 根本的功能要素放在 層頁(yè)面，其他得內(nèi)容收在第二層、第三層、甚至更深（具體可查看鄭州seo公司老秦博客《如何規(guī)劃并架構(gòu)網(wǎng)站的導(dǎo)航信息結(jié)構(gòu)》的相關(guān)介紹）。
之后，根據(jù)層級(jí)的深度和廣度來(lái)確定導(dǎo)航的設(shè)計(jì)模式，不要覺(jué)得這有多難，手機(jī)端的屏幕尺寸就這么大，操作方式也無(wú)非就是點(diǎn)擊、滑動(dòng)、長(zhǎng)按這些，因此導(dǎo)航模式一般也就分為以下幾種：
一、標(biāo)簽式導(dǎo)航
也就是我們平時(shí)說(shuō)的tab式導(dǎo)航，是手機(jī)應(yīng)用中更 普遍、更 常用的導(dǎo)航模式，適合在相關(guān)的幾類信息中間頻繁的調(diào)轉(zhuǎn)，這類信息優(yōu)先級(jí)較高、用戶使用頻繁，彼此之間相互獨(dú)立，通過(guò)標(biāo)簽式導(dǎo)航的引導(dǎo)，用戶可以迅速的實(shí)現(xiàn)頁(yè)面之間的切換且不會(huì)迷失方向，簡(jiǎn)單而 。
在此，鄭州seo公司老秦提醒大家需要注意的是標(biāo)簽式導(dǎo)航根據(jù)邏輯和重要性控制在5個(gè)以內(nèi)，多余5個(gè)用戶難以記憶而且容易迷失。
而標(biāo)簽式導(dǎo)航還細(xì)分為底部tab式導(dǎo)航、頂部tab式導(dǎo)航、底部tab的擴(kuò)展導(dǎo)航這三種。
1、底部tab式導(dǎo)航
如果此時(shí)你觀察一下自己手機(jī)中常用的APP你就會(huì)發(fā)現(xiàn)QQ、微信、淘寶、微博、美團(tuán)、京東等大部 都是底部tab式導(dǎo)航，這是符合拇指熱區(qū)操作的一種導(dǎo)航模式，那么什么是拇指熱區(qū)呢？當(dāng)你走在路上、單手持握手機(jī)并操作，站在公交車上，一手拉扶手，另一只手操作等等這些場(chǎng)景時(shí)，你更 常用的操作就是右手單手持握并操作手機(jī)，因此，對(duì)于手機(jī)來(lái)說(shuō)，為觸摸進(jìn)行交互設(shè)計(jì)，主要針對(duì)的就是拇指。
但在手機(jī)操作中，拇指的可控范圍有限，缺乏靈活度。尤其是在如今的大屏手機(jī)上，拇指的可控范圍還不到整個(gè)屏幕的三分之一——主要集中在屏幕底部、與拇指相對(duì)的另外一邊，當(dāng)用右手持握手機(jī)的時(shí)候，左撇子畢竟是少數(shù)，我們還是要為主流用戶設(shè)計(jì)，拇指的熱區(qū)如下圖所示：
隨著手機(jī)屏幕越來(lái)越大，內(nèi)容顯示變多了，但是單手操作變難了，這也就是為什么，工具欄和導(dǎo)航條一般都在手機(jī)界面的下邊緣，而將導(dǎo)航放置在屏幕底部即拇指熱區(qū)，這樣的方式為單手持握時(shí)拇指操作帶來(lái)了更大的舒適性。
將導(dǎo)航放置在屏幕底部也不僅僅關(guān)乎到拇指操作的舒適性，還關(guān)系到另一個(gè)問(wèn)題：如果放在上面，用手指操作時(shí)，會(huì)擋住閱讀的視線。如果控件在底部，不管手怎么手機(jī)，至少不會(huì)擋住主要內(nèi)容，從而給予清晰的視角，呈遞內(nèi)容的屏幕在上方，控制按鍵在下方。
這也是為什么我是個(gè)果粉的原因，iPhone把一個(gè)需要按壓的home鍵放在手機(jī)底部比Android手機(jī)將三個(gè)觸摸式物理按鍵放在底部高明多了，這些接近屏幕邊緣的物理按鍵擠在一起，手指非常不便于操作。(華為甚至直接將3個(gè)物理按鍵放在了屏幕里)，尤其是在我玩游戲的時(shí)候總會(huì)誤觸發(fā)這3個(gè)物理按鍵，造成無(wú)意退出，非常不爽。如果再將導(dǎo)航也放置在底部，只能對(duì)舒適性說(shuō)拜拜了(市面上的主流Android手機(jī))。
2、頂部tab式導(dǎo)航
Android的物理按鍵已經(jīng)放在底部了，為了不產(chǎn)生堆疊，很多Android應(yīng)用運(yùn)用了頂部tab式導(dǎo)航，這是一種妥協(xié)下的行為，下圖為微信Android和iOS圖：
而如今，在妥協(xié)物理按鍵和拇指操作舒適中，微信Android版拋棄了頂部導(dǎo)航的方式，和IOS保持了一致。
當(dāng)然頂部導(dǎo)航也不是那么一無(wú)是處，QQ音樂(lè)和酷我音樂(lè)現(xiàn)在用的就是頂部Tab式導(dǎo)航，為了更好的瀏覽基本信息(歌手、歌曲名)、以及支持快捷操作(播放/暫停)播放器需要固定在底部,那么頂部tab導(dǎo)航不失為一個(gè)好選擇，如下圖：
還有騰訊新聞和網(wǎng)易新聞這種新聞?lì)怉PP，由于內(nèi)容、分類較多，運(yùn)用頂部和底部雙tab導(dǎo)航，而切換頻率更高 的tab放在頂部，這是為什么呢？因?yàn)樾侣勗诿總€(gè)tab都是沉浸式閱讀，更 常用的操作是在一個(gè)tab中不斷地下滑閱讀內(nèi)容，將常用的tab放在頂部，加入手勢(shì)切換的操作，反倒能帶來(lái)更好地閱讀體驗(yàn)，如下圖：
小結(jié)：在兩種情況下可以選擇頂部tab式導(dǎo)航：
a、某項(xiàng)功能需要 固定在底部，那么其他tab只能固定在頂部，但為了方便操作，頂部tab導(dǎo)航更好 支持手勢(shì)操作，即滑動(dòng)即可切換。
b、該APP是沉浸式體驗(yàn)，如新聞、小說(shuō)等，為了帶給用戶更好的閱讀體驗(yàn)，可以將tab放在頂部。
3、底部tab式導(dǎo)航的擴(kuò)展形式
在有些情況下，簡(jiǎn)單的底部tab式導(dǎo)航難以滿足更多的操作功能，這個(gè)時(shí)候我們就需要一些擴(kuò)展形式來(lái)滿足需求，如微博和QQ空間都做了這種擴(kuò)展，也因此給設(shè)計(jì)增加了一些個(gè)性化的亮點(diǎn)，如圖所示：
在這些APP中，為了讓用戶更簡(jiǎn)單的貢獻(xiàn)內(nèi)容，突出了按鈕的設(shè)計(jì)，讓平淡的標(biāo)簽欄多了幾分趣味。
標(biāo)簽導(dǎo)航總結(jié)：
實(shí)際上，底部Tab模式導(dǎo)航在iOS和Android上一直是更 安全的一種導(dǎo)航模式，他不怎么出彩，但是 不會(huì)犯錯(cuò)，在大屏幕時(shí)代，底部Tab模式的導(dǎo)航更能適應(yīng)，也更好設(shè)計(jì)。
適用于：入口分類數(shù)目不多，可以控制在5個(gè)以內(nèi)，且用戶需要在入口間頻繁切換來(lái)執(zhí)行多個(gè)任務(wù)。
需要注意：結(jié)構(gòu)太過(guò)復(fù)雜而且不穩(wěn)定的應(yīng)用不適合標(biāo)簽式導(dǎo)航。
二、抽屜式導(dǎo)航
經(jīng)常和底部tab式導(dǎo)航結(jié)合使用的抽屜式導(dǎo)航，我們可以稱之為優(yōu)雅的隱喻。抽屜式導(dǎo)航將部分信息內(nèi)容進(jìn)行隱藏，突出了應(yīng)用的核心功能。設(shè)想你的產(chǎn)品信息層級(jí)有非常多的頁(yè)面和內(nèi)容，難以在一屏內(nèi)顯示大部 內(nèi)容，那么你一定壹 先會(huì)想到去設(shè)計(jì)一個(gè)底部或頂部的tab導(dǎo)航，但導(dǎo)航太多無(wú)疑顯得臃腫，而且使用戶難以點(diǎn)擊，那么這個(gè)時(shí)候，抽屜式導(dǎo)航是個(gè)不錯(cuò)的選擇。
但是，抽屜欄式導(dǎo)航有兩大缺陷：
1、在大屏幕手機(jī)上，單手持握時(shí)處于操作盲區(qū)，難以點(diǎn)擊
我們看到隨著iPhone6和iPhone6 plus的推出，到今年6S的持續(xù)推進(jìn)，大屏幕手機(jī)時(shí)代就這么不可阻擋的來(lái)了，而屏幕頂部左上角的抽屜欄位置，一個(gè)需要被經(jīng)常操作的入口，現(xiàn)在，處在了操作盲區(qū)，如下圖：
2、抽屜式導(dǎo)航可能會(huì)降低你產(chǎn)品一半的用戶參與度
抽屜欄為頁(yè)面帶來(lái)干凈的設(shè)計(jì)的同時(shí)，也讓用戶忽視隱藏的信息，既然你 眼看不到這些入口，那么你也就會(huì)時(shí)常忘記它們?cè)谀膬?，這也導(dǎo)致了隱藏在抽屜欄內(nèi)的信息內(nèi)容用戶點(diǎn)擊率下降，參與感降低。
那么，問(wèn)題來(lái)了，到底什么時(shí)候適合用側(cè)導(dǎo)航呢？
我們總結(jié)一下：
a、如果應(yīng)用主要的功能和內(nèi)容都在一個(gè)頁(yè)面里面，只是一些用戶設(shè)置這類低頻操作內(nèi)容需要顯示在其他頁(yè)面里，為了讓主頁(yè)面看上去干凈美觀，可以把這些輔助功能放在抽屜欄里（具體可查看鄭州seo公司老秦博客《網(wǎng)站導(dǎo)航的優(yōu)化方法和設(shè)置技巧》的相關(guān)介紹）。
b、如果你的應(yīng)用有不同的視圖，且他們是平級(jí)的，需要用戶同等地對(duì)待，抽屜欄將會(huì)浪費(fèi)掉大多數(shù)的用戶對(duì)于側(cè)邊欄中入口的潛在參與度和交互程度。
c、在大屏?xí)r代使用抽屜欄，手勢(shì)操作顯得尤為重要，從屏幕邊緣喚出抽屜欄是個(gè)不錯(cuò)的選擇。
需要注意的是：需要用戶有一定參與的信息層級(jí)，更好 不好放置在抽屜欄。
三、列表式導(dǎo)航
如果說(shuō)標(biāo)簽式導(dǎo)航是APP中更 普遍的導(dǎo)航方式，那么列表式導(dǎo)航就是更 必不可少的一種信息承載模式，這種導(dǎo)航結(jié)構(gòu)簡(jiǎn)單清晰、易于理解、冷靜 ，能夠幫助用戶快速定位到對(duì)應(yīng)內(nèi)容，在APP中的應(yīng)用也分為兩種：
1、作為主導(dǎo)航使用
如果該手機(jī)端設(shè)備主要表達(dá)的信息層級(jí)較為單一，且并不會(huì)在入口間頻繁且反復(fù)跳轉(zhuǎn)，那么將列表式導(dǎo)航作為主導(dǎo)航是一種不錯(cuò)的選擇。
例如雜志Elle，作為一個(gè)雜志APP，他以文字、圖片表達(dá)為主，層級(jí)淺且內(nèi)容評(píng)級(jí)，用列表式導(dǎo)航作為主導(dǎo)航來(lái)構(gòu)架內(nèi)容，簡(jiǎn)單而直接，如上圖所示。
2、作為輔助導(dǎo)航來(lái)展示二級(jí)甚至更深層級(jí)的內(nèi)容
你幾乎在所以APP中都能看到它的應(yīng)用，作為信息梳理?xiàng)l目，列表數(shù)量盡量保持在一屏以內(nèi)，超過(guò)一屏更好 再分一級(jí)，而且按照人一次只能記住4項(xiàng)事物的心理法則，更 重要的內(nèi)容歸納在前4個(gè)列表更容易被人們記住。
如果不同種類的內(nèi)容放在同一頁(yè)面，那么要注意為這些內(nèi)容分類，比如微信的設(shè)置頁(yè)面，用留白的方式來(lái)區(qū)分內(nèi)容的不同，如下圖所示：
總結(jié)：
列表式導(dǎo)航大多作為輔助導(dǎo)航來(lái)展示二級(jí)甚至更深層次的內(nèi)容，若要作為主導(dǎo)航，需要 滿足層級(jí)淺且內(nèi)容平級(jí)的條件，需要注意的是：
a、列表式導(dǎo)航的數(shù)量保持在一屏以內(nèi)，超過(guò)一屏更好 再分一級(jí)。
b、將更 終要的內(nèi)容歸納在前4個(gè)列表更容易被人們記住。
c、要注意為列表內(nèi)容分類。
四、平鋪式導(dǎo)航
當(dāng)你的信息足夠扁平，可以嘗試平鋪式導(dǎo)航。這種導(dǎo)航方式很容易帶來(lái)高大上的視覺(jué)體驗(yàn)，更大程度 的保證了頁(yè)面的簡(jiǎn)潔性和內(nèi)容的完整性，且一般都會(huì)結(jié)合滑動(dòng)切換的手勢(shì)，操作起來(lái)也非常方便（具體可查看鄭州seo公司老秦博客《如何在網(wǎng)站策劃中做好導(dǎo)航設(shè)計(jì)》的相關(guān)介紹）。
PChouse是一個(gè)家居雜志的APP，雜志休閑隨意的特質(zhì)，非常適合平鋪式導(dǎo)航，更大 限度的保持了圖片的完整性，如下圖所示：
但缺點(diǎn)是用戶只能切換的相鄰頁(yè)面，很難跳轉(zhuǎn)到非相鄰的頁(yè)面，很容易迷失位置，因此平鋪式導(dǎo)航都會(huì)添加幾個(gè)小點(diǎn)來(lái)指示當(dāng)前位置。如墨跡天氣中切換城市的操作就運(yùn)用了平鋪式導(dǎo)航，優(yōu)點(diǎn)是可以在一個(gè)頁(yè)面完整展示當(dāng)前城市的情況，快速切換到其他城市。
但如果你設(shè)置的城市比較多，就很難快速定位到某個(gè)城市，但所幸手勢(shì)操作切換方便，且正常情況下，用戶更 多只會(huì)設(shè)置2-3個(gè)頁(yè)面，不會(huì)造成太大的負(fù)擔(dān)。
淘寶中的店鋪推薦也使用了平鋪式導(dǎo)航，推薦店鋪雖然有40個(gè)之多，但用數(shù)字表達(dá)出了明確位置的同時(shí)，也加入了手勢(shì)切換，增加了易用性和趣味性。
總結(jié)：
輪播式導(dǎo)航比較適用于足夠扁平化的內(nèi)容和隨意瀏覽的閱讀模式。
需要注意的是：無(wú)法跳轉(zhuǎn)至費(fèi)相鄰頁(yè)面，如果入口間需要反復(fù)跳轉(zhuǎn)，則不適合這種模式。
五、宮格式導(dǎo)航
這種導(dǎo)航模式非常常見(jiàn)，但是卻不常用。
常見(jiàn)是因?yàn)?，無(wú)論你用的是Android還是iOS，每天一打開手機(jī)，宮格式導(dǎo)航就會(huì)對(duì)你說(shuō)hello了(就是下圖啦)
每一個(gè)APP都是一個(gè)宮格，這些宮格聚集在中心頁(yè)面，用戶只能在中心頁(yè)面進(jìn)入其中一個(gè)宮格，如果想要進(jìn)入另一個(gè)宮格，需要 要先回到中心頁(yè)面，再進(jìn)入另一個(gè)宮格，每個(gè)宮格相互獨(dú)立，它們的信息間也沒(méi)有任何交集，無(wú)法跳轉(zhuǎn)互通，因?yàn)檫@種特質(zhì)，宮格式導(dǎo)航被廣泛應(yīng)用于各平臺(tái)系統(tǒng)的中心頁(yè)面，這就是為什么說(shuō)他常見(jiàn)。
但是為什么不常用呢，大家可以翻一下手機(jī)里的APP，看看哪個(gè)APP的主導(dǎo)航用了宮格式導(dǎo)航？你可能只能找到一個(gè)更 常用的，尤其是愛(ài)自拍的親們-美圖秀秀，如下圖所示：
經(jīng)常使用美圖秀秀的人都會(huì)有一個(gè)共同的煩惱，例如我拍了一張圖片，我需要美圖一下，我的心理模型是這樣的：進(jìn)入美圖秀秀-打開一張圖片-先祛斑祛痘、放大眼睛、瘦個(gè)臉-更 后加上 (自然/甜美可人/粉嫩系)-保存圖片。
但是美圖秀秀給我的實(shí)際模型卻是這樣的：進(jìn)入美圖秀秀-打開一張圖片-進(jìn)入人像美容-祛斑祛痘、放大眼睛、瘦個(gè)臉-保存圖片-再進(jìn)入美化圖片-加個(gè) -再次保存。這樣做的結(jié)果是流程復(fù)雜，而且我多存了一張沒(méi)用的照片，還要到照片里進(jìn)行刪除。
這就是宮格式導(dǎo)航的缺陷，信息互斥，無(wú)法相互通達(dá)，只能給用戶帶來(lái)了更多的操作步驟。
總結(jié)：
宮格式導(dǎo)航適合入口相互獨(dú)立互斥，且不需要交叉使用的信息歸類，一旦入口需要有所交集，必然導(dǎo)致更多的操作負(fù)累，這個(gè)時(shí)候只能根據(jù)產(chǎn)品特性做出權(quán)衡，如果不適合，建議果斷拒絕這種方式。
六、懸浮icon導(dǎo)航
懸浮icon導(dǎo)航，是將導(dǎo)航頁(yè)面分層，無(wú)論你到達(dá)APP的哪個(gè)頁(yè)面，懸浮icon永遠(yuǎn)懸浮在上面，你依靠懸浮層隨時(shí)可以去想要去的地方，同時(shí)，為了讓懸浮icon不遮擋某個(gè)頁(yè)面的操作，通常懸浮的icon都可以在屏幕邊緣自由手機(jī)。
iOS系統(tǒng)就運(yùn)用了這種導(dǎo)航模式-Assistive Touch, Assistive Touch是在iOS5出現(xiàn)之后搭載的新的輔助功能，網(wǎng)上很多人吐槽這個(gè)懸浮方塊非常礙事，還有很多人說(shuō)這是因?yàn)閔ome鍵質(zhì)量不佳而且官方并沒(méi)有明確提出有效的解決方案，所以Assistive Touch是曲線救國(guó)，此處應(yīng)有笑聲…我更 早的一部4S用了2年，摔碎屏2次，home鍵都依然堅(jiān)挺，撇開home鍵不談，單說(shuō)懸浮icon在大屏幕時(shí)代發(fā)揮的作用，當(dāng)你單手持握手機(jī)，拇指在手機(jī)中部瀏覽，你想回到主屏幕，但是手指卻難以到達(dá)屏幕底部，懸浮方塊在這個(gè)時(shí)候就能為你提供快捷操作。
而且你可以在Assistive Touch里自定義頂層菜單，我比較喜歡里面的屏幕快照功能，不用按住電源鍵和home鍵就能截屏的感覺(jué)棒棒噠！
Assistive Touch從iOS5一直活到iOS9，真不是一個(gè)雞肋的功能，關(guān)鍵看你怎么用。
在Android的Material Design中，同樣提出了懸浮icon的設(shè)計(jì)概念。
盡管現(xiàn)在很難看到懸浮icon作為導(dǎo)航的設(shè)計(jì)，但我相信隨著大屏的發(fā)展，懸浮式icon一定會(huì)越來(lái)越廣泛的使用。
總結(jié)：
懸浮式icon是一個(gè)非常便捷的操作入口，也適應(yīng)大屏幕時(shí)代，但需要注意的是：
a、懸浮式icon會(huì)遮擋某些頁(yè)面的操作，在設(shè)計(jì)的時(shí)候應(yīng)該考慮進(jìn)去，比如無(wú)論在那個(gè)頁(yè)面永遠(yuǎn)為懸浮icon留有位置。
b、在某些信息層級(jí)繁多且復(fù)雜的APP，讓用戶自主決定是否需要調(diào)出懸浮式icon，或者讓用戶自定義菜單會(huì)更加符合用戶的心理預(yù)期。
鄭州seo公司老秦博客點(diǎn)評(píng)：
以上便是我總結(jié)的導(dǎo)航設(shè)計(jì)，但大家一定不能被現(xiàn)有的導(dǎo)航模式所束縛，未來(lái)會(huì)有新的導(dǎo)航模式，新的操作手勢(shì)，設(shè)計(jì)的心應(yīng)該是自由的，若你羽翼未豐，就在規(guī)則的天空中飛行，可能不會(huì)出彩但不至于犯錯(cuò)；若你已成雄鷹，便可自由飛翔，突破規(guī)則，甚至建立自己的規(guī)則。
更 后總結(jié)一下：
標(biāo)簽式導(dǎo)航：更 常用、更 不易出錯(cuò)，請(qǐng) 時(shí)間考慮它。
抽屜式導(dǎo)航：如果你的信息層級(jí)繁多，可以考慮將輔助類內(nèi)容放在抽屜中。
列表式導(dǎo)航：作為輔助導(dǎo)航來(lái)展示二級(jí)甚至更深層級(jí)的內(nèi)容，每個(gè)APP必不可少，但請(qǐng)注意數(shù)量與分類。
平鋪式導(dǎo)航：如果你的內(nèi)容是隨意瀏覽，無(wú)需來(lái)回跳轉(zhuǎn)的，可以考慮它。
宮格式導(dǎo)航：不建議在APP中作為主導(dǎo)航使用，如果非使用不可，請(qǐng)?jiān)黾犹D(zhuǎn)的關(guān)聯(lián)性。
懸浮式導(dǎo)航：更適應(yīng)大屏的導(dǎo)航模式，不妨試一試，但注意不要讓它遮擋住某些頁(yè)面的操作。
更 后，根據(jù)網(wǎng)站層級(jí)的深度和廣度，選擇適合的導(dǎo)航模式，是手機(jī)端網(wǎng)站設(shè)計(jì)中的關(guān)鍵一環(huán)，與大家共勉。
版權(quán)聲明：本站部分文章，由 鄭州路普科技整理發(fā)表(信息來(lái)自互聯(lián)網(wǎng),不代表本站觀點(diǎn))，如有冒犯請(qǐng)聯(lián)系我們
