2018-11-14 濤濤
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
本篇文章分別從頁面打開方式的類型、當前頁打開&新開頁面、彈出框三方面對頁面鏈接打開方式進行了探討，給大家提出一些意見以供參考。頁面打開方式作為鏈接產(chǎn)品路徑的基礎(chǔ)，在設(shè)計的過程中，或多或少都會遇到選擇的困擾，尤其是產(chǎn)品功能復(fù)雜，層級較多時，如何讓用戶按照自己的意愿清晰的瀏覽信息，保持操作連貫性，是值得體驗設(shè)計仔細思考與分析的。
近期在所負責的設(shè)計項目中，團隊對鏈接操作的打開方式產(chǎn)生了分歧，借此機會整理了一些案例與資料，就這個問題進行分析探討，也給遇到同樣問題的同行一些參考意見。
網(wǎng)頁中可操作的鏈接，主要有按鈕、icon 以及文字鏈接，設(shè)計中常用的打開方式則主要有以下三種：
1. 當前頁打開
點擊操作鏈接后，在當前的瀏覽器頁面中進行內(nèi)容顯示與操作。
2. 新開頁面
點擊操作鏈接后，在瀏覽器中新開一個獨立的標簽頁面，進行內(nèi)容顯示與操作。
3. 彈出框
點擊操作鏈接后，在當前的瀏覽器頁面中，彈出一個小尺寸的對話框，進行內(nèi)容顯示與操作。
首先來說說最具爭議的新開頁面&當前頁打開。在 HTML語言中，target目標有「target=_blank」和「target=_self」兩種屬性，分別代表「新窗口打開」和「當前窗口打開」，下圖是這兩個參數(shù)的屬性描述。
從這兩個參數(shù)的屬性上來看，「當前窗口打開」是系統(tǒng)默認的處理方式。這個打開方式在國外的網(wǎng)站中實現(xiàn)方式比較統(tǒng)一，用戶也形成了一致的習慣，但國內(nèi)的形式則不盡相同，以至于一直頗具爭議，不同類型網(wǎng)站之間、同一網(wǎng)站不同場景之間也沒有一個明確的規(guī)則標準可供大家學習和參照。
針對這個問題的討論，可以聽到兩種不同的用戶聲音，并且都站在各自的角度闡述其道理。
舉個例子，我們以同類型網(wǎng)站（淘寶和亞馬遜）的打開處理方式進行對比，來看一下用戶習慣、功能場景對鏈接打開方式選擇的影響。
首先，我們確定一致的功能場景：用戶從首頁中根據(jù)各種篩選條件，查找到心儀的商品。來看一下兩個網(wǎng)站的處理方式：
可以看出基本是兩個極端，差異非常明顯，再來看個有意思的現(xiàn)象，亞馬遜中國的商品搜索方式竟然又和淘寶一致了，難道鏈接打開方式的差異竟是中外用戶習慣的差異？
這確實占了很大一部分原因，那么造成這種差異的原因主要有：
那么，淘寶中所有的頁面打開方式都是新開嗎？不是。像「我的收藏」、「已買到的商品」、「購物車」等功能頁面就是當前頁打開。
同一個產(chǎn)品內(nèi)部，如此區(qū)別設(shè)計的原因我認為有：
關(guān)于這兩種打開方式，到底哪種操作更順暢，確實難分高下，就跟「確定和取消哪個在左，哪個在右」是一種性質(zhì)的問題，沒有好壞之分，關(guān)鍵是要看在哪種場景下使用更合適。
新頁面打開適用的場景：
當前頁打開適用的場景：
以上是結(jié)合功能場景進行的選擇側(cè)重，如果就「用戶體驗」一定要分出個高下，我個人還是比較支持默認「當前頁打開」，從體驗角度分析，「當前頁打開」略勝一籌的主要原因有以下兩個：
小結(jié)
當我們不知道兩種方式如何選擇時，或許「不強制用戶」才是最好的體驗。因為我們面臨的用戶多樣，電腦操作熟悉程度多樣，因此不同用戶對于打開方式的習慣也具有多樣性，這個是設(shè)計者無法揣測和調(diào)查清楚的。
在「兩害取其輕」的情況下，在當前窗口打開鏈接，不失為一個選擇，尊重用戶自己的決定，讓用戶對交互界面自主可控。
彈出框（彈層）又叫模態(tài)對話框，是指在用戶想要對當前對話框以外的應(yīng)用程序或內(nèi)容進行操作時的提示方式。它一般覆蓋在整體頁面之上，避免了頁面跳轉(zhuǎn)。
彈出框通常是為了顯示一個單獨的內(nèi)容，在不離開整體頁面的情況下有一些互動，提供信息和交互。
如下圖知乎中的「寫想法」，用戶可以快速的在彈出框中記錄個人想法，記錄發(fā)布后，很順暢的回到之前的路徑上繼續(xù)操作，便捷，操作思路清晰。
現(xiàn)在很多產(chǎn)品中的新增、創(chuàng)建，也都會采用彈出框的交互方式，當然前提是在彈出框中編輯的內(nèi)容不是很多，此時彈出框不僅承載了信息編輯的功能，還可以作為上下文的跳轉(zhuǎn)，幫助用戶銜接路徑。
如 iconfont 中的新建項目，用戶新增后，頁面會直接跳轉(zhuǎn)到新的項目空間。
彈出框適用的場景：
因此，彈出框可以較好的實現(xiàn)上下內(nèi)容層疊的感知，不打擾用戶的主路徑，同時作為頁面承載元素和用戶操作的補充，起到承前啟后的作用。
本文結(jié)合這三種鏈接打開方式的頁面交互關(guān)系，進行適用場景舉例，并總結(jié)每種方式的優(yōu)缺點，方便在設(shè)計中更好的根據(jù)不同的場景選擇合適的頁面打開方式。
當然，以上總結(jié)也是基于我個人的理解與經(jīng)驗，沒有統(tǒng)一的用法和標準，在具體設(shè)計實踐中，仍要靠設(shè)計者的直覺和經(jīng)驗來進行綜合考量與判斷。
作為體驗設(shè)計師，如何規(guī)劃用戶瀏覽路徑，是個需要嚴肅對待的命題。沒有絕對的好與壞，但一定要結(jié)合產(chǎn)品類型、場景、目標用戶等進行具體問題具體分析。
藍藍設(shè)計( www.ocunn.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
藍藍設(shè)計的小編 http://www.ocunn.cn