優(yōu)秀的APP導(dǎo)航設(shè)計(jì)，能夠合理地完美的展示產(chǎn)品的功能，并快速引導(dǎo)用戶使用APP產(chǎn)品功能。同時(shí)也增強(qiáng)了用戶的識(shí)別度。
之前，html5模版網(wǎng)(www.suosuyi.cn)跟大家分享過(guò)《3種常見(jiàn)的APP導(dǎo)航設(shè)計(jì)方案優(yōu)劣勢(shì)分析》，如果對(duì)APP導(dǎo)航設(shè)計(jì)不夠了解和清楚的APP設(shè)計(jì)小伙伴們，可以認(rèn)真閱讀回味下！
而今天老譚跟大家再來(lái)聊聊如何去為我們的APP項(xiàng)目選擇合適的APP導(dǎo)航設(shè)計(jì)，是一個(gè)很關(guān)鍵的一步！因?yàn)閮?yōu)秀的APP導(dǎo)航設(shè)計(jì)，會(huì)讓用戶輕松到達(dá)目的地而又不會(huì)干擾和困惑用戶的選擇。你們說(shuō)是不是呢？
APP設(shè)計(jì)師需要綜合產(chǎn)品經(jīng)理，前端交互等需求和建議。
1、經(jīng)典導(dǎo)航設(shè)計(jì)Tabber
Tabber是蘋(píng)果ios可以自動(dòng)生成一種導(dǎo)航控件，開(kāi)發(fā)起來(lái)方便。所以這種經(jīng)典的底部導(dǎo)航欄受到絕大數(shù)app設(shè)計(jì)師的青睞。這種設(shè)計(jì)符合手機(jī)端用戶單手操作的習(xí)慣，包括新版微信，淘寶，支付寶，百度手機(jī)等都采用的這一方式。這個(gè)APP導(dǎo)航方式占大多數(shù)。
一般為四個(gè)導(dǎo)航按鈕最為普遍，最方便操作的是第二和第三個(gè)按。受制于屏幕寬度的限制，通常采用Tabber導(dǎo)航設(shè)計(jì)方式，欄目的個(gè)數(shù)是有限的，不能超過(guò)5個(gè)。4個(gè)為最佳選擇。過(guò)多的話明顯不利于用戶的切換。從界面布局來(lái)看，也降低體驗(yàn)友好度。
突出Tabbar上展示的那些核心功能的按鈕，方便用戶快捷操作。
但是，目前也有部分APP在tabber的基礎(chǔ)上，衍生出了一種交互比較好的彈出導(dǎo)航菜單。
如圖：
這種方式應(yīng)該說(shuō)應(yīng)用了web端的元素和使用方式，相當(dāng)于有了二級(jí)菜單。呵呵，很不錯(cuò)的嘗試。如果導(dǎo)航菜單很多，除了下面我們說(shuō)到的抽屜式APP導(dǎo)航設(shè)計(jì)以外，這種彈出式的導(dǎo)航菜單何嘗不是一種選擇。
2、抽屜式滑動(dòng)導(dǎo)航
上面我們說(shuō)到了Tabbar并不是完美，它并不適用于過(guò)多的切換項(xiàng)。所以，抽屜式滑動(dòng)導(dǎo)航很好的解決了這個(gè)問(wèn)題！當(dāng)然2者也是可以互補(bǔ)使用。之前，html5模版網(wǎng)(www.suosuyi.cn)也提到過(guò)《APP設(shè)計(jì)中用戶體驗(yàn)比較好的“跳轉(zhuǎn)”效果匯總》
抽屜式導(dǎo)航通過(guò)縱向排列切換項(xiàng)解決了這一問(wèn)題。不過(guò)這也意味著它不能和主體內(nèi)容同時(shí)出現(xiàn)在屏幕上。
在大部分的APP導(dǎo)航設(shè)計(jì)當(dāng)中，通過(guò)點(diǎn)擊屏幕左上角（或者是右上角，如淘寶的APP）的按鈕點(diǎn)擊切換項(xiàng)，有些也可以通過(guò)向右滑動(dòng)手指來(lái)完成，不需要點(diǎn)擊上門(mén)的按鈕。算是一個(gè)簡(jiǎn)單的APP滑動(dòng)動(dòng)畫(huà)。
抽屜式滑動(dòng)導(dǎo)航也分為2種導(dǎo)航布局，
第一種：列表形式如下圖。
第二種：圖標(biāo)卡片式布局（ios7側(cè)邊導(dǎo)航設(shè)計(jì)）
3、APP導(dǎo)航界面之磁貼設(shè)計(jì)
磁貼——是一種全新設(shè)計(jì)語(yǔ)言的元素。類(lèi)似于win8 metro風(fēng)格布局。?
在這個(gè)觸摸屏流行的年代，基本的點(diǎn)擊、選中、拖動(dòng)等操作各種系統(tǒng)都一樣。所以，磁貼設(shè)計(jì)的方式在win系統(tǒng)上面很常見(jiàn)，但是也有很多APP才有了這樣導(dǎo)航，比如微信網(wǎng)站很多模板就是。如下面的干凈綠色的APP應(yīng)用程序?qū)Ш讲藛卧O(shè)計(jì)。
4、webAPP上面的 滑動(dòng)菜單跟移動(dòng)web菜單。簡(jiǎn)稱“超級(jí)菜單式”
移動(dòng)設(shè)備上的超級(jí)菜單式導(dǎo)航與網(wǎng)站所用的超級(jí)菜單導(dǎo)航類(lèi)似，它在一個(gè)較大的覆蓋面板上分組顯示已定義好格式的菜單選項(xiàng)。
這樣的app導(dǎo)航菜單在webAPP上面很常見(jiàn)，如163的新聞客戶端，百度siteAPP等
這種酷炫滑動(dòng)菜單是用戶通過(guò)在內(nèi)容頁(yè)面左右滑動(dòng)手指即可在不同的類(lèi)別之間進(jìn)行切換。
優(yōu)點(diǎn)：這種方式的在APP用戶體驗(yàn)改進(jìn)了很多，尤其在連續(xù)切換時(shí)其操作方式的連續(xù)性比較強(qiáng)，主體頁(yè)面的過(guò)渡也更加平滑，會(huì)產(chǎn)生更加流暢的體驗(yàn)。
缺點(diǎn)：一次滑動(dòng)只能切換到相鄰的類(lèi)別，要想直接切換到對(duì)應(yīng)類(lèi)別可以點(diǎn)擊上方的類(lèi)別列表，不過(guò)由于類(lèi)別過(guò)多，有時(shí)候可能需要滑動(dòng)一下類(lèi)別列表才能完成操作。
不過(guò)總體而言，如果需要在具有相似屬性類(lèi)別之間進(jìn)行較頻繁切換時(shí)，這種設(shè)計(jì)方式很值得參考。
還有一些導(dǎo)航菜單，直奔主題。對(duì)所有相關(guān)欄目展示全屏滑動(dòng)切換。比如優(yōu)酷視頻網(wǎng)站的APP。