本篇文章分別從頁(yè)面打開(kāi)方式的類型、當(dāng)前頁(yè)打開(kāi)&新開(kāi)頁(yè)面、彈出框三方面對(duì)頁(yè)面鏈接打開(kāi)方式進(jìn)行了探討，給大家提出一些意見(jiàn)以供參考。

頁(yè)面打開(kāi)方式作為鏈接產(chǎn)品路徑的基礎(chǔ)，在設(shè)計(jì)的過(guò)程中，或多或少都會(huì)遇到選擇的困擾，尤其是產(chǎn)品功能復(fù)雜，層級(jí)較多時(shí)，如何讓用戶按照自己的意愿清晰的瀏覽信息，保持操作連貫性，是值得體驗(yàn)設(shè)計(jì)仔細(xì)思考與分析的。

近期在所負(fù)責(zé)的設(shè)計(jì)項(xiàng)目中，團(tuán)隊(duì)對(duì)鏈接操作的打開(kāi)方式產(chǎn)生了分歧，借此機(jī)會(huì)整理了一些案例與資料，就這個(gè)問(wèn)題進(jìn)行分析探討，也給遇到同樣問(wèn)題的同行一些參考意見(jiàn)。

一、頁(yè)面打開(kāi)方式的類型

網(wǎng)頁(yè)中可操作的鏈接，主要有按鈕、icon以及文字鏈接，設(shè)計(jì)中常用的打開(kāi)方式則主要有以下三種：

1. 當(dāng)前頁(yè)打開(kāi)。點(diǎn)擊操作鏈接后，在當(dāng)前的瀏覽器頁(yè)面中進(jìn)行內(nèi)容顯示與操作。

2. 新開(kāi)頁(yè)面。點(diǎn)擊操作鏈接后，在瀏覽器中新開(kāi)一個(gè)獨(dú)立的標(biāo)簽頁(yè)面，進(jìn)行內(nèi)容顯示與操作。

3. 彈出框。點(diǎn)擊操作鏈接后，在當(dāng)前的瀏覽器頁(yè)面中，彈出一個(gè)小尺寸的對(duì)話框，進(jìn)行內(nèi)容顯示與操作。

二、當(dāng)前頁(yè)打開(kāi)&新開(kāi)頁(yè)面

首先來(lái)說(shuō)說(shuō)最具爭(zhēng)議的新開(kāi)頁(yè)面&當(dāng)前頁(yè)打開(kāi)。在HTML語(yǔ)言中，target目標(biāo)有“target=_blank”和“target=_self”兩種屬性，分別代表“新窗口打開(kāi)”和“當(dāng)前窗口打開(kāi)”，下圖是這兩個(gè)參數(shù)的屬性描述。

從這兩個(gè)參數(shù)的屬性上來(lái)看，“當(dāng)前窗口打開(kāi)”是系統(tǒng)默認(rèn)的處理方式。這個(gè)打開(kāi)方式在國(guó)外的網(wǎng)站中實(shí)現(xiàn)方式比較統(tǒng)一，用戶也形成了一致的習(xí)慣，但國(guó)內(nèi)的形式則不盡相同，以至于一直頗具爭(zhēng)議，不同類型網(wǎng)站之間、同一網(wǎng)站不同場(chǎng)景之間也沒(méi)有一個(gè)明確的規(guī)則標(biāo)準(zhǔn)可供大家學(xué)習(xí)和參照。

針對(duì)這個(gè)問(wèn)題的討論，可以聽(tīng)到兩種不同的用戶聲音，并且都站在各自的角度闡述其道理。

舉個(gè)例子，我們以同類型網(wǎng)站（淘寶和亞馬遜）的打開(kāi)處理方式進(jìn)行對(duì)比，來(lái)看一下用戶習(xí)慣、功能場(chǎng)景對(duì)鏈接打開(kāi)方式選擇的影響。

