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

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

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

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

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

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

它沒有描述中的那么神乎

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

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

其實我并不喜歡將其稱為“XXX導(dǎo)航”,因為可能在我解釋完所有內(nèi)容之后,等你在工作中再遇到相似的情境,你可能又會疑問“咦?那個XXX導(dǎo)航是怎么用的來著”。

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

1

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

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

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

2

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

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

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

3

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

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

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

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

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

4

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

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

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

v2

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

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

5

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

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

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

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

6

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

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

7

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

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

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

8

總結(jié)

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

腳踏實地的思考,遠比你記那些高逼格術(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. 貢獻了自己贊賞一血

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

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

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

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

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

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

    來自福建 回復(fù)