深度解析B端導(dǎo)航設(shè)計(jì):交互篇

9 評論 23438 瀏覽 386 收藏 20 分鐘

編輯導(dǎo)語:導(dǎo)航設(shè)計(jì)與產(chǎn)品的信息架構(gòu)有關(guān),合理、有效的B端導(dǎo)航設(shè)計(jì)有助于引導(dǎo)用戶、幫助用戶快速方便地獲取信息。本篇文章里,作者從產(chǎn)品設(shè)計(jì)交互的角度,針對B端導(dǎo)航設(shè)計(jì)做了詳細(xì)的介紹,讓我們一起來看一下。

hello各位在B端奮斗的小伙伴們,你是否會(huì)時(shí)常因?yàn)槊鎸?dǎo)航多種多樣的形式從而面對需求時(shí)無從下手,你又是否因?yàn)殡m然見過了很多的案例仍然不得導(dǎo)航設(shè)計(jì)的要領(lǐng)和精髓?

沒關(guān)系,今天我們就一起來解決這個(gè)在B端設(shè)計(jì)中困擾我們多時(shí)的難題,從交互的角度結(jié)合案例對導(dǎo)航進(jìn)行一個(gè)立體的剖析。

如果你準(zhǔn)備好了那么就請系上安全帶現(xiàn)在就發(fā)車。

要探討一個(gè)概念那么首先需要知道其精準(zhǔn)的定義,才能展開研究,而所謂的導(dǎo)航(Navigation)的精準(zhǔn)定義可以闡述為:是一種對信息的分類,幫助用戶找到想要的信息,完成預(yù)期的任務(wù)。

如果你覺得這個(gè)定義很抽象,那么不妨從這個(gè)角度去理解。如果說任何界面上的功能都能夠找到在我們物理世界的隱喻的話,那么導(dǎo)航映射的就是我們物理世界中的路牌、導(dǎo)覽、線路示意圖等,因?yàn)榱⒆阌谄涔δ芏?,?dǎo)航的作用用一種大白話的說法就是:告訴用戶你從哪里來、你在哪里、你可以去哪里。

由此我們對導(dǎo)航有了一個(gè)較為準(zhǔn)確的把控,那么請?jiān)谧母魑豢焖倩卮鹞乙粋€(gè)問題,你能夠告訴我以上6個(gè)內(nèi)容那些不是導(dǎo)航嗎?

3

2

1

OK公布答案,如果你的答案是2和6那么恭喜你,你對導(dǎo)航的理解是較為優(yōu)秀的。2和6的名稱大家想必也不陌生那就是:菜單。但是不夸張地說日常的工作中仍舊有不小數(shù)目的一波同學(xué)搞不清楚這二者的區(qū)別,那么如何對二者進(jìn)行一個(gè)有效的區(qū)分呢?

同樣是從定義來入手,參照前面我們給導(dǎo)航進(jìn)行的定義方式,菜單就是:是一種對動(dòng)作的分類和集合,幫助用戶快速達(dá)到某個(gè)功能。也就是說當(dāng)你對菜單的某一個(gè)欄目進(jìn)行點(diǎn)擊時(shí)會(huì)立馬生成一個(gè)具體的動(dòng)作,而導(dǎo)航則是對信息的分類與合集。

一、導(dǎo)航的分類

那么明白了這點(diǎn)我們就可以對導(dǎo)航進(jìn)行分類了。

提到導(dǎo)航的分類大家一定會(huì)脫口而出一堆詞匯如:頂部導(dǎo)航、底部導(dǎo)航、左側(cè)導(dǎo)航、舵式導(dǎo)航、標(biāo)簽導(dǎo)航、菜單導(dǎo)航……沒錯(cuò)這的確是一種分類,但這只是導(dǎo)航在外觀這個(gè)維度的分類,并不是我們今天從交互、結(jié)構(gòu)層去討論的重點(diǎn)。

而立足于結(jié)構(gòu)來對導(dǎo)航進(jìn)行分類又將是如何呢?較為科學(xué)的來說是以下幾類:

  • 全局導(dǎo)航;
  • 局部導(dǎo)航;
  • 輔助導(dǎo)航;
  • 內(nèi)嵌導(dǎo)航;
  • 友好導(dǎo)航;
  • 遠(yuǎn)程導(dǎo)航。

下面我們來對這6類導(dǎo)航進(jìn)行一步一步的具體分析。

1. 全局導(dǎo)航

所謂全局導(dǎo)航是指它可以覆蓋整個(gè)產(chǎn)品的通路,往往表現(xiàn)為產(chǎn)品的一級分類(而且大部分情況都是一級分類),它不一定包含全局信息,但是一定可以讓用戶可以去到其目標(biāo)的關(guān)鍵節(jié)點(diǎn)。

