APP設計之--導航

我們先來看看導航的定義。所謂的導航指的是：引導用戶訪問APP的欄目、菜單、分類等布局結構形式的總稱。

　　也就是說，導航主要是引導用戶，告訴用戶怎麼(me)找到自己想要的信息或完成(chéng)用戶自己想要完成(chéng)的任務。可見，導航在一個APP中的重要性是非常高的。導航設計的合理性關系著(zhe)用戶是否能(néng)夠找到信息和完成(chéng)任務。

　　那麼(me)，導航設計究竟應該如何做呢?這(zhè)個說實話，不同的APP，導航設計既可能(néng)是相似的，也可能(néng)是完全不同的。因此，導航設計究竟應該如何做的答案隻能(néng)是：根據APP的情況來定。

　　不過(guò)，雖然我們不能(néng)給出一個标準答案說：APP導航這(zhè)樣(yàng)設計就可以了。但在衆多的APP導航設計中，我們能(néng)夠找到一些常見的設計模式，以此來作爲一個參考，輔助我們的APP導航設計。

　　下面(miàn)，我將(jiāng)就APP導航設計的常見模式進(jìn)行一個總結。

　　首先，我將(jiāng)定義一個叫(jiào)做原始導航的導航。原始導航是一個最最粗糙的導航，通過(guò)純文字的鏈接入口來導航。如下圖：

　　看到原始導航，是不是覺得弱爆了，怎麼(me)可能(néng)有這(zhè)樣(yàng)的導航呢?所以，我把它定義爲原始導航，然後(hòu)在此基礎上通過(guò)不斷的演變來形成(chéng)我們常見的導航模式。

一、标簽導航(選項卡導航)

　　有了原始導航，你可能(néng)會(huì)說，原始導航這(zhè)種(zhǒng)入口的擺放方式太占空間了，就五個入口就占據了整個界面(miàn)。有沒(méi)有一種(zhǒng)更加省空間的導航模式呢?當然有。

　　首先，我們將(jiāng)五個入口放到界面(miàn)的下方，就會(huì)形成(chéng)常見的底部标簽導航。

　　通常，底部标簽導航有3～4标簽，一般不會(huì)超過(guò)5個，有更多的選項操作時可將(jiāng)最後(hòu)一項設置爲更多，將(jiāng)一些次要功能(néng)放置在更多裡(lǐ)。這(zhè)是一種(zhǒng)非常常見的導航模式。如果你的應用需要用戶頻繁的在不同分頁切換，可以采用這(zhè)種(zhǒng)導航。雖然它還(hái)是會(huì)占用一定的界面(miàn)空間，但比起(qǐ)原始導航來說好(hǎo)多了。現在很多APP(包括iso和android)都(dōu)在用這(zhè)種(zhǒng)模式。

　　當然，如果你在五個标簽中，有一個标簽是最重要或最頻繁使用的，想要重點突出，可以使用下面(miàn)變形的底部标簽導航。

　　這(zhè)種(zhǒng)底部标簽導航模式并不常見，但在一些APP中還(hái)是可以看到它的應用。比如微博的底部标簽導航。

　　其次，我們將(jiāng)标簽放到界面(miàn)的上方，就會(huì)形成(chéng)常見的頂部标簽導航。

　　頂部标簽導航在ios app中一般當作二級導航。在android app中，這(zhè)種(zhǒng)導航模式以前被(bèi)用作一級導航，但自從google推出了“抽屜導航”作爲一級導航後(hòu)，頂部标簽導航就被(bèi)常用爲二級導航了。

　　作爲一個二級導航，頂部标簽導航應用于多種(zhǒng)情境下，可以固定數量，展示有限的幾個标簽。也可以擴大一定的數量，變成(chéng)向(xiàng)左滑動展現更多标簽。甚至可以像網易新聞那樣(yàng)，衍生出訂閱功能(néng)。頂部标簽導航也是一種(zhǒng)非常常見的導航模式。

二、抽屜導航

