宣傳視(shì)頻

APP導航｜它沒有描述中的(de)那麽神乎！

• 發布時間: 2015-12-25 09:50:35
• 浏覽次數: 1049

你的(de)産品為(wèi)什麽需要導航設計

導航設計的(de)目的(de)就是需要突出産品的(de)核心，扁平化用戶的(de)任務路徑。無論是PC還是移動端，很難想象一(yī)個沒有導航的(de)産品會是什麽樣子(zǐ)，我們可(kě)能都會成為(wèi)"瞎子(zǐ)"，悶頭亂撞。當然，那些有導航的(de)也别50步笑百步，錯誤的(de)使用導航模式，和(hé)沒使用導航的(de)效果是一(yī)樣的(de)，你的(de)産品沒那麽不言而喻，等待你産品的(de)隻有死路一(yī)條。

因此明白了導航設計的(de)目的(de)：突出産品核心，扁平化用戶任務路徑，下面的(de)就是對産品的(de)理(lǐ)解，産品的(de)核心是什麽？什麽樣的(de)導航模式最能反映産品的(de)核心，包括是否起到了扁平用戶操作的(de)作用？

它沒有描述中的(de)那麽神乎

抽屜式導航？它其實就是一(yī)種化繁為(wèi)簡的(de)"超級整理(lǐ)術"

抽屜式導航更多的(de)被應用于信息流産品設計中，這類産品注重核心內(nèi)容的(de)展示，用戶的(de)任務路徑較為(wèi)單一(yī)，幾乎都是用于浏覽産品的(de)核心內(nèi)容；至于其他比較低(dī)頻的(de)模塊入口則會隐藏在當前界面後方，避免冗餘的(de)模塊搶奪用戶的(de)眼球。

其實我并不喜歡将其稱為(wèi)"XXX導航"，因為(wèi)可(kě)能在我解釋完所有內(nèi)容之後，等你在工作中再遇到相似的(de)情境，你可(kě)能又會疑問"咦？那個XXX導航是怎麽用的(de)來着"。

抽屜式導航本質是什麽？有人可(kě)能會說："一(yī)種交互風格"；再具體一(yī)點，有人可(kě)能又會說："交互風格中的(de)一(yī)種導航風格"。如(rú)果今天你也看了我這篇文章(zhāng)，請你忘記這以上這兩種回答。

抽屜式導航說到底就是一(yī)種化繁為(wèi)簡的(de)"超級整理(lǐ)術"。"2/8"法則告訴我們，80%的(de)用戶隻用那些20%功能，這20%功能就是信息流裏面的(de)核心功能；如(rú)果那80%不常用的(de)功能也占用着最重要的(de)位置，那麽用戶就會被打擾，産生臃腫感，甚至會放棄使用産品。

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

同樣的(de)，我們經常會講到的(de)，标簽式、标簽式，那麽标簽式導航的(de)的(de)本質是什麽呢(ne)？

在設計規劃期間，我們通過産品的(de)信息架構可(kě)以直觀的(de)了解産品的(de)核心功能，以及各功能之間的(de)一(yī)個關系。當産品的(de)整個體驗流中是以幾個常用功能模塊（PS：一(yī)般不超過5個）貫穿的(de)，意味着用戶需要在多個标簽入口之間來回切換；為(wèi)了保證切換的(de)效率，将貫穿産品整個體驗的(de)流的(de)模塊平鋪在Tab Bar位置，保證了用戶任務路徑的(de)扁平。

桌面式導航？它隻是對于扁平比較獨立的(de)用戶任務路徑模塊的(de)另一(yī)種思考

我前面提到了"當産品的(de)整體體驗流是由幾個常用功能模塊貫穿而成時，為(wèi)了保證用戶任務路徑的(de)扁平，我們将這幾個模塊平鋪在Tab Bar上，後來被冠以'标簽式導航'的(de)稱呼"。那麽當産品的(de)整體體驗流不能由有限個（一(yī)般不超過5個）功能模塊貫穿時；或者說，整個體驗流是由無限個（PS:這裏的(de)"無限"是相對的(de)概念，一(yī)般數十個以上都可(kě)稱為(wèi)無限個）功能模塊集成而成的(de)，那麽這是我們是不是還可(kě)以平鋪在"Tab Bar"上呢(ne)？

