APP導(dǎo)航設(shè)計的對比總結(jié)

3 評論 16425 瀏覽 151 收藏 14 分鐘

縱觀應(yīng)用市場上的APP,導(dǎo)航設(shè)計的模式總是幾種的組合使用。

導(dǎo)航設(shè)計的目的就是需要突出產(chǎn)品的核心,扁平化用戶的任務(wù)路徑。讓用戶能夠順利的在產(chǎn)品中暢行,讓用戶時刻清楚自己在應(yīng)用中所處的位置,及如何前往目的頁面。

產(chǎn)品的導(dǎo)航系統(tǒng),是產(chǎn)品的信息結(jié)構(gòu)在用戶界面上的展現(xiàn)方式。移動端產(chǎn)品導(dǎo)航的設(shè)計沒有最好之說,只有最合適,根據(jù)你的產(chǎn)品采取最合適的導(dǎo)航設(shè)計。

縱觀應(yīng)用市場上的APP,導(dǎo)航設(shè)計的模式總是幾種的組合使用。下面我們來看一下常見的幾種導(dǎo)航設(shè)計模式。

01 底部標(biāo)簽(Tab)導(dǎo)航

描述:

  1. 當(dāng)產(chǎn)品的整個體驗流中是以幾個常用功能模塊(一般不超過5個)貫穿的,意味著用戶需要在多個標(biāo)簽入口之間來回切換;為了保證切換的效率,將貫穿產(chǎn)品整個體驗的流的模塊平鋪在Tab Bar位置,保證了用戶任務(wù)路徑的扁平。
  2. iOS原裝App Podcast,5Tab。

優(yōu)點:

  1. 可見性好,位置明顯,易于發(fā)現(xiàn),它能讓用戶直觀了解到APP的核心功能;
  2. 操作性好,用戶很方便就能觸及到這個區(qū)域,并可在幾個標(biāo)簽中快速切換且不會迷失方向,簡單而高效;
  3. 符合習(xí)慣、ios原生控件,開發(fā)簡單;
  4. 優(yōu)先級較高、用戶使用頻繁,彼此之間相互獨立。

缺點:

  1. 容納個數(shù)有限,一般最多五個(不然需要結(jié)合其他方式,運用層級和收放)。
  2. 占據(jù)高度空間略大,一般都是文字+圖標(biāo)的形式。

02 頂部標(biāo)簽(Tab)導(dǎo)航

描述:

頂部Tab是谷歌提出來的,為了區(qū)分與iOS的區(qū)別的一種導(dǎo)航模式,由于在頂部,手指難以觸及,所以谷歌對應(yīng)地提出了手勢操作的解決方法:通過在屏幕左右滑動來切換標(biāo)簽。

實際項目中,頂部與底部配合使用的挺多。

優(yōu)點:

  1. 擴展性好:標(biāo)簽的個數(shù)沒有上限,不過太多的話,越是后面的頁面滲透率會越低;
  2. 占據(jù)空間?。?/strong>相比于底部Tab,頂部Tab一般占據(jù)的空間更小(因為不需要考慮手指點擊,所以可以把區(qū)域縮小,只選用圖標(biāo)或者文字即可),可以把更多的空間安排給內(nèi)容展示。
  3. 手勢操作非常方便。

缺點:

可見性略遜:這是空間占據(jù)的區(qū)域變小之后的后果。

03 舵式導(dǎo)航

描述:

  1. 點聚式它將多個核心功能聚匯到主界面中顯示,方便用戶呼出使用。會搭載其他導(dǎo)航樣式出現(xiàn)(如標(biāo)簽式)成為舵式導(dǎo)航。
  2. 與標(biāo)簽導(dǎo)航類似,就點聚工導(dǎo)航與標(biāo)簽導(dǎo)航的結(jié)合體,其中一個導(dǎo)航標(biāo)簽蘊含更多的操作選項,也可以理解為標(biāo)簽中蘊含更多二級導(dǎo)航標(biāo)簽。當(dāng)頁面有處于同一層級的幾大部分內(nèi)容,同時又需要一個非常重要且頻繁操作的入口,就可以采用這種APP導(dǎo)航模式。

優(yōu)點:

  1. 把類似生產(chǎn)內(nèi)容的主功能按鈕放在中間,標(biāo)簽更加突出醒目;
  2. 同時該主功能標(biāo)簽做了功能擴展,也因此給設(shè)計增加了一些個性化的亮點。

