經(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ū)。（如下圖）
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é)一下：
l 如果應(yīng)用主要的功能和內(nèi)容都在一個(gè)頁面里面。只是一些用戶設(shè)置這類低頻操作內(nèi)容需要顯示在其他頁面里。為了讓主頁面看上去干凈美觀，可以把這些輔助功能放在抽屜欄里。
l 如果你的應(yīng)用有不同的視圖，且他們是平級(jí)的，需要用戶同等地對(duì)待，抽屜欄將會(huì)浪費(fèi)掉大多數(shù)的用戶對(duì)于側(cè)邊欄中入口的潛在參與度和交互程度。
l 在大屏?xí)r代使用抽屜欄，手勢(shì)操作顯得尤為重要，從屏幕邊緣喚出抽屜欄是個(gè)不錯(cuò)的選擇。
需要注意的是：需要用戶有一定參與的信息層級(jí)，最好不好放置在抽屜欄
三、列表式導(dǎo)航
如果說標(biāo)簽式導(dǎo)航是APP中最普遍的導(dǎo)航方式，那么列表式導(dǎo)航就是最必不可少的一種信息承載模式，這種導(dǎo)航結(jié)構(gòu)簡單清晰、易于理解、冷靜高效，能夠幫助用戶快速定位到對(duì)應(yīng)內(nèi)容。在APP中的應(yīng)用也分為兩種
1、 作為主導(dǎo)航使用
如果該APP主要表達(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)航來構(gòu)架內(nèi)容，簡單而直接。（如下圖）
2、 作為輔助導(dǎo)航來展示二級(jí)甚至更深層級(jí)的內(nèi)容
你幾乎在所以APP中都能看到它的應(yīng)用，作為信息梳理?xiàng)l目，列表數(shù)量盡量保持在一屏以內(nèi)，超過一屏最好再分一級(jí)，而且按照人一次只能記住4項(xiàng)事物的心理法則最重要的內(nèi)容歸納在前4個(gè)列表更容易被人們記住。如果不同種類的內(nèi)容放在同一頁面，那么要注意為這些內(nèi)容分類，比如微信的設(shè)置頁面，用留白的方式來區(qū)分內(nèi)容的不同（如下圖）
總結(jié)：
列表式導(dǎo)航大多作為輔助導(dǎo)航來展示二級(jí)甚至更深層次的內(nèi)容，若要作為主導(dǎo)航，必須滿足層級(jí)淺且內(nèi)容平級(jí)的條件
需要注意的是：
l 列表式導(dǎo)航的數(shù)量保持在一屏以內(nèi)，超過一屏最好再分一級(jí)，
l 將最終要的內(nèi)容歸納在前4個(gè)列表更容易被人們記住
l 要注意為列表內(nèi)容分類。
文章轉(zhuǎn)載請(qǐng)保留網(wǎng)址：http://www.wedoyun.com/news/solutions/1551.html
上一篇：手機(jī)網(wǎng)站設(shè)計(jì)：你可以在導(dǎo)航上多花點(diǎn)心思
下一篇：移動(dòng)網(wǎng)站優(yōu)化：移動(dòng)端導(dǎo)航的七種設(shè)計(jì)模式（上）