2. 局部導(dǎo)航

所謂局部導(dǎo)航是指在同一個(gè)框架中,可以到這個(gè)節(jié)點(diǎn)上的上下級通路,它一定存在于嚴(yán)格的父子級關(guān)系中。

3. 輔助導(dǎo)航

所謂輔助導(dǎo)航就是提供用戶在全局/局部導(dǎo)航不可達(dá)到相關(guān)內(nèi)容的快捷途徑(這個(gè)快捷途徑在本產(chǎn)品內(nèi))。

4. 內(nèi)嵌導(dǎo)航

所謂內(nèi)嵌導(dǎo)航也叫上下文導(dǎo)航,是指嵌入頁面自身內(nèi)容的導(dǎo)航,通常同在上下文超鏈接、引導(dǎo)搜索等。

5. 友好導(dǎo)航

所謂友好導(dǎo)航是指它可以為用戶提供一個(gè)便利的前進(jìn)途徑,在需要的時(shí)候能夠找到入口信息,通常在不需要的時(shí)候成隱藏狀態(tài)。

6. 遠(yuǎn)程導(dǎo)航

所謂遠(yuǎn)程導(dǎo)航是指不包含在產(chǎn)品結(jié)構(gòu)中,以獨(dú)立的方式存在產(chǎn)品內(nèi),通常表現(xiàn)為網(wǎng)站地圖、索引表(地址選擇、品牌選擇)等。

7. 導(dǎo)航的常用UI表現(xiàn)形式

在從結(jié)構(gòu)的層面了解了導(dǎo)航的基本類型之后,順便給大家提一提導(dǎo)航的外觀。這里并不展開說,大家需要知道的是導(dǎo)航的外觀使用遵循的是“同構(gòu)異型”的準(zhǔn)則,什么意思呢?

同樣的結(jié)構(gòu)(比如同一組數(shù)據(jù)集:商品、商品名稱、商品價(jià)格)可以嵌套進(jìn)入不同的外觀如:卡片式、列表、詳情……這個(gè)視具體的業(yè)務(wù)情況、使用場景而定。

常用的導(dǎo)航外觀基本分為以上七種外觀即:菜單欄、樹狀表、頂欄、選項(xiàng)卡、面包屑、文字鏈接、步驟。

二、導(dǎo)航小貼士

知道了導(dǎo)航的結(jié)構(gòu)分類和使用場景,那么不妨來給大家一些關(guān)于導(dǎo)航本身的小貼士作為原則參考,解決大家在實(shí)戰(zhàn)中的一些問題。

1. 導(dǎo)航盡量扁平、保持穩(wěn)定就算要多一次點(diǎn)擊

對于B端產(chǎn)品來說穩(wěn)定相當(dāng)重要!因?yàn)锽端產(chǎn)品對于用戶來說使用和學(xué)習(xí)成本、門檻較大,如果你很頻繁地對其路徑進(jìn)行修改調(diào)整,用戶就會(huì)因?yàn)楫a(chǎn)品不符合操作的習(xí)慣、心智模型對產(chǎn)品很容易滋生負(fù)面情緒,對于產(chǎn)品本身來說這樣的傷害是需要盡量避免的。

2. 最好便于拓展

還是從穩(wěn)定的方面來說,我們需要保證的是導(dǎo)航的變化不會(huì)因?yàn)楫a(chǎn)品的變化而發(fā)生很大的變化。

舉個(gè)很簡單的例子,當(dāng)我們的產(chǎn)品的功能增多時(shí),尤其是二級導(dǎo)航的項(xiàng)目增多,導(dǎo)致原來如果是橫向布局的導(dǎo)航不得不改成縱向布局的導(dǎo)航,這就是所謂的因?yàn)楫a(chǎn)品的變化發(fā)生很大的變化。所以在選擇導(dǎo)航布局的時(shí)候就需要打下一個(gè)很好的基礎(chǔ)便于日后的拓展。

3. 清晰可見,操作易懂

這是站在一個(gè)外觀和交互共同的層面去看,導(dǎo)航的大小一定要足夠,而且其位置一定要是用戶認(rèn)為足夠清晰的,確保在視覺反饋的的層面對于用戶來說是友好的。

其次就是所有的可交互區(qū)域需要有積極的響應(yīng),與內(nèi)容區(qū)要有對比,可以將其稱為界面的熱情度,這也是一個(gè)優(yōu)秀界面的自我修養(yǎng)。

4. 導(dǎo)航項(xiàng)可以重復(fù)

一個(gè)頁面中允許出現(xiàn)兩個(gè)主導(dǎo)航,同一個(gè)界面中允許出現(xiàn)兩個(gè)同樣的導(dǎo)航項(xiàng),并不是說一個(gè)項(xiàng)在導(dǎo)航中只能夠出現(xiàn)一次,并沒有那么死板。