缺點:

占據(jù)高度空間略大,一般都是文字+圖標(biāo)的形式。

04 輪播導(dǎo)航

描述:

當(dāng)你的應(yīng)用信息足夠扁平,可以嘗試輪播導(dǎo)航;

優(yōu)點:

能夠最大程度的保證應(yīng)用的頁面簡潔性,操作也是最方便;

缺點:

不能夠快速的定位對應(yīng)的分頁內(nèi)容;

05 宮格導(dǎo)航

描述:

  1. 宮格式導(dǎo)航被廣泛應(yīng)用于各平臺系統(tǒng)的中心頁面;
  2. 用在二級頁作為內(nèi)容列表的一種圖形化形式呈現(xiàn),或作為一系列工具入口的聚合;
  3. 用戶頻繁切換的概率是比較低;
  4. 在不同的文章中可能被稱作:跳板(圖標(biāo)卡片式)、磁貼式。

優(yōu)點:

  1. 擴展性非常好,便于組合不同的信息類型(運營位、廣告位、內(nèi)容塊、設(shè)置等);
  2. 視野范圍內(nèi)可以展示的功能入口多,能夠讓用戶整體上了解APP提供的服務(wù),從而選擇自己所需要的那個服務(wù);
  3. 靜態(tài)、動態(tài)結(jié)合可以展示出豐富的信息,同時保持視覺統(tǒng)一;
  4. 跨平臺不受平臺限制。

缺點:

  1. 每個宮格相互獨立,它們的信息間也沒有任何交集,無法跳轉(zhuǎn)互通;
  2. 當(dāng)排布過多的時候,用戶容易眼花繚亂,選擇壓力較大;

06?陳列館式導(dǎo)航

描述:

  1. 宮格導(dǎo)航的變式吧,可用來呈現(xiàn)實時內(nèi)容,比如新聞、菜譜、文章或照片,可以采用網(wǎng)格布局(比如一直播和ins)或輪盤布局(比如格瓦拉電影),還可以采用幻燈片模式進行展示。
  2. 陳列館式設(shè)計模式最適合呈現(xiàn)經(jīng)常更新的、視覺效果直觀、彼此獨立的內(nèi)容。

優(yōu)點:

  1. 相較于列表導(dǎo)航、宮格式導(dǎo)航的不同在于,陳列館式導(dǎo)航有更豐富的表現(xiàn)形式、更加隨意的組合效果(瀑布流等)以及豐富的動態(tài)效果(輪盤、幻燈片形式);
  2. 直觀展現(xiàn)各項內(nèi)容。

缺點:

  1. 不適合展現(xiàn)頂層入口框架;
  2. 容易形成界面內(nèi)容過多,顯得雜亂;
  3. 設(shè)計效果容易呆板。

07 抽屜導(dǎo)航

描述:

  1. 抽屜式也是谷歌提出來的一種導(dǎo)航模式,由于虛擬按鍵的存在,所以在安卓上使用底部Tab會造成雙底欄,視覺觀感不佳;
  2. 一般用來放置對用戶而言不太常用或者對于產(chǎn)品而言不太核心的功能,或者不那么需要頻繁切換內(nèi)容的應(yīng)用,例如對設(shè)置、關(guān)于、個人信息等內(nèi)容的隱藏;
  3. 更多的被應(yīng)用于信息流產(chǎn)品設(shè)計中,這類產(chǎn)品注重核心內(nèi)容的展示,用戶的任務(wù)路徑較為單一,幾乎都是用于瀏覽產(chǎn)品的核心內(nèi)容;至于其他比較低頻的模塊入口則會隱藏在當(dāng)前界面后方,避免冗余的模塊搶奪用戶的眼球;
  4. 在不同的地方可能被稱為:擴展菜單、側(cè)邊導(dǎo)航、漢堡導(dǎo)航;
  5. “2/8”法則告訴我們,80%的用戶只用那些20%功能,這20%功能就是信息流里面的核心功能;如果那80%不常用的功能也占用著最重要的位置,那么用戶就會被打擾,產(chǎn)生臃腫感,甚至?xí)艞壥褂卯a(chǎn)品。

優(yōu)點:

  1. 節(jié)省頁面展示空間,讓用戶將更多的注意力聚焦到當(dāng)前頁面;
  2. 由于導(dǎo)航界面是隱藏在屏幕之外,展開之后整一頁面都是導(dǎo)航菜單內(nèi)容,所以可擴展和個性化的空間很大;
  3. 擴展性好,導(dǎo)航的個數(shù)沒上限。