　　說完标簽導航，你可能(néng)會(huì)說，我是有六七個導航，但其中隻有一個導航是主要的，别的雖然有用，但用戶非常非常少用。這(zhè)種(zhǒng)情況下能(néng)不能(néng)隻顯示主要的内容，其它導航隐藏起(qǐ)來呢?這(zhè)樣(yàng)還(hái)可以更近一步地節省頁面(miàn)空間。

　　當然可以。在這(zhè)種(zhǒng)情況下你可以使用抽屜導航。

　　抽屜導航是將(jiāng)菜單隐藏在當前頁面(miàn)後(hòu)，點擊導航入口即可像拉抽屜一樣(yàng)拉出菜單。這(zhè)種(zhǒng)導航的優點是：節省頁面(miàn)展示空間，讓用戶將(jiāng)更多的注意力聚焦到當前頁面(miàn)。比較适合于不那麼(me)需要頻繁切換内容的應用，例如對(duì)設置、關于等内容的隐藏。缺點是：對(duì)于那些需要經(jīng)常在不同導航間切換或者核心功能(néng)有一堆入口的app不适用。抽屜導航設計需要注意的是一定要提供菜單畫出的過(guò)渡動畫。

四：下拉導航

　　講完抽屜導航後(hòu)，還(hái)有另外一種(zhǒng)類似的導航模式同樣(yàng)可以節省頁面(miàn)空間，并且隐藏次要入口，這(zhè)就是下拉導航。

　　下拉導航，與抽屜式導航的目的相同，都(dōu)是爲了突出内容。一般位于産品頂部，通過(guò)點擊呼出導航菜單。導航菜單以浮窗形式位于界面(miàn)上層，可通過(guò)點擊導航菜單以外的區域使其收起(qǐ)。下拉導航的菜單與界面(miàn)的連貫性比抽屜式要好(hǎo)，容易讓用戶感知當前位置。但由于是位于屏幕上方，相對(duì)隐蔽而且不能(néng)結合手勢操作，所以該菜單形式也不适合于頻繁的切換功能(néng)使用。考慮到導航菜單的可用面(miàn)積較小，所以一般采用列表的形式展示菜單内容。

　　下拉導航有一種(zhǒng)比較常見的變式，就是下來菜單中展示兩(liǎng)級甚至多級(一般就是兩(liǎng)級，沒(méi)見過(guò)更多的)，很多人稱其爲超級菜單導航。如下：

　　這(zhè)種(zhǒng)導航模式說實話用得比較少。但最近在各種(zhǒng)O2O形态的APP中有比較多的使用(可能(néng)跟分類級别多而且不好(hǎo)組織有關)。比如：美團、百度外賣等都(dōu)有用超級菜單。

五、宮格導航

　　我在原始導航裡(lǐ)設定了5個入口。可是，如果有7、8個甚至10多個入口呢?而且這(zhè)些入口你也不好(hǎo)說到底哪個對(duì)用戶是最重要的，重要性差不多，怎麼(me)辦?OK，宮格導航可以解決這(zhè)個問題。

　　宮格導航將(jiāng)主要入口全部聚合在頁面(miàn)，讓用戶做出選擇。這(zhè)樣(yàng)的組織方式雖然無法讓用戶第一時間看到内容或執行操作，用戶的選擇壓力也比較大。但卻能(néng)夠讓用戶整體上了解APP提供的服務，從而選擇自己所需要的那個服務。

　　目前來說，這(zhè)種(zhǒng)導航模式越來越少用在一級導航了。不過(guò)，作爲二級導航，作爲一系列工具入口的聚合，或作爲内容列表的一種(zhǒng)圖形化呈現形式，還(hái)是存在在各種(zhǒng)APP裡(lǐ)。如：zakeer的核心頁面(miàn)就是宮格導航，但其與訂閱功能(néng)結合，沒(méi)有讓所有宮格鬥展示出了。各種(zhǒng)手機界面(miàn)打開(kāi)後(hòu)的app展示頁面(miàn)基本上都(dōu)是宮格模式的。

　　由于受到卡片式設計的影響，宮格模式的變形也非常多。接下來簡單說一下這(zhè)些變形。

