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

今天給大家介紹一下手機(jī)網(wǎng)站W(wǎng)AP頁面跳轉(zhuǎn)設(shè)計(jì)的建議有哪些。文章的內(nèi)容小編覺得不錯(cuò)，現(xiàn)在給大家分享一下，覺得有需要的朋友可以了解一下，希望對(duì)大家有所幫助，下面跟著小編的思路一起來閱讀吧。

PC上的網(wǎng)頁，頁面間反復(fù)跳轉(zhuǎn)是再正常不過的了，從首頁進(jìn)入搜索結(jié)果頁，再到詳情頁，再跳到相關(guān)內(nèi)容的詳情頁…不過到了手機(jī)上，無節(jié)制的跳轉(zhuǎn)就有點(diǎn)兒?jiǎ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ī)用戶的使用情景，不僅看上去簡(jiǎn)單，而且用起來也效率高。

層級(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è)小問題：打開一篇長(zhǎng)文后，看到一半，不想看了，想滾下去或滾上去，都比較辛苦。（當(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)航功能，讓用戶能在展開長(zhǎng)文且滾到中間的時(shí)候可以直接收起此篇長(zhǎng)文。

變“進(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)潤(rù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)要簡(jiǎn)單些才是關(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)鏈接一般用于比較長(zhǎng)的網(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)站信息量很大，頁面很長(zhǎng)，錨點(diǎn)鏈接的必要性由此被深刻體現(xiàn)。

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

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

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

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

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

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

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

同樣，對(duì)于搜索結(jié)果頁面來說，由于向用戶呈現(xiàn)了多條結(jié)果list，頁面也會(huì)很長(zhǎng)，因此適當(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,要走一條漫長(zhǎng)的路。此時(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)形式

以上就是手機(jī)網(wǎng)站W(wǎng)AP頁面跳轉(zhuǎn)設(shè)計(jì)的建議有哪些的全部?jī)?nèi)容了，更多與手機(jī)網(wǎng)站W(wǎng)AP頁面跳轉(zhuǎn)設(shè)計(jì)的建議有哪些相關(guān)的內(nèi)容可以搜索億速云之前的文章或者瀏覽下面的文章進(jìn)行學(xué)習(xí)哈！相信小編會(huì)給大家增添更多知識(shí),希望大家能夠支持一下億速云！