缺點:

  1. 用戶不易發(fā)現(xiàn),使用次功能需要二次點擊,給用戶在切換功能帶來了操作成本;
  2. 可見性太差,用戶還沒能把漢堡菜單按鈕和側(cè)邊欄聯(lián)系起來,所以,側(cè)邊欄的滲透率很低;
  3. 不直觀、不適用于主導(dǎo)航、如遇頻繁操作的功能,用戶不斷開關(guān)抽屜體驗不好。

08 下拉導(dǎo)航/菜單導(dǎo)航

描述:

  1. 與抽屜式導(dǎo)航的目的相同,都是為了突出內(nèi)容。一般位于產(chǎn)品頂部,通過點擊呼出導(dǎo)航菜單;
  2. 通常用來篩選同一信息模塊下不同類別的信息,或者快速啟動某些常用的功能模塊,而不需要頻繁的頁面跳轉(zhuǎn) ;
  3. Android中對應(yīng)的控件為spinner控件,但該控件用于同一類別下不同視圖之間的切換,而不是跳轉(zhuǎn)至完全不同的視圖。iOS中下拉菜單為自定義控件,可以實現(xiàn)不同類別之間的切換;
  4. 下拉導(dǎo)航還有一種變式,就是下來菜單中展示兩級甚至多級,一般在電商產(chǎn)品中比較常見,因為品類和篩選條件眾多。

優(yōu)點:

菜單與界面的連貫性比抽屜式要好,容易讓用戶感知當(dāng)前位置;

缺點:

  1. 位于屏幕上方,相對隱蔽且不能結(jié)合手勢操作,不適合于頻繁的切換功能使用;
  2. 考慮到導(dǎo)航菜單的可用面積較小,所以一般采用列表的形式展示菜單內(nèi)容。

09 列表導(dǎo)航

描述:

  1. 作為信息組織框架,是我們在產(chǎn)品設(shè)計中必不可少的一個信息承載模式。
  2. 適合用來顯示較長或擁有次級文字內(nèi)容的標(biāo)題,每行可以融入較多信息。
  3. 與宮格導(dǎo)航類似,常用于二級頁面,不會默認展示任何實質(zhì)內(nèi)容,所以通常app不會在首頁使用它;
  4. 無論ios開發(fā)和android 都有現(xiàn)成的列表布局插件和模板。

優(yōu)點:

  1. 由上至下查看符合習(xí)慣;
  2. 結(jié)構(gòu)清晰,易于理解,冷靜高效,能夠幫助用戶快速的定位去到對應(yīng)的頁面。

缺點:

  1. 條目太多或分布不合理會導(dǎo)致用戶查找困難;
  2. 不適合需要頻繁切換任務(wù)的情況。

總結(jié)

導(dǎo)航可能不單單只有這幾種,可能大家的叫法也不同,而且每種導(dǎo)航都有其存在的意義,不是它不夠好,而是它可能不適用于你的產(chǎn)品。真正在實際項目中,還是得根據(jù)產(chǎn)品的實際情況綜合去運用。

 

本文由 @二O一七 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自 Pexels,基于 CC0 協(xié)議

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

    來自北京 回復(fù)
  2. 很受用,感謝。

    回復(fù)
  3. 厲害 這個匯總還挺實用的!

    回復(fù)
专题
53201人已学习15篇文章
无论是个人运营体系还是公司运营体系的构建,你都能在这里找到。
专题
12968人已学习15篇文章
该如何有效推广?有效推广的策略有哪些呢?本专题的文章分享了产品推广策略。
专题
14125人已学习13篇文章
本专题的文章分享了WMS系统设计指南。
专题
13693人已学习12篇文章
用户调研作为产品人员最常用的工作方式,相信各位一定不会陌生。但如何提高用户调研的有效性却是一直困扰大家的问题。本专题的文章分享了用户调研的方法论。
专题
15468人已学习16篇文章
随着互联网时代的蓬勃发展,互联网平台活动运营对于互联网企业业务十分重要。本专题的文章分享了如何做活动运营。
专题
16899人已学习12篇文章
分销是互联网拉人头和推广的常用手段,能够在短时间内实现裂变营销。本专题的文章分享了分销体系设计指南。