APP導(dǎo)航設(shè)計，看這篇就夠了...

來源公眾號：UE修養(yǎng)（UXxiuyang）

IXDC獲授權(quán)轉(zhuǎn)載

21世紀(jì)初最偉大的發(fā)明應(yīng)該是智能手機(jī)，只要你身處人群當(dāng)中，就能隨時看到有人擺弄著這個幾寸的小玩意，點亮屏幕，仿佛打開了新世界的大門，里面琳瑯滿目，讓人目不暇接，一個個圖標(biāo)滿足著人們各種需求。作為互聯(lián)網(wǎng)產(chǎn)品的設(shè)計師，你需要在幾寸的屏幕中裝下海量的信息，這是一份具有挑戰(zhàn)且有趣的工作。而把抽象的idea，轉(zhuǎn)化為實實在在產(chǎn)品的第一步就是設(shè)計導(dǎo)航系統(tǒng)。

為什么需要導(dǎo)航？

①結(jié)構(gòu)化產(chǎn)品內(nèi)容和功能

如果沒有導(dǎo)航，你產(chǎn)品中的內(nèi)容和功能就相當(dāng)于一盤散沙，不成體系，用戶會在里面迷路，不知所措。導(dǎo)航系統(tǒng)相當(dāng)于APP的骨架，支撐著內(nèi)容和功能組成的血肉，導(dǎo)航系統(tǒng)起著組織內(nèi)容和功能的作用，讓它們按照產(chǎn)品的信息架構(gòu)圖進(jìn)行連接，展現(xiàn)在在用戶面前，導(dǎo)航將零散的內(nèi)容和功能組織成了一個完成的有結(jié)構(gòu)的系統(tǒng)。

②突出核心功能

每一個APP都有一個核心功能，其他的都是次要功能和擴(kuò)展功能，像微信的核心功能是即時聊天，京東是購物，易到是打車，貓眼是買電影票等等，核心功能對目標(biāo)用戶來說是最重要的，把核心功能放在用戶最能接觸到的位置，給予充分的展現(xiàn)，而其他功能應(yīng)該適度隱藏、甚至是刪除。導(dǎo)航就起到了突出核心功能，適度隱藏次要功能的作用。

③扁平化用戶任務(wù)路徑

如果沒有導(dǎo)航，用戶為了完成一個任務(wù)，會像無頭蒼蠅一樣來回亂撞，即使來個你死我活也完成不了想要達(dá)成的任務(wù)。分析用戶的行為，建立合理的導(dǎo)航系統(tǒng)，設(shè)計順暢的任務(wù)路徑，讓用戶不再像無頭蒼蠅一樣，在各模塊之間迷失。一個好的導(dǎo)航，能夠扁平化用戶的任務(wù)路徑，減少用戶操作成本，從而提高用戶體驗。

標(biāo)簽導(dǎo)航

標(biāo)簽導(dǎo)航是目前最常見的導(dǎo)航形式，也是最不容易出錯的導(dǎo)航信息。像微信，將整個內(nèi)容和功能分為微信、通訊錄、發(fā)現(xiàn)、我的四大塊，用底部標(biāo)簽的形式放在下方，即時聊天作為核心功能至于首頁，其他功能操作頻率也很高，放在了和即時聊天平級的其他標(biāo)簽頁。

將常用的導(dǎo)航放在底部，無論用戶單手還是雙手操作都能輕松點擊，從而實現(xiàn)各功能模塊之間的跳轉(zhuǎn)。

標(biāo)簽式導(dǎo)航有底部導(dǎo)航和頂部導(dǎo)航兩種，底部導(dǎo)航用于全局導(dǎo)航，頂部導(dǎo)航用于二級導(dǎo)航，音頻類的APP例外，因為音頻類APP最核心的功能時音頻播放器，所以多數(shù)音頻類APP會將播放器放在產(chǎn)品底部，而將標(biāo)簽導(dǎo)航置于頂部，像QQ音樂、蜻蜓FM等APP，就是這么做得。

還有一種底部導(dǎo)航的變種，就是其他文章里所說的舵式導(dǎo)航，其實就是底部標(biāo)簽導(dǎo)航，只不過為了突出中間的功能，將中間標(biāo)簽圖標(biāo)設(shè)計的比較突出，鼓勵用戶多使用該功能。

底部標(biāo)簽導(dǎo)航（簡書&微信）

頂部標(biāo)簽導(dǎo)航（QQ音樂&蜻蜓FM）

底部標(biāo)簽導(dǎo)航變種（500PX&path）

抽屜式導(dǎo)航

當(dāng)某個產(chǎn)品只有一個核心功能，其他功能都很低頻，這個時候采用標(biāo)簽式導(dǎo)航就會分散用戶的注意力，所以抽屜式導(dǎo)航就派上用場了。抽屜，是整理收起的意思，就是把除了核心功能以外的低頻操作都放到一個抽屜里，使得用戶獲得沉浸式的體驗，而且能夠集中用戶的注意力，讓用戶去更好的完成核心功能，不被打擾。我們可以把抽屜式導(dǎo)航類比成極簡的生活方式，只把必須的東西展現(xiàn)出來，其余的東西要么丟掉，要么整理后收起來。

