[系列]APP設計之五:導航

9 評論 24395 瀏覽 354 收藏 19 分鐘

之前的幾篇文章談了談APP設計中的啟動頁、引導頁注冊【登錄】搜索,本篇文章談談導航部分。

同樣,我們先來看看導航的定義。所謂的導航指的是:引導用戶訪問APP的欄目、菜單、分類等布局結(jié)構(gòu)形式的總稱。

也就是說,導航主要是引導用戶,告訴用戶怎么找到自己想要的信息或完成用戶自己想要完成的任務??梢姡瑢Ш皆谝粋€APP中的重要性是非常高的。導航設計的合理性關(guān)系著用戶是否能夠找到信息和完成任務。

那么,導航設計究竟應該如何做呢?這個說實話,不同的APP,導航設計既可能是相似的,也可能是完全不同的。因此,導航設計究竟應該如何做的答案只能是:根據(jù)APP的情況來定。

不過,雖然我們不能給出一個標準答案說:APP導航這樣設計就可以了。但在眾多的APP導航設計中,我們能夠找到一些常見的設計模式,以此來作為一個參考,輔助我們的APP導航設計。

下面,我將就APP導航設計的常見模式進行一個總結(jié)。

首先,我將定義一個叫做原始導航的導航。原始導航是一個最最粗糙的導航,通過純文字的鏈接入口來導航。如下圖:

48923-e310aec086895761

看到原始導航,是不是覺得弱爆了,怎么可能有這樣的導航呢?所以,我把它定義為原始導航,然后在此基礎(chǔ)上通過不斷的演變來形成我們常見的導航模式。

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

有了原始導航,你可能會說,原始導航這種入口的擺放方式太占空間了,就五個入口就占據(jù)了整個界面。有沒有一種更加省空間的導航模式呢?當然有。

首先,我們將五個入口放到界面的下方,就會形成常見的底部標簽導航。

48923-40c865f36a068b25

通常,底部標簽導航有3~4標簽,一般不會超過5個,有更多的選項操作時可將最后一項設置為更多,將一些次要功能放置在更多里。這是一種非常常見的導航模式。如果你的應用需要用戶頻繁的在不同分頁切換,可以采用這種導航。雖然它還是會占用一定的界面空間,但比起原始導航來說好多了。現(xiàn)在很多APP(包括iso和android)都在用這種模式。

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

48923-3dd6403a71038d07

這種底部標簽導航模式并不常見,但在一些APP中還是可以看到它的應用。比如微博的底部標簽導航。

其次,我們將標簽放到界面的上方,就會形成常見的頂部標簽導航。

48923-1fb673f09b361df9

頂部標簽導航在ios app中一般當作二級導航。在android app中,這種導航模式以前被用作一級導航,但自從google推出了“抽屜導航”作為一級導航后,頂部標簽導航就被常用為二級導航了。

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

二、抽屜導航

說完標簽導航,你可能會說,我是有六七個導航,但其中只有一個導航是主要的,別的雖然有用,但用戶非常非常少用。這種情況下能不能只顯示主要的內(nèi)容,其它導航隱藏起來呢?這樣還可以更近一步地節(jié)省頁面空間。

當然可以。在這種情況下你可以使用抽屜導航。

48923-742361b18b99efbe

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

四:下拉導航

講完抽屜導航后,還有另外一種類似的導航模式同樣可以節(jié)省頁面空間,并且隱藏次要入口,這就是下拉導航。

48923-33569c268f31dc5c

下拉導航,與抽屜式導航的目的相同,都是為了突出內(nèi)容。一般位于產(chǎn)品頂部,通過點擊呼出導航菜單。導航菜單以浮窗形式位于界面上層,可通過點擊導航菜單以外的區(qū)域使其收起。下拉導航的菜單與界面的連貫性比抽屜式要好,容易讓用戶感知當前位置。但由于是位于屏幕上方,相對隱蔽而且不能結(jié)合手勢操作,所以該菜單形式也不適合于頻繁的切換功能使用??紤]到導航菜單的可用面積較小,所以一般采用列表的形式展示菜單內(nèi)容。

