如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

本篇文章分別從頁面打開方式的類型、當前頁打開&新開頁面、彈出框三方面對頁面鏈接打開方式進行了探討，給大家提出一些意見以供參考。

頁面打開方式作為鏈接產品路徑的基礎，在設計的過程中，或多或少都會遇到選擇的困擾，尤其是產品功能復雜，層級較多時，如何讓用戶按照自己的意愿清晰的瀏覽信息，保持操作連貫性，是值得體驗設計仔細思考與分析的。

近期在所負責的設計項目中，團隊對鏈接操作的打開方式產生了分歧，借此機會整理了一些案例與資料，就這個問題進行分析探討，也給遇到同樣問題的同行一些參考意見。

一、頁面打開方式的類型

網頁中可操作的鏈接，主要有按鈕、icon 以及文字鏈接，設計中常用的打開方式則主要有以下三種：

1. 當前頁打開

點擊操作鏈接后，在當前的瀏覽器頁面中進行內容顯示與操作。

2. 新開頁面

點擊操作鏈接后，在瀏覽器中新開一個獨立的標簽頁面，進行內容顯示與操作。

3. 彈出框

點擊操作鏈接后，在當前的瀏覽器頁面中，彈出一個小尺寸的對話框，進行內容顯示與操作。

二、當前頁打開 & 新開頁面

首先來說說最具爭議的新開頁面&當前頁打開。在 HTML語言中，target目標有「target=_blank」和「target=_self」兩種屬性，分別代表「新窗口打開」和「當前窗口打開」，下圖是這兩個參數的屬性描述。

從這兩個參數的屬性上來看，「當前窗口打開」是系統默認的處理方式。這個打開方式在國外的網站中實現方式比較統一，用戶也形成了一致的習慣，但國內的形式則不盡相同，以至于一直頗具爭議，不同類型網站之間、同一網站不同場景之間也沒有一個明確的規則標準可供大家學習和參照。

針對這個問題的討論，可以聽到兩種不同的用戶聲音，并且都站在各自的角度闡述其道理。

舉個例子，我們以同類型網站（淘寶和亞馬遜）的打開處理方式進行對比，來看一下用戶習慣、功能場景對鏈接打開方式選擇的影響。

首先，我們確定一致的功能場景：用戶從首頁中根據各種篩選條件，查找到心儀的商品。來看一下兩個網站的處理方式：

可以看出基本是兩個極端，差異非常明顯，再來看個有意思的現象，亞馬遜中國的商品搜索方式竟然又和淘寶一致了，難道鏈接打開方式的差異竟是中外用戶習慣的差異？

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

• 早期的 W3C標準不支持 target=”_blank”（HTML語言中，在新窗口中打開鏈接）的屬性，國外互聯網普及也比國內早，于是用戶慢慢養成了習慣。
• 默認當前頁面打開讓國外用戶覺得更有「禮貌」。如果用戶想新開頁面，可以鼠標中鍵、按住ctrl點擊鏈接或者右鍵新窗口打開，此時用戶更有選擇權，可以自己決定打開方式；如果默認新開頁面，則讓用戶失去了選擇權。
• 早期國內互聯網發展較為浮躁，網站想通過新標簽頁打開方式，提高PV。
• 國內網絡普及晚，部分用戶尤其很多老年人不習慣甚至或許不知道，頁中有個后退前進按鈕、面包屑可用，新開頁面便于他們的操作。

那么，淘寶中所有的頁面打開方式都是新開嗎？不是。像「我的收藏」、「已買到的商品」、「購物車」等功能頁面就是當前頁打開。

同一個產品內部，如此區別設計的原因我認為有：

• 用戶的目的較為明確，查找對象確定。（用戶想要查看的對象是確定的，如購物車中的產品，用戶有明確的目標，找到鏈接打開頁面即可，不像搜索查找商品，需要一步步縮小范圍甚至比對查看）
• 鏈接入口常駐在網站的信息欄，用戶可以隨時切換，操作方便，且不存在重新輸入的成本。

關于這兩種打開方式，到底哪種操作更順暢，確實難分高下，就跟「確定和取消哪個在左，哪個在右」是一種性質的問題，沒有好壞之分，關鍵是要看在哪種場景下使用更合適。

新頁面打開適用的場景：

