網(wǎng)頁制作Webjx文章簡介：淺議Wap網(wǎng)頁設(shè)計中的錨點鏈接，

Wap網(wǎng)頁設(shè)計技巧:關(guān)于錨點鏈接的心得

。

最近做了wap站中的搜索結(jié)果頁的改版，記錄一下關(guān)于錨點鏈接的心得~

關(guān)于錨點鏈接

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

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

·干擾用戶瀏覽頁面；

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

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

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



圖1 錨點鏈接的兩種應(yīng)用形式

目前對于錨點鏈接的應(yīng)用主要分為兩種（見圖1）：

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

·跳轉(zhuǎn)到頂部

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

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

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

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

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

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

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

圖2 功能區(qū)在頂部的焦點切換順序

優(yōu)點：利于重復(fù)篩選，

電腦資料

《Wap網(wǎng)頁設(shè)計技巧:關(guān)于錨點鏈接的心得》(https://www.)。如用戶想選“西湖區(qū)的吃喝”或者“杭州地區(qū)的商城”，先選擇其中一個條件，頁面刷新后，在頁面頂部再選擇另一個條件，會易于操作（如圖2）。

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

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

優(yōu)點：刷新頁面后，在頁面頂部用戶可以直達(dá)結(jié)果list；

缺點：重復(fù)篩選的成本會變得很高。刷新頁面后用戶必須要繞過結(jié)果list，到達(dá)頁面的底部去完成這些篩選操作（如圖3）。

圖3 功能區(qū)在底部的焦點切換順序

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

這次改版的宗旨：

在SERP頁面平衡list結(jié)果和 “篩選區(qū)”的優(yōu)先級（對于我們找商戶來說，前者高于后者）；

·盡量減少頁面刷新次數(shù)，所以不采用鏈接到一個新頁面的方式；

最后的優(yōu)化方法是（如圖4）：

·在搜索結(jié)果頁list上方加個錨點，當(dāng)用戶需要重新篩選時，鏈到篩選功能區(qū)。

·當(dāng)用戶不需要時，直接忽略這個焦點，到達(dá)結(jié)果list。

·為提升用戶跳轉(zhuǎn)后的方向感，將錨點入口處的視覺表現(xiàn)形式設(shè)計得同篩選功能區(qū)一樣。

圖4 搜索結(jié)果頁錨點鏈接的焦點切換順序

總結(jié)

在Wap網(wǎng)頁設(shè)計中，由于瀏覽器或者硬件方面的限制，運用錨點鏈接很有必要，同時也注意以下幾個點：

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

·搞清用戶在用錨點鏈接時的實際意圖，用含義明確的文案傳達(dá)出來

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