首先，我們確定一致的功能場(chǎng)景：用戶從首頁(yè)中根據(jù)各種篩選條件，查找到心儀的商品。來(lái)看一下兩個(gè)網(wǎng)站的處理方式：

可以看出基本是兩個(gè)極端，差異非常明顯，再來(lái)看個(gè)有意思的現(xiàn)象，亞馬遜中國(guó)的商品搜索方式竟然又和淘寶一致了，難道鏈接打開(kāi)方式的差異竟是中外用戶習(xí)慣的差異？

這確實(shí)占了很大一部分原因，那么造成這種差異的原因主要有：

1. 早期的W3C標(biāo)準(zhǔn)不支持target=”_blank”（HTML語(yǔ)言中，在新窗口中打開(kāi)鏈接）的屬性，國(guó)外互聯(lián)網(wǎng)普及也比國(guó)內(nèi)早，于是用戶慢慢養(yǎng)成了習(xí)慣。
2. 默認(rèn)當(dāng)前頁(yè)面打開(kāi)讓國(guó)外用戶覺(jué)得更有“禮貌”。如果用戶想新開(kāi)頁(yè)面，可以鼠標(biāo)中鍵、按住ctrl點(diǎn)擊鏈接或者右鍵新窗口打開(kāi)，此時(shí)用戶更有選擇權(quán)，可以自己決定打開(kāi)方式；如果默認(rèn)新開(kāi)頁(yè)面，則讓用戶失去了選擇權(quán)。
3. 早期國(guó)內(nèi)互聯(lián)網(wǎng)發(fā)展較為浮躁，網(wǎng)站想通過(guò)新標(biāo)簽頁(yè)打開(kāi)方式，提高PV。
4. 國(guó)內(nèi)網(wǎng)絡(luò)普及晚，部分用戶尤其很多老年人不習(xí)慣甚至或許不知道，頁(yè)中有個(gè)后退前進(jìn)按鈕、面包屑可用，新開(kāi)頁(yè)面便于他們的操作。【1】

那么，淘寶中所有的頁(yè)面打開(kāi)方式都是新開(kāi)嗎？不是！ 像“我的收藏”、“已買到的商品”、“購(gòu)物車”等功能頁(yè)面就是當(dāng)前頁(yè)打開(kāi)。

同一個(gè)產(chǎn)品內(nèi)部，如此區(qū)別設(shè)計(jì)的原因我認(rèn)為有：

1. 用戶的目的較為明確，查找對(duì)象確定（用戶想要查看的對(duì)象是確定的，如購(gòu)物車中的產(chǎn)品，用戶有明確的目標(biāo)，找到鏈接打開(kāi)頁(yè)面即可，不像搜索查找商品，需要一步步縮小范圍甚至比對(duì)查看）
2. 鏈接入口常駐在網(wǎng)站的信息欄，用戶可以隨時(shí)切換，操作方便，且不存在重新輸入的成本。

關(guān)于這兩種打開(kāi)方式，到底哪種操作更順暢，確實(shí)難分高下，就跟“確定和取消哪個(gè)在左，哪個(gè)在右”是一種性質(zhì)的問(wèn)題，沒(méi)有好壞之分，關(guān)鍵是要看在哪種場(chǎng)景下使用更合適。

新頁(yè)面打開(kāi)適用的場(chǎng)景：

1. 頁(yè)面內(nèi)容沒(méi)有關(guān)聯(lián)性，且從邏輯上沒(méi)有從屬關(guān)系，相對(duì)獨(dú)立。 | 如：產(chǎn)品中的外鏈
2. 存在多頁(yè)面“比較”的操作，需要經(jīng)常切換。 |如：淘寶商品詳情
3. 需要保留住前一頁(yè)的操作不丟失。 |如：知乎上過(guò)濾出來(lái)的結(jié)果列表
4. 功能分支存在穿插，當(dāng)路徑發(fā)生交叉時(shí)，最好新開(kāi)頁(yè)面。 |如：產(chǎn)品內(nèi)部的跳轉(zhuǎn)鏈接，導(dǎo)致信息關(guān)聯(lián)的層級(jí)發(fā)生改變
5. 具有輔助功能的操作。|如：使用文檔（PDF、圖片等）需要來(lái)回參照

