C端設(shè)計(jì):9種常用的導(dǎo)航設(shè)計(jì)

5 評論 8743 瀏覽 78 收藏 12 分鐘

編輯導(dǎo)語:一次優(yōu)秀的用戶體驗(yàn)必不可少的就是一個(gè)優(yōu)秀的導(dǎo)航設(shè)計(jì),你們肯定遇到過在交互界面點(diǎn)著點(diǎn)著就不知道自己點(diǎn)到哪里了,很影響體驗(yàn),所以今天作者和大家分享了關(guān)于導(dǎo)航設(shè)計(jì)的匯總和他們的優(yōu)缺點(diǎn)。

一、導(dǎo)航的定義

導(dǎo)航的定義其實(shí)就是元素之間的相互組合,可以讓用戶自由的在里面進(jìn)行自由穿行。

二、導(dǎo)航設(shè)計(jì)的目的

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

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

三、導(dǎo)航設(shè)計(jì)的作用

導(dǎo)航的設(shè)計(jì)其實(shí)就是讓用戶知道自己在哪里,身處在哪一個(gè)交互界面,可以再次去到哪一個(gè)頁面,返回哪一個(gè)頁面。

當(dāng)然還要提供跳轉(zhuǎn)的方法讓用戶感受到元素與頁面的關(guān)系,表達(dá)用戶與瀏覽界面的關(guān)系。

四、9種常用的導(dǎo)航設(shè)計(jì)

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

當(dāng)產(chǎn)品的整個(gè)體驗(yàn)流中是以幾個(gè)常用功能模塊(一般不超過5個(gè))貫穿的,意味著用戶需要在多個(gè)標(biāo)簽入口之間來回切換;

為了保證切換的效率,將貫穿產(chǎn)品整個(gè)體驗(yàn)的流的模塊平鋪在Tab Bar位置,保證了用戶任務(wù)路徑的扁平,比如QQ和微信。

優(yōu)點(diǎn):屬于拇指熱區(qū)范圍內(nèi),操作方便,切換快速,用戶體驗(yàn)良好。

缺點(diǎn):只能容納3-5個(gè),數(shù)量有限。

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

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

實(shí)際項(xiàng)目中,頂部與底部配合使用的挺多。

優(yōu)點(diǎn):頂部可滑動(dòng),所以可拓展性強(qiáng),占據(jù)的空間比底部少,是通過滑屏切換方便快捷。

缺點(diǎn):正式因?yàn)榭赏卣剐詮?qiáng),所以導(dǎo)致用戶需要花費(fèi)很多時(shí)間來切換到自己想要到的頁面,最后面的頁面就非常容易被用戶遺忘。

3. 舵式導(dǎo)航

點(diǎn)聚式它將多個(gè)核心功能聚匯到主界面中顯示,方便用戶呼出使用。會(huì)搭載其他導(dǎo)航樣式出現(xiàn)(如標(biāo)簽式)成為舵式導(dǎo)航,比如微博。

與標(biāo)簽導(dǎo)航類似,就點(diǎn)聚工導(dǎo)航與標(biāo)簽導(dǎo)航的結(jié)合體,其中一個(gè)導(dǎo)航標(biāo)簽蘊(yùn)含更多的操作選項(xiàng),也可以理解為標(biāo)簽中蘊(yùn)含更多二級導(dǎo)航標(biāo)簽。當(dāng)頁面有處于同一層級的幾大部分內(nèi)容,同時(shí)又需要一個(gè)非常重要且頻繁操作的入口,就可以采用這種APP導(dǎo)航模式。

優(yōu)點(diǎn):以顏色或大小的區(qū)別來展示核心,展示方式變得很靈活,不同顏色給用戶不同的視覺沖擊,激發(fā)用戶的交互欲望。

缺點(diǎn):屬于二級交互,增加了用戶的路徑,展示功能過多會(huì)給用戶造成選擇壓力。

4. 宮格導(dǎo)航

宮格式導(dǎo)航被廣泛應(yīng)用于各平臺(tái)系統(tǒng)的中心頁面;比如支付寶。

用在二級頁作為內(nèi)容列表的一種圖形化形式呈現(xiàn),或作為一系列工具入口的聚合;

用戶頻繁切換的概率是比較低;在不同的文章中可能被稱作:跳板(圖標(biāo)卡片式)、磁貼式。

優(yōu)點(diǎn):很直觀的把重要功能展現(xiàn)在用戶眼前,促使用戶可以快速選擇。

缺點(diǎn):同時(shí)正因?yàn)檫@種平鋪式的展示方式讓用戶也有了選擇壓力。兩個(gè)功能之間如果需要切換也會(huì)變得很麻煩了。

5. 陳列館式導(dǎo)航

宮格導(dǎo)航的變式吧,可用來呈現(xiàn)實(shí)時(shí)內(nèi)容,比如新聞、菜譜、文章或照片,可以采用網(wǎng)格布局(比如一直播和ins)或輪盤布局(比如格瓦拉電影),還可以采用幻燈片模式進(jìn)行展示。

陳列館式設(shè)計(jì)模式最適合呈現(xiàn)經(jīng)常更新的、視覺效果直觀、彼此獨(dú)立的內(nèi)容

優(yōu)點(diǎn):以卡片形式展示出來,大量標(biāo)簽可讓用戶快速了解內(nèi)容,方便對比選擇。

