移動app設(shè)計(jì):Tab導(dǎo)航是否是大勢所趨?
之前也寫過一篇文章《從逛商城學(xué)習(xí)產(chǎn)品設(shè)計(jì):信息架構(gòu)梳理如何從小白到精通?》簡單的介紹了信息架構(gòu)的梳理,算是入門吧。其實(shí)產(chǎn)品導(dǎo)航方式我個人覺得是根據(jù)產(chǎn)品類型和階段,結(jié)合產(chǎn)品功能邏輯架構(gòu)梳理來確定是比較合理的。個人不覺得tab導(dǎo)航就必然是所有產(chǎn)品都適用的,用大勢所趨這種表述,也覺得稍有不妥。但可以從產(chǎn)品發(fā)展/類型角度來談?wù)剬?dǎo)航方式的應(yīng)用和變化。
市面上比較常見的主導(dǎo)航方式從大類上包括:tab導(dǎo)航、側(cè)邊欄抽屜導(dǎo)航和平鋪式導(dǎo)航三類(三大類很容易理解:分別挖掘了屏幕的上下、左右或頁面中部)。細(xì)分的話有很多,也都是這三類導(dǎo)航的變體、組合等形式,在這里就不列舉了。三大導(dǎo)航方式,各有優(yōu)劣,下面簡單談?wù)剛€人對這三類導(dǎo)航的認(rèn)知:
側(cè)邊欄(抽屜)導(dǎo)航:
為什么先談側(cè)邊欄導(dǎo)航呢?因?yàn)榇_實(shí)這是爭議最多的一種導(dǎo)航方式。缺點(diǎn)比較明顯:
不夠暴露、需要用戶二次點(diǎn)擊。
但它的優(yōu)點(diǎn)就是:
1).側(cè)邊欄可以“收納”很多(很容易理解:因?yàn)閭?cè)邊欄的面積是比上下tab肯定是大的),也比較容易使得架構(gòu)比較扁平;
2).因?yàn)閭?cè)邊的“隱藏”可以保證主要頁面內(nèi)容的突出和沉浸式體驗(yàn)。
個人覺得因?yàn)閭?cè)邊欄的缺點(diǎn)是明顯的,因?yàn)?b>不建議將側(cè)邊欄導(dǎo)航方式作為主導(dǎo)航,但在兩種類型產(chǎn)品中可以嘗試,其目的是發(fā)揮側(cè)邊欄導(dǎo)航的優(yōu)勢:
1).早期產(chǎn)品,功能訴求相對單一,主要功能需要突出強(qiáng)調(diào),比如早期的《課程格子》(之前設(shè)計(jì)練手的產(chǎn)品,記憶比較深刻,學(xué)生黨比較熟悉),強(qiáng)調(diào)“課程表”這一核心功能,其他功能相對訴求較低,但僅限早期產(chǎn)品。
2).功能單一型主線產(chǎn)品,但內(nèi)容組織分類和賽選需求明顯,典型的像《郵箱大師》這里工具類應(yīng)用。側(cè)邊欄用于內(nèi)容分類和篩選。
tab導(dǎo)航:
最常見的是底部tab,這種導(dǎo)航方式,目前大家的認(rèn)可度比較高。很多應(yīng)用也從原先的側(cè)邊欄導(dǎo)航變?yōu)閠ab導(dǎo)航,其根本原因在于:它確實(shí)優(yōu)點(diǎn)大于缺點(diǎn)。就導(dǎo)航本身,它可以“精簡明了”也可以“包羅萬象”,用“發(fā)現(xiàn)”、“更多”這里的架構(gòu)梳理,可以整合很多內(nèi)容,但對于架構(gòu)梳理的能力要求相對較高,并不是所有的功能都是可以用“更多”來解決的。而且tab導(dǎo)航在主要功能架構(gòu)暴露、減少用戶點(diǎn)擊、保證頁面內(nèi)容的突出性(相對于側(cè)邊欄要弱,但可以接受)等方面其優(yōu)勢突出。唯一的缺點(diǎn)就是常駐帶來的沉浸式體驗(yàn)減弱(好像不那么明顯吧)。
tab導(dǎo)航因?yàn)槠鋬?yōu)點(diǎn)大于缺點(diǎn)的明顯性,廣泛被大家接受,也越來越常見。這也就為什么會被感覺是“必然的趨勢”,但真的是普適的嘛?我想說不是的。在產(chǎn)品發(fā)展早期,特別是一些工具類的產(chǎn)品,功能單一,硬生生的整出四個tab真的很難受。另外在應(yīng)用tab導(dǎo)航的時候,其關(guān)鍵的在于架構(gòu)梳理,一定要注意幾點(diǎn):
1).架構(gòu)梳理很重要:主要功能(組合)要突出,次要功能要整合,但不一定所有的次要功能都可以“更多”;
2).控制tab的數(shù)量,一般不超過5個,這個點(diǎn)也需要納入架構(gòu)梳理的思考范圍之列。
平鋪式(列表、桌面等)導(dǎo)航:
這類導(dǎo)航也比較常見,很多設(shè)計(jì)師喜歡這類導(dǎo)航,因?yàn)槠淙菀妆辉O(shè)計(jì)的很漂亮(列表式),具有視覺感,這也是這種導(dǎo)航方式的優(yōu)點(diǎn)之一。另外,平鋪式導(dǎo)航,架構(gòu)扁平,可拓展性相對較強(qiáng),特別適合內(nèi)容平臺類產(chǎn)品,功能述求一大堆的產(chǎn)品。其缺點(diǎn)也在于:不太適合早期產(chǎn)品或者功能單一型產(chǎn)品(除非列表是用來分類or篩選內(nèi)容)。同時,這種導(dǎo)航方式通常占用一整個頁面,也容易造成用戶走失(導(dǎo)航不是常駐)和迷茫(架構(gòu)扁平,內(nèi)容多,分類不準(zhǔn)確時不易查找)。
平鋪式導(dǎo)航,其實(shí)一般產(chǎn)品用的不多,內(nèi)容型平臺類產(chǎn)品比較常見。應(yīng)用時,一定要處理好架構(gòu)扁平和分類明確這個平衡點(diǎn)。
另外需要說的是,導(dǎo)航設(shè)計(jì),信息架構(gòu)梳理是基礎(chǔ)。
#專欄作家#
Mr湯進(jìn)er,微信公共號:chuangshe_space。人人都是產(chǎn)品經(jīng)理專欄作家,嚴(yán)格意義上的互聯(lián)網(wǎng)新人,學(xué)過設(shè)計(jì),現(xiàn)在做產(chǎn)品。關(guān)注互聯(lián)網(wǎng)產(chǎn)品、用戶體驗(yàn)設(shè)計(jì),實(shí)踐派的理論主義者,愛思考,喜歡碼字,愿意分享,希望同互聯(lián)網(wǎng)er一起交流學(xué)習(xí),共同進(jìn)步。
本文系作者授權(quán)發(fā)布,未經(jīng)許可,不得轉(zhuǎn)載。
寫得很好,平鋪式可以舉例嗎?
從我個人來說我喜歡Drawer的導(dǎo)航模式,主要原因是只用手指滑動就可以切換出列表頁面,不需要看清某個圖標(biāo)再去點(diǎn)擊,而且就我來說,走動中單手操作底部Tab確有不便。同時,使用底部Tab意味著到使用到次級功能時需要經(jīng)過多次頁面切換,如:點(diǎn)擊“更多”-切換到更多列表-點(diǎn)擊“我的資料”-切換到我的資料頁面,比使用Drawer多切換了一次頁面,相對來說會有更多的延遲、停頓感以及頁面切換帶來的距離感(用戶會覺得進(jìn)入到了三級頁面)。
不過的確很多著名產(chǎn)品最近從Drawer改回了底部Tab,比如知乎、餓了么,可能是用戶更加習(xí)慣底部Tab的方式吧。
我認(rèn)為單一功能性較強(qiáng)的應(yīng)用使用Drawer方式更好,比如餓了么、好奇心日報,打造簡潔酷炫的界面,促使用戶聚焦在核心功能上。
而功能多,業(yè)務(wù)復(fù)雜的應(yīng)用可以使用兩者相結(jié)合的方式,最典型的就是QQ。Tab顯示核心業(yè)務(wù)功能、Drawer中顯示次級功能。
個人見解,還請指正。
tab可能的確是用的最多的、