下拉導航有一種比較常見的變式,就是下來菜單中展示兩級甚至多級(一般就是兩級,沒見過更多的),很多人稱其為超級菜單導航。如下:

48923-6c3dc0bd24da10c9

這種導航模式說實話用得比較少。但最近在各種O2O形態(tài)的APP中有比較多的使用(可能跟分類級別多而且不好組織有關(guān))。比如:美團、百度外賣等都有用超級菜單。

四、宮格導航

我在原始導航里設定了5個入口??墒牵绻?、8個甚至10多個入口呢?而且這些入口你也不好說到底哪個對用戶是最重要的,重要性差不多,怎么辦?OK,宮格導航可以解決這個問題。

48923-ec34e1764078e001

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

目前來說,這種導航模式越來越少用在一級導航了。不過,作為二級導航,作為一系列工具入口的聚合,或作為內(nèi)容列表的一種圖形化呈現(xiàn)形式,還是存在在各種APP里。如:zakeer的核心頁面就是宮格導航,但其與訂閱功能結(jié)合,沒有讓所有宮格斗展示出了。各種手機界面打開后的app展示頁面基本上都是宮格模式的。

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

首先,可以將宮格的卡片變大,宮格與宮格時間不留空白,如下圖:

48923-cc80c54831ed2d55

是不是和錘子手機的宮格展示布局一樣了?

上面這種展現(xiàn)方式所能展現(xiàn)的卡片數(shù)量有限。如果我們將其稍做調(diào)整,增加縱向滾動功能,就可以增加卡片數(shù)量的展現(xiàn),可以說是無限的。如下圖:

48923-45f17e39cf8983e3

優(yōu)酷安卓app里的“頻道”模塊采取的就是這種模式。

如果更進一步,是不是可以對上面這種無限的展示宮格進行分類呢?當然可以。然后我們就有了下面這種導航模式:

48923-2f477d76cf6d3465

當然,每個分類下能夠展示的數(shù)量可以更多,并不限于3個。

這時,如果我們想要在分類下,展示更多的內(nèi)容,但又想多展示分類,怎么辦?可以在以上的導航模式中再進一步變形,如圖:

48923-e8f95db1a77af9e1

允許每行宮格橫向滑動展示更多,這樣就擴展了展示的數(shù)量,又不會減少分類數(shù)量的展示。

宮格導航還有沒有別的變式呢?當然有。比如:

  1. 可以通過變化宮格導航中卡片的大小,來凸顯宮格中內(nèi)容的不同重要性。
  2. 可以將宮格導航和訂閱功能結(jié)合,形成獨特的訂閱導航。

……

變化形式根據(jù)不同的需要很可能有很多種。一般來講,常見的這些導航模式就夠了。

五、列表導航

列表式APP導航是我們在APP設計種必不可少的一個信息承載模式。當然作為一個APP的導航也是非常方便的。這種導航模式從原始導航中很好轉(zhuǎn)換,只要將列表左對齊,增加向右箭頭表明是否還有下級即可。如圖:

48923-fcbfdacc92ebfff7

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

自然,如果你想要對列表進行分類也是可以的。這樣邏輯上會更加清晰。如下:

48923-994b013beb2c3fe8

如果說雖然可以分類,但實在不知道如何確定分類名稱。把分類名稱去掉也是可以的。只是用間距將每一組列表隔開也能起到梳理邏輯的作用。

對于列表導航來說,還有一種常見的變式:將列表下內(nèi)容中的核心內(nèi)容展示出來,常見的是核心數(shù)據(jù)展現(xiàn)。如下:

48923-93f6144a468d604c

這種變式有時候也被成為儀表式導航,通過標題和核心數(shù)據(jù)來展現(xiàn)核心內(nèi)容,同時作為導航使用。這種導航模式可以參見各種互聯(lián)網(wǎng)金融APP中的產(chǎn)品列表。

