APP導(dǎo)航設(shè)計(jì):它沒有描述中的那么神乎!

7 評論 18753 瀏覽 415 收藏 16 分鐘

關(guān)于移動端導(dǎo)航模式,我想你身邊已經(jīng)有很多很多類似的文章了,什么“標(biāo)簽式導(dǎo)航”、“抽屜式導(dǎo)航”、“列表式導(dǎo)航”、“葫蘆娃噴火式導(dǎo)航”、“天馬流星式導(dǎo)航”…甚至你以為掌握這些,就能游走產(chǎn)品信息架構(gòu)中的任何和導(dǎo)航有關(guān)的問題?,F(xiàn)實(shí)是:當(dāng)你在真正運(yùn)用時(shí),你才發(fā)現(xiàn)“咦?剛才葫蘆娃噴火式導(dǎo)航是咋用的啦”?所以在開始之前,你需要明白一個(gè)事實(shí):用戶體驗(yàn)是一個(gè)整體,脫離產(chǎn)品方向去解釋那些所謂的“葫蘆娃噴火式”毫無意義。

你的產(chǎn)品為什么需要導(dǎo)航設(shè)計(jì)

導(dǎo)航設(shè)計(jì)的目的就是需要突出產(chǎn)品的核心,扁平化用戶的任務(wù)路徑。無論是PC還是移動端,很難想象一個(gè)沒有導(dǎo)航的產(chǎn)品會是什么樣子,我們可能都會成為“瞎子”,悶頭亂撞。當(dāng)然,那些有導(dǎo)航的也別50步笑百步,錯(cuò)誤的使用導(dǎo)航模式,和沒使用導(dǎo)航的效果是一樣的,你的產(chǎn)品沒那么不言而喻,等待你產(chǎn)品的只有死路一條。

因此明白了導(dǎo)航設(shè)計(jì)的目的:突出產(chǎn)品核心,扁平化用戶任務(wù)路徑,下面的就是對產(chǎn)品的理解,產(chǎn)品的核心是什么?什么樣的導(dǎo)航模式最能反映產(chǎn)品的核心,包括是否起到了扁平用戶操作的作用?

它沒有描述中的那么神乎

抽屜式導(dǎo)航?它其實(shí)就是一種化繁為簡的“超級整理術(shù)”

抽屜式導(dǎo)航更多的被應(yīng)用于信息流產(chǎn)品設(shè)計(jì)中,這類產(chǎn)品注重核心內(nèi)容的展示,用戶的任務(wù)路徑較為單一,幾乎都是用于瀏覽產(chǎn)品的核心內(nèi)容;至于其他比較低頻的模塊入口則會隱藏在當(dāng)前界面后方,避免冗余的模塊搶奪用戶的眼球。

其實(shí)我并不喜歡將其稱為“XXX導(dǎo)航”,因?yàn)榭赡茉谖医忉屚晁袃?nèi)容之后,等你在工作中再遇到相似的情境,你可能又會疑問“咦?那個(gè)XXX導(dǎo)航是怎么用的來著”。

抽屜式導(dǎo)航本質(zhì)是什么?有人可能會說:“一種交互風(fēng)格”;再具體一點(diǎn),有人可能又會說:“交互風(fēng)格中的一種導(dǎo)航風(fēng)格”。如果今天你也看了我這篇文章,請你忘記這以上這兩種回答。抽屜式導(dǎo)航說到底就是一種化繁為簡的“超級整理術(shù)”?!?/8”法則告訴我們,80%的用戶只用那些20%功能,這20%功能就是信息流里面的核心功能;如果那80%不常用的功能也占用著最重要的位置,那么用戶就會被打擾,產(chǎn)生臃腫感,甚至?xí)艞壥褂卯a(chǎn)品。

1

標(biāo)簽式導(dǎo)航?它僅是讓用戶任務(wù)路徑更加扁平

同樣的,我們經(jīng)常會講到的,標(biāo)簽式、標(biāo)簽式,那么標(biāo)簽式導(dǎo)航的的本質(zhì)是什么呢?

