主頁 > 知識(shí)庫 > 對(duì)于手機(jī)網(wǎng)站W(wǎng)AP頁面的跳轉(zhuǎn)設(shè)計(jì)的一些建議

對(duì)于手機(jī)網(wǎng)站W(wǎng)AP頁面的跳轉(zhuǎn)設(shè)計(jì)的一些建議

熱門標(biāo)簽:昆明地圖標(biāo)注員 百度地圖標(biāo)注和認(rèn)領(lǐng) 宿遷電商外呼系統(tǒng)平臺(tái) 青海電銷外呼系統(tǒng)違法嗎 南京外呼系統(tǒng)價(jià)格 外呼系統(tǒng)中的坐席號(hào)是什么意思 阿里云能申請(qǐng)400電話 外呼總是換線路 什么地圖標(biāo)注定位

碎碎念

跳轉(zhuǎn)太多了,就搞不懂了。

PC上的網(wǎng)頁,頁面間反復(fù)跳轉(zhuǎn)是再正常不過的了,從首頁進(jìn)入搜索結(jié)果頁,再到詳情頁,再跳到相關(guān)內(nèi)容的詳情頁…不過到了手機(jī)上,無節(jié)制的跳轉(zhuǎn)就有點(diǎn)兒問題了。

從首頁列表->單篇微博詳情頁->個(gè)人主頁->單篇微博詳情頁->個(gè)人主頁…可以一次接一次的深入,但跳轉(zhuǎn)了三、四次后,再看左上角的“返回”按鈕,你已經(jīng)很難判斷出將會(huì)返回到哪里了。

如果是傳統(tǒng)的PC網(wǎng)站,能展示層級(jí)導(dǎo)航,能在跳轉(zhuǎn)到其它欄目時(shí)交代清楚,當(dāng)然這樣的情況也應(yīng)該盡量減少,但總歸還是能交代清楚的。

頁面小,沒太多地方擺多層的tabs導(dǎo)航或者面包屑導(dǎo)航,就只剩下左上角的一個(gè)“返回”按鈕作為導(dǎo)航了。對(duì)于微博這種情況,明顯就不夠用了。還要像傳統(tǒng)PC網(wǎng)站那樣錯(cuò)綜的鏈接,就比較容易繞暈了。

更多層級(jí),更多點(diǎn)擊操作,降低了使用效率。

即使沒有繞暈,更多的層級(jí),更多的深入,更多的點(diǎn)擊操作,也降低了使用效率。

掘圖志的手機(jī)版,在列表頁直接就可以看到圖片、打開視頻:

你肯定被上面的化學(xué)老師吸引了注意力,其實(shí)我高中時(shí)也見過化學(xué)老師拿500毫升的燒杯喝水??钥詞這里要說的是:這個(gè)手機(jī)版網(wǎng)站不需要進(jìn)入到詳情頁,只是瀏覽列表就可以了,看到感興趣的視頻,直接點(diǎn)擊就打開那個(gè)全屏的視頻播放頁了。

如果每篇文章在列表頁上只顯示前面一小部分內(nèi)容,要進(jìn)入到詳情頁才能看全文、播視頻,那樣做雖然也沒啥不對(duì),但用起來就比較累了。

相比于有些網(wǎng)站的手機(jī)版只是把頁面做的小了些,掘圖志的手機(jī)版更多的考慮到了手機(jī)用戶的使用情景,不僅看上去簡單,而且用起來也效率高。

層級(jí)太多了看不懂;即使看得懂,層級(jí)多了用起來也麻煩,因此:手機(jī)上能不跳轉(zhuǎn)就不跳轉(zhuǎn)。那我們就來看看有沒有辦法減少跳轉(zhuǎn)…

對(duì)于從列表頁打開詳情頁這種情況,過去的Google reader的方式是個(gè)典型:

直接在頁面內(nèi)展開,沒有進(jìn)入詳情頁這回事兒了,自然也就沒有了進(jìn)入后再返回的操勞。

