根據産品層級的深度和(hé)廣度，選擇适合的導航模式，是産品設計(jì)中的關鍵一環。與大(dà)家(jiā)共勉。
寫在前面：看了很(hěn)多(duō)總結導航的文章，其實都基本雷同，但(dàn)是都覺得(de)不夠細緻，也不是從我們常用的産品去分析的，因此用自己的思路重新分析了一遍，某些(xiē)段落來(lái)自引用，比如拇指熱區(qū)，某些(xiē)來(lái)自我讀過的文章，但(dàn)大(dà)部分的分析來(lái)自我的原創。這篇文章應該說是站(zhàn)在巨人(rén)的肩膀上(shàng)，自己的一些(xiē)淺見。
任何APP的組織信息都需要以某種導航框架固定起來(lái)，就像是建築工人(rén)拔地而起的高(gāo)樓大(dà)廈一樣，地基非常重要，之後你(nǐ)想要蓋多(duō)少(shǎo)層樓、每層樓有(yǒu)多(duō)少(shǎo)間(jiān)房(fáng)，都在地基的基礎上(shàng)構成。而一個(gè)新的産品也是這樣，合适的導航框架，決定了産品之後的延伸和(hé)擴展。
不同的産品需求和(hé)商業目标決定了不同的導航框架的設計(jì)模式。而交互設計(jì)的第一步，就是決定導航的框架設計(jì)，框架确定後，才能開(kāi)始逐漸豐富血肉。
首先，我們要為(wèi)組織信息分層，在這一步驟，一定要做(zuò)好信息層級的扁平化，不能把所有(yǒu)的組織信息都鋪出來(lái)，這樣做(zuò)隻會(huì)讓用戶心煩意亂找不到想要的重要操作(zuò)，也不能把層級做(zuò)的很(hěn)深，用戶沒有(yǒu)那(nà)麽多(duō)耐心跟你(nǐ)玩躲貓貓。一定要将做(zuò)核心、最穩固、最根本的功能要素放在第一層頁面，其他得(de)內(nèi)容收在第二層、第三層、甚至更深。
之後，根據層級的深度和(hé)廣度來(lái)确定導航的設計(jì)模式。不要覺得(de)這有(yǒu)多(duō)難，移動端的屏幕尺寸就這麽大(dà)，操作(zuò)方式也無非就是點擊、滑動、長按這些(xiē)。因此導航模式一般也就分為(wèi)以下7種(當然你(nǐ)可(kě)以在這七種的基礎上(shàng)互相組合)接下來(lái)我們可(kě)以具體(tǐ)分析一下這七種導航模式。
一、标簽式導航
也就是我們平時(shí)說的tab式導航，是移動應用中最普遍、最常用的導航模式，适合在相關的幾類信息中間(jiān)頻繁的調轉。這類信息優先級較高(gāo)、用戶使用頻繁，彼此之間(jiān)相互獨立，通(tōng)過标簽式導航的引導，用戶可(kě)以迅速的實現頁面之間(jiān)的切換且不會(huì)迷失方向，簡單而高(gāo)效。需要注意的是标簽式導航根據邏輯和(hé)重要性控制(zhì)在5個(gè)以內(nèi)，多(duō)餘5個(gè)用戶難以記憶而且容易迷失。
而标簽式導航還(hái)細分為(wèi)底部tab式導航、頂部tab式導航、底部tab的擴展導航這三種。
1、底部tab式導航
如果此時(shí)你(nǐ)觀察一下自己手機中常用的APP你(nǐ)就會(huì)發現QQ、微信、淘寶、微博、美團、京東等全部都是底部tab式導航
這是符合拇指熱區(qū)操作(zuò)的一種導航模式，那(nà)麽什麽是拇指熱區(qū)呢?當你(nǐ)走在路上(shàng)、單手持握手機并操作(zuò);站(zhàn)在公交車(chē)上(shàng)，一手拉扶手，另一隻手操作(zuò)等等這些(xiē)場(chǎng)景時(shí)，你(nǐ)最常用的操作(zuò)就是右手單手持握并操作(zuò)手機，因此，對于手機來(lái)說，為(wèi)觸摸進行(xíng)交互設計(jì)，主要針對的就是拇指。
但(dàn)在手機操作(zuò)中，拇指的可(kě)控範圍有(yǒu)限，缺乏靈活度。尤其是在如今的大(dà)屏手機上(shàng)，拇指的可(kě)控範圍還(hái)不到整個(gè)屏幕的三分之一——主要集中在屏幕底部、與拇指相對的另外一邊。當用右手持握手機的時(shí)候(左撇子畢竟是少(shǎo)數(shù)，我們還(hái)是要為(wèi)主流用戶設計(jì)，拇指的熱區(qū)如下圖所示)
随着手機屏幕越來(lái)越大(dà)，內(nèi)容顯示變多(duō)了，但(dàn)是單手操作(zuò)變難了。這也就是為(wèi)什麽，工具欄和(hé)導航條一般都在手機界面的下邊緣，而将導航放置在屏幕底部即拇指熱區(qū)，這樣的方式為(wèi)單手持握時(shí)拇指操作(zuò)帶來(lái)了更大(dà)的舒适性。
将導航放置在屏幕底部也不僅僅關乎到拇指操作(zuò)的舒适性，還(hái)關系到另一個(gè)問題：如果放在上(shàng)面，用手指操作(zuò)時(shí)，會(huì)擋住閱讀的視(shì)線。如果控件在底部，不管手怎麽移動，至少(shǎo)不會(huì)擋住主要內(nèi)容，從而給予清晰的視(shì)角。呈遞內(nèi)容的屏幕在上(shàng)方，控制(zhì)按鍵在下方。
這也是為(wèi)什麽我是個(gè)果粉的原因，iPhone把一個(gè)需要按壓的home鍵放在手機底部比Android手機将三個(gè)觸摸式物理(lǐ)按鍵放在底部高(gāo)明(míng)多(duō)了，這些(xiē)接近屏幕邊緣的物理(lǐ)按鍵擠在一起，手指非常不便于操作(zuò)。(華為(wèi)甚至直接将3個(gè)物理(lǐ)按鍵放在了屏幕裏)，尤其是在我玩遊戲的時(shí)候總會(huì)誤觸發這3個(gè)物理(lǐ)按鍵，造成無意退出，非常不爽。如果再将導航也放置在底部，隻能對舒适性說拜拜了(市面上(shàng)的主流Android手機)
2、頂部tab式導航
Android的物理(lǐ)按鍵已經放在底部了，為(wèi)了不産生(shēng)堆疊，很(hěn)多(duō)Android應用運用了頂部tab式導航，這是一種妥協下的行(xíng)為(wèi)。(下圖為(wèi)微信Android和(hé)iOS圖)
而如今，在妥協物理(lǐ)按鍵和(hé)拇指操作(zuò)舒适中，微信Android版抛棄了頂部導航的方式，和(hé)IOS保持了一緻
當然頂部導航也不是那(nà)麽一無是處，QQ音(yīn)樂和(hé)酷我音(yīn)樂現在用的就是頂部Tab式導航，為(wèi)了更好的浏覽基本信息(歌(gē)手、歌(gē)曲名)、以及支持快捷操作(zuò)(播放/暫停)播放器(qì)需要固定在底部,那(nà)麽頂部tab導航不失為(wèi)一個(gè)好選擇(如下圖)
還(hái)有(yǒu)騰訊新聞和(hé)網易新聞這種新聞類APP，由于內(nèi)容、分類較多(duō)，運用頂部和(hé)底部雙tab導航，而切換頻率最高(gāo)的tab放在頂部，這是為(wèi)什麽呢?因為(wèi)新聞在每個(gè)tab都是沉浸式閱讀，最常用的操作(zuò)是在一個(gè)tab中不斷地下滑閱讀內(nèi)容，将常用的tab放在頂部，加入手勢切換的操作(zuò)，反倒能帶來(lái)更好地閱讀體(tǐ)驗。(如下圖)
小(xiǎo)結：在兩種情況下可(kě)以選擇頂部tab式導航，
l 某項功能必須固定在底部，那(nà)麽其他tab隻能固定在頂部，但(dàn)為(wèi)了方便操作(zuò)，頂部tab導航最好支持手勢操作(zuò)，即滑動即可(kě)切換;
l 該APP是沉浸式體(tǐ)驗，如新聞、小(xiǎo)說等，為(wèi)了帶給用戶更好的閱讀體(tǐ)驗，可(kě)以将tab放在頂部。