在設(shè)計(jì)規(guī)劃期間,我們通過產(chǎn)品的信息架構(gòu)可以直觀的了解產(chǎn)品的核心功能,以及各功能之間的一個(gè)關(guān)系。當(dāng)產(chǎn)品的整個(gè)體驗(yàn)流中是以幾個(gè)常用功能模塊(PS:一般不超過5個(gè))貫穿的,意味著用戶需要在多個(gè)標(biāo)簽入口之間來回切換;為了保證切換的效率,將貫穿產(chǎn)品整個(gè)體驗(yàn)的流的模塊平鋪在Tab Bar位置,保證了用戶任務(wù)路徑的扁平。

2

桌面式導(dǎo)航?它只是對于扁平比較獨(dú)立的用戶任務(wù)路徑模塊的另一種思考

我前面提到了“當(dāng)產(chǎn)品的整體體驗(yàn)流是由幾個(gè)常用功能模塊貫穿而成時(shí),為了保證用戶任務(wù)路徑的扁平,我們將這幾個(gè)模塊平鋪在Tab Bar上,后來被冠以’標(biāo)簽式導(dǎo)航‘的稱呼”。那么當(dāng)產(chǎn)品的整體體驗(yàn)流不能由有限個(gè)(一般不超過5個(gè))功能模塊貫穿時(shí);或者說,整個(gè)體驗(yàn)流是由無限個(gè)(PS:這里的“無限”是相對的概念,一般數(shù)十個(gè)以上都可稱為無限個(gè))功能模塊集成而成的,那么這是我們是不是還可以平鋪在“Tab Bar”上呢?

“Tab Bar”就算了,因?yàn)橥ㄟ^相關(guān)競品分析,我們發(fā)現(xiàn)使用“桌面式”導(dǎo)航的應(yīng)用,每一個(gè)入口往往是比較獨(dú)立的信息內(nèi)容,用戶進(jìn)入一個(gè)入口后只處理與此入口相關(guān)的內(nèi)容,這就意味著用戶在幾個(gè)任務(wù)之間頻繁切換的概率比較低,這就意味著就算有標(biāo)簽式導(dǎo)航,也是個(gè)雞肋導(dǎo)航。但是由于功能入口眾多,我們還得前面提到的“平鋪”,不過這里的“平鋪”意義已經(jīng)不太一樣了,Tab Bar是為了保證來回切換任務(wù)的扁平,而這里的“平鋪”是用來保證用戶搜索行為的扁平,因此對展示功能入口數(shù)量的限制沒有Tab Bar那么苛刻,所以Table View就成了最好的舞臺,也就是我們一直神叨叨的“桌面式導(dǎo)航”。

3

菜單式導(dǎo)航?相比于扁平用戶任務(wù)路徑,凸顯產(chǎn)品的核心會顯的更加重要

對于像微博這樣開放性的信息流,用戶在不同情景和不同時(shí)段下可能會有不同的興趣域,我想看一下我喜愛明星最近的動態(tài)放松一下、我想看一下我的專業(yè)領(lǐng)域達(dá)人的動態(tài)學(xué)習(xí)一些干貨…不同的人的需求是不一樣的,同一個(gè)人不同時(shí)段的需求也是不一樣的,可能前一秒你還是“酷愛足球運(yùn)動的財(cái)經(jīng)男”,下一秒你很可能又會成為那個(gè)喜歡娛樂八卦的“清新女”。

通過相關(guān)競品與用戶訪談分析,我們發(fā)現(xiàn):該類產(chǎn)品的用戶在某個(gè)時(shí)間段的興趣域幾乎是特定的。比如我現(xiàn)在就想刷一些大V的干貨,因此決定了用戶頻繁切換的概率是比較低的。

說到這里,有人可能覺得這句話好像在哪里聽過?是的,桌面式導(dǎo)航也是這種情境——用戶頻繁切換的概率是比較低的,那么我們可不可以也像“桌面式導(dǎo)航”那樣,將這些興趣頻道入口平鋪在Table View上呢?