Google reader將進(jìn)入詳情頁這個(gè)頁面間導(dǎo)航的問題變?yōu)榱隧撁鎯?nèi)導(dǎo)航的問題。于是,它頁面內(nèi)的導(dǎo)航就出了個(gè)小問題:打開一篇長文后,看到一半,不想看了,想滾下去或滾上去,都比較辛苦。(當(dāng)然這也源于它原本是給PC設(shè)計(jì)的網(wǎng)頁。)還好這個(gè)問題不需要去解決了,google reader要關(guān)閉了。

不過這種設(shè)計(jì)并非只是google reader獨(dú)有,使用類似的頁面內(nèi)展開的產(chǎn)品或許可以單獨(dú)為自己的頁面內(nèi)展開做一些自己獨(dú)有的頁面內(nèi)導(dǎo)航功能,讓用戶能在展開長文且滾到中間的時(shí)候可以直接收起此篇長文。

變“進(jìn)入詳情頁”為“在當(dāng)前頁內(nèi)展開”,這是專門給列表->詳情這種情況用的。前面提到的微博,用這個(gè)辦法似乎也解決不了什么問題,其實(shí)我們面對(duì)的多數(shù)產(chǎn)品都很難保證一個(gè)頁搞定。

能不跳轉(zhuǎn)就盡量不跳轉(zhuǎn),如果不得已,非得跳轉(zhuǎn)呢?

如果非得跳轉(zhuǎn),可以假裝不是跳轉(zhuǎn)。

這樣的例子也有不少:

假裝不跳轉(zhuǎn)例子1:Feedly的詳情浮出。

點(diǎn)擊后,它浮現(xiàn)出來了,點(diǎn)左箭頭按鈕,或者點(diǎn)詳情頁上的任何無鏈接位置都能收起來。

要把這種方式理解為是打開了一個(gè)彈出窗口,或許也可以,那它就是十惡不赦的模式化窗口了,實(shí)際上傳統(tǒng)的進(jìn)入詳情頁都可以被認(rèn)為是等同于模式化窗口的,或者說,模式化窗口這種概念在現(xiàn)在的設(shè)計(jì)中已經(jīng)不那么有意義了。(呃,這話題似乎相當(dāng)有點(diǎn)兒復(fù)雜,應(yīng)該單獨(dú)拿出來好好聊聊,在這兒就不再往下說了吧,在這括號(hào)里是說不明白了。)

如果把這種形式理解為是一種更形象化的詳情展示方式,那么它就顯得挺可愛的了。原本的列表頁似乎并沒有消失,只是被蓋住了,詳情頁的打開讓人不是那么害怕了。

這個(gè)形式更像是手機(jī)上的微博里點(diǎn)擊一張圖片,圖片直接浮現(xiàn)出來,再點(diǎn)擊圖片就又還原了。

假裝不跳轉(zhuǎn)例子2:Path的左右滑動(dòng)。

點(diǎn)了一個(gè)tab,右側(cè)的頁面滑動(dòng)過來,其實(shí)還是跳轉(zhuǎn)頁面,但是這樣的形式讓跳轉(zhuǎn)看上去更像是滑過來的,不是離開了當(dāng)前頁去到了另外一個(gè)頁。

另外,滑到了feeds頁面,再點(diǎn)擊某個(gè)圖片,就又是微博里浮出圖片的效果了,或者說是feedly的浮出詳情。牛X了,組合拳啊~

假裝不跳轉(zhuǎn)例子3 “i”的翻轉(zhuǎn)。

“i”頁面的出現(xiàn)是翻過來的,是當(dāng)前頁的背面。

這些特別的方式,雖然沒能減少頁面間的跳轉(zhuǎn),但卻把跳轉(zhuǎn)潤色的不那么生硬了,使得跳轉(zhuǎn)更生動(dòng),更好理解。它們共同的思路是:讓當(dāng)前頁與目標(biāo)頁的關(guān)系更具象。目標(biāo)頁蓋住了當(dāng)前頁;目標(biāo)頁把當(dāng)前頁推到旁邊去了;目標(biāo)頁在當(dāng)前頁的背面。

