導航有哪些設計方法,不同的導航對應什麼樣的產品應用場景?

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

一、標籤式導航

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

1、底部導航,採用文字加圖標的方式展現。一般有3-5個標籤,適合在相關的幾類信息中間頻繁的切換使用。這類信息優先順序較高、用戶使用頻繁,彼此之間相互獨立,通過標籤式導航的引導,用戶可以迅速的實現頁面之間的切換且不會迷失方向,簡單而高效。它的缺點是會佔用一定高度的空間,如果用戶是小屏幕手機,則視覺體驗不太好。

導航有哪些設計方法,不同的導航對應什麼樣的產品應用場景

底部標籤導航

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

導航有哪些設計方法,不同的導航對應什麼樣的產品應用場景

頂部標籤導航

3、頂部,底部雙tab導航。標籤式導航除了設在底部和底部,另外有些產品內容比較多會採用頂部,底部混合使用標籤式導航,如簡書、微票兒。

導航有哪些設計方法,不同的導航對應什麼樣的產品應用場景

頂部,底部雙tab導航

二、抽屜式標籤

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

導航有哪些設計方法,不同的導航對應什麼樣的產品應用場景

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

缺點在於次功能入口比較隱蔽,用戶不容易發現;使用次功能需要二次點擊,增加用戶使用成本。

三、宮格式導航

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

導航有哪些設計方法,不同的導航對應什麼樣的產品應用場景

四、列表式導航

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

導航有哪些設計方法,不同的導航對應什麼樣的產品應用場景

五、舵式導航

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

導航有哪些設計方法,不同的導航對應什麼樣的產品應用場景

導航有哪些設計方法,不同的導航對應什麼樣的產品應用場景

總結

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

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



簡介:百度問咖(大咖線下約見平台)高等教育領域專業大咖。

移動端導航設計一般有七種設計模式,根據產品層級的深度和廣度,選擇適合的導航模式,是產品設計中的關鍵一環。


一、標籤式導航

即tab式導航,是移動應用中最普遍、最常用的導航模式,適合在相關的幾類信息中間頻繁的調轉。這類信息優先順序較高、用戶使用頻繁,彼此之間相互獨立,通過標籤式導航的引導,用戶可以迅速的實現頁面之間的切換且不會迷失方向,簡單而高效。細分為:底部tab式導航、頂部tab式導航、底部tab的擴展導航三種。

以下情況可以選擇頂部tab式導航:某項功能必須固定在底部,其他tab只能固定在頂部,但為了方便操作,頂部tab導航最好支持手勢操作,即滑動即可切換,如新聞,小說等。

實際上,底部Tab模式導航在iOS和Android上一直是最安全的一種導航模式,它不怎麼出彩,但是絕對不會犯錯。在大屏幕時代,底部Tab模式的導航更能適應,也更好設計。

底部tab式導航的擴展形式適用於:入口分類數目不多,可以控制在5個以內,且用戶需要在入口間頻繁切換來執行多個任務,需要注意:結構太過複雜而且不穩定的應用不適合標籤式導航。


二、抽屜式導航

抽屜式導航將部分信息內容進行隱藏,突出了應用的核心功能。抽屜欄式導航有兩大缺陷:

1、在大屏幕手機上,單手持握時處於操作盲區,難以點擊。

2、抽屜式導航可能會降低你產品一半的用戶參與度

適用對象:應用主要功能和內容都在一個頁面裡面。一些用戶設置等低頻操作內容需要顯示在其他頁面里。

為了讓主頁面看上去乾淨美觀,可以把這些輔助功能放在抽屜欄里。如果你的應用有不同的視圖,且他們是平級的,需要用戶同等地對待,抽屜欄將會浪費掉大多數的用戶對於側邊欄中入口的潛在參與度和交互程度。在大屏時代使用抽屜欄,手勢操作顯得尤為重要,從屏幕邊緣喚出抽屜欄是個不錯的選擇。需要注意的是:需要用戶有一定參與的信息層級,最好不好放置在抽屜欄。