首先你想到了這一層,我很開心,因?yàn)槟阋呀?jīng)不再糾結(jié)那些神叨叨的形式了,開始追求“花架子”背后的機(jī)制了。其次不知道你注意沒有,桌面式導(dǎo)航為什么需要平鋪?因?yàn)楠?dú)立的功能入口太多了,我們?yōu)榱吮WC搜索行為的扁平而采用的招式。但是這里的興趣頻道是獨(dú)立且有限的。獨(dú)立性是菜單式導(dǎo)航與桌面式導(dǎo)航的共性,你還記得在桌面式導(dǎo)航我強(qiáng)調(diào)“平鋪只是為了服務(wù)搜索,和切換沒有關(guān)系”,但是菜單式導(dǎo)航的興趣頻道就那么幾個(gè)(有限性),沒有多少搜索成本,因此此時(shí)的“平鋪”似乎沒有太大意義;再想想我在第二部分講的:“導(dǎo)航設(shè)計(jì)的目的是突出產(chǎn)品的核心,扁平化用戶的任務(wù)路徑。”現(xiàn)在相比于扁平用戶的任務(wù)路徑,突出產(chǎn)品的核心(因?yàn)檫@里的產(chǎn)品更多的是信息流產(chǎn)品,信息流最強(qiáng)調(diào)沉浸體驗(yàn))反而會顯得更加重要,因此我們需要“超級整理術(shù)”,收起那些現(xiàn)在可能用不到的80%模塊,保留真正有用的20%,通過面積和內(nèi)容限制保證了此刻的用戶的沉浸體驗(yàn)。

4

點(diǎn)聚式導(dǎo)航?它僅是一種暖心的UCD法則的衍生物

點(diǎn)聚式導(dǎo)航最早來自于“Path”,它將用戶最頻繁使用的多個(gè)核心功能點(diǎn)匯聚在主界面中顯示,通常這些功能具有一定的交集,比如都是“發(fā)動態(tài)”用的,發(fā)音樂有關(guān)的動態(tài)、發(fā)LBS信息有關(guān)的動態(tài)、發(fā)照片有關(guān)的動態(tài);本質(zhì)其實(shí)是一種“超級整理術(shù)”中的合并同類項(xiàng)術(shù)。

為什么需要“合并同類項(xiàng)”?合并同類項(xiàng)是為了突出產(chǎn)品更重要的內(nèi)容,當(dāng)用戶已經(jīng)確定,自己需要那些同類項(xiàng)來豐富自己的移動端體驗(yàn),此時(shí)在分解同類項(xiàng),并且分解的過程是那么的有趣。懂你+有趣=暖心。

v2

走馬燈導(dǎo)航?它僅想讓你多看她一眼

看到只顯示1/8的圖片,你會本能地把它滑出來,因?yàn)閺?qiáng)迫癥在作怪;當(dāng)然你可能抑制力很好,沒有滑,但是1/8不完整圖片也會讓你感覺別扭;只要你“別扭了”它的目的已經(jīng)達(dá)到了,你的眼球已經(jīng)被它“Catch”了。換句話說,它希望你看到這些內(nèi)容(和商業(yè)目標(biāo)有關(guān)),你的確因?yàn)閺?qiáng)迫癥驅(qū)使聚焦于這些內(nèi)容,結(jié)果發(fā)現(xiàn)“哎呦,不錯(cuò)喲”(迎合了用戶目標(biāo)),產(chǎn)品目標(biāo)、用戶目標(biāo)達(dá)成完美融合。

5

列表導(dǎo)航?一張名片的效果

“我是做xxx的,這是我的名片,如果哪天你有類似需求,歡迎找我啊,一定給你優(yōu)惠!”盡管你沒有買東西,但是銷售人員也成功了,因?yàn)樗N售了一張名片,有了這張名片,就等于你現(xiàn)在已經(jīng)是他的長線之魚。有一天你很想買一樣?xùn)|西,突然想起,那天那個(gè)人給你一張名片,依據(jù)名片上的不同信息,你成功從數(shù)十張里面找到了它,再次依據(jù)這張名片上的信息,你聯(lián)系到了那天的銷售人員,并且達(dá)成了交易。

