2015-04-27 分類(lèi): 網(wǎng)站建設(shè)
本篇文章分別從頁(yè)面打開(kāi)方式的類(lèi)型、當(dāng)前頁(yè)打開(kāi)&新開(kāi)頁(yè)面、彈出框三方面對(duì)頁(yè)面鏈接打開(kāi)方式進(jìn)行了探討,給大家提出一些意見(jiàn)以供參考。
頁(yè)面打開(kāi)方式作為鏈接產(chǎn)品路徑的基礎(chǔ),在設(shè)計(jì)的過(guò)程中,或多或少都會(huì)遇到選擇的困擾,尤其是產(chǎn)品功能復(fù)雜,層級(jí)較多時(shí),如何讓用戶(hù)按照自己的意愿清晰的瀏覽信息,保持操作連貫性,是值得體驗(yàn)設(shè)計(jì)仔細(xì)思考與分析的。
近期在所負(fù)責(zé)的設(shè)計(jì)項(xiàng)目中,團(tuán)隊(duì)對(duì)鏈接操作的打開(kāi)方式產(chǎn)生了分歧,借此機(jī)會(huì)整理了一些案例與資料,就這個(gè)問(wèn)題進(jìn)行分析探討,也給遇到同樣問(wèn)題的同行一些參考意見(jiàn)。
一、頁(yè)面打開(kāi)方式的類(lèi)型
網(wǎng)頁(yè)中可操作的鏈接,主要有按鈕、icon 以及文字鏈接,設(shè)計(jì)中常用的打開(kāi)方式則主要有以下三種:
1. 當(dāng)前頁(yè)打開(kāi)
點(diǎn)擊操作鏈接后,在當(dāng)前的瀏覽器頁(yè)面中進(jìn)行內(nèi)容顯示與操作。
2. 新開(kāi)頁(yè)面
點(diǎn)擊操作鏈接后,在瀏覽器中新開(kāi)一個(gè)獨(dú)立的標(biāo)簽頁(yè)面,進(jìn)行內(nèi)容顯示與操作。
3. 彈出框
點(diǎn)擊操作鏈接后,在當(dāng)前的瀏覽器頁(yè)面中,彈出一個(gè)小尺寸的對(duì)話(huà)框,進(jìn)行內(nèi)容顯示與操作。
二、當(dāng)前頁(yè)打開(kāi) & 新開(kāi)頁(yè)面
首先來(lái)說(shuō)說(shuō)最具爭(zhēng)議的新開(kāi)頁(yè)面&當(dāng)前頁(yè)打開(kāi)。在 HTML語(yǔ)言中,target目標(biāo)有「target=_blank」和「target=_self」兩種屬性,分別代表「新窗口打開(kāi)」和「當(dāng)前窗口打開(kāi)」,下圖是這兩個(gè)參數(shù)的屬性描述。
從這兩個(gè)參數(shù)的屬性上來(lái)看,「當(dāng)前窗口打開(kāi)」是系統(tǒng)默認(rèn)的處理方式。這個(gè)打開(kāi)方式在國(guó)外的網(wǎng)站中實(shí)現(xiàn)方式比較統(tǒng)一,用戶(hù)也形成了一致的習(xí)慣,但國(guó)內(nèi)的形式則不盡相同,以至于一直頗具爭(zhēng)議,不同類(lèi)型網(wǎng)站之間、同一網(wǎng)站不同場(chǎng)景之間也沒(méi)有一個(gè)明確的規(guī)則標(biāo)準(zhǔn)可供大家學(xué)習(xí)和參照。
針對(duì)這個(gè)問(wèn)題的討論,可以聽(tīng)到兩種不同的用戶(hù)聲音,并且都站在各自的角度闡述其道理。
舉個(gè)例子,我們以同類(lèi)型網(wǎng)站(淘寶和亞馬遜)的打開(kāi)處理方式進(jìn)行對(duì)比,來(lái)看一下用戶(hù)習(xí)慣、功能場(chǎng)景對(duì)鏈接打開(kāi)方式選擇的影響。
首先,我們確定一致的功能場(chǎng)景:用戶(hù)從首頁(yè)中根據(jù)各種篩選條件,查找到心儀的商品。來(lái)看一下兩個(gè)網(wǎng)站的處理方式:
可以看出基本是兩個(gè)極端,差異非常明顯,再來(lái)看個(gè)有意思的現(xiàn)象,亞馬遜中國(guó)的商品搜索方式竟然又和淘寶一致了,難道鏈接打開(kāi)方式的差異竟是中外用戶(hù)習(xí)慣的差異?
這確實(shí)占了很大一部分原因,那么造成這種差異的原因主要有:
· 早期的 W3C標(biāo)準(zhǔn)不支持 target=”_blank”(HTML語(yǔ)言中,在新窗口中打開(kāi)鏈接)的屬性,國(guó)外互聯(lián)網(wǎng)普及也比國(guó)內(nèi)早,于是用戶(hù)慢慢養(yǎng)成了習(xí)慣。
· 默認(rèn)當(dāng)前頁(yè)面打開(kāi)讓國(guó)外用戶(hù)覺(jué)得更有「禮貌」。如果用戶(hù)想新開(kāi)頁(yè)面,可以鼠標(biāo)中鍵、按住ctrl點(diǎn)擊鏈接或者右鍵新窗口打開(kāi),此時(shí)用戶(hù)更有選擇權(quán),可以自己決定打開(kāi)方式;如果默認(rèn)新開(kāi)頁(yè)面,則讓用戶(hù)失去了選擇權(quán)。
· 早期國(guó)內(nèi)互聯(lián)網(wǎng)發(fā)展較為浮躁,網(wǎng)站想通過(guò)新標(biāo)簽頁(yè)打開(kāi)方式,提高PV。
· 國(guó)內(nèi)網(wǎng)絡(luò)普及晚,部分用戶(hù)尤其很多老年人不習(xí)慣甚至或許不知道,頁(yè)中有個(gè)后退前進(jìn)按鈕、面包屑可用,新開(kāi)頁(yè)面便于他們的操作。
那么,淘寶中所有的頁(yè)面打開(kāi)方式都是新開(kāi)嗎?不是。像「我的收藏」、「已買(mǎi)到的商品」、「購(gòu)物車(chē)」等功能頁(yè)面就是當(dāng)前頁(yè)打開(kāi)。
同一個(gè)產(chǎn)品內(nèi)部,如此區(qū)別設(shè)計(jì)的原因我認(rèn)為有:
· 用戶(hù)的目的較為明確,查找對(duì)象確定。(用戶(hù)想要查看的對(duì)象是確定的,如購(gòu)物車(chē)中的產(chǎn)品,用戶(hù)有明確的目標(biāo),找到鏈接打開(kāi)頁(yè)面即可,不像搜索查找商品,需要一步步縮小范圍甚至比對(duì)查看)
· 鏈接入口常駐在網(wǎng)站的信息欄,用戶(hù)可以隨時(shí)切換,操作方便,且不存在重新輸入的成本。
關(guān)于這兩種打開(kāi)方式,到底哪種操作更順暢,確實(shí)難分高下,就跟「確定和取消哪個(gè)在左,哪個(gè)在右」是一種性質(zhì)的問(wèn)題,沒(méi)有好壞之分,關(guān)鍵是要看在哪種場(chǎng)景下使用更合適。
新頁(yè)面打開(kāi)適用的場(chǎng)景:
· 頁(yè)面內(nèi)容沒(méi)有關(guān)聯(lián)性,且從邏輯上沒(méi)有從屬關(guān)系,相對(duì)獨(dú)立。如:產(chǎn)品中的外鏈。
· 存在多頁(yè)面「比較」的操作,需要經(jīng)常切換。如:淘寶商品詳情。
· 需要保留住前一頁(yè)的操作不丟失。如:知乎上過(guò)濾出來(lái)的結(jié)果列表。
· 功能分支存在穿插,當(dāng)路徑發(fā)生交叉時(shí),最好新開(kāi)頁(yè)面。如:產(chǎn)品內(nèi)部的跳轉(zhuǎn)鏈接,導(dǎo)致信息關(guān)聯(lián)的層級(jí)發(fā)生改變。
· 具有輔助功能的操作。如:使用文檔(PDF、圖片等)需要來(lái)回參照。
當(dāng)前頁(yè)打開(kāi)適用的場(chǎng)景:
· 流程性的功能頁(yè)面,前后操作存在關(guān)聯(lián)和影響。如:下單支付、按步驟新增。
· 同一層級(jí)內(nèi)容間的操作。如:tab欄的切換。
· 同一路徑中的操作,用戶(hù)當(dāng)前的操作會(huì)對(duì)主頁(yè)的內(nèi)容產(chǎn)生影響。如:編輯一個(gè)配置,用戶(hù)操作完,會(huì)回到當(dāng)前頁(yè)查看最新結(jié)果。
· 用戶(hù)具有明確目的性的操作,當(dāng)前頁(yè)有利于鎖定用戶(hù)注意力。如:淘寶中「我的收藏」。
以上是結(jié)合功能場(chǎng)景進(jìn)行的選擇側(cè)重,如果就「用戶(hù)體驗(yàn)」一定要分出個(gè)高下,我個(gè)人還是比較支持默認(rèn)「當(dāng)前頁(yè)打開(kāi)」,從體驗(yàn)角度分析,「當(dāng)前頁(yè)打開(kāi)」略勝一籌的主要原因有以下兩個(gè):
· 尊重用戶(hù)的決定。當(dāng)前頁(yè)打開(kāi),將更多選擇機(jī)會(huì)留給用戶(hù)(鼠標(biāo)中鍵、按住ctrl點(diǎn)擊鏈接或者可以右鍵新窗口打開(kāi)),一個(gè)具有良好用戶(hù)體驗(yàn)的產(chǎn)品,在用戶(hù)做操作的時(shí)候,總是能讓他們按自己的意志做出決定。網(wǎng)站對(duì)每個(gè)鏈接強(qiáng)制打開(kāi)新頁(yè)面則剝奪了用戶(hù)的選擇權(quán),因?yàn)椴煌娜擞胁煌臑g覽習(xí)慣和使用需求。
· 體驗(yàn)一致。保持一致體驗(yàn)的設(shè)計(jì)才能讓用戶(hù)產(chǎn)生信任感與安全感。當(dāng)用戶(hù)在操作界面元素的時(shí)候,可以順暢的知道、理解,并且能預(yù)料到將會(huì)發(fā)生什么,不會(huì)被分神,也不會(huì)被打斷。任何違反這個(gè)原則的設(shè)計(jì)都將會(huì)演變成一種「以設(shè)計(jì)方意志為導(dǎo)向」的設(shè)計(jì),而不是「以用戶(hù)為中心」的設(shè)計(jì)。
小結(jié)
當(dāng)我們不知道兩種方式如何選擇時(shí),或許「不強(qiáng)制用戶(hù)」才是最好的體驗(yàn)。因?yàn)槲覀兠媾R的用戶(hù)多樣,電腦操作熟悉程度多樣,因此不同用戶(hù)對(duì)于打開(kāi)方式的習(xí)慣也具有多樣性,這個(gè)是設(shè)計(jì)者無(wú)法揣測(cè)和調(diào)查清楚的。
在「兩害取其輕」的情況下,在當(dāng)前窗口打開(kāi)鏈接,不失為一個(gè)選擇,尊重用戶(hù)自己的決定,讓用戶(hù)對(duì)交互界面自主可控。
三、彈出框
彈出框(彈層)又叫模態(tài)對(duì)話(huà)框,是指在用戶(hù)想要對(duì)當(dāng)前對(duì)話(huà)框以外的應(yīng)用程序或內(nèi)容進(jìn)行操作時(shí)的提示方式。它一般覆蓋在整體頁(yè)面之上,避免了頁(yè)面跳轉(zhuǎn)。
彈出框通常是為了顯示一個(gè)單獨(dú)的內(nèi)容,在不離開(kāi)整體頁(yè)面的情況下有一些互動(dòng),提供信息和交互。
如下圖知乎中的「寫(xiě)想法」,用戶(hù)可以快速的在彈出框中記錄個(gè)人想法,記錄發(fā)布后,很順暢的回到之前的路徑上繼續(xù)操作,便捷高效,操作思路清晰。
△ https://www.zhihu.com/
現(xiàn)在很多產(chǎn)品中的新增、創(chuàng)建,也都會(huì)采用彈出框的交互方式,當(dāng)然前提是在彈出框中編輯的內(nèi)容不是很多,此時(shí)彈出框不僅承載了信息編輯的功能,還可以作為上下文的跳轉(zhuǎn),幫助用戶(hù)銜接路徑。
如 iconfont 中的新建項(xiàng)目,用戶(hù)新增后,頁(yè)面會(huì)直接跳轉(zhuǎn)到新的項(xiàng)目空間。
△ http://www.iconfont.cn
彈出框適用的場(chǎng)景:
· 內(nèi)容簡(jiǎn)單,沒(méi)有復(fù)雜的操作,且具有臨時(shí)性。如:新增一個(gè)收貨地址,進(jìn)行簡(jiǎn)要的輸入編輯。
· 更為詳細(xì)的輔助說(shuō)明,是對(duì)當(dāng)前內(nèi)容的快速擴(kuò)展。如:縮略圖,點(diǎn)擊放大查看。
因此,彈出框可以較好的實(shí)現(xiàn)上下內(nèi)容層疊的感知,不打擾用戶(hù)的主路徑,同時(shí)作為頁(yè)面承載元素和用戶(hù)操作的補(bǔ)充,起到承前啟后的作用。
總結(jié)
本文結(jié)合這三種鏈接打開(kāi)方式的頁(yè)面交互關(guān)系,進(jìn)行適用場(chǎng)景舉例,并總結(jié)每種方式的優(yōu)缺點(diǎn),方便在設(shè)計(jì)中更好的根據(jù)不同的場(chǎng)景選擇合適的頁(yè)面打開(kāi)方式。
當(dāng)然,以上總結(jié)也是基于我個(gè)人的理解與經(jīng)驗(yàn),沒(méi)有統(tǒng)一的用法和標(biāo)準(zhǔn),在具體設(shè)計(jì)實(shí)踐中,仍要靠設(shè)計(jì)者的直覺(jué)和經(jīng)驗(yàn)來(lái)進(jìn)行綜合考量與判斷。
作為體驗(yàn)設(shè)計(jì)師,如何規(guī)劃用戶(hù)瀏覽路徑,是個(gè)需要嚴(yán)肅對(duì)待的命題。沒(méi)有絕對(duì)的好與壞,但一定要結(jié)合產(chǎn)品類(lèi)型、場(chǎng)景、目標(biāo)用戶(hù)等進(jìn)行具體問(wèn)題具體分析。
文章名稱(chēng):網(wǎng)站建設(shè)中頁(yè)面打開(kāi)的交互方式,這篇堪稱(chēng)最全面的總結(jié)!
網(wǎng)站URL:http://m.rwnh.cn/news9/18809.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專(zhuān)注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷(xiāo)seo公司;服務(wù)項(xiàng)目有網(wǎng)站建設(shè)等
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話(huà):028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容