手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

總結(jié)頁面打開的交互方式,很全面!

2018-11-12    用心設(shè)計

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

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

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

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

一、頁面打開方式的類型

網(wǎng)頁中可操作的鏈接,主要有按鈕、icon 以及文字鏈接,設(shè)計中常用的打開方式則主要有以下三種:

1. 當(dāng)前頁打開

點擊操作鏈接后,在當(dāng)前的瀏覽器頁面中進(jìn)行內(nèi)容顯示與操作。

2. 新開頁面

點擊操作鏈接后,在瀏覽器中新開一個獨立的標(biāo)簽頁面,進(jìn)行內(nèi)容顯示與操作。

3. 彈出框

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

二、當(dāng)前頁打開 & 新開頁面

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

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

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

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

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

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

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

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

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

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

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

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

新頁面打開適用的場景:

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

當(dāng)前頁打開適用的場景:

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

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

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

小結(jié)

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

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

三、彈出框

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

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

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

△ https://www.zhihu.com/

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

如 iconfont 中的新建項目,用戶新增后,頁面會直接跳轉(zhuǎn)到新的項目空間。

△ http://www.iconfont.cn

彈出框適用的場景:

  • 內(nèi)容簡單,沒有復(fù)雜的操作,且具有臨時性。如:新增一個收貨地址,進(jìn)行簡要的輸入編輯。
  • 更為詳細(xì)的輔助說明,是對當(dāng)前內(nèi)容的快速擴展。如:縮略圖,點擊放大查看。

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

總結(jié)

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

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

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

藍(lán)藍(lán)設(shè)計www.88yangsc.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)

分享本文至:

日歷

鏈接

個人資料

藍(lán)藍(lán)設(shè)計的小編 http://www.88yangsc.com

存檔