當(dāng)前位置:首頁 > 新聞中心 > 解決方案
手機網(wǎng)站建設(shè):移動端抽屜式導(dǎo)航與列表式導(dǎo)航設(shè)計責(zé)任編輯 :李飛    文章來源 :星翼創(chuàng)想(16qt59sf.cn)    發(fā)布時間 :2015-11-17    閱讀次數(shù):4915

經(jīng)常和底部tab式導(dǎo)航結(jié)合使用的抽屜式導(dǎo)航,我們可以稱之為優(yōu)雅的隱喻。抽屜式導(dǎo)航將部分信息內(nèi)容進行隱藏,突出了應(yīng)用的核心功能。設(shè)想你的產(chǎn)品信息層級有非常多的頁面和內(nèi)容,難以在一屏內(nèi)顯示全部內(nèi)容,那么你一定首先會想到去設(shè)計一個底部或頂部的tab導(dǎo)航,但導(dǎo)航太多無疑顯得臃腫,而且使用戶難以點擊,那么這個時候,抽屜式導(dǎo)航是個不錯的選擇。


但是,抽屜欄式導(dǎo)航有兩大缺陷

1、在大屏幕手機上,單手持握時處于操作盲區(qū),難以點擊

我們看到隨著iPhone6和iPhone6 plus的推出,到今年6S的持續(xù)推進,大屏幕手機時代就這么不可阻擋的來了,而屏幕頂部左上角的抽屜欄位置,一個需要被經(jīng)常操作的入口,現(xiàn)在,處在了操作盲區(qū)。(如下圖)

網(wǎng)站導(dǎo)航設(shè)計 移動端導(dǎo)航設(shè)計 移動站點優(yōu)化 移動站點策劃

2、 抽屜式導(dǎo)航可能會降低你產(chǎn)品一半的用戶參與度

抽屜欄為頁面帶來干凈的設(shè)計的同時,也讓用戶忽視隱藏的信息,既然你第一眼看不到這些入口,那么你也就會時常忘記它們在哪兒。這也導(dǎo)致了隱藏在抽屜欄內(nèi)的信息內(nèi)容用戶點擊率下降,參與感降低。

那么,問題來了,到底什么時候適合用側(cè)導(dǎo)航呢?

我們總結(jié)一下:

l  如果應(yīng)用主要的功能和內(nèi)容都在一個頁面里面。只是一些用戶設(shè)置這類低頻操作內(nèi)容需要顯示在其他頁面里。為了讓主頁面看上去干凈美觀,可以把這些輔助功能放在抽屜欄里。

l  如果你的應(yīng)用有不同的視圖,且他們是平級的,需要用戶同等地對待,抽屜欄將會浪費掉大多數(shù)的用戶對于側(cè)邊欄中入口的潛在參與度和交互程度。

l  在大屏?xí)r代使用抽屜欄,手勢操作顯得尤為重要,從屏幕邊緣喚出抽屜欄是個不錯的選擇。

需要注意的是:需要用戶有一定參與的信息層級,最好不好放置在抽屜欄


三、列表式導(dǎo)航

如果說標(biāo)簽式導(dǎo)航是APP中最普遍的導(dǎo)航方式,那么列表式導(dǎo)航就是最必不可少的一種信息承載模式,這種導(dǎo)航結(jié)構(gòu)簡單清晰、易于理解、冷靜高效,能夠幫助用戶快速定位到對應(yīng)內(nèi)容。在APP中的應(yīng)用也分為兩種

1、 作為主導(dǎo)航使用

如果該APP主要表達的信息層級較為單一,且并不會在入口間頻繁且反復(fù)跳轉(zhuǎn),那么將列表式導(dǎo)航作為主導(dǎo)航是一種不錯的選擇。例如雜志Elle,作為一個雜志APP,他以文字、圖片表達為主,層級淺且內(nèi)容評級,用列表式導(dǎo)航作為主導(dǎo)航來構(gòu)架內(nèi)容,簡單而直接。(如下圖)

網(wǎng)站導(dǎo)航設(shè)計 移動端導(dǎo)航設(shè)計 移動站點優(yōu)化 移動站點策劃

2、 作為輔助導(dǎo)航來展示二級甚至更深層級的內(nèi)容

你幾乎在所以APP中都能看到它的應(yīng)用,作為信息梳理條目,列表數(shù)量盡量保持在一屏以內(nèi),超過一屏最好再分一級,而且按照人一次只能記住4項事物的心理法則最重要的內(nèi)容歸納在前4個列表更容易被人們記住。如果不同種類的內(nèi)容放在同一頁面,那么要注意為這些內(nèi)容分類,比如微信的設(shè)置頁面,用留白的方式來區(qū)分內(nèi)容的不同(如下圖)

網(wǎng)站導(dǎo)航設(shè)計 移動端導(dǎo)航設(shè)計 移動站點優(yōu)化 移動站點策劃

總結(jié):

列表式導(dǎo)航大多作為輔助導(dǎo)航來展示二級甚至更深層次的內(nèi)容,若要作為主導(dǎo)航,必須滿足層級淺且內(nèi)容平級的條件

需要注意的是:

l  列表式導(dǎo)航的數(shù)量保持在一屏以內(nèi),超過一屏最好再分一級,

l  將最終要的內(nèi)容歸納在前4個列表更容易被人們記住

l  要注意為列表內(nèi)容分類。


文章轉(zhuǎn)載請保留網(wǎng)址:http://16qt59sf.cn/news/solutions/1551.html

掃碼添加微信
159 8667 8737
24小時電話

返回頂部