5. 不要讓用戶有驚喜

這對于To B 的設(shè)計(jì)來說十分重要,不同于To C的產(chǎn)品,B端產(chǎn)品的一個(gè)重點(diǎn)就是要符合用戶的預(yù)期,所以我們一定要避免“因?yàn)橛腥に赃@設(shè)計(jì)”這個(gè)思路。

6. 導(dǎo)航的反饋需要保持一致

界面上面所有的界面編排,所有的組件、所有的控件、所有的模式都是可以找到隱喻的。比如文字鏈和帶“跳轉(zhuǎn)”的文字鏈,它代表的隱喻是不一樣的,所以我們就需要賦予其不同的外觀和交互響應(yīng)對應(yīng)戶進(jìn)行反饋。

7. 導(dǎo)航不一定是有層級關(guān)系的

回到最初導(dǎo)航的定義,它的本質(zhì)是對信息進(jìn)行分類,讓用戶快速完成任務(wù),這也是導(dǎo)航的本職工作。

很多時(shí)候不一定要拘泥于這個(gè)項(xiàng)目它應(yīng)該嚴(yán)格存在于哪個(gè)層級之中這樣的思路進(jìn)行設(shè)計(jì),而是根據(jù)用戶的需求,如何將這個(gè)項(xiàng)目合理的分類于最適合的集合之中。

8. 按權(quán)重布局的三種導(dǎo)航樣式

這是一個(gè)立足于外觀的點(diǎn),根據(jù)大量的案例分析和眼動(dòng)測試,目前市面上最為常見的按照信息權(quán)重布局的導(dǎo)航可分為:橫向式、縱向式、縱橫式。由于這部分我們不展開說,所以直接在上圖整理了每種布局的特征、優(yōu)劣勢和應(yīng)用場景。

三、六步導(dǎo)航設(shè)計(jì)法

知道了上面的分類和注意事項(xiàng)之后,下面我們用一個(gè)具體案例來對導(dǎo)航的交互層面設(shè)計(jì)進(jìn)行一個(gè)深度體驗(yàn)(因?yàn)榇藘?nèi)容十分精彩也涉及到機(jī)密,所以不在這里做具體展示,以示意的方式來敘述),總共分為六步,看看這是否也是你工作場景中比較頭疼的呢。

1. 搞清楚每一個(gè)導(dǎo)航項(xiàng)的定義

需要搞清楚導(dǎo)航項(xiàng)的定義是因?yàn)閷?dǎo)航項(xiàng)的定義決定了你的目標(biāo)界面是什么,所謂的目標(biāo)界面就是導(dǎo)航所引導(dǎo)你到的哪一個(gè)分類的信息處。

所以我們首先來整理一下導(dǎo)航中每個(gè)導(dǎo)航項(xiàng)的界面定義,這也是我們?nèi)粘9ぷ髦袑?dǎo)航梳理十分重要的一步。

當(dāng)問題被羅列出來之后我們就會(huì)自然而然的產(chǎn)生各種各樣的疑問,比如導(dǎo)航分類之間存在有的存在流程上的關(guān)系,但是有的分類卻并不屬于流程,這是為什么呢?

再比如有的導(dǎo)航分類和導(dǎo)航項(xiàng)之間名字一樣,但內(nèi)容卻不一樣,這又是為什么呢(想一想這是不是我們工作中也經(jīng)常遇到的疑問呢)?這都是后面我們需要去優(yōu)化的地方。

2. 搞明白用戶的使用路徑

保留住上面的問題,我們來做第二步,這一步我們需要搞明白用戶的使用路徑,因?yàn)檫@樣我們可以很好地給任務(wù)類產(chǎn)品做一級分類。

通過基于不同角色的用戶體驗(yàn)地圖我們可以得出不同的用戶操作路徑,于是便可以很順暢地得出這一套操作流程的大框架。

基于業(yè)務(wù)中的任務(wù)鏈路推導(dǎo)出每一步的操作路徑,于是我們就可以將用戶的操作路徑就可以提煉為一級導(dǎo)航。

3. 區(qū)分一下權(quán)限

得出了一級導(dǎo)航,下面我需要角色的權(quán)限進(jìn)行一下區(qū)分,這也是B端產(chǎn)品的必備屬性。

于是我們?yōu)槊恳粋€(gè)導(dǎo)航項(xiàng)進(jìn)行了角色權(quán)限的梳理對應(yīng),那么一級導(dǎo)航中每個(gè)導(dǎo)航分類所對應(yīng)的角色也瞬間一目了然。

這里面多說一句,當(dāng)用戶用不同權(quán)限的賬號(hào)登錄產(chǎn)品時(shí),能看到不同的內(nèi)容這才是一個(gè)優(yōu)秀的擁有權(quán)限設(shè)計(jì)的導(dǎo)航。

