B端系統(tǒng)的頁(yè)面跳轉(zhuǎn)設(shè)計(jì)分析

0 評(píng)論 7450 瀏覽 69 收藏 13 分鐘

在B端產(chǎn)品的頁(yè)面中,頁(yè)面是要沿面包屑下沉,還是像C端產(chǎn)品一樣無(wú)限返回,或者新開(kāi)網(wǎng)頁(yè)Tabs展示呢?本文作者對(duì)B端系統(tǒng)的頁(yè)面跳轉(zhuǎn)設(shè)計(jì)進(jìn)行了分析,一起來(lái)看一下吧。

在一個(gè)普通B端產(chǎn)品(以瀏覽器為載體)的頁(yè)面中,相信很多產(chǎn)品設(shè)計(jì)師都有類(lèi)似的經(jīng)歷,這個(gè)頁(yè)面是要一直沿面包屑下沉,或者像C端產(chǎn)品一樣無(wú)限返回,還是新開(kāi)網(wǎng)頁(yè)Tabs展示。在一次項(xiàng)目管理產(chǎn)品的設(shè)計(jì)中發(fā)現(xiàn)跳轉(zhuǎn)似乎有可循的邏輯。

信息結(jié)構(gòu)的設(shè)計(jì)過(guò)程中,每一個(gè)功能模塊是經(jīng)過(guò)深思熟慮做好定義的,如果想讓用戶(hù)的任務(wù)流程順暢、有所提效,那么信息架構(gòu)的導(dǎo)航必須要發(fā)揮作用,也就是說(shuō)用戶(hù)需要去記住或者被“教育”每個(gè)模塊的內(nèi)容有什么。

一、為什么要跳轉(zhuǎn)

1. 結(jié)構(gòu)扁平化,減輕心理負(fù)擔(dān)

一次測(cè)試平臺(tái)項(xiàng)目迭代中,發(fā)現(xiàn)舊有版本的面包屑層級(jí)特別深,最多可有5級(jí),而且是詳情頁(yè)面與新建頁(yè)面糅合在了一起,作為項(xiàng)目流程中的一個(gè)環(huán)節(jié),不應(yīng)該出現(xiàn)這種情況。于是調(diào)研了市面上能看到B端產(chǎn)品,騰訊云、阿里云和華為云等逐漸弱化了面包屑導(dǎo)航的使用,頁(yè)面層級(jí)一般不會(huì)超過(guò)3級(jí),華為云和騰訊云已經(jīng)取消了面包屑的使用,阿里云雖然保留了面包屑導(dǎo)航,但是二級(jí)頁(yè)面面包屑和返回同時(shí)存在,信息層級(jí)上也已經(jīng)弱化了面包屑對(duì)信息層級(jí)的延伸。

B端系統(tǒng)的頁(yè)面跳轉(zhuǎn)

B端系統(tǒng)的頁(yè)面跳轉(zhuǎn)

在一次任務(wù)流程中,如果信息層級(jí)很深,意味著用戶(hù)會(huì)深入到更多的頁(yè)面,進(jìn)而偏離主流程,同時(shí)需要接納的更多信息量,額外增加的信息負(fù)擔(dān)會(huì)給用戶(hù)的心理造成壓力,而且還會(huì)給產(chǎn)品扣上信息沉重的帽子。對(duì)于主流程,模塊提煉出的信息已經(jīng)能夠滿(mǎn)足對(duì)用戶(hù)對(duì)該模塊的需求,如果仍有想了解顆粒度更小信息的需求,那么可以通過(guò)友好鏈接跳轉(zhuǎn)到信息的源始位置查看,而不是在當(dāng)前頁(yè)面與主流程同級(jí)繼續(xù)下沉。

2. 增強(qiáng)記憶點(diǎn),提高效率

在產(chǎn)品設(shè)計(jì)之初,每個(gè)一級(jí)模塊就已經(jīng)做好了定位,比如騰訊云的私有網(wǎng)絡(luò),包含了子網(wǎng)和路由表,如果用戶(hù)在私用網(wǎng)絡(luò)的詳情頁(yè)能繼續(xù)打開(kāi)子網(wǎng)的詳情信息,那么私有網(wǎng)絡(luò)的定位就變成了私有網(wǎng)絡(luò)的信息+子網(wǎng)信息,進(jìn)而削弱子網(wǎng)模塊的功能性,對(duì)用戶(hù)而言,會(huì)有多處可以查看子網(wǎng)信息,這會(huì)模糊用戶(hù)對(duì)產(chǎn)品結(jié)構(gòu)的清晰認(rèn)知。根據(jù)席克定律,下次信息查看時(shí),面臨眾多的選擇,任務(wù)效率是變低了的。

另外,對(duì)于需要信息對(duì)比的場(chǎng)景,新開(kāi)頁(yè)面可以滿(mǎn)足多種同類(lèi)數(shù)據(jù)的對(duì)比需求。