"Tab Bar"就算了，因為(wèi)通過相關競品分析，我們發現使用"桌面式"導航的(de)應用，每一(yī)個入口往往是比較獨立的(de)信息內(nèi)容，用戶進入一(yī)個入口後隻處理(lǐ)與此入口相關的(de)內(nèi)容，這就意味着用戶在幾個任務之間頻繁切換的(de)概率比較低(dī)，這就意味着就算有标簽式導航，也是個雞肋導航。但是由于功能入口衆多，我們還得前面提到的(de)"平鋪"，不過這裏的(de)"平鋪"意義已經不太一(yī)樣了，Tab Bar是為(wèi)了保證來回切換任務的(de)扁平，而這裏的(de)"平鋪"是用來保證用戶搜索行為(wèi)的(de)扁平，因此對展示功能入口數量的(de)限制沒有Tab Bar那麽苛刻，所以Table View就成了最好的(de)舞台，也就是我們一(yī)直神叨叨的(de)"桌面式導航"。

菜單式導航？相比于扁平用戶任務路徑，凸顯産品的(de)核心會顯的(de)更加重要

對于像微博這樣開放性的(de)信息流，用戶在不同情景和(hé)不同時段下可(kě)能會有不同的(de)興趣域，我想看一(yī)下我喜愛明星最近的(de)動态放松一(yī)下、我想看一(yī)下我的(de)專業領域達人的(de)動态學(xué)習一(yī)些幹貨...不同的(de)人的(de)需求是不一(yī)樣的(de)，同一(yī)個人不同時段的(de)需求也是不一(yī)樣的(de)，可(kě)能前一(yī)秒你還是"酷愛足球運動的(de)财經男"，下一(yī)秒你很可(kě)能又會成為(wèi)那個喜歡娛樂(yuè)八卦的(de)"清新女"。

通過相關競品與用戶訪談分析，我們發現：該類産品的(de)用戶在某個時間段的(de)興趣域幾乎是特定的(de)。比如(rú)我現在就想刷一(yī)些大V的(de)幹貨，因此決定了用戶頻繁切換的(de)概率是比較低(dī)的(de)。

說到這裏，有人可(kě)能覺得這句話好像在哪裏聽過？是的(de)，桌面式導航也是這種情境——用戶頻繁切換的(de)概率是比較低(dī)的(de)，那麽我們可(kě)不可(kě)以也像"桌面式導航"那樣，将這些興趣頻道(dào)入口平鋪在Table View上呢(ne)？

首先你想到了這一(yī)層，我很開心，因為(wèi)你已經不再糾結那些神叨叨的(de)形式了，開始追求"花架子(zǐ)"背後的(de)機制了。其次不知道(dào)你注意沒有，桌面式導航為(wèi)什麽需要平鋪？因為(wèi)獨立的(de)功能入口太多了，我們為(wèi)了保證搜索行為(wèi)的(de)扁平而采用的(de)招式。但是這裏的(de)興趣頻道(dào)是獨立且有限的(de)。

獨立性是菜單式導航與桌面式導航的(de)共性，你還記得在桌面式導航我強調"平鋪隻是為(wèi)了服務搜索，和(hé)切換沒有關系"，但是菜單式導航的(de)興趣頻道(dào)就那麽幾個（有限性），沒有多少搜索成本，因此此時的(de)"平鋪"似乎沒有太大意義；再想想我在第二部分講的(de)："導航設計的(de)目的(de)是突出産品的(de)核心，扁平化用戶的(de)任務路徑。"現在相比于扁平用戶的(de)任務路徑，突出産品的(de)核心（因為(wèi)這裏的(de)産品更多的(de)是信息流産品，信息流最強調沉浸體驗）反而會顯得更加重要，因此我們需要"超級整理(lǐ)術"，收起那些現在可(kě)能用不到的(de)80%模塊，保留真正有用的(de)20%，通過面積和(hé)內(nèi)容限制保證了此刻的(de)用戶的(de)沉浸體驗。

點聚式導航？它僅是一(yī)種暖心的(de)UCD法則的(de)衍生物

點聚式導航最早來自(zì)于"Path"，它将用戶最頻繁使用的(de)多個核心功能點彙聚在主界面中顯示，通常這些功能具有一(yī)定的(de)交集，比如(rú)都是"發動态"用的(de)，發音樂(yuè)有關的(de)動态、發LBS信息有關的(de)動态、發照片有關的(de)動态；本質其實是一(yī)種"超級整理(lǐ)術"中的(de)合并同類項術。

為(wèi)什麽需要"合并同類項"？合并同類項是為(wèi)了突出産品更重要的(de)內(nèi)容，當用戶已經确定，自(zì)己需要那些同類項來豐富自(zì)己的(de)移動端體驗，此時在分解同類項，并且分解的(de)過程是那麽的(de)有趣。懂你+有趣=暖心。