產(chǎn)品的結(jié)構(gòu)要簡單些才是關(guān)鍵。

如果運(yùn)用這些表現(xiàn)方式,是不是就能把最開始的那個(gè)微博里不斷跳轉(zhuǎn)的問題處理好了呢?或許能有些幫助,但要完美,恐怕也夠嗆。

在feedly的詳情頁里再點(diǎn)擊其中的鏈接,還是得規(guī)規(guī)矩矩的打開新頁面,上面的其他例子也類似。也就是說,這些巧心思的設(shè)計(jì)也只能處理有限層級(jí)的頁面關(guān)系。

當(dāng)然我并不贊同以現(xiàn)有的局限作為產(chǎn)品設(shè)計(jì)的依據(jù),產(chǎn)品要做什么,不做什么,仍舊應(yīng)該以用戶的目標(biāo)、使用情景、用戶任務(wù)為依據(jù)。手機(jī)上的局限或許可以理解為:我們不得不在這樣的局限下去做“以用戶為中心的設(shè)計(jì)”。

關(guān)于錨點(diǎn)鏈接

錨點(diǎn)鏈接一般用于比較長的網(wǎng)頁,使用內(nèi)部鏈接建立頁內(nèi)目錄。單擊目錄跳轉(zhuǎn)到文本的相應(yīng)位置,最常見的如“回頂部、模塊間跳轉(zhuǎn)”等。

關(guān)于錨點(diǎn)鏈接,可用性研究的宗師Jakob Nielsen寫過一篇名為Avoid Within-Page Links的文章,排斥錨點(diǎn)鏈接,認(rèn)為它有害頁面健康,最典型的例子是“返回頂部”,反對(duì)原因大致可歸納為:

·干擾用戶瀏覽頁面;

·認(rèn)為沒有必要,瀏覽器或鍵盤足以完成此功能;

·操作結(jié)果不明確,用戶對(duì)“頂部”認(rèn)知不固定;

對(duì)于手機(jī)端WAP頁而言,由于很多手機(jī)不支持腳本,因此很多時(shí)候只能寄期望于用戶的瀏覽器有快速跳轉(zhuǎn)功能。而對(duì)于按鍵機(jī),焦點(diǎn)跳轉(zhuǎn)就會(huì)相當(dāng)痛苦?,F(xiàn)在好多wap已嘗試使用錨點(diǎn)鏈接,比如一些資訊類網(wǎng)站,這類網(wǎng)站信息量很大,頁面很長,錨點(diǎn)鏈接的必要性由此被深刻體現(xiàn)。

錨點(diǎn)鏈接的兩種應(yīng)用形式

目前對(duì)于錨點(diǎn)鏈接的應(yīng)用主要分為兩種:

1.模塊間快速跳轉(zhuǎn)

2.跳轉(zhuǎn)到頂部

優(yōu)點(diǎn):·頁面過長,這種快速跳轉(zhuǎn)可減少按鍵做功

缺點(diǎn):·目標(biāo)位置傳達(dá)得不明顯,用戶不能預(yù)期跳轉(zhuǎn)后焦點(diǎn)位置落到哪;

·受手機(jī)屏幕大小的限制,用戶無法了解全局,跳轉(zhuǎn)后會(huì)失去方向感;

同樣,對(duì)于搜索結(jié)果頁面來說,由于向用戶呈現(xiàn)了多條結(jié)果list,頁面也會(huì)很長,因此適當(dāng)?shù)剡\(yùn)用錨點(diǎn)鏈接會(huì)減輕用戶的操作負(fù)擔(dān)。


錨點(diǎn)鏈接在搜索結(jié)果頁面的應(yīng)用

一般來說,功能區(qū)在搜索結(jié)果頁面的位置有兩種情況:在搜索結(jié)果list的頂部、在搜索結(jié)果list的底部,以下分別對(duì)兩種情況的利弊作分析。