六、輪播導航

如果我們將原始導航中的5個入口共處一個頁面變成每個頁面僅限一個入口可以嗎?或者說,我們將宮格導航變成一宮格呢?會有一種新的導航模式嗎?

按照上面的假設,我們會有一種常見的導航模式:輪播導航。如下:

48923-d8b0e3cdf682d7b4

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

七、點聚導航

如果一個界面,因為內(nèi)容或功能展示的需求,需要極端簡化其入口,應該如何做?點聚導航是一種選擇。

48923-5be9b490c66aa3ff

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

八、隱喻導航

如果原始導航中的五個入口,變成游戲界面中的五個關(guān)卡,只是簡單地將其按照上下順序列出來就會不太適用。游戲?qū)Ш降囊蟛粌H要可用,更要和整個游戲的風格等匹配。因此,有了隱喻導航這種模式,用頁面模仿應用的隱喻對象。這種導航主要用于游戲,但在幫助導航 人們組織事物(如日記、書籍等),并對其進行分類的應用中也能看到。

48923-7b917187404f04f2

九、關(guān)于導航的一些其它想法:

  1. 雖然每個導航模式有常見的用法,但并沒有絕對的限定,要具體情況具體分析。比如頂部標簽導航可以作為一級導航,但與抽屜導航結(jié)合的話,可能就會變成二級導航。
  2. 就目前的情況來看,很少有APP能夠只用一種導航模式,至少需要兩種。絕大多數(shù)的APP都在混合使用多種導航模式。很多APP甚至可能使用多大七八種導航模式,有的一個界面就可能用三到四種導航模式。
  3. 導航模式混合使用并不可怕,關(guān)鍵是要在設計上做好文章,確保用戶能夠獲得良好的用戶體驗。
  4. 導航的具體設計方式多種多樣,有只有文字的,有文字圖標結(jié)合的,有圖片文字結(jié)合的,有圖片文字圖標結(jié)合的、有只有圖標的……具體的形式不在這里多談。用什么樣的形式取決于內(nèi)容需要什么樣的展現(xiàn)形式。
  5. 文中的導航模式只是一種參考,這些模式其實還有各種各樣的變形。只要能夠引導用戶清晰明確地找到信息或完成任務的導航都是優(yōu)秀的導航,并不一定非得使用某種導航。

關(guān)于導航就寫到這里。完。

#專欄作家#

岳山丘,微信公眾號:iamyueshanqiu,人人都是產(chǎn)品經(jīng)理專欄作家,慕課網(wǎng)產(chǎn)品經(jīng)理。兜兜轉(zhuǎn)轉(zhuǎn)好多年,一直在教育行業(yè)做產(chǎn)品。初始做內(nèi)容,后來開始做WEB端。關(guān)注在線教育、互聯(lián)網(wǎng)金融(順便賺點小錢花)。最近一段時間開始研究移動APP產(chǎn)品,希望能夠多學習一些東西。

本文系作者授權(quán)發(fā)布,未經(jīng)許可,不得轉(zhuǎn)載。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. ??

    來自上海 回復
  2. ?? ?? ?? ?? ?? ??

    來自山西 回復
  3. 最后一個沒有具體的圖,有點難理解。

    來自廣東 回復
  4. 已關(guān)注

    來自廣東 回復
  5. 為什么這么多人看我的文章,就是沒人關(guān)注我的微信公眾號? ?? ?? ?? 求關(guān)注!公眾號:iamyueshanqiu。

    來自北京 回復
    1. 乖,不哭

      來自天津 回復
    2. 賬號太長了 ?

      來自廣東 回復
    3. 總結(jié)的不錯,贊一個 ??
      同樣iam體路過,哈哈

      來自北京 回復
    4. 賬號太長了。當然內(nèi)容是值得學習的

      來自浙江 回復