4. 區(qū)分一下界面數(shù)據(jù)性質(zhì)

到了這一部分對于一些完全沒有接觸過數(shù)據(jù)的同學(xué)來說理解起來可能會(huì)一些難度,我們首先需要知道的是:“相同的數(shù)據(jù)來源,可以幫我們區(qū)分界面性質(zhì),而且相同的數(shù)據(jù)來源,往往會(huì)有一組相同的界面來圍繞。

在此需要記住三個(gè)概念:

  1. 元數(shù)據(jù):數(shù)據(jù)屬性的信息,用來支持如指示存儲(chǔ)位置、歷史數(shù)據(jù)、資源查找、文件記錄等功能,例如一件商品、一個(gè)客戶;
  2. 記錄集:指定數(shù)據(jù)庫中檢索到的數(shù)據(jù)集合,例如訂單列表、發(fā)貨列表;
  3. 關(guān)系列表:對來描述對象和對象的關(guān)系,比如你和我是好友,你和我在同一個(gè)企業(yè)微信群。

于是我們?yōu)閷?dǎo)航項(xiàng)進(jìn)行數(shù)據(jù)性質(zhì)的區(qū)分歸類,也就是說相同數(shù)據(jù)類型的實(shí)體往往圍繞著某個(gè)元數(shù)據(jù)并且包含系列的界面。當(dāng)我們這里整理完后發(fā)現(xiàn),相同數(shù)據(jù)性質(zhì)的實(shí)體(這里可以理解為導(dǎo)航項(xiàng))貌似可以歸類在一起,這是我們作為分類的一個(gè)依據(jù)。

根據(jù)相同的數(shù)據(jù)性質(zhì)將導(dǎo)航項(xiàng)歸入應(yīng)該歸入的二級導(dǎo)航中,此時(shí)不妨和最初的版本進(jìn)行對比,我們的一級二級導(dǎo)航相對而言已經(jīng)通過改版清晰了很多。

5. 搞明白用戶的使用頻次

這一步其實(shí)是比較好理解的,很簡單的法則:“高頻次高優(yōu)展示,低頻次降低權(quán)重甚至隱藏”。這是針對于二級導(dǎo)航中每個(gè)導(dǎo)航項(xiàng)的排布進(jìn)行的設(shè)計(jì)。

這里不妨把頻次由高到低量化成為:實(shí)時(shí)關(guān)注、每天關(guān)注、每月關(guān)注、很少使用、極少使用這個(gè)幾個(gè)概念,分別用五角星、三角形、矩形、圓形、菱形進(jìn)行代表。

而關(guān)于使用頻次的高低甄別一般我們可以通過用戶調(diào)研和數(shù)據(jù)埋點(diǎn)的兩種常用方式來進(jìn)行,這里并不展開講。

于是我們可以將使用頻次作為一列新的參考放入導(dǎo)航項(xiàng)的表格中,瞬間清晰明了。

根據(jù)使用頻次調(diào)整每個(gè)導(dǎo)航項(xiàng)的順序。

6. 設(shè)計(jì)合適的導(dǎo)航布局

這一步涉及的就是外觀了,不妨回顧一下之前對于導(dǎo)航的三種常見布局,根據(jù)產(chǎn)品的操作復(fù)雜程度等綜合需求,我們選擇了第二種形式成為最終形式。

四、結(jié)語

以上就是本期從交互的層面對導(dǎo)航進(jìn)行的分析拆解。很高興你能看到最后,以上內(nèi)容可以作為一種思維模版放在你日常的設(shè)計(jì)分析中,希望能對你有所啟發(fā)有所幫助,一起加油在B端奮斗的小伙伴們,我們下期見!

 

本文由 @核糖 原創(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. 使用頻次區(qū)分那里,用五種圖形區(qū)分理解成本有點(diǎn)高,不如統(tǒng)一成一種圖形、用數(shù)量展示更合理~

    來自廣東 回復(fù)
  2. 輔助導(dǎo)航、內(nèi)嵌導(dǎo)航、友好導(dǎo)航三者有啥區(qū)別?

    來自廣東 回復(fù)
  3. 最后的例子太簡單了

    來自江蘇 回復(fù)
  4. 案例的結(jié)尾有點(diǎn)倉促。

    來自浙江 回復(fù)
  5. 看了兩個(gè)一模一樣的文字,只有配圖不一樣。

    來自河南 回復(fù)
  6. 精華,已關(guān)注

    來自北京 回復(fù)
  7. 泡泡老師讓我來康康

    回復(fù)
  8. 泡泡老師讓我來催更

    來自湖北 回復(fù)
  9. 非常詳盡,感謝作者!

    來自廣東 回復(fù)