缺點(diǎn):整個(gè)界面可展現(xiàn)的卡片數(shù)量極少,用戶需要通過不斷下滑獲得新的內(nèi)容,增加用戶的交互流程。

6. 抽屜導(dǎo)航

一般用來放置對用戶而言不太常用或者對于產(chǎn)品而言不太核心的功能,或者不那么需要頻繁切換內(nèi)容的應(yīng)用,例如對設(shè)置、關(guān)于、個(gè)人信息等內(nèi)容的隱藏;

更多的被應(yīng)用于信息流產(chǎn)品設(shè)計(jì)中,這類產(chǎn)品注重核心內(nèi)容的展示,用戶的任務(wù)路徑較為單一,幾乎都是用于瀏覽產(chǎn)品的核心內(nèi)容;至于其他比較低頻的模塊入口則會(huì)隱藏在當(dāng)前界面后方,避免冗余的模塊搶奪用戶的眼球;比如QQ,酷狗音樂。

“2/8”法則告訴我們,80%的用戶只用那些20%功能,這20%功能就是信息流里面的核心功能;如果那80%不常用的功能也占用著最重要的位置,那么用戶就會(huì)被打擾,產(chǎn)生臃腫感,甚至?xí)艞壥褂卯a(chǎn)品。

優(yōu)點(diǎn):可以把大量的不太常用但是有很重要功能展示在其中,減少用戶的交互流程,并且不會(huì)占用主要界面,用戶也就不會(huì)被打擾。

缺點(diǎn):對于不了解產(chǎn)品的用戶來說這類導(dǎo)航用戶一般不容易被發(fā)現(xiàn),會(huì)導(dǎo)致用戶的流失。

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

與抽屜式導(dǎo)航的目的相同,都是為了突出內(nèi)容。一般位于產(chǎn)品頂部,通過點(diǎn)擊呼出導(dǎo)航菜單;

通常用來篩選同一信息模塊下不同類別的信息,或者快速啟動(dòng)某些常用的功能模塊,而不需要頻繁的頁面跳轉(zhuǎn) ;

Android中對應(yīng)的控件為spinner控件,但該控件用于同一類別下不同視圖之間的切換,而不是跳轉(zhuǎn)至完全不同的視圖。iOS中下拉菜單為自定義控件,可以實(shí)現(xiàn)不同類別之間的切換;

下拉導(dǎo)航還有一種變式,就是下來菜單中展示兩級甚至多級,一般在電商產(chǎn)品中比較常見,因?yàn)槠奉惡秃Y選條件眾多,比如微博,美團(tuán)等。

優(yōu)點(diǎn):與重要界面連貫性強(qiáng),不會(huì)占用重要界面,用戶點(diǎn)擊方便,可以通過對比詳細(xì)對比自己的目標(biāo)。

缺點(diǎn):一般下拉鍵比較小,不容易被用戶發(fā)現(xiàn),容易被忽視。

8. 列表導(dǎo)航

作為信息組織框架,是我們在產(chǎn)品設(shè)計(jì)中必不可少的一個(gè)信息承載模式。

適合用來顯示較長或擁有次級文字內(nèi)容的標(biāo)題,每行可以融入較多信息。

與宮格導(dǎo)航類似,常用于二級頁面,不會(huì)默認(rèn)展示任何實(shí)質(zhì)內(nèi)容,所以通常app不會(huì)在首頁使用它;比如QQ,微信。

無論ios開發(fā)和android 都有現(xiàn)成的列表布局插件和模板。

優(yōu)點(diǎn):可拓展性強(qiáng),可以加很多功能,也符合從上到下,從左到右的閱讀習(xí)慣。

缺點(diǎn):切換不方便,更換功能還需要返回上一級,增加了交互路徑。

9. 輪播(旋轉(zhuǎn)木馬)導(dǎo)航

當(dāng)你的應(yīng)用信息足夠扁平,可以嘗試輪播導(dǎo)航;(適合頁面結(jié)構(gòu)簡單的app)

一般用在購物軟件廣告區(qū),通過圖文鏈接形式展示。

優(yōu)點(diǎn):通過少量的區(qū)域來展示大量的內(nèi)容。

缺點(diǎn):用戶使用過程中需要反復(fù)的左右切換來找到目標(biāo)頁面,大大增加了交互路徑,用戶體驗(yàn)不好。

五、總結(jié)

導(dǎo)航欄是元素之間的組合,能讓用戶明確知道自己在哪里,去向哪里,不同的產(chǎn)品選擇不同的導(dǎo)航能增加用戶體驗(yàn)。

 

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

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評論
評論請登錄
  1. 謝謝作者分享
    作者,頂部標(biāo)簽Tab導(dǎo)航的缺點(diǎn)貌似有一個(gè)錯(cuò)別字 正式因?yàn)?/p>

    來自海南 回復(fù)
    1. 謝謝指正

      來自湖北 回復(fù)
    2. 沒想到會(huì)被翻,好開心呀 ??

      來自海南 回復(fù)
  2. 謝謝作者分享,總結(jié)的很清晰很全面,收藏啦,以后需要設(shè)計(jì)導(dǎo)航就再來學(xué)習(xí)一下

    來自廣東 回復(fù)
  3. 感謝總結(jié)分享,這樣看分類挺直觀的,優(yōu)缺點(diǎn)都有提到,感謝分享

    回復(fù)