• 頁面內容沒有關聯性，且從邏輯上沒有從屬關系，相對獨立。如：產品中的外鏈。
• 存在多頁面「比較」的操作，需要經常切換。如：淘寶商品詳情。
• 需要保留住前一頁的操作不丟失。如：知乎上過濾出來的結果列表。
• 功能分支存在穿插，當路徑發生交叉時，最好新開頁面。如：產品內部的跳轉鏈接，導致信息關聯的層級發生改變。
• 具有輔助功能的操作。如：使用文檔（PDF、圖片等）需要來回參照。

當前頁打開適用的場景：

• 流程性的功能頁面，前后操作存在關聯和影響。如：下單支付、按步驟新增。
• 同一層級內容間的操作。如：tab欄的切換。
• 同一路徑中的操作，用戶當前的操作會對主頁的內容產生影響。如：編輯一個配置，用戶操作完，會回到當前頁查看結果。
• 用戶具有明確目的性的操作，當前頁有利于鎖定用戶注意力。如：淘寶中「我的收藏」。

以上是結合功能場景進行的選擇側重，如果就「用戶體驗」一定要分出個高下，我個人還是比較支持默認「當前頁打開」，從體驗角度分析，「當前頁打開」略勝一籌的主要原因有以下兩個：

• 尊重用戶的決定。當前頁打開，將更多選擇機會留給用戶（鼠標中鍵、按住ctrl點擊鏈接或者可以右鍵新窗口打開），一個具有良好用戶體驗的產品，在用戶做操作的時候，總是能讓他們按自己的意志做出決定。網站對每個鏈接強制打開新頁面則剝奪了用戶的選擇權，因為不同的人有不同的瀏覽習慣和使用需求。
• 體驗一致。保持一致體驗的設計才能讓用戶產生信任感與安全感。當用戶在操作界面元素的時候，可以順暢的知道、理解，并且能預料到將會發生什么，不會被分神，也不會被打斷。任何違反這個原則的設計都將會演變成一種「以設計方意志為導向」的設計，而不是「以用戶為中心」的設計。

小結

當我們不知道兩種方式如何選擇時，或許「不強制用戶」才是最好的體驗。因為我們面臨的用戶多樣，電腦操作熟悉程度多樣，因此不同用戶對于打開方式的習慣也具有多樣性，這個是設計者無法揣測和調查清楚的。

在「兩害取其輕」的情況下，在當前窗口打開鏈接，不失為一個選擇，尊重用戶自己的決定，讓用戶對交互界面自主可控。

三、彈出框

彈出框（彈層）又叫模態對話框，是指在用戶想要對當前對話框以外的應用程序或內容進行操作時的提示方式。它一般覆蓋在整體頁面之上，避免了頁面跳轉。

彈出框通常是為了顯示一個單獨的內容，在不離開整體頁面的情況下有一些互動，提供信息和交互。

如下圖知乎中的「寫想法」，用戶可以快速的在彈出框中記錄個人想法，記錄發布后，很順暢的回到之前的路徑上繼續操作，便捷，操作思路清晰。

△ https://www.zhihu.com/

現在很多產品中的新增、創建，也都會采用彈出框的交互方式，當然前提是在彈出框中編輯的內容不是很多，此時彈出框不僅承載了信息編輯的功能，還可以作為上下文的跳轉，幫助用戶銜接路徑。

如 iconfont 中的新建項目，用戶新增后，頁面會直接跳轉到新的項目空間。

△ http://www.iconfont.cn

彈出框適用的場景：

• 內容簡單，沒有復雜的操作，且具有臨時性。如：新增一個收貨地址，進行簡要的輸入編輯。
• 更為詳細的輔助說明，是對當前內容的快速擴展。如：縮略圖，點擊放大查看。

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

總結

本文結合這三種鏈接打開方式的頁面交互關系，進行適用場景舉例，并總結每種方式的優缺點，方便在設計中更好的根據不同的場景選擇合適的頁面打開方式。

當然，以上總結也是基于我個人的理解與經驗，沒有統一的用法和標準，在具體設計實踐中，仍要靠設計者的直覺和經驗來進行綜合考量與判斷。

作為體驗設計師，如何規劃用戶瀏覽路徑，是個需要嚴肅對待的命題。沒有絕對的好與壞，但一定要結合產品類型、場景、目標用戶等進行具體問題具體分析。

藍藍設計( www.shtzxx.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務