常見移動端產(chǎn)品導航設計模式

4 評論 20894 瀏覽 332 收藏 8 分鐘

平時生活中使用過很多APP,也看過一些關于移動產(chǎn)品導航設計的文章。今天整理了一下市場上常見的幾種導航設計,算是對自己學過知識的梳理。

APP導航承載著用戶獲取所需內容的快速途徑,它看似簡單,卻是產(chǎn)品設計中最需要考量的一部分。APP導航的設計,會直接影響用戶對APP的體驗感受。一個好的導航設計能讓用戶快速了解該產(chǎn)品的功能和信息組織架構。可以說導航設計有著舉足輕重的作用。雖然不同的產(chǎn)品需求和商業(yè)目標決定了不同的導航框架的設計模式,但縱觀應用市場上的APP,導航設計的模式總是幾種的組合使用。下面我們來看一下常見的幾種導航設計模式。

一、標簽式導航

標簽式導航又叫Tab式導航,是目前移動端市場上最為廣泛的導航設計。標簽導航通常分為底部,頂部,頂、底混合使用這三種模式

1、底部導航,采用文字加圖標的方式展現(xiàn)。

一般有3-5個標簽,適合在相關的幾類信息中間頻繁的切換使用。這類信息優(yōu)先級較高、用戶使用頻繁,彼此之間相互獨立,通過標簽式導航的引導,用戶可以迅速的實現(xiàn)頁面之間的切換且不會迷失方向,簡單而高效。它的缺點是會占用一定高度的空間,如果用戶是小屏幕手機,則視覺體驗不太好。

daohang

底部標簽導航

2、頂部導航

當內容分類比較多的時候,經(jīng)常會采用頂部導航設計模式,如一些資訊類的APP天天快報,推酷就采用頂部導航。

daohang1

頂部標簽導航

3、頂部,底部雙tab導航

標簽式導航除了設在底部和底部,另外有些產(chǎn)品內容比較多會采用頂部,底部混合使用標簽式導航,如簡書、微票兒。

daohang2

頂部,底部雙tab導航

二、抽屜式標簽

抽屜導航指的是一些功能菜單按鈕隱藏在當前頁面后,如網(wǎng)易郵箱、QQ、知乎等。點擊入口或側滑即可像拉抽屜一樣拉出菜單。這種導航設計比較適合于那么不需要頻繁切換的次功能,例如對設置、關于、會員、皮膚設置等功能的隱藏。

daohang3

抽屜式導航的優(yōu)點在于節(jié)省頁面展示空間,使主頁面更加簡潔美觀,讓用戶將更多的注意力聚焦到當前頁面。

缺點在于次功能入口比較隱蔽,用戶不容易發(fā)現(xiàn);使用次功能需要二次點擊,增加用戶使用成本。

三、宮格式導航

這種宮格導航是將主要入口全部聚合在主頁面中,每個宮格相互獨立,它們的信息間也沒有任何交集,無法跳轉互通。因為這種特質,宮格式導航被廣泛應用于各平臺系統(tǒng)的中心頁面。這樣的組織方式無法讓用戶在第一時間看到內容,選擇壓力較大,除了常見app如支付寶和美圖秀秀,其他的app采用這種導航的應用已經(jīng)越來越少,往往用在二級頁作為內容列表的一種圖形化形式呈現(xiàn),或是作為一系列工具入口的聚合。

daohang4

四、列表式導航

列表式導航作為信息組織框架,是我們在產(chǎn)品設計中必不可少的一個信息承載模式。列表導航與宮格導航類似,常用于二級頁面,不會默認展示任何實質內容,所以通常app不會在首頁使用它。這種導航結構清晰,易于用戶理解,能夠幫助用戶快速的定位去到對應的頁面。

daohang5

五、舵式導航

在有些情況下,簡單的底部tab式導航難以滿足更多的操作功能,這個時候我們就需要一些擴展形式來滿足需求 ,新浪微博、lofter、閑魚底部采用的就是舵式導航,舵式導航(之前看到別人這么叫所以我也就這么稱呼吧)跟標簽式導航相比,區(qū)別在于舵式導航把類似生產(chǎn)內容的主功能按鈕放在中間,標簽更加突出醒目,同時該主功能標簽做了功能擴展,也因此給設計增加了一些個性化的亮點。

daohang6

daohang7

總結

以上幾種是最常見導航設計模式,真正的產(chǎn)品設計時往往根據(jù)產(chǎn)品層次的深度和廣度采用多種模式的混合使用,在做到界面簡潔美觀的同時還要滿足用戶的使用習慣。

移動端產(chǎn)品導航的設計沒有最好之說,只有最合適,根據(jù)你的產(chǎn)品采取最合適的導航設計。除了當下已有的設計模式,未來一定會有更多更新的導航設計和交互體驗,設計的心應該是自由的。若你羽翼未豐,就在規(guī)則的天空中飛行,可能不會出彩但不至于犯錯;若你已成雄鷹,便可自由飛翔,突破規(guī)則,甚至建立自己的規(guī)則。

 

作者:正好先生DJW

來源@:簡書

原文鏈接:http://www.jianshu.com/p/99d62d59ca85#

本文由 @正好先生DJW 授權發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉載。

更多精彩內容,請關注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 總結的挺不錯的,很贊

    回復
  2. 很全面的分析總結,小編辛苦了

    回復
  3. 底部和頂部

    回復
  4. 學習了,非常好的分類,希望多些這樣的干貨

    來自浙江 回復