　　首先，可以將(jiāng)宮格的卡片變大，宮格與宮格時間不留空白，如下圖：

　　是不是和錘子手機的宮格展示布局一樣(yàng)了?

　　上面(miàn)這(zhè)種(zhǒng)展現方式所能(néng)展現的卡片數量有限。如果我們將(jiāng)其稍做調整，增加縱向(xiàng)滾動功能(néng)，就可以增加卡片數量的展現，可以說是無限的。如下圖：

　　優酷安卓app裡(lǐ)的“頻道(dào)”模塊采取的就是這(zhè)種(zhǒng)模式。

　　如果更進(jìn)一步，是不是可以對(duì)上面(miàn)這(zhè)種(zhǒng)無限的展示宮格進(jìn)行分類呢?當然可以。然後(hòu)我們就有了下面(miàn)這(zhè)種(zhǒng)導航模式：

　　當然，每個分類下能(néng)夠展示的數量可以更多，并不限于3個。

　　這(zhè)時，如果我們想要在分類下，展示更多的内容，但又想多展示分類，怎麼(me)辦?可以在以上的導航模式中再進(jìn)一步變形，如圖：

　　允許每行宮格橫向(xiàng)滑動展示更多，這(zhè)樣(yàng)就擴展了展示的數量，又不會(huì)減少分類數量的展示。

　　宮格導航還(hái)有沒(méi)有别的變式呢?當然有。比如：

　　可以通過(guò)變化宮格導航中卡片的大小，來凸顯宮格中内容的不同重要性。

　　可以將(jiāng)宮格導航和訂閱功能(néng)結合，形成(chéng)獨特的訂閱導航。

　　……

　　變化形式根據不同的需要很可能(néng)有很多種(zhǒng)。一般來講，常見的這(zhè)些導航模式就夠了。

六、列表導航

　　列表式APP導航是我們在APP設計種(zhǒng)必不可少的一個信息承載模式。當然作爲一個APP的導航也是非常方便的。這(zhè)種(zhǒng)導航模式從原始導航中很好(hǎo)轉換，隻要將(jiāng)列表左對(duì)齊，增加向(xiàng)右箭頭表明是否還(hái)有下級即可。如圖：

　　目前來看，列表導航通常用于二級頁，由于它與宮格導航一樣(yàng)，不會(huì)默認展示任何實質内容，所以通常app不會(huì)在首頁使用它。這(zhè)種(zhǒng)導航結構清晰，易于理解，冷靜高效，能(néng)夠幫助用戶快速的定位去到對(duì)應的頁面(miàn)。

　　自然，如果你想要對(duì)列表進(jìn)行分類也是可以的。這(zhè)樣(yàng)邏輯上會(huì)更加清晰。如下：

　　如果說雖然可以分類，但實在不知道(dào)如何确定分類名稱。把分類名稱去掉也是可以的。隻是用間距將(jiāng)每一組列表隔開(kāi)也能(néng)起(qǐ)到梳理邏輯的作用。

　　對(duì)于列表導航來說，還(hái)有一種(zhǒng)常見的變式：將(jiāng)列表下内容中的核心内容展示出來，常見的是核心數據展現。如下：

　　這(zhè)種(zhǒng)變式有時候也被(bèi)成(chéng)爲儀表式導航，通過(guò)标題和核心數據來展現核心内容，同時作爲導航使用。這(zhè)種(zhǒng)導航模式可以參見各種(zhǒng)互聯網金融APP中的産品列表。

七、輪播導航

　　如果我們將(jiāng)原始導航中的5個入口共處一個頁面(miàn)變成(chéng)每個頁面(miàn)僅限一個入口可以嗎?或者說，我們將(jiāng)宮格導航變成(chéng)一宮格呢?會(huì)有一種(zhǒng)新的導航模式嗎?

　　按照上面(miàn)的假設，我們會(huì)有一種(zhǒng)常見的導航模式：輪播導航。如下：