Uber的核心功能只有一個：打車，而且其他操作付款方式、幫助、我的行程等等都很低頻，所以符合采用抽屜式導(dǎo)航的邏輯。最美應(yīng)用最為一個APP推薦的產(chǎn)品，其他的功能限免推薦、文章專欄也很低頻，也符合抽屜式導(dǎo)航的設(shè)計原理，所以也采用了抽屜式導(dǎo)航。

抽屜式導(dǎo)航（最美應(yīng)用&Uber）

菜單式導(dǎo)航

這種導(dǎo)航形式一般不會用于全局導(dǎo)航，多用于瀏覽類的APP的二級導(dǎo)航，用戶一般每次只瀏覽一種類型的內(nèi)容，像刷微博，女生們刷美妝時就會一直刷下去。菜單式導(dǎo)航還有一個好處就是節(jié)省屏幕空間，它用一個展開的圖標(biāo)，將幾個甚至幾十個分類都集合在一起，在寸土寸金的移動端屏幕顯得尤為重要。

微博和花瓣的二級導(dǎo)航都采用菜單式導(dǎo)航的形式。

菜單式導(dǎo)航（微博&花瓣）

平鋪式導(dǎo)航

打開iOS的自帶天氣應(yīng)用，你發(fā)現(xiàn)整個頁面都是關(guān)于某個地域的天氣形式，想查看其它地區(qū)的天氣就左右滑動來切換，這種導(dǎo)航形式就是平鋪式導(dǎo)航。平鋪式的我們用天氣APP去倒推什么情況下該使用平鋪式導(dǎo)航：

• 只有一個維度的區(qū)別，像天氣應(yīng)用的地域；

• 整個APP只有一種內(nèi)容展示，或者某個模塊功能里只有一種內(nèi)容展示，天氣APP只用來展示天氣。

為了暗示用戶可以左右滑動，一般會在頁面底部放在頁面控制器，或者采用堆疊的設(shè)計。

除了天氣應(yīng)用，還有前段時間很火的左右滑動來篩選好友的社交軟件，用的都是平鋪式導(dǎo)航。

平鋪式導(dǎo)航（天氣APP&探探）

點聚式導(dǎo)航

點聚式導(dǎo)航一般會作為輔助導(dǎo)航，多用于UGC（用戶原創(chuàng)內(nèi)容）的APP，像微博、path...。它將多個功能聚合在一個圖標(biāo)里，節(jié)省屏幕空間。

點聚式導(dǎo)航（path&微博）

列表式導(dǎo)航

幾乎所有的APP都有這種類型的導(dǎo)航，列表式，從上到下的展現(xiàn)，符合移動端瀑布流式的瀏覽方式。這種類型的導(dǎo)航設(shè)計形式比較多樣，可以是純文本、可以是圖標(biāo)加文、純圖片、左圖右文、右文左圖。幾乎滿足了所有內(nèi)容的展現(xiàn)形式。

好奇心日報采用圖標(biāo)加文字的形式，多用于個人中心。一個APP的電影模塊采用了純圖片形式，這種多用于富媒體內(nèi)容的展示；QQ音樂采用了左圖右文的形式；騰訊新聞采用了左文右圖的形式。根據(jù)不同的情景和內(nèi)容，要采用不同形式的列表時導(dǎo)航。

好奇心日報&一個

QQ音樂&騰訊新聞

網(wǎng)格式導(dǎo)航

網(wǎng)格式導(dǎo)航有兩種，一種是作為內(nèi)容的展示，像網(wǎng)易云音樂用來展示歌單，音悅臺用來展示MV。它們都是以圖片為主的內(nèi)容展示，具有較強(qiáng)的視覺沖擊力。另一種是作為功能的入口，像美團(tuán)首頁banner下的美食、電影、酒店等入口。它們以圖表加文字說明的形式呈現(xiàn)，這種排布能夠節(jié)省屏幕空間，在有限的空間就能排下四個甚至是八個的功能入口。

網(wǎng)格式導(dǎo)航多用于二級導(dǎo)航，很少見于全局導(dǎo)航，因為用戶使用完一個功能必須跳回到首頁才能繼續(xù)使用其他功能，這樣會加重操作成本，不符合扁平化用戶任務(wù)路徑的原則。凡是都不是絕對，如果每個功能之間獨立性比較高，用戶每次只會使用其中的一個功能，這時候?qū)⒕W(wǎng)格式導(dǎo)航最為主導(dǎo)航就沒有問題，像美圖秀秀就采用網(wǎng)格式導(dǎo)航作為主導(dǎo)航。

作為內(nèi)容展示（云音樂&音悅臺）

作為功能入口（美團(tuán)&XY）

到這里，移動端最常見的七種導(dǎo)航形式就講完了。總結(jié)一下：

導(dǎo)航的作用有三個：組織內(nèi)容和功能，使得產(chǎn)品成為一個有結(jié)構(gòu)的系統(tǒng)；突出核心功能；扁平化任務(wù)路徑。

七種常見的導(dǎo)航形式：標(biāo)簽式導(dǎo)航（底部和頂部）；抽屜式導(dǎo)航；菜單式導(dǎo)航；平鋪式導(dǎo)航；點聚式導(dǎo)航；列表式導(dǎo)航；網(wǎng)格式導(dǎo)航。

還是那句老話：設(shè)計形式服務(wù)于功能，而功能服務(wù)于用戶需求和公司目標(biāo)。