最近做了wap站中的搜索結(jié)果頁(yè)的改版，記錄一下關(guān)于錨點(diǎn)鏈接的心得~
錨點(diǎn)鏈接一般用于比較長(zhǎng)的網(wǎng)頁(yè)，使用內(nèi)部鏈接建立頁(yè)內(nèi)目錄。單擊目錄跳轉(zhuǎn)到文本的相應(yīng)位置，最常見(jiàn)的如“回頂部、模塊間跳轉(zhuǎn)”等。
關(guān)于錨點(diǎn)鏈接，可用性研究的宗師Jakob Nielsen寫過(guò)一篇名為Avoid Within-Page Links的文章，排斥錨點(diǎn)鏈接，認(rèn)為它有害頁(yè)面健康，最典型的例子是“返回頂部”，反對(duì)原因大致可歸納為：
·干擾用戶瀏覽頁(yè)面；
·認(rèn)為沒(méi)有必要，瀏覽器或鍵盤足以完成此功能；
·操作結(jié)果不明確，用戶對(duì)“頂部”認(rèn)知不固定；
對(duì)于手機(jī)端WAP頁(yè)而言，由于很多手機(jī)不支持腳本，因此很多時(shí)候只能寄期望于用戶的瀏覽器有快速跳轉(zhuǎn)功能。而對(duì)于按鍵機(jī)，焦點(diǎn)跳轉(zhuǎn)就會(huì)相當(dāng)痛苦?，F(xiàn)在好多wap已嘗試使用錨點(diǎn)鏈接，比如一些資訊類網(wǎng)站，這類網(wǎng)站信息量很大，頁(yè)面很長(zhǎng)，錨點(diǎn)鏈接的必要性由此被深刻體現(xiàn)。
???
圖1 錨點(diǎn)鏈接的兩種應(yīng)用形式
目前對(duì)于錨點(diǎn)鏈接的應(yīng)用主要分為兩種（見(jiàn)圖1）：
·模塊間快速跳轉(zhuǎn)
·跳轉(zhuǎn)到頂部
優(yōu)點(diǎn)：·頁(yè)面過(guò)長(zhǎng)，這種快速跳轉(zhuǎn)可減少按鍵做功
缺點(diǎn)：·目標(biāo)位置傳達(dá)得不明顯，用戶不能預(yù)期跳轉(zhuǎn)后焦點(diǎn)位置落到哪；
·受手機(jī)屏幕大小的限制，用戶無(wú)法了解全局，跳轉(zhuǎn)后會(huì)失去方向感；
同樣，對(duì)于搜索結(jié)果頁(yè)面來(lái)說(shuō)，由于向用戶呈現(xiàn)了多條結(jié)果list，頁(yè)面也會(huì)很長(zhǎng)，因此適當(dāng)?shù)剡\(yùn)用錨點(diǎn)鏈接會(huì)減輕用戶的操作負(fù)擔(dān)。
一般來(lái)說(shuō)，功能區(qū)在搜索結(jié)果頁(yè)面的位置有兩種情況：在搜索結(jié)果list的頂部、在搜索結(jié)果list的底部，以下分別對(duì)兩種情況的利弊作分析。
1功能區(qū)在搜索結(jié)果list的頂部
圖2 功能區(qū)在頂部的焦點(diǎn)切換順序
優(yōu)點(diǎn)：利于重復(fù)篩選。如用戶想選“西湖區(qū)的吃喝”或者“杭州地區(qū)的商城”，先選擇其中一個(gè)條件，頁(yè)面刷新后，在頁(yè)面頂部再選 擇另一個(gè)條件，會(huì)易于操作（如圖2）。
缺點(diǎn)：每次頁(yè)面刷新后焦點(diǎn)都會(huì)停在頁(yè)面的第一個(gè)鏈接。用戶想到達(dá)搜索list,要走一條漫長(zhǎng)的路（如圖2）。此時(shí)只能寄望于瀏覽器本身對(duì)鏈接焦點(diǎn)的執(zhí)行順序，結(jié)果非常不可控（很多手機(jī)不支持快速跳轉(zhuǎn)，另外，并不是所有的用戶此功能都十分了解）。
2功能區(qū)在搜索結(jié)果list的底部
優(yōu)點(diǎn)：刷新頁(yè)面后，在頁(yè)面頂部用戶可以直達(dá)結(jié)果list；
缺點(diǎn)：重復(fù)篩選的成本會(huì)變得很高。刷新頁(yè)面后用戶必須要繞過(guò)結(jié)果list，到達(dá)頁(yè)面的底部去完成這些篩選操作（如圖3）。
圖3 功能區(qū)在底部的焦點(diǎn)切換順序
這次改版的宗旨：
在SERP頁(yè)面平衡list結(jié)果和 “篩選區(qū)”的優(yōu)先級(jí)（對(duì)于我們找商戶來(lái)說(shuō)，前者高于后者）；
·盡量減少頁(yè)面刷新次數(shù)，所以不采用鏈接到一個(gè)新頁(yè)面的方式；
最后的優(yōu)化方法是（如圖4）：
·在搜索結(jié)果頁(yè)list上方加個(gè)錨點(diǎn)，當(dāng)用戶需要重新篩選時(shí)，鏈到篩選功能區(qū)。
·當(dāng)用戶不需要時(shí)，直接忽略這個(gè)焦點(diǎn)，到達(dá)結(jié)果list。
·為提升用戶跳轉(zhuǎn)后的方向感，將錨點(diǎn)入口處的視覺(jué)表現(xiàn)形式設(shè)計(jì)得同篩選功能區(qū)一樣。
圖4 搜索結(jié)果頁(yè)錨點(diǎn)鏈接的焦點(diǎn)切換順序
在Wap網(wǎng)頁(yè)設(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á)出來(lái)
·為提升跳轉(zhuǎn)后的方向感，可統(tǒng)一錨點(diǎn)位置和目標(biāo)位置的視覺(jué)表現(xiàn)形式