這個(gè)過程中,名片扮演了“長線”的作用。試想一下:如果沒有名片,就意味著這條線就斷了,那位銷售者也因此損失了一條魚。對應(yīng)到產(chǎn)品,那位銷售者其實(shí)就是我們產(chǎn)品,顧客就是我們的用戶,那個(gè)“名片”或者“長線”就是這里的“列表導(dǎo)航”。通過列表導(dǎo)航的識別,用戶可以完成自己的目標(biāo),同時(shí)也帶來了商業(yè)目標(biāo)。

易識別性是其最重要的衡量準(zhǔn)則,因?yàn)樗休d了產(chǎn)品大量的數(shù)據(jù)信息,相當(dāng)于產(chǎn)品的語言元數(shù)據(jù),只有具備共同的語言元數(shù)據(jù),才有可能促使產(chǎn)品做到真正意義上的不言而喻!

6

圖示導(dǎo)航?它只是一種展示信息的扁平處理方式

針對以圖片為主的應(yīng)用平臺,經(jīng)常變化的圖片會讓用戶感受到欄目內(nèi)容的更新的及時(shí)性,對用戶來說是比較核心的點(diǎn)。圖示導(dǎo)航將這些更新的信息可視化,以達(dá)到展示信息扁平化的作用。這里需要注意的是,這種導(dǎo)航需要配置固定的欄目或標(biāo)題,防止不斷更新的圖片讓用戶找不到相應(yīng)的入口。

7

分段選項(xiàng)卡?它只是穿了馬甲的“標(biāo)簽式導(dǎo)航”

我們來思考這樣一個(gè)問題“當(dāng)產(chǎn)品的某個(gè)模塊是由有限個(gè)子集貫穿時(shí),我們該采用什么導(dǎo)航形式?”這句話,好眼熟啊~沒錯(cuò),在“標(biāo)簽式導(dǎo)航”部分我們提到“當(dāng)產(chǎn)品有有限個(gè)模塊貫穿時(shí),我們會采用平鋪在‘Tab Bar’位置的標(biāo)簽式導(dǎo)航。

“現(xiàn)在我們的對象有產(chǎn)品變成了產(chǎn)品的某個(gè)模塊,數(shù)學(xué)里有一個(gè)叫做”等效替換法”,令t=sin(x),然后將有關(guān)sinx的元素全部替換成t,從而使一個(gè)復(fù)雜的正弦問題,變成了一個(gè)簡單的線性問題。同樣對應(yīng)產(chǎn)品的某個(gè)模塊我們可以將其看成產(chǎn)品,這樣問題又變成了一個(gè)標(biāo)簽式導(dǎo)航問題了,對于標(biāo)簽式導(dǎo)航我們再熟悉不過,所以我們只需采取相同的手法就行了,只是原來的“Tab Bar”要換成“Segment Control”區(qū)域。

8

總結(jié)

當(dāng)你讀到這兒,你可能已經(jīng)忘記了“走馬燈導(dǎo)航導(dǎo)航是什么鬼?”“菜單式導(dǎo)航是什么鬼?”但是有一天你在實(shí)戰(zhàn)中發(fā)現(xiàn)當(dāng)前產(chǎn)品的信息架構(gòu)正是由有限個(gè)元素貫穿時(shí),你意識到用戶對這些模塊來回切換的需求比較大,因此需要將他們平鋪在Tab Bar上,以確保用戶操作路徑的扁平。如果你真的做到了這一步,我會很開心,因?yàn)槲疫@篇文章的目的已經(jīng)達(dá)到了。

腳踏實(shí)地的思考,遠(yuǎn)比你記那些高逼格術(shù)語更有用。

 

本文由人人都是產(chǎn)品經(jīng)理專欄作家 @UE小牛犢(微信公眾號:UE小牛犢) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?。未經(jīng)許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 貢獻(xiàn)了自己贊賞一血

    來自廣東 回復(fù)
  2. 受益匪淺

    來自廣東 回復(fù)
  3. 總結(jié)的很全面,分析用語再樸實(shí)一些會有更高的閱讀性。

    來自上海 回復(fù)
  4. 總結(jié)得太好 ??

    來自廣西 回復(fù)
  5. ??

    來自上海 回復(fù)
  6. ??

    來自廣東 回復(fù)
  7. ??

    來自福建 回復(fù)