當(dāng)前頁(yè)打開(kāi)適用的場(chǎng)景：

1. 流程性的功能頁(yè)面，前后操作存在關(guān)聯(lián)和影響。 |如：下單支付、按步驟新增
2. 同一層級(jí)內(nèi)容間的操作。| 如：tab欄的切換
3. 同一路徑中的操作，用戶當(dāng)前的操作會(huì)對(duì)主頁(yè)的內(nèi)容產(chǎn)生影響。 |如：編輯一個(gè)配置，用戶操作完，會(huì)回到當(dāng)前頁(yè)查看最新結(jié)果
4. 用戶具有明確目的性的操作，當(dāng)前頁(yè)有利于鎖定用戶注意力。| 如：淘寶中“我的收藏”

以上是結(jié)合功能場(chǎng)景進(jìn)行的選擇側(cè)重，如果就“用戶體驗(yàn)”一定要分出個(gè)高下，我個(gè)人還是比較支持默認(rèn)“當(dāng)前頁(yè)打開(kāi)”，從體驗(yàn)角度分析，“當(dāng)前頁(yè)打開(kāi)”略勝一籌的主要原因有以下兩個(gè)：

1. 尊重用戶的決定。當(dāng)前頁(yè)打開(kāi)，將更多選擇機(jī)會(huì)留給用戶（鼠標(biāo)中鍵、按住ctrl點(diǎn)擊鏈接或者可以右鍵新窗口打開(kāi)），一個(gè)具有良好用戶體驗(yàn)的產(chǎn)品，在用戶做操作的時(shí)候，總是能讓他們按自己的意志做出決定【2】。網(wǎng)站對(duì)每個(gè)鏈接強(qiáng)制打開(kāi)新頁(yè)面則剝奪了用戶的選擇權(quán)，因?yàn)椴煌娜擞胁煌臑g覽習(xí)慣和使用需求。
2. 體驗(yàn)一致。保持一致體驗(yàn)的設(shè)計(jì)才能讓用戶產(chǎn)生信任感與安全感。當(dāng)用戶在操作界面元素的時(shí)候，可以順暢的知道、理解、并且能預(yù)料到什么將會(huì)發(fā)生，不會(huì)被分神，也不會(huì)被打斷。任何違反這個(gè)原則的設(shè)計(jì)都將會(huì)演變成一種“以設(shè)計(jì)方意志為導(dǎo)向”的設(shè)計(jì)，而不是“以用戶為中心”的設(shè)計(jì)。

小結(jié)

當(dāng)我們不知道兩種方式如何選擇時(shí)，或許“不強(qiáng)制用戶”才是最好的體驗(yàn)！因?yàn)槲覀兠媾R的用戶多樣，電腦操作熟悉程度多樣，因此不同用戶對(duì)于打開(kāi)方式的習(xí)慣也具有多樣性，這個(gè)是設(shè)計(jì)者無(wú)法揣測(cè)和調(diào)查清楚的。

在“兩害取其輕”的情況下，在當(dāng)前窗口打開(kāi)鏈接，不失為一個(gè)選擇，尊重用戶自己的決定，讓用戶對(duì)交互界面自主可控。

三、彈出框

彈出框（彈層）又叫模態(tài)對(duì)話框，是指在用戶想要對(duì)當(dāng)前對(duì)話框以外的應(yīng)用程序或內(nèi)容進(jìn)行操作時(shí)的提示方式。它一般覆蓋在整體頁(yè)面之上，避免了頁(yè)面跳轉(zhuǎn)。