三、列表式導航

列表式導航就是最必不可少的一種信息承載模式,這種導航結構簡單清晰、易於理解、冷靜高效,能夠幫助用戶快速定位到對應內容。在APP中的應用也分為兩種:

1、作為主導航使用

2、作為輔助導航來展示二級甚至更深層級的內容

列表式導航大多作為輔助導航來展示二級甚至更深層次的內容,若要作為主導航,必須滿足層級淺且內容平級的條件。需要注意的是:列表式導航的數量保持在一屏以內,超過一屏最好再分一級,將最終要的內容歸納在前4個列表更容易被人們記住,要注意為列表內容分類。


四、平鋪式導航

當信息足夠扁平,可以嘗試平鋪式導航。這種導航方式很容易帶來高大上的視覺體驗,最大程度的保證了頁面的簡潔性和內容的完整性,且一般都會結合滑動切換的手勢,操作起來也非常方便。

平鋪式導航比較適用於足夠扁平化的內容和隨意瀏覽的閱讀模式,需要注意的是:無法跳轉至費相鄰頁面,如果入口間需要反覆跳轉,則不適合這種模式。

五、宮格式導航

每一個APP都是一個宮格,這些宮格聚集在中心頁面,用戶只能在中心頁面進入其中一個宮格,如果想要進入另一個宮格,必須要先回到中心頁面,再進入另一個宮格。每個宮格相互獨立,它們的信息間也沒有任何交集,無法跳轉互通。因為這種特質,宮格式導航被廣泛應用於各平台系統的中心頁面。

宮格式導航適合入口相互獨立互斥,且不需要交叉使用的信息歸類。一旦入口需要有所交集,必然導致更多的操作負累,這個時候只能根據產品特性做出權衡,如果不適合,建議果斷拒絕這種方式。


六、懸浮式導航

懸浮式導航,是將導航頁面分層,無論你到達APP的哪個頁面,懸浮icon永遠懸浮在上面,你依靠懸浮層隨時可以去想要去的地方,同時,為了讓懸浮icon不遮擋某個頁面的操作,通常懸浮的icon都可以在屏幕邊緣自由移動。

懸浮式icon是一個非常便捷的操作入口,也適應大屏幕時代。但需要注意的是:懸浮式icon會遮擋某些頁面的操作,在設計的時候應該考慮進去。


七、其他新式導航

導航其實只有6種,但不能被現有的導航模式所束縛,未來會有新的導航模式,新的操作手勢…,設計的心應該是自由的,若你羽翼未豐,就在規則的天空中飛行,可能不會出彩,但不至於犯錯;若你已成雄鷹,便可自由飛翔,突破規則,甚至建立自己的規則。


總結一下:

標籤式導航:最常用、最不易出錯,請第一時間考慮它。

抽屜式導航:如果你的信息層級繁多,可以考慮將輔助類內容放在抽屜中。

列表式導航:作為輔助導航來展示二級甚至更深層級的內容,每個APP必不可少,但請注意數量與分類。

平鋪式導航:如果你的內容是隨意瀏覽,無需來回跳轉的,可以考慮它。

宮格式導航:不建議在APP中作為主導航使用,如果非使用不可,請增加跳轉的關聯性。

懸浮式導航:更適應大屏的導航模式,不妨試一試,但注意不要讓它遮擋住某些頁面的操作。


最後,根據產品層級的深度和廣度,選擇適合的導航模式,是產品設計中的關鍵一環。


推薦閱讀:

資本寒冬,咕咚、Keep、Feel們如何才能逆勢而上
物聯網PaaS平台承載物聯網生態
BAT 三家巨頭在移動互聯網上誰的優勢更大?為何?
移動互聯網時代你變現了嗎?
申請facebook賬號卡在手機驗證這一步,怎樣解決?

TAG:設計 | 移動互聯網 | 產品 | 產品設計 | 用戶體驗設計 |