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

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

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

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

一、頁面打開方式的類型

網頁中可操作的鏈接，主要有按鈕、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

彈出框適用的場景：

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

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

總結

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

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

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

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

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

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

現在，我們發現健康類APP越來越多了：健身應用程序、跟蹤器、卡路里計算器、水和食物日記、活動提醒等等，這些APP的確對我們保持日常健康提供了幫助。

過癮！這17個海報設計小技巧，果斷收藏了！

周五參加了港大space學院的工作坊，感謝Google張英惠老師的精彩授課，學到了通過發問找到解決問題的方法，群策群力繪制用戶體驗地圖。

導語

隨著各類App的業務功能不斷豐富，小紅點已經成為互聯網從業者們最常使用的運營工具之一，每當有新的運營內容或新功能上線，大家的做法往往是“在那放個紅點就行了”。然而簡單粗暴的形式以及不加節制的投放，讓小紅點變成了人人厭煩的“小妖精”。本文從設計的角度出發淺談小紅點的一些設計細節，期望引起大家對小紅點的關注，在這里拋磚引玉，也期待感興趣的小伙伴一起探討。

煩人的小紅點

人類似乎天生對不對稱，不和諧的事物有厭煩心理，并且想要去糾正這些“錯誤”，簡而言之就是大家平時所說的“強迫癥”。而小紅點則完美利用了這一人性的弱點，它就像白嫩臉頰上長出的一顆小痘痘，讓人忍住不去要去擠破它。因此，小紅點也成為了一把產品運營利器，只要投放在某個業務入口，就幾乎沒有用戶會對它熟視無睹，而當用戶忍不住要去輕觸消除它時，產品側為業務導流的目的也就達到了。

那么問題來了，用戶喜歡小紅點嗎？在Google和必應上搜索關鍵詞“App 小紅點”，幾乎有一半的搜索結果是“教你如何消除小紅點”。

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

即使你遠離設計領域，對于用戶體驗這一詞也不會陌生。用戶和產品之間進行交互過程中，產生的一般態度和情感反饋就是我們常說的用戶體驗。在用戶體驗設計中，有幾個關鍵性的因素的是設計師所關注的，比如可用性（usability）、工具性（utility）、合意性（desirability）、吸引度（attractiveness）等。如今，用戶體驗設計和視覺設計幾乎達到了同等重要的程度。雖然仍有一些企業和團隊在懷疑用戶體驗設計是否有必要，但是總體上，大家對于它的認可度還是非常高的。

用戶體驗設計為何重要？

許多公司為了讓產品產品的體驗和效率更高，而花費更多的時間和金錢。現代商業競爭背景下，事實已經證明，產品和服務的成功很大程度上是取決于用戶對于產品的喜愛程度。UX設計旨在通過讓產品更易于使用而提高用戶的滿意度。

有些人可能還認為用戶體驗設計的核心是視覺設計，其實它的范疇遠不止于此。UX設計是一個復雜的過程，涵蓋了用戶研究，線框圖、原型、視覺稿、動畫、開發、測試等許多不同的環節和階段，其中許多環節甚至是并發和交叉的。真正有效的用戶體驗需要時間來開發，也需要足夠的知識來作為支撐，這種復雜的開發體系使得它或多或少地需要超出預期的額外投資。然而，UX設計對于初創和非初創公司而言，同樣有益，它確確實實從不同的方面幫助企業創造成功的產品，無論是參與度、可用性還是轉化率。

如果你擁有一個復雜的電商網站系統，那么用戶體驗一定是影響它實際效用的重要因素。內容組織是否系統，導航是否清晰，都會影響到產品的銷售，用戶的黏度。太復雜、不便捷的產品會讓用戶流失，這是肯定的。

有數據表明，近年來95%的移動端APP 在上線一個月內就宣告失敗而退出。這很大程度上是因為激烈競爭之下，沒有足夠優秀的用戶體驗來留住用戶所造成的結果。結合現有的研究和我們自己的經驗，我們在今天的文章中總結出了優秀產品的7個關鍵的用戶體驗設計要素。

1、有效的可用性設計

現如今，“簡單”一詞和無聊的設計并無關系，而是成功產品設計的關鍵性要素。在Don Norman 的《設計心理學》系列教材中指出，良好的設計通常都會具有易于發現和易于理解兩個特性。用戶期望他們所使用的產品是簡單明了的，能夠讓他們不花費太多精力就可以搞定，也可以從中獲得自信。而這些都是用戶體驗設計的工作范疇以內。

用戶體驗設計師的目標是為數字產品創造一致的體驗，讓用戶能夠安心使用。有效的用戶體驗設計能夠通過網站和APP為用戶循序漸進、有效地展示內容。而UX設計人員則可以通過數據分析和案例研究，消除不必要的設計、搞定問題、去除隱患，提升產品的可用性。UX設計師還能通過不同環節的引導服務來幫助用戶更加快速的熟悉產品，讓用戶感到貼心而不會緊張。