B端系統(tǒng)的頁(yè)面跳轉(zhuǎn)

那么如果像騰訊云或者阿里云這樣,新開(kāi)tabs,直接跳到子網(wǎng)模塊的頁(yè)面,這會(huì)暗示用戶(hù),這個(gè)功能信息點(diǎn)不屬于私有網(wǎng)絡(luò),進(jìn)而會(huì)強(qiáng)化子網(wǎng)模塊的定位,也會(huì)凸顯私有網(wǎng)絡(luò)的主要流程。

3. 關(guān)于用戶(hù)習(xí)慣

1)對(duì)于國(guó)內(nèi)瀏覽器的用戶(hù)

國(guó)內(nèi)的用戶(hù)對(duì)百度等搜索瀏覽器并不陌生,并且長(zhǎng)時(shí)間的使用已經(jīng)對(duì)頁(yè)面的跳轉(zhuǎn)有了一定的預(yù)期和習(xí)慣。通過(guò)友好鏈接跳轉(zhuǎn)到相應(yīng)的頁(yè)面,點(diǎn)擊tabs回到搜索界面。同樣借助瀏覽器為載體的產(chǎn)品面對(duì)同一個(gè)用戶(hù)群體,其實(shí)不需要太多的再教育。

B端系統(tǒng)的頁(yè)面跳轉(zhuǎn)

另外,如果要處理或?yàn)g覽的信息量很少,彈窗或者抽屜就可以即時(shí)獲取,這時(shí)候就不需要跳轉(zhuǎn)查看。

2)公司內(nèi)部的用戶(hù)

當(dāng)然,具體的產(chǎn)品還需要考慮聚焦的用戶(hù)人群,調(diào)研觀察當(dāng)前產(chǎn)品的用戶(hù)習(xí)慣是怎么樣的。如果是與其他平臺(tái)或設(shè)計(jì)方向是有差異的,就要謹(jǐn)慎使用跳轉(zhuǎn)方式變更,總結(jié)當(dāng)前的用戶(hù)習(xí)慣,通過(guò)引導(dǎo)或者多次迭代,統(tǒng)一使用正確的跳轉(zhuǎn)方式。

二、應(yīng)用場(chǎng)景

1. 什么場(chǎng)景適合

1)平臺(tái)A跳轉(zhuǎn)到平臺(tái)B

平臺(tái)A中的一個(gè)流程中有平臺(tái)B的信息,如果想點(diǎn)擊查看具體信息,需要新開(kāi)Tabs網(wǎng)頁(yè)。

B端系統(tǒng)的頁(yè)面跳轉(zhuǎn)

B端系統(tǒng)的頁(yè)面跳轉(zhuǎn)

2)同一個(gè)平臺(tái)內(nèi),當(dāng)前模塊流程下查看/編輯其他模塊的內(nèi)容,需要跳轉(zhuǎn)新開(kāi)Tabs

B端系統(tǒng)的頁(yè)面跳轉(zhuǎn)

B端系統(tǒng)的頁(yè)面跳轉(zhuǎn)

跳轉(zhuǎn)新開(kāi)頁(yè)面,如果信息的承載方式本身就是頁(yè)面,那么跳轉(zhuǎn)之后查看直接展示原來(lái)的頁(yè)面就可以。如果是彈窗或者抽屜,有三種展示方式:

①當(dāng)前頁(yè)面打開(kāi)彈窗或者抽屜

②新Tabs回到原來(lái)的界面,打開(kāi)彈窗或抽屜

B端系統(tǒng)的頁(yè)面跳轉(zhuǎn)

在coding的頁(yè)面中,如果在一個(gè)抽屜中打開(kāi)另外一個(gè)子工作項(xiàng),回到原來(lái)頁(yè)面后,詳情信息還是以抽屜展示。

③新Tabs打開(kāi)具體信息,不過(guò)原來(lái)的彈窗或者抽屜信息被鋪在了頁(yè)面中

B端系統(tǒng)的頁(yè)面跳轉(zhuǎn)

當(dāng)前抽屜中打開(kāi)另外一個(gè)模塊的抽屜信息時(shí),新開(kāi)頁(yè)面的形式變成了頁(yè)面,沒(méi)有了返回等信息,頁(yè)面中的信息平鋪,引導(dǎo)用戶(hù)看完信息之后,關(guān)閉當(dāng)前頁(yè)面。另外,這種展示方式還與權(quán)限有關(guān)系,方便信息在不同角色之間流轉(zhuǎn)。

2. 特殊場(chǎng)景

當(dāng)然,上述的結(jié)論并不是市面所有產(chǎn)品的一致方式,通過(guò)體驗(yàn)還發(fā)現(xiàn)了以下不同的方式,以當(dāng)前頁(yè)面所處的場(chǎng)景為維度解釋。

1)信息為當(dāng)前模塊流程的一部分

在產(chǎn)品層面該功能信息是屬于當(dāng)面模塊定位的,不適合再打開(kāi)Tabs。