走馬燈導航？它僅想讓你多看她一(yī)眼

看到隻顯示1/8的(de)圖片，你會本能地(dì)把它滑出來，因為(wèi)強迫症在作怪；當然你可(kě)能抑制力很好，沒有滑，但是1/8不完整圖片也會讓你感覺别扭；隻要你"别扭了"它的(de)目的(de)已經達到了，你的(de)眼球已經被它"Catch"了。換句話說，它希望你看到這些內(nèi)容（和(hé)商業目标有關），你的(de)确因為(wèi)強迫症驅使聚焦于這些內(nèi)容，結果發現"哎呦，不錯喲"（迎合了用戶目标），産品目标、用戶目标達成完美融合。

列表導航？一(yī)張名片的(de)效果

"我是做(zuò)xxx的(de)，這是我的(de)名片，如(rú)果哪天你有類似需求，歡迎找我啊，一(yī)定給你優惠！"盡管你沒有買東西，但是銷售人員也成功了，因為(wèi)它銷售了一(yī)張名片，有了這張名片，就等于你現在已經是他的(de)長(cháng)線之魚。有一(yī)天你很想買一(yī)樣東西，突然想起，那天那個人給你一(yī)張名片，依據名片上的(de)不同信息，你成功從數十張裏面找到了它，再次依據這張名片上的(de)信息，你聯系到了那天的(de)銷售人員，并且達成了交易。

這個過程中，名片扮演了"長(cháng)線"的(de)作用。試想一(yī)下：如(rú)果沒有名片，就意味着這條線就斷了，那位銷售者也因此損失了一(yī)條魚。對應到産品，那位銷售者其實就是我們産品，顧客就是我們的(de)用戶，那個"名片"或者"長(cháng)線"就是這裏的(de)"列表導航"。通過列表導航的(de)識别，用戶可(kě)以完成自(zì)己的(de)目标，同時也帶來了商業目标。

易識别性是其最重要的(de)衡量準則，因為(wèi)它承載了産品大量的(de)數據信息，相當于産品的(de)語言元數據，隻有具備共同的(de)語言元數據，才有可(kě)能促使産品做(zuò)到真正意義上的(de)不言而喻！

圖示導航？它隻是一(yī)種展示信息的(de)扁平處理(lǐ)方式

針對以圖片為(wèi)主的(de)應用平台，經常變化的(de)圖片會讓用戶感受到欄目內(nèi)容的(de)更新的(de)及時性，對用戶來說是比較核心的(de)點。圖示導航将這些更新的(de)信息可(kě)視(shì)化，以達到展示信息扁平化的(de)作用。這裏需要注意的(de)是，這種導航需要配置固定的(de)欄目或标題，防止不斷更新的(de)圖片讓用戶找不到相應的(de)入口。

分段選項卡？它隻是穿了馬甲的(de)"标簽式導航"

我們來思考這樣一(yī)個問題"當産品的(de)某個模塊是由有限個子(zǐ)集貫穿時，我們該采用什麽導航形式？"這句話，好眼熟啊~沒錯，在"标簽式導航"部分我們提到"當産品有有限個模塊貫穿時，我們會采用平鋪在'Tab Bar'位置的(de)标簽式導航。

"現在我們的(de)對象有産品變成了産品的(de)某個模塊，數學(xué)裏有一(yī)個叫做(zuò)"等效替換法"，令t=sin（x），然後将有關sinx的(de)元素全部替換成t，從而使一(yī)個複雜的(de)正弦問題，變成了一(yī)個簡單的(de)線性問題。同樣對應産品的(de)某個模塊我們可(kě)以将其看成産品，這樣問題又變成了一(yī)個标簽式導航問題了，對于标簽式導航我們再熟悉不過，所以我們隻需采取相同的(de)手法就行了，隻是原來的(de)"Tab Bar"要換成"Segment Control"區域。

總結

當你讀到這兒，你可(kě)能已經忘記了"走馬燈導航導航是什麽鬼？""菜單式導航是什麽鬼？"但是有一(yī)天你在實戰中發現當前産品的(de)信息架構正是由有限個元素貫穿時，你意識到用戶對這些模塊來回切換的(de)需求比較大，因此需要将他們平鋪在Tab Bar上，以确保用戶操作路徑的(de)扁平。如(rú)果你真的(de)做(zuò)到了這一(yī)步，我會很開心，因為(wèi)我這篇文章(zhāng)的(de)目的(de)已經達到了。

腳踏實地(dì)的(de)思考，遠比你記那些高(gāo)逼格術語更有用。