2、驅動用戶深度參與

參與度是衡量用戶有效行為的度量，而它也是產品價值的重要體現之一。每個企業都希望有高素質的用戶參與到產品建設當中來，而他們也知道，最終還是要通過創造優秀的用戶體驗來解決這一問題。

UX設計有一個熱門的解決方案是游戲化設計。將游戲化的元素應用到非游戲類的使用場景中來。游戲化設計讓網站和APP擁有更多有趣的元素，吸引用戶，提升參與度。游戲化設計的具體方法和策略有很多，設置任務、發放獎勵都是很常見的手法了。挑起用戶的好奇心和激情，他們會堅持不懈地執行任務，在你的網站和APP中花費更多的時間。

3、產品的獨特性

很難說市場上到底有多少APP存在，但是絕大多數的應用和網站在起步的時候，就已經失敗了。當你要開始投放一個APP到市場的時候，可能已經有好幾十個同類的產品已經存在了。所以，企業和開發團隊一直在尋求讓用戶選擇他們產品的原因和方法。UX設計師能夠通過分析目標受眾的需求和實際市場狀況，來判斷和預測用戶對于自己產品的反應。如果你想給別人帶來愉悅的體驗，滿足用戶的需求，并且力圖讓自己的產品擁有足夠的特性從競爭中脫穎而出，那么你的產品就具有了同其他產品區分開來的獨特性。

4、省錢

UX設計的成本并不低，但是相比于修復可用性的問題，它的花費依然很低。基于用戶研究，UX設計師能夠準確地挑選出功能組合，并且規劃用戶的交互過程，排除可能存在的問題。通過對目標受眾的研究和測試，分析和改進整個產品的流程與細節，而這些過程對于產品開發和運營的補充，相比于在產品上線過再根據反饋進行調整，要省錢省心得多。

5、用戶忠誠度

用戶的口味越來越刁鉆了。令人不快的體驗會讓他們很快不耐煩，然后迅速和你的APP說拜拜，然后再也不會回來了。用戶的忠誠度要維持起來并不容易，你需要創造足夠優秀的產品，要讓人喜愛、沉迷，還得足夠快速地幫用戶排查問題。這種局面下，用戶體驗設計的價值無疑是不可估量的。如果你的產品能夠始終保持令人舒服愉悅的體驗，用戶習慣了就很難轉向別家了。另外，別忘了，快樂的用戶更喜歡向朋友推薦你的產品。

6、高轉化率

采取設計者預期行為的用戶所占總人數的百分比就是我們常說的轉化率。最典型的轉化率就是購買產品的用戶數所占打開電商網站的用戶總人數的百分比。用戶體驗設計師通常會掌握一系列的分析技術，來幫助產品提高轉化率。通過深入分析用戶行為和用戶離開產品的原因，找到痛點，解決問題，從而提高轉化率。

7、積極的品牌體驗

品牌識別不僅僅取決于視覺形象設計，還和體驗息息相關。許多用戶在第一次使用產品的時候，會記住品牌給他們的感覺。這種第一次的體驗對于用戶和品牌本身都至關重要，如果處理不好，可能會失去不少潛在用戶。良好的UX設計可以保證品牌擁有積極而良好的用戶體驗。提供用戶喜歡的產品，可以提升品牌的認知度，因為用戶不會忘記他們喜歡的東西。

結語

優秀的用戶體驗設計對于企業無疑是有利的。很多時候，它的價值并非是一眼可以看出來的，但是事實上，優秀的用戶體驗是成功產品中不可剝離的組成部分。令人信服的UX設計能夠節省資金和精力，這比起投資解決低質量的產品要來得有效得多。更重要的是，現代產品一旦初次互動不利，后面想要扭轉過來就很難了。

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

照搬他人的模式要比創造新的東西容易。做大家都知道如何去做的事，只會使世界發生從1到N的改變，增添許多類似的東西。但是每次我們創造新事物的時候，會使世界發生從0到1的改變。                     

  —— Peter Thiel,Blake Masters《從0到1：開啟商業與未來的秘密》

寫在前面

隨著移動優先的趨勢，APP的設計也越來越受到公司重視，不斷地提高APP的設計質量是每個設計師的追求，有哪些設計中的細節被你忽略了呢？讓我們一起來看看這些細節你都把握住了嗎。

視覺表現型問題

好的設計往往需要好的內容作為基礎支撐。無論是內容還是設計，想要讓兩者最大化的搭配，往往是需要進行調整和優化才行。

當你的內容需要遷移到移動端上的時候，要怎么讓內容和用戶體驗無縫地配合起來呢？設計師要基于小屏幕的交互來思考整個設計和優化的策略，而今天的文章，就為你分享7個設計技巧。

1、每屏完成一項任務