B端交互組件之導(dǎo)航篇

3 評論 20704 瀏覽 126 收藏 13 分鐘

編輯導(dǎo)讀:App導(dǎo)航,是應(yīng)用的信息結(jié)構(gòu)在用戶界面上的展現(xiàn)方式。優(yōu)秀的App導(dǎo)航設(shè)計,能夠在局限的屏幕窗口中完美的組織豐富的信息、展示產(chǎn)品的功能,并快速引導(dǎo)用戶使用產(chǎn)品功能。本文作者詳細(xì)介紹了B端產(chǎn)品中的導(dǎo)航設(shè)計,我們一起來看一下。

這是B端交互組件最后一篇文章了,組件其實有很多,本次只選取了我覺得常用的4個組件來細(xì)聊,即導(dǎo)航、表格、表單、彈窗,包括系統(tǒng)菜單、數(shù)據(jù)管理和展示、數(shù)據(jù)輸入和系統(tǒng)反饋。

導(dǎo)航與信息架構(gòu)息息相關(guān),信息架構(gòu)是對功能進行組織,導(dǎo)航則是系統(tǒng)的門戶,對功能的詳細(xì)展示,用戶可以通過導(dǎo)航快速找到自己想要的功能,也可以通過導(dǎo)航了解系統(tǒng)的整體功能分布。

一、導(dǎo)航結(jié)構(gòu)

導(dǎo)航結(jié)構(gòu)其實也跟頁面結(jié)構(gòu)相關(guān),常見的頁面結(jié)構(gòu)包括上下結(jié)構(gòu)、左右結(jié)構(gòu)、上左右結(jié)構(gòu)、上左中右結(jié)構(gòu)等。

我之前常用的就是上左右結(jié)構(gòu),也俗稱T字形結(jié)構(gòu)。

頭部放logo、個人信息,搜索等;左側(cè)放導(dǎo)航菜單,支持最多三層結(jié)構(gòu);右側(cè)則是主體內(nèi)容區(qū)域,表單,表格等都是放在這個區(qū)域。

1. 頭部導(dǎo)航

早期做網(wǎng)頁設(shè)計時,基本都是用的上下結(jié)構(gòu),即頭部是導(dǎo)航,有二級或三級菜單時用下拉菜單展示,中間是網(wǎng)頁主體內(nèi)容,尾部則是版權(quán)信息區(qū)域。

對系統(tǒng)而言,這種模式也有,頭部是導(dǎo)航,下面是主體內(nèi)容區(qū)域,有的系統(tǒng)尾部可能會帶簡單的版權(quán)信息。

如下圖所示:

以前設(shè)計華為內(nèi)部系統(tǒng)時,看到過很多這種設(shè)計的系統(tǒng),給我感覺就是需要頻繁切換頭部菜單,一個系統(tǒng)功能復(fù)雜,頭部菜單基本都帶二級或三級菜單,想找個功能,差不多需要每個都要展開去找,我個人感覺很麻煩,當(dāng)你進入某個頁面后,如果不看面包屑,基本就是迷路了,作為重視操作的系統(tǒng)而言,導(dǎo)航應(yīng)該更醒目一點。

我在做PTS項目管理系統(tǒng)的整體用戶體驗設(shè)計時,就大膽提出要改整體的結(jié)構(gòu),普通的外科手術(shù)已經(jīng)沒啥用了,得重新來搭骨架,不過好在此舉得到了部門領(lǐng)導(dǎo)的支持,項目得以順利進行下去,最終也是有很好的落地。

2. 左側(cè)導(dǎo)航

除了上下結(jié)構(gòu)外,都可以用左側(cè)導(dǎo)航。

如果是上左中右結(jié)構(gòu)時,右側(cè)其實可以設(shè)計成折疊效果,可以影藏;固定展示的話,也是放一些配套的附屬功能。有時候首頁是上左中右結(jié)構(gòu),內(nèi)頁可能會變成上左右結(jié)構(gòu),這種情況也是經(jīng)常有的,根據(jù)業(yè)務(wù)需要來設(shè)計。左側(cè)導(dǎo)航一般層級不超過3層,如果確實有4級功能的需要,一般也是放在主體內(nèi)容區(qū)域,可以用內(nèi)部TAB來表達。

不過我們盡量還是讓系統(tǒng)整體的層級控制在3層以內(nèi),寧可多加幾個菜單,也不要輕易去縱深。

如下圖所示:

3. 組合導(dǎo)航

組合導(dǎo)航,顧名思義就是頭部有導(dǎo)航,左側(cè)也有導(dǎo)航。

如下圖所示:

