假設(shè)我們需要建造一棟建筑，那么第一步需要做什么工作？——沒錯(cuò)，設(shè)計(jì)和規(guī)劃好地基，萬丈高樓平地起依靠的是穩(wěn)健合理的地基。
那么在移動(dòng)產(chǎn)品設(shè)計(jì)中的地基是什么？就是產(chǎn)品的導(dǎo)航設(shè)計(jì)，看過很多關(guān)于導(dǎo)航設(shè)計(jì)的文章，那么如何選擇合理的導(dǎo)航設(shè)計(jì)則至關(guān)重要，隨著手機(jī)操作屏幕的大屏化趨勢，導(dǎo)航設(shè)計(jì)的需求也一直在變化之中，今天我就站在前輩的肩膀上來聊一聊導(dǎo)航設(shè)計(jì)中的一些問題點(diǎn)。
1，認(rèn)識(shí)導(dǎo)航
導(dǎo)航的方式有很多種，正確的認(rèn)識(shí)現(xiàn)有導(dǎo)航模式，能夠幫助設(shè)計(jì)師或產(chǎn)品經(jīng)理很好的認(rèn)識(shí)產(chǎn)品的架構(gòu)。不同的導(dǎo)航方式可作為產(chǎn)品的主要導(dǎo)航，也可以穿插使用作為二級(jí)導(dǎo)航。導(dǎo)航作為產(chǎn)品的主要框架，在選擇導(dǎo)航時(shí)需要根據(jù)產(chǎn)品的需求來確定選用何種導(dǎo)航方式，這里就介紹下一些常見的主導(dǎo)航方式：
一、標(biāo)簽式導(dǎo)航
也就是我們平時(shí)說的tab式導(dǎo)航，是移動(dòng)應(yīng)用中最普遍、最常用的導(dǎo)航模式，適合在相關(guān)的幾類信息中間頻繁的調(diào)轉(zhuǎn)。這類信息優(yōu)先級(jí)較高、用戶使用頻繁，彼此之間相互獨(dú)立，通過標(biāo)簽式導(dǎo)航的引導(dǎo)，用戶可以迅速的實(shí)現(xiàn)頁面之間的切換且不會(huì)迷失方向，簡單而高效。需要注意的是標(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ī)并操作;站在公交車上，一手拉扶手，另一只手操作等等這些場景時(shí)，你最常用的操作就是右手單手持握并操作手機(jī)，因此，對(duì)于手機(jī)來說，為觸摸進(jìn)行交互設(shè)計(jì)，主要針對(duì)的就是拇指。
但在手機(jī)操作中，拇指的可控范圍有限，缺乏靈活度。尤其是在如今的大屏手機(jī)上，拇指的可控范圍還不到整個(gè)屏幕的三分之一——主要集中在屏幕底部、與拇指相對(duì)的另外一邊。
隨著手機(jī)屏幕越來越大，內(nèi)容顯示變多了，但是單手操作變難了。這也就是為什么，工具欄和導(dǎo)航條一般都在手機(jī)界面的下邊緣，而將導(dǎo)航放置在屏幕底部即拇指熱區(qū)，這樣的方式為單手持握時(shí)拇指操作帶來了更大的舒適性。
將導(dǎo)航放置在屏幕底部也不僅僅關(guān)乎到拇指操作的舒適性，還關(guān)系到另一個(gè)問題：如果放在上面，用手指操作時(shí)，會(huì)擋住閱讀的視線。如果控件在底部，不管手怎么移動(dòng)，至少不會(huì)擋住主要內(nèi)容，從而給予清晰的視角。呈遞內(nèi)容的屏幕在上方，控制按鍵在下方。
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)航也不是那么一無是處，QQ音樂和酷我音樂現(xiàn)在用的就是頂部Tab式導(dǎo)航，為了更好的瀏覽基本信息（歌手、歌曲名）、以及支持快捷操作（播放/暫停）播放器需要固定在底部,那么頂部tab導(dǎo)航不失為一個(gè)好選擇（如下圖）
標(biāo)簽式導(dǎo)航，也常融入一些個(gè)性化設(shè)計(jì)，例如在中間位置融合logo或產(chǎn)品最核心的功能，豐富標(biāo)簽欄樣式。如果標(biāo)簽放置的選擇過多，則可以采取重點(diǎn)導(dǎo)航集成的方式，這種新的導(dǎo)航方式從標(biāo)簽式導(dǎo)航中分離出來稱作：舵式導(dǎo)航。這點(diǎn)我們?cè)趒q空間，微博等產(chǎn)品中可以看見
總結(jié)：
標(biāo)簽式導(dǎo)航是iOS主推的導(dǎo)航模式，位于屏幕底部，在andriod上常見于頂部，這主要是考慮到android手機(jī)底部的虛擬按鈕會(huì)于標(biāo)簽堆積，這種布局方式能讓用戶直觀地了解app的核心功能。同時(shí)，使用上能很好的在幾個(gè)標(biāo)簽快速跳轉(zhuǎn)。標(biāo)簽控制在5個(gè)以內(nèi)，通過視差表現(xiàn)用戶當(dāng)前位置，頁面之間的切換快速又不容易迷失。但是隨著大屏手機(jī)的普及化，android手機(jī)頂部的標(biāo)簽欄也越來越不便于操作，微信6.2的改版就是一個(gè)信息，不過隨著手機(jī)設(shè)計(jì)的不斷變化，android與iOS平臺(tái)也趨于一致，如魅族系列的手機(jī)，底部只保留了一個(gè)home鍵，同時(shí)還支持輕觸返回的功能。
二、抽屜式導(dǎo)航
經(jīng)常和底部tab式導(dǎo)航結(jié)合使用的抽屜式導(dǎo)航，我們可以稱之為優(yōu)雅的隱喻。抽屜式導(dǎo)航將部分信息內(nèi)容進(jìn)行隱藏，突出了應(yīng)用的核心功能。設(shè)想你的產(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ò)的選擇。
但是，抽屜欄式導(dǎo)航有兩大缺陷：
1、在大屏幕手機(jī)上，單手持握時(shí)處于操作盲區(qū)，難以點(diǎn)擊
我們看到隨著iPhone6和iPhone6 plus的推出，到今年6S的持續(xù)推進(jìn)，大屏幕手機(jī)時(shí)代就這么不可阻擋的來了，而屏幕頂部左上角的抽屜欄位置，一個(gè)需要被經(jīng)常操作的入口，現(xiàn)在，處在了操作盲區(qū)。所以對(duì)于抽屜導(dǎo)航而言，手勢邊緣滑動(dòng)操作就顯得尤為重要（如下圖）
當(dāng)然也出現(xiàn)了一些產(chǎn)品將左上的菜單按鈕放置在左下的位置（如下圖）
2、?抽屜式導(dǎo)航可能會(huì)降低你產(chǎn)品一半的用戶參與度
抽屜欄為頁面帶來干凈的設(shè)計(jì)的同時(shí)，也讓用戶忽視隱藏的信息，既然你第一眼看不到這些入口，那么你也就會(huì)時(shí)常忘記它們?cè)谀膬骸＿@也導(dǎo)致了隱藏在抽屜欄內(nèi)的信息內(nèi)容用戶點(diǎn)擊率下降，參與感降低。
那么，問題來了，到底什么時(shí)候適合用側(cè)導(dǎo)航呢？
我們總結(jié)一下：
如果應(yīng)用主要的功能和內(nèi)容都在一個(gè)頁面里面。只是一些用戶設(shè)置這類低頻操作內(nèi)容需要顯示在其他頁面里。為了讓主頁面看上去干凈美觀，可以把這些輔助功能放在抽屜欄里。
如果你的應(yīng)用有不同的視圖，且他們是平級(jí)的，需要用戶同等地對(duì)待，抽屜欄將會(huì)浪費(fèi)掉大多數(shù)的用戶對(duì)于側(cè)邊欄中入口的潛在參與度和交互程度。
在大屏?xí)r代使用抽屜欄，手勢操作顯得尤為重要，從屏幕邊緣喚出抽屜欄是個(gè)不錯(cuò)的選擇。
需要注意的是：需要用戶有一定參與的信息層級(jí)，最好不要放置在抽屜欄，就在我剛剛寫這篇文章的時(shí)候，提到的對(duì)于好奇心日?qǐng)?bào)這類APP將菜單按鈕設(shè)計(jì)成一個(gè)圖標(biāo)懸浮于左下角時(shí)，能夠引起用戶的好奇心，從而去點(diǎn)擊該按鈕展開菜單欄。所以這里針對(duì)于菜單導(dǎo)航會(huì)降低用戶參與度的說法，其實(shí)是可以從設(shè)計(jì)上去進(jìn)行完善的。
三，桌面式導(dǎo)航
是一種類似手機(jī)桌面各個(gè)應(yīng)用入口的導(dǎo)航方式。每一個(gè)都是比較獨(dú)立的信息內(nèi)容，用戶進(jìn)入一個(gè)入口后，只處理與此入口相關(guān)的內(nèi)容，如果跳轉(zhuǎn)至其他入口，必須先回到匯總界面，桌面導(dǎo)航在工具類app中比較適用。每個(gè)工具都有一套獨(dú)立體系，這種導(dǎo)航不適合需要頻繁在幾個(gè)任務(wù)間切換的情況。隨著移動(dòng)產(chǎn)品內(nèi)容豐富，純粹的桌面式導(dǎo)航開始減少，更多的是融入到其他主導(dǎo)航中，承擔(dān)起二級(jí)導(dǎo)航的作用（支付寶客戶端）因?yàn)檫@種特質(zhì)，宮格式導(dǎo)航被廣泛應(yīng)用于各平臺(tái)系統(tǒng)的中心頁面，這就是為什么說他常見。
為什么這類導(dǎo)航不常用呢，大家可以翻一下手機(jī)里的APP，看看哪個(gè)APP的主導(dǎo)航用了宮格式導(dǎo)航？你可能只能找到一個(gè)最常用的，尤其是愛自拍的親們-美圖秀秀。
經(jīng)常使用美圖秀秀的人都會(huì)有一個(gè)共同的煩惱，例如我拍了一張圖片，我需要美圖一下，我的心理模型是這樣的：進(jìn)入美圖秀秀-打開一張圖片-先祛斑祛痘、放大眼睛、瘦個(gè)臉-最后加上特效（自然/甜美可人/粉嫩系）-保存圖片。
但是美圖秀秀給我的實(shí)際模型卻是這樣的:進(jìn)入美圖秀秀-打開一張圖片-進(jìn)入人像美容-祛斑祛痘、放大眼睛、瘦個(gè)臉-保存圖片-再進(jìn)入美化圖片-加個(gè)特效-再次保存。這樣做的結(jié)果是流程復(fù)雜，而且我多存了一張沒用的照片，還要到照片里進(jìn)行刪除。
這就是桌面式導(dǎo)航的缺陷，信息互斥，無法相互通達(dá)，只能給用戶帶來了更多的操作步驟。
四，圖片式導(dǎo)航
圖示是一種有趣的導(dǎo)航方式，它讓導(dǎo)航更加可視化，同時(shí)根據(jù)頁面內(nèi)容的變化，可以及時(shí)跟新圖片，適合以圖片為主的內(nèi)容，經(jīng)常變換的圖片也會(huì)讓用戶感受到欄目內(nèi)容跟新的及時(shí)性，對(duì)用戶來說更有吸引力。同時(shí)這種導(dǎo)航需要配置固定的欄目或標(biāo)題。防止不斷更新的圖片讓用戶找不到入口
五：列表式導(dǎo)航
列表式的導(dǎo)航更容易擴(kuò)展和分組，常用于設(shè)置，消息和承載大數(shù)量信息的界面。由于列表左右寬度較大。可以結(jié)合圖標(biāo)，標(biāo)題說明或消息數(shù)字提示等。為了讓列表信息更有層次，在設(shè)計(jì)上可以考慮分組或二級(jí)列表方式，二級(jí)列表可以做到展開的隱藏，方便用戶查找信息。列表導(dǎo)航通常用于二級(jí)頁，由于它與宮格導(dǎo)航一樣，不會(huì)默認(rèn)展示任何實(shí)質(zhì)內(nèi)容，所以通常app不會(huì)在首頁使用它。這種導(dǎo)航結(jié)構(gòu)清晰，易于理解，冷靜高效，能夠幫助用戶快速的定位去到對(duì)應(yīng)的頁面。列表項(xiàng)目可以通過間距、標(biāo)題等進(jìn)行分組
六：點(diǎn)聚式導(dǎo)航
點(diǎn)聚式導(dǎo)航，最早來源于path，他將用戶最頻繁使用的多個(gè)核心功能電匯聚在主界面中顯示，方便隨身呼出使用，由于點(diǎn)聚式導(dǎo)航所占空間小，所以它常出現(xiàn)在一些主要流程界面，作為全局導(dǎo)航使用。
如今隨著material design的盛行，其中加入的FAB按鈕則類似于該點(diǎn)聚式的導(dǎo)航的單一版，將其中最為常用的正向功能加入其中，作為單一界面的功能快捷鍵。目前雖然應(yīng)用的范圍不是特別廣，很多android將其集成了更多的功能，這點(diǎn)和舵式標(biāo)簽導(dǎo)航有類似。
七：跑馬燈導(dǎo)航
跑馬燈的導(dǎo)航方式，一般適合圖片或整塊內(nèi)容的并列展示，用戶通過左右手勢滑動(dòng)來聚焦到當(dāng)前內(nèi)容。一般來說，數(shù)量最多控制在5～7個(gè)，在設(shè)計(jì)上課提供視覺暗示，例如顯示下一張的部分內(nèi)容，或者添加分野指示器，讓用戶在瀏覽頁面時(shí)保持清晰的方向感和對(duì)數(shù)量的認(rèn)知。
跑馬燈導(dǎo)航一般是作為頁面中的重點(diǎn)推薦，進(jìn)行定時(shí)輪播，適用于信息類產(chǎn)品中使用。
總結(jié)：這七種是最常見的導(dǎo)航方式，認(rèn)識(shí)現(xiàn)有導(dǎo)航方式，能夠使你在羽翼未豐之時(shí)能夠正確的使用，待羽翼豐滿之時(shí)，可能會(huì)出現(xiàn)更加符合業(yè)務(wù)或產(chǎn)品架構(gòu)的導(dǎo)航方式。或者建立自己的規(guī)則。