1.功能區(qū)在搜索結(jié)果list的頂部

功能區(qū)在頂部的焦點(diǎn)切換順序

優(yōu)點(diǎn):利于重復(fù)篩選。如用戶想選“西湖區(qū)的吃喝”或者“杭州地區(qū)的商城”,先選擇其中一個(gè)條件,頁面刷新后,在頁面頂部再選  擇另一個(gè)條件,會(huì)易于操作。

缺點(diǎn):每次頁面刷新后焦點(diǎn)都會(huì)停在頁面的第一個(gè)鏈接。用戶想到達(dá)搜索list,要走一條漫長的路。此時(shí)只能寄望于手機(jī)本身對(duì)鏈接焦點(diǎn)的執(zhí)行順序,結(jié)果非常不可控(很多手機(jī)不支持快速跳轉(zhuǎn),另外,并不是所有的用戶此功能都十分了解)。

2.功能區(qū)在搜索結(jié)果list的底部

優(yōu)點(diǎn):刷新頁面后,在頁面頂部用戶可以直達(dá)結(jié)果list;

缺點(diǎn):重復(fù)篩選的成本會(huì)變得很高。刷新頁面后用戶必須要繞過結(jié)果list,到達(dá)頁面的底部去完成這些篩選操作。

功能區(qū)在底部的焦點(diǎn)切換順序

在SERP頁面如何平衡功能和結(jié)果

這次改版的宗旨:

在SERP頁面平衡list結(jié)果和 “篩選區(qū)”的優(yōu)先級(jí)(對(duì)于我們找商戶來說,前者高于后者);
·盡量減少頁面刷新次數(shù),所以不采用鏈接到一個(gè)新頁面的方式;

最后的優(yōu)化方法是:

·在搜索結(jié)果頁list上方加個(gè)錨點(diǎn),當(dāng)用戶需要重新篩選時(shí),鏈到篩選功能區(qū)。
·當(dāng)用戶不需要時(shí),直接忽略這個(gè)焦點(diǎn),到達(dá)結(jié)果list。
·為提升用戶跳轉(zhuǎn)后的方向感,將錨點(diǎn)入口處的視覺表現(xiàn)形式設(shè)計(jì)得同篩選功能區(qū)一樣。

搜索結(jié)果頁錨點(diǎn)鏈接的焦點(diǎn)切換順序

小結(jié)

在Wap網(wǎng)頁設(shè)計(jì)中,由于瀏覽器或者硬件方面的限制,運(yùn)用錨點(diǎn)鏈接很有必要,同時(shí)也注意以下幾個(gè)點(diǎn):

·平衡搜索結(jié)果和功能區(qū)對(duì)用戶的重要性,在適當(dāng)?shù)奈恢梅懦鲥^點(diǎn)鏈接

·搞清用戶在用錨點(diǎn)鏈接時(shí)的實(shí)際意圖,用含義明確的文案?jìng)鬟_(dá)出來

·為提升跳轉(zhuǎn)后的方向感,可統(tǒng)一錨點(diǎn)位置和目標(biāo)位置的視覺表現(xiàn)形式

標(biāo)簽:徐州 浙江 廣元 臨夏 遼寧 廣西 錫林郭勒盟 肇慶

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《對(duì)于手機(jī)網(wǎng)站W(wǎng)AP頁面的跳轉(zhuǎn)設(shè)計(jì)的一些建議》,本文關(guān)鍵詞  對(duì)于,手機(jī),網(wǎng)站,WAP,頁,面的,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《對(duì)于手機(jī)網(wǎng)站W(wǎng)AP頁面的跳轉(zhuǎn)設(shè)計(jì)的一些建議》相關(guān)的同類信息!
  • 本頁收集關(guān)于對(duì)于手機(jī)網(wǎng)站W(wǎng)AP頁面的跳轉(zhuǎn)設(shè)計(jì)的一些建議的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章