我以前設(shè)計餐飲CRM時,就是采用的這種方式,頭部是一級菜單,用圖標(biāo)和文字上下擺來展示,只有一層。左側(cè)是二級菜單和三級菜單,即左側(cè)可以展開,用圖標(biāo)和文字橫向擺來展示,展開的菜單沒有圖標(biāo)。如果業(yè)務(wù)上有要求的四級菜單,則用內(nèi)部TAB去區(qū)分。

操作上是點擊頭部一級菜單后,左側(cè)出現(xiàn)其對應(yīng)的二級菜單,有的可能只有二級菜單,最末菜單點擊后,右側(cè)打開頁面。這種設(shè)計給人感覺每個頭部菜單都是一個獨立的體系,通過點擊頭部菜單來切換不同的體系,為了避免過于孤立,我們是采用的內(nèi)部頁簽?zāi)J絹泶蜷_頁面。

二、面包屑

導(dǎo)航原則上是設(shè)計成最多三層,除了通過看導(dǎo)航的顏色變化外,也可以通過看面包屑來知道當(dāng)前頁面處于哪個路徑內(nèi),網(wǎng)站的面包屑一般是可以設(shè)計成可點擊的模式,除了最終頁面不可點擊。

系統(tǒng)的面包屑則根據(jù)業(yè)務(wù)要求來判斷是否可以點擊,我個人感覺面包屑就是一種弱化版的導(dǎo)航,配合主體導(dǎo)航來使用,加強導(dǎo)航的權(quán)重。

如下圖所示:

面包屑展示的菜單如果沒有具體的頁面,則不可點擊;如果二級菜單點擊有頁面,下拉的三級菜單點擊也有頁面,則可以設(shè)計成可點擊的模式。

另外有個點要說的是,面包屑層級只到頁面層級,一些功能按鈕打開的彈窗等原則上還是屬于這個頁面,所以面包屑不做變化。

說到這,突然感覺系統(tǒng)設(shè)計的變化很多,具體要采用哪種模式,里面的門道也挺多的,下面我會對導(dǎo)航路徑來詳細(xì)聊聊。

三、導(dǎo)航路徑

導(dǎo)航路徑,你也可以理解為用戶路徑,用戶從首頁進去,點擊功能菜單,一步步到達目標(biāo)頁面,并完成目標(biāo)功能。這里面可以采用的模式就有很多種。

1. 單層到底

用戶從首頁進來,不論怎么點擊,每次只打開一個頁面,比如當(dāng)前在一級A菜單下某個頁面,現(xiàn)在我打開一級B菜單下某個頁面,則A菜單頁面消失,轉(zhuǎn)而只呈現(xiàn)B菜單頁面,這種交互方式,我姑且用“單層到底”模式來表達吧。

如下圖所示:

我們也可以理解為在當(dāng)前頁打開某個頁面,點擊后頁面會刷新并覆蓋掉以前的頁面。這種設(shè)計,導(dǎo)航路徑會很清晰,都是單層設(shè)計,一級菜單都是主線,二級或三級則是分支。最后我總結(jié)下,就是每次只能打開一個頁面。

在具體業(yè)務(wù)中可能會遇到這種情況,打開A頁面進行操作時,突然需要用到B頁面的數(shù)據(jù),這個時候不管B頁面處在哪個層級,我現(xiàn)在需要打開B頁面看到我要的數(shù)據(jù),當(dāng)我再次返回A頁面時,之前操作的位置也就不存在了,不論是通過翻頁還是搜索或者其他操作后才能達到的位置,我現(xiàn)在需要重新做一遍,可能我需要反復(fù)去看B頁面的數(shù)據(jù),這樣就會頻繁在A頁面和B頁面之間切換。

有些人可能會說可以把B頁面的數(shù)據(jù)導(dǎo)出或者打印出來,當(dāng)然這也是一種解決辦法。如果場景再復(fù)雜一點呢,我需要通過B頁面的功能得出一個結(jié)論,確實需要在A和B之間來回切換。說到這,引出我即將要談的頁簽?zāi)J搅恕?/p>

2. 頁簽?zāi)J?/h3>

接著上面的問題,用頁簽?zāi)J?,就可以解決A和B之間來回切換的問題,我同時打開兩個頁面,在B頁面操作后得出結(jié)論,我再回到A頁面進行操作,數(shù)據(jù)也保存了,回到B頁面繼續(xù)操作,再次回到A頁面時,位置沒變,我可以接著操作,無縫對接。

如下圖所示:

我之前設(shè)計餐飲CRM時就是采用的頁簽?zāi)J?,我遨游在?dǎo)航系統(tǒng)中,打開很多個頁面,當(dāng)頁面很多時,其實也會感覺很凌亂,所以我后來優(yōu)化了,設(shè)置了最大頁簽數(shù)。

當(dāng)頁面被影藏后,頁簽上的文字就是唯一判斷這是哪個頁面的依據(jù),文字太多怎么辦,用省略號嗎,所以導(dǎo)航設(shè)計時,文字也需要去優(yōu)化,當(dāng)時真的是一地雞毛,一步步去梳理,最終達到一個平衡。

頁簽文字右側(cè)一般會有關(guān)閉按鈕,當(dāng)打開頁面數(shù)超過最大頁簽數(shù)時,系統(tǒng)會提示,這時你可以先關(guān)閉掉暫時不用的頁面。

這種模式用久了,我也發(fā)現(xiàn)問題了,沒事喜歡到處點擊,打開很多頁面,然后每次就是不停的去關(guān)閉頁面,一時方便用的爽,后來發(fā)現(xiàn)每個頁面都需要手動關(guān)閉,也很麻煩。

3. 組合模式

組合模式就是把單層到底和頁簽?zāi)J浇M合后的設(shè)計,單層針對的是一級菜單,頁簽切換是子菜單,同一個一級菜單下的子菜單,可以打開多個,采用頁簽?zāi)J健?/p>

如下圖所示:

如果你點擊其他一級菜單下某個子菜單,則會刷新頁面,前面所有頁面被覆蓋掉,只展示一個新頁面,當(dāng)然你可以再次打開多個同一級菜單下的其他頁面??偨Y(jié)下,就是每次只能打開一個一級菜單中的頁面,數(shù)量不限。

當(dāng)然也不是完美的,如果我需要同時打開一級A菜單下和一級B菜單下的頁面,組合模式就做不到。

總結(jié)

業(yè)務(wù)場景變化多端,設(shè)計方法是死的,我們需要活學(xué)活用,用最優(yōu)的設(shè)計方案去解決業(yè)務(wù)問題。

產(chǎn)品經(jīng)理和交互設(shè)計師其實就是一群“分析問題,解決問題”的人。

在分析問題時,除了找到問題所在,重中之重,先要對業(yè)務(wù)有足夠的理解;解決問題時,對特定的業(yè)務(wù)場景需要用到最貼切的設(shè)計方案。

 

作者:D.cheerful,武漢地區(qū)野路子產(chǎn)品經(jīng)理,3年網(wǎng)頁設(shè)計,5年+交互設(shè)計,3年+產(chǎn)品經(jīng)理;公眾號:D哥設(shè)計。

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

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 想問下大佬,使用頂部一級菜單,側(cè)邊二三級菜單+頁簽?zāi)J綍r,當(dāng)前在某個頁面,當(dāng)點擊頂部的另一個一級菜單時,此時主體區(qū)域的頁面應(yīng)該是怎樣的呢?
    1、保持之前的頁面內(nèi)容不變化,僅僅是一級菜單+側(cè)邊菜單的聯(lián)動變化,在選中新的頁面級菜單后,主體區(qū)域增加新的頁簽及對應(yīng)的頁面;
    2、點擊另一個頂部一級菜單后,直接出現(xiàn)側(cè)邊導(dǎo)航菜單下的第一個頁面,相當(dāng)于切換到另一個體系,有默認(rèn)頁面,且規(guī)則為第一個頁面;
    3、同2,但默認(rèn)頁面不采用第一個頁面,而是使用一個默認(rèn)頁面來代替;
    2、3相較于1的好處是體系切換的更明確,1的好處是不會有太大的割裂感,但導(dǎo)航選中的過程怪怪的,因為已經(jīng)選中了另一個一級菜單,且出現(xiàn)了對應(yīng)的側(cè)邊二三級菜單,但還沒選中頁面,主體區(qū)域還是之前的一級菜單的,很奇怪;
    求大佬指點~

    來自上海 回復(fù)
    1. 切換一級菜單后,全部要換,我以前的項目是打開一個默認(rèn)頁面,也可以理解為是二級首頁,當(dāng)然也可以不放內(nèi)容

      來自湖北 回復(fù)
    2. 請問你的意思是只要一級頁面切換了,就有一個新的頁面承載?如果不放內(nèi)容不就很奇怪嗎?暫時沒有看到這種交互形式,請問有相關(guān)競品可以看一下嗎?上面讀者的留言,我個人會選擇第2種方式,默認(rèn)規(guī)則為側(cè)面導(dǎo)航的第一個

      來自湖北 回復(fù)