彈出框通常是為了現(xiàn)實(shí)一個(gè)單獨(dú)的內(nèi)容，在不離開(kāi)整體頁(yè)面的情況下有一些互動(dòng)，提供信息和交互。

如下圖知乎中的“寫(xiě)想法”，用戶可以快速的在彈出框中記錄個(gè)人想法，記錄發(fā)布后，很順暢的回到之前的路徑上繼續(xù)操作，便捷高效，操作思路清晰。

https://www.zhihu.com/

現(xiàn)在很多產(chǎn)品中的新增、創(chuàng)建，也都會(huì)采用彈出框的交互方式，當(dāng)然前提是在彈出框中編輯的內(nèi)容不是很多，此時(shí)彈出框不僅承載了信息編輯的功能，還可以作為上下文的跳轉(zhuǎn)，幫助用戶銜接路徑。

如 iconfont中的新建項(xiàng)目，用戶新增后，頁(yè)面會(huì)直接跳轉(zhuǎn)到新的項(xiàng)目空間。

http://www.iconfont.cn

彈出框適用的場(chǎng)景：

1. 內(nèi)容簡(jiǎn)單，沒(méi)有復(fù)雜的操作，且具有臨時(shí)性。 | 如：新增一個(gè)收貨地址，進(jìn)行簡(jiǎn)要的輸入編輯
2. 更為詳細(xì)的輔助說(shuō)明，是對(duì)當(dāng)前內(nèi)容的快速擴(kuò)展。 | 如：縮略圖，點(diǎn)擊放大查看

因此，彈出框可以較好的實(shí)現(xiàn)上下內(nèi)容層疊的感知，不打擾用戶的主路徑，同時(shí)作為頁(yè)面承載元素和用戶操作的補(bǔ)充，起到承前啟后的作用。

總結(jié)

本文結(jié)合這三種鏈接打開(kāi)方式的頁(yè)面交互關(guān)系，進(jìn)行適用場(chǎng)景舉例，并總結(jié)每種方式的優(yōu)缺點(diǎn)，方便在設(shè)計(jì)中更好的根據(jù)不同的場(chǎng)景選擇合適的頁(yè)面打開(kāi)方式。

當(dāng)然，以上總結(jié)也是基于我個(gè)人的理解與經(jīng)驗(yàn)，沒(méi)有統(tǒng)一的用法和標(biāo)準(zhǔn)，在具體設(shè)計(jì)實(shí)踐中，仍要靠設(shè)計(jì)者的直覺(jué)和經(jīng)驗(yàn)來(lái)進(jìn)行綜合考量與判斷。

作為體驗(yàn)設(shè)計(jì)師，如何規(guī)劃用戶瀏覽路徑，是個(gè)需要嚴(yán)肅對(duì)待的命題！沒(méi)有絕對(duì)的好與壞，但一定要結(jié)合產(chǎn)品類型、場(chǎng)景、目標(biāo)用戶等進(jìn)行具體問(wèn)題具體分析。

參考文獻(xiàn)

【1】鏈接打開(kāi)方式間的博弈：新標(biāo)簽頁(yè)vs當(dāng)前標(biāo)簽頁(yè)http://www.codemsi.com/pd/438404.html

【2】《鏈接應(yīng)該在新窗口打開(kāi)嗎？》http://subbloggoodboy5264m98.lofter.com/post/1fd3407b_12a690458

【3】知乎討論https://www.zhihu.com/question/22431678

【4】3種常見(jiàn)的頁(yè)面打開(kāi)方式http://www.codemsi.com/pd/126021.html

【5】新窗口打開(kāi) VS 當(dāng)前窗口打開(kāi) — 淺談頁(yè)面鏈接打開(kāi)方式https://www.douban.com/note/163436628/

【6】知乎討論 https://www.zhihu.com/question/19563426/answer/12234132

作者：阿里TXD，TXD技術(shù)體驗(yàn)設(shè)計(jì)（ID：TXD-UED）

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

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