互動細節：頁面連結開啟方式探討
頁面開啟方式是連結產品路徑的基礎，如何讓使用者按照自己的意願清晰的瀏覽資訊，保持操作連貫性，是值得體驗設計仔細思考與分析的。
頁面開啟方式作為連結產品路徑的基礎，在設計的過程中，或多或少都會遇到選擇的困擾，尤其是產品功能複雜，層級較多時，如何讓使用者按照自己的意願清晰的瀏覽資訊，保持操作連貫性，是值得體驗設計仔細思考與分析的。
近期在所負責的設計專案中，團隊對連結操作的開啟方式產生了分歧，藉此機會整理了一些案例與資料，就這個問題進行分析探討，也給遇到同樣問題的同行一些參考意見。
一、頁面開啟方式的型別
網頁中可操作的連結，主要有按鈕、icon以及文字連結，設計中常用的開啟方式則主要有以下三種：
1、當前頁開啟
點選操作連結後，在當前的瀏覽器頁面中進行內容顯示與操作。
2、新開頁面
點選操作連結後，在瀏覽器中新開一個獨立的標籤頁面，進行內容顯示與操作。
3、彈出框
點選操作連結後，在當前的瀏覽器頁面中，彈出一個小尺寸的對話方塊，進行內容顯示與操作。
二、當前頁開啟&新開頁面
首先來說說最具爭議的新開頁面&當前頁開啟。在HTML語言中，target目標有“target=_blank”和“target=_self”兩種屬性，分別代表“新視窗開啟”和“當前視窗開啟”，下圖是這兩個引數的屬性描述。
從這兩個引數的屬性上來看，“當前視窗開啟”是系統預設的處理方式。這個開啟方式在國外的網站中實現方式比較統一，使用者也形成了一致的習慣，但國內的形式則不盡相同，以至於一直頗具爭議，不同型別網站之間、同一網站不同場景之間也沒有一個明確的規則標準可供大家學習和參照。針對這個問題的討論，可以聽到兩種不同的使用者聲音，並且都站在各自的角度闡述其道理。
不支援新開頁面的原因有：
1、缺少連貫感受，在不斷地新開頁面中，較容易迷失，體驗不佳；
2、頁面太多易雜亂，運用麵包屑可使使用者路徑清晰。
支援新開頁面的原因有：
1、新開標籤頁看著方便，如果想看多個資訊，可以先把連結都開啟，讓其餘頁面處於載入中，節省時間；
2、使用者在頁面中的“現場”可以很好地保留，如輸入的過濾條件等，避免重複輸入。
舉個例子，我們以同類型網站（淘寶和亞馬遜）的開啟處理方式進行對比，來看一下使用者習慣、功能場景對連結開啟方式選擇的影響。首先，我們確定一致的功能場景：使用者從首頁中根據各種篩選條件，查詢到心儀的商品。來看一下兩個網站的處理方式：
可以看出基本是兩個極端，差異非常明顯，再來看個有意思的現象，亞馬遜中國的商品搜尋方式竟然又和淘寶一致了，難道連結開啟方式的差異竟是中外使用者習慣的差異？
這確實佔了很大一部分原因，那麼造成這種差異的原因主要有：
1、早期的W3C標準不支援target=”_blank”（HTML語言中，在新視窗中開啟連結）的屬性，國外網際網路普及也比國內早，於是使用者慢慢養成了習慣。
2、預設當前頁面開啟讓國外使用者覺得更有“禮貌”。如果使用者想新開頁面，可以滑鼠中鍵、按住ctrl點選連結或者右鍵新視窗開啟，此時使用者更有選擇權，可以自己決定開啟方式；如果預設新開頁面，則讓使用者失去了選擇權。
3、早期國內網際網路發展較為浮躁，網站想通過新標籤頁開啟方式，提高PV。
4、國內網路普及晚，部分使用者，尤其很多老年人並不習慣甚至或許不知道網頁中有個後退前進按鈕、麵包屑可用，新開頁面便於他們的操作。【1】
那麼，淘寶中所有的頁面開啟方式都是新開嗎？不是！ 像“我的收藏”、“已買到的商品”、“購物車”等功能頁面就是當前頁開啟。
同一個產品內部，如此區別設計的原因我認為有：
1、使用者的目的較為明確，查詢物件確定（使用者想要檢視的物件是確定的，如購物車中的產品，使用者有明確的目標，找到連結開啟頁面即可，不像搜尋查詢商品，需要一步步縮小範圍甚至比對檢視）。
2、連結入口常駐在網站的資訊欄，使用者可以隨時切換，操作方便，且不存在重新輸入的成本。
關於這兩種開啟方式，到底哪種操作更順暢，確實難分高下，就跟“確定和取消哪個在左，哪個在右”是一種性質的問題，沒有好壞之分，關鍵是要看在哪種場景下使用更合適。
新頁面開啟適用的場景：
1、頁面內容沒有關聯性，且從邏輯上沒有從屬關係，相對獨立。 | 如：產品中的外鏈
2、存在多頁面“比較”的操作，需要經常切換。 | 如：淘寶商品詳情
3、需要保留住前一頁的操作不丟失。 | 如：知乎上過濾出來的結果列表
4、功能分支存在穿插，當路徑發生交叉時，最好新開頁面。 | 如：產品內部的跳轉連結，導致資訊關聯的層級發生改變
5、具有輔助功能的操作。| 如：使用文件（PDF、圖片等）需要來回參照
當前頁開啟適用的場景：
1、流程性的功能頁面，前後操作存在關聯和影響。 | 如：下單支付、按步驟新增
2、同一層級內容間的操作。| 如：tab欄的切換
3、同一路徑中的操作，使用者當前的操作會對主頁的內容產生影響。 | 如：編輯一個配置，使用者操作完，會回到當前頁檢視最新結果
4、使用者具有明確目的性的操作，當前頁有利於鎖定使用者注意力。| 如：淘寶中“我的收藏”
以上是結合功能場景進行的選擇側重，如果就 “使用者體驗” 一定要分出個高下，我個人還是比較支援預設“當前頁開啟”，從體驗角度分析，“當前頁開啟”略勝一籌的主要原因有以下兩個：
1、 尊重使用者的決定 。當前頁開啟，將更多選擇機會留給使用者（滑鼠中鍵、按住ctrl點選連結或者可以右鍵新視窗開啟），一個具有良好使用者體驗的產品，在使用者做操作的時候，總是能讓他們按自己的意志做出決定【2】。網站對每個連結強制開啟新頁面則剝奪了使用者的選擇權，因為不同的人有不同的瀏覽習慣和使用需求。
2、 體驗一致 。保持一致體驗的設計才能讓使用者產生信任感與安全感。當用戶在操作介面元素的時候，可以順暢的知道、理解、並且能預料到什麼將會發生，不會被分神，也不會被打斷。任何違反這個原則的設計都將會演變成一種“以設計方意志為導向”的設計，而不是“以使用者為中心”的設計。
小結
當我們不知道如何抉擇時，或許 “不強制使用者”才是最好的體驗 ！因為我們面臨的使用者多樣，電腦操作熟悉程度多樣，不同使用者對於開啟方式的習慣也具有多樣性，這個是很難調查清楚的。在“兩害取其輕”的情況下，在當前視窗開啟連結，會尊重使用者自己的決定，讓使用者對互動介面自主可控。
三、彈出框
彈出框（彈層）又叫模態對話方塊，是指在使用者想要對當前對話方塊以外的應用程式或內容進行操作時的提示方式。它一般覆蓋在整體頁面之上，避免了頁面跳轉。
彈出框通常是為了現實一個單獨的內容，在不離開整體頁面的情況下有一些互動，提供資訊和互動。如下圖知乎中的“寫想法”，使用者可以快速的在彈出框中記錄個人想法，記錄釋出後，很順暢的回到之前的路徑上繼續操作，便捷高效，操作思路清晰。
ofollow,noindex" target="_blank">https://www.zhihu.com/#signup
現在很多產品中的新增、建立，也都會採用彈出框的互動方式，當然前提是在彈出框中編輯的內容不是很多，此時彈出框不僅承載了資訊編輯的功能，還可以作為上下文的跳轉，幫助使用者銜接路徑。如 iconfont中的新建專案，使用者新增後，頁面會直接跳轉到新的專案空間。
http://www.iconfont.cn/collections/detail?cid=2257
彈出框適用的場景：
1、內容簡單，沒有複雜的操作，且具有臨時性。 | 如：新增一個收貨地址，進行簡要的輸入編輯
2、更為詳細的輔助說明，是對當前內容的快速擴充套件。 | 如：縮圖，點選放大檢視
因此，彈出框可以較好的實現上下內容層疊的感知，不打擾使用者的主路徑，同時作為頁面承載元素和使用者操作的補充，起到承前啟後的作用。
四、總結
本文結合這三種連結開啟方式的頁面互動關係，進行適用場景舉例，並總結每種方式的優缺點，方便在設計中更好的根據不同的場景選擇合適的頁面開啟方式。
當然，以上總結也是基於我個人的理解與經驗，沒有統一的用法和標準，在具體設計實踐中，仍要靠設計者的直覺和經驗來進行綜合考量與判斷。作為體驗設計師，如何規劃使用者瀏覽路徑，是個需要嚴肅對待的命題！沒有絕對的好與壞，但一定要結合產品型別、場景、目標使用者等進行具體問題具體分析。
參考文獻
【1】連結開啟方式間的博弈：新標籤頁vs當前標籤頁http://www.woshipm.com/pd/438404.html
【2】《連結應該在新視窗開啟嗎？》http://subbloggoodboy5264m98.lofter.com/post/1fd3407b_12a690458
【3】知乎討論 https://www.zhihu.com/question/22431678
【4】3種常見的頁面開啟方式 http://www.woshipm.com/pd/126021.html
【5】新視窗開啟 VS 當前視窗開啟 — 淺談頁面連結開啟方式https://www.douban.com/note/163436628/
【6】知乎討論 https://www.zhihu.com/question/19563426/answer/12234132