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

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

更多B端干貨：

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

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

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

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

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

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

另外，對于需要信息對比的場景，新開頁面可以滿足多種同類數(shù)據(jù)的對比需求。

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

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

① 對于國內(nèi)瀏覽器的用戶

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

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

② 公司內(nèi)部的用戶

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

二、應(yīng)用場景

什么場景適合

1. 平臺 A 跳轉(zhuǎn)到平臺 B

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

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

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

1. 當(dāng)前頁面打開彈窗或者抽屜
2. 新 tabs 回到原來的界面，打開彈窗或抽屜

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

3. 新 tabs 打開具體信息，不過原來的彈窗或者抽屜信息被鋪在了頁面中。

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

三、特殊場景

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

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

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

2. 工作臺/概覽類的信息

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

3. 其他

① 當(dāng)前在一級頁面，如果跳轉(zhuǎn)到其他模塊可以選在當(dāng)前頁面直接刷新，不需要新開 Tabs。如果產(chǎn)品的基本定位是其他模塊的內(nèi)容都需要新開 Tabs 網(wǎng)頁，最好保持統(tǒng)一。

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

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

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

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

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

當(dāng)然，層級越深用戶能觸及的頻率就會越小，于是團(tuán)隊(duì)的一部分成員就會說既然頻率小那么對產(chǎn)品的影響很小，可以忽略的。但是，場景頻率小是對所有用戶而言，不是說用戶群少。對一個(gè)產(chǎn)品而言，讓用戶滿意很難，但是一個(gè)看似不起眼的跳轉(zhuǎn)，只要讓用戶用過一次覺得難用、頁面層級深，產(chǎn)品的整體印象就會大打折扣，因?yàn)橛脩舨粫谝膺@個(gè)問題是產(chǎn)品定位的主流程還是低頻場景。往往用戶能記住的不是產(chǎn)品帶給業(yè)務(wù)的流暢感和增長，因?yàn)樗麄冋J(rèn)為這是產(chǎn)品應(yīng)該做到的，但是一次不好的體驗(yàn)卻會歷久彌新。

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