APP導航設計:它沒有描述中的那么神乎!

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

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

你的產品為什么需要導航設計

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

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

它沒有描述中的那么神乎

抽屜式導航?它其實就是一種化繁為簡的“超級整理術”

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

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

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

1

標簽式導航?它僅是讓用戶任務路徑更加扁平

同樣的,我們經常會講到的,標簽式、標簽式,那么標簽式導航的的本質是什么呢?

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

2

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

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

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

3

菜單式導航?相比于扁平用戶任務路徑,凸顯產品的核心會顯的更加重要

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

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

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

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

4

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

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

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

v2

走馬燈導航?它僅想讓你多看她一眼

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

5

列表導航?一張名片的效果

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

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

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

6

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

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

7

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

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

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

8

總結

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

腳踏實地的思考,遠比你記那些高逼格術語更有用

 

本文由人人都是產品經理專欄作家 @UE小牛犢(微信公眾號:UE小牛犢) 原創發布于人人都是產品經理?。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 貢獻了自己贊賞一血

    來自廣東 回復
  2. 受益匪淺

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

    來自上海 回復
  4. 總結得太好 ??

    來自廣西 回復
  5. ??

    來自上海 回復
  6. ??

    來自廣東 回復
  7. ??

    來自福建 回復