2)工作臺(tái)/概覽類(lèi)的信息

這關(guān)于工作臺(tái)和概覽類(lèi)功能的定位問(wèn)題,大部分的產(chǎn)品都將工作臺(tái)定位成任務(wù)狀態(tài)的中轉(zhuǎn)站,用來(lái)做跳轉(zhuǎn)分發(fā)使用,因此從工作臺(tái)點(diǎn)擊跳轉(zhuǎn)到具體的任務(wù)模塊,可以直接在當(dāng)前頁(yè)面跳到具體的任務(wù)頁(yè)面。不過(guò)對(duì)于一些大的平臺(tái),還是建議新開(kāi)頁(yè)面,這樣方便二次瀏覽待辦信息。

3)其他

①當(dāng)前在一級(jí)頁(yè)面,如果跳轉(zhuǎn)到其他模塊可以選在當(dāng)前頁(yè)面直接刷新,不需要新開(kāi)Tabs

如果產(chǎn)品的基本定位是其他模塊的內(nèi)容都需要新開(kāi)Tabs網(wǎng)頁(yè),最好保持統(tǒng)一。

②動(dòng)態(tài)增減頁(yè)簽導(dǎo)航

一些產(chǎn)品的結(jié)構(gòu)設(shè)計(jì)是導(dǎo)航欄常駐,所有的頁(yè)面都是以動(dòng)態(tài)增減頁(yè)簽的形式展示,那么只要是本平臺(tái)內(nèi)的信息都是不需要新開(kāi)Tabs網(wǎng)頁(yè)的。不過(guò)使用這種方式設(shè)計(jì)者需要定義的是動(dòng)態(tài)增減頁(yè)簽的使用邏輯。

B端系統(tǒng)的頁(yè)面跳轉(zhuǎn)

③導(dǎo)航模塊常駐

在一些產(chǎn)品中,導(dǎo)航模塊是常駐的,在一個(gè)模塊下的任務(wù)流程中,通過(guò)點(diǎn)擊友好鏈接跳轉(zhuǎn)到目標(biāo)頁(yè)面,導(dǎo)航隨之變化,對(duì)用戶(hù)也會(huì)存在一定的暗示:模塊與模塊之間是有不同功能定位的。但是用戶(hù)當(dāng)前用戶(hù)的任務(wù)流程并沒(méi)有結(jié)束,點(diǎn)擊了友好鏈接,相當(dāng)于丟失了主流程,要是返回還需要不斷的點(diǎn)擊,如果是個(gè)新建流程會(huì)更糟糕,所以這種方式不是很友好,要謹(jǐn)慎使用。

B端系統(tǒng)的頁(yè)面跳轉(zhuǎn)

像阿里云這樣,左側(cè)導(dǎo)航欄收起的的時(shí)候,用戶(hù)從一個(gè)頁(yè)面到另外一個(gè)頁(yè)面,面包屑從1-2-3,變成了4-5,用戶(hù)對(duì)當(dāng)前頁(yè)面的位置是無(wú)感的。從而會(huì)模糊任務(wù)路徑方向,沒(méi)辦法準(zhǔn)確定位當(dāng)前位置。所以,新開(kāi)tabs網(wǎng)頁(yè)是很有必要的。

B端系統(tǒng)的頁(yè)面跳轉(zhuǎn)

B端系統(tǒng)的頁(yè)面跳轉(zhuǎn)

當(dāng)然,層級(jí)越深用戶(hù)能觸及的頻率就會(huì)越小,于是團(tuán)隊(duì)的一部分成員就會(huì)說(shuō)既然頻率小那么對(duì)產(chǎn)品的影響很小,可以忽略的。但是,場(chǎng)景頻率小是對(duì)所有用戶(hù)而言,不是說(shuō)用戶(hù)群少。對(duì)一個(gè)產(chǎn)品而言,讓用戶(hù)滿(mǎn)意很難,但是一個(gè)看似不起眼的跳轉(zhuǎn),只要讓用戶(hù)用過(guò)一次覺(jué)得難用、頁(yè)面層級(jí)深,產(chǎn)品的整體印象就會(huì)大打折扣,因?yàn)橛脩?hù)不會(huì)在意這個(gè)問(wèn)題是產(chǎn)品定位的主流程還是低頻場(chǎng)景。

往往用戶(hù)能記住的不是產(chǎn)品帶給業(yè)務(wù)的流暢感和增長(zhǎng),因?yàn)樗麄冋J(rèn)為這是產(chǎn)品應(yīng)該做到的,但是一次不好的體驗(yàn)卻會(huì)歷久彌新。

頁(yè)面跳轉(zhuǎn)的總結(jié)有一定的局限性,特殊業(yè)務(wù)場(chǎng)景還需要做特殊處理。

本文由 @聿來(lái)體驗(yàn)筆記 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

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

該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒(méi)評(píng)論,等你發(fā)揮!