APP導(dǎo)航｜它沒有描述中的那么神乎！

• 發(fā)布時(shí)間: 2015-12-25 09:50:35
• 瀏覽次數(shù): 1551

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

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

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

它沒有描述中的那么神乎

抽屜式導(dǎo)航？它其實(shí)就是一種化繁為簡(jiǎn)的"超級(jí)整理術(shù)"

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

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

抽屜式導(dǎo)航本質(zhì)是什么？有人可能會(huì)說："一種交互風(fēng)格"；再具體一點(diǎn)，有人可能又會(huì)說："交互風(fēng)格中的一種導(dǎo)航風(fēng)格"。如果今天你也看了我這篇文章，請(qǐng)你忘記這以上這兩種回答。

抽屜式導(dǎo)航說到底就是一種化繁為簡(jiǎn)的"超級(jí)整理術(shù)"。"2/8"法則告訴我們，80%的用戶只用那些20%功能，這20%功能就是信息流里面的核心功能；如果那80%不常用的功能也占用著最重要的位置，那么用戶就會(huì)被打擾，產(chǎn)生臃腫感，甚至?xí)艞壥褂卯a(chǎn)品。

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

同樣的，我們經(jīng)常會(huì)講到的，標(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ù)路徑的扁平。

桌面式導(dǎo)航？它只是對(duì)于扁平比較獨(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:這里的"無限"是相對(duì)的概念，一般數(shù)十個(gè)以上都可稱為無限個(gè)）功能模塊集成而成的，那么這是我們是不是還可以平鋪在"Tab Bar"上呢？

"Tab Bar"就算了，因?yàn)橥ㄟ^相關(guān)競(jìng)品分析，我們發(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ù)的扁平，而這里的"平鋪"是用來保證用戶搜索行為的扁平，因此對(duì)展示功能入口數(shù)量的限制沒有Tab Bar那么苛刻，所以Table View就成了最好的舞臺(tái)，也就是我們一直神叨叨的"桌面式導(dǎo)航"。

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

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

通過相關(guān)競(jìng)品與用戶訪談分析，我們發(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)榱吮ＷC搜索行為的扁平而采用的招式。但是這里的興趣頻道是獨(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)）反而會(huì)顯得更加重要，因此我們需要"超級(jí)整理術(shù)"，收起那些現(xiàn)在可能用不到的80%模塊，保留真正有用的20%，通過面積和內(nèi)容限制保證了此刻的用戶的沉浸體驗(yàn)。

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

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

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

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

看到只顯示1/8的圖片，你會(huì)本能地把它滑出來，因?yàn)閺?qiáng)迫癥在作怪；當(dāng)然你可能抑制力很好，沒有滑，但是1/8不完整圖片也會(huì)讓你感覺別扭；只要你"別扭了"它的目的已經(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á)成完美融合。

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

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

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

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

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

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

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

我們來思考這樣一個(gè)問題"當(dāng)產(chǎn)品的某個(gè)模塊是由有限個(gè)子集貫穿時(shí)，我們?cè)摬捎檬裁磳?dǎo)航形式？"這句話，好眼熟啊~沒錯(cuò)，在"標(biāo)簽式導(dǎo)航"部分我們提到"當(dāng)產(chǎn)品有有限個(gè)模塊貫穿時(shí)，我們會(huì)采用平鋪在'Tab Bar'位置的標(biāo)簽式導(dǎo)航。

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

總結(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í)，你意識(shí)到用戶對(duì)這些模塊來回切換的需求比較大，因此需要將他們平鋪在Tab Bar上，以確保用戶操作路徑的扁平。如果你真的做到了這一步，我會(huì)很開心，因?yàn)槲疫@篇文章的目的已經(jīng)達(dá)到了。

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