　　當然，隻有應用信息足夠扁平，可以嘗試輪播導航。輪播導航如果應用得當，能(néng)夠給人耳目一新的體驗。輪播導航能(néng)夠大程度的保證應用的頁面(miàn)簡潔性，操作也是最方便的，隻需要手指左右滑動。缺點也很明顯：承載入口的數量有限，超過(guò)10個可能(néng)就優點多了。這(zhè)種(zhǒng)導航常見于查看圖片，也經(jīng)常與其他導航模式結合，作爲banner廣告呈現。

八、點聚導航

　　如果一個界面(miàn)，因爲内容或功能(néng)展示的需求，需要極端簡化其入口，應該如何做?點聚導航是一種(zhǒng)選擇。

　　當層級框架比較複雜，幾個并列的模塊中都(dōu)有用戶頻繁使用的核心内容，但有需要簡化頁面(miàn)時，會(huì)考慮使用點聚式導航。點聚式導航將(jiāng)多個核心功能(néng)聚彙到主界面(miàn)中顯示，方便用戶呼出使用。由于點聚式占用空間小，一般會(huì)融入一些動态的互動效果，讓導航更具趣味性。很多圖片拍攝及編輯、視頻拍攝及編輯類APP會(huì)使用這(zhè)類導航。

九、隐喻導航

　　如果原始導航中的五個入口，變成(chéng)遊戲界面(miàn)中的五個關卡，隻是簡單地將(jiāng)其按照上下順序列出來就會(huì)不太适用。遊戲對(duì)導航的要求不僅要可用，更要和整個遊戲的風格等匹配。因此，有了隐喻導航這(zhè)種(zhǒng)模式，用頁面(miàn)模仿應用的隐喻對(duì)象。這(zhè)種(zhǒng)導航主要用于遊戲，但在幫助導航 人們組織事(shì)物(如日記、書籍等)，并對(duì)其進(jìn)行分類的應用中也能(néng)看到。

十、關于導航的一些其它想法：

　　雖然每個導航模式有常見的用法，但并沒(méi)有絕對(duì)的限定，要具體情況具體分析。比如頂部标簽導航可以作爲一級導航，但與抽屜導航結合的話，可能(néng)就會(huì)變成(chéng)二級導航。

　　就目前的情況來看，很少有APP能(néng)夠隻用一種(zhǒng)導航模式，至少需要兩(liǎng)種(zhǒng)。絕大多數的APP都(dōu)在混合使用多種(zhǒng)導航模式。很多APP甚至可能(néng)使用多大七八種(zhǒng)導航模式，有的一個界面(miàn)就可能(néng)用三到四種(zhǒng)導航模式。

　　導航模式混合使用并不可怕，關鍵是要在設計上做好(hǎo)文章，确保用戶能(néng)夠獲得良好(hǎo)的用戶體驗。

　　導航的具體設計方式多種(zhǒng)多樣(yàng)，有隻有文字的，有文字圖标結合的，有圖片文字結合的，有圖片文字圖标結合的、有隻有圖标的……具體的形式不在這(zhè)裡(lǐ)多談。用什麼(me)樣(yàng)的形式取決于内容需要什麼(me)樣(yàng)的展現形式。

　　文中的導航模式隻是一種(zhǒng)參考，這(zhè)些模式其實還(hái)有各種(zhǒng)各樣(yàng)的變形。隻要能(néng)夠引導用戶清晰明确地找到信息或完成(chéng)任務的導航都(dōu)是優秀的導航，并不一定非得使用某種(zhǒng)導航。

　　關于導航就寫到這(zhè)裡(lǐ)。完。

标題名稱：APP設計之--導航
分享URL：

網站建設、網絡推廣公司-創新互聯，是專注品牌與效果的網站制作，網絡營銷seo公司；服務項目有App設計等

廣告

聲明：本網站發(fā)布的内容（圖片、視頻和文字）以用戶投稿、用戶轉載内容爲主，如果涉及侵權請盡快告知，我們將(jiāng)會(huì)在第一時間删除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。内容未經(jīng)允許不得轉載，或轉載時需注明來源： 創新互聯