最近做了wap站中的搜索结果页的改版，记录一下关于锚点链接的心得~

关于锚点链接

锚点链接一般用于比较长的网页，使用内部链接建立页内目录。单击目录跳转到文本的相应位置，最常见的如“回顶部、模块间跳转”等。

关于锚点链接，可用性研究的宗师Jakob Nielsen写过一篇名为Avoid Within-Page Links的文章，排斥锚点链接，认为它有害页面健康，最典型的例子是“返回顶部”，反对原因大致可归纳为：

・干扰用户浏览页面；

・认为没有必要，浏览器或键盘足以完成此功能；

・操作结果不明确，用户对“顶部”认知不固定；

对于手机端WAP页而言，由于很多手机不支持脚本，因此很多时候只能寄期望于用户的浏览器有快速跳转功能。而对于按键机，焦点跳转就会相当痛苦。现在好多wap已尝试使用锚点链接，比如一些资讯类网站，这类网站信息量很大，页面很长，锚点链接的必要性由此被深刻体现。



图1 锚点链接的两种应用形式

目前对于锚点链接的应用主要分为两种（见图1）：

・模块间快速跳转

・跳转到顶部

优点：・页面过长，这种快速跳转可减少按键做功

缺点：・目标位置传达得不明显，用户不能预期跳转后焦点位置落到哪；

・受手机屏幕大小的限制，用户无法了解全局，跳转后会失去方向感；

同样，对于搜索结果页面来说，由于向用户呈现了多条结果list，页面也会很长，因此适当地运用锚点链接会减轻用户的操作负担。

锚点链接在搜索结果页面的应用

一般来说，功能区在搜索结果页面的位置有两种情况：在搜索结果list的顶部、在搜索结果list的底部，以下分别对两种情况的利弊作分析。

1功能区在搜索结果list的顶部

图2 功能区在顶部的焦点切换顺序

优点：利于重复筛选。如用户想选“西湖区的吃喝”或者“杭州地区的商城”，先选择其中一个条件，页面刷新后，在页面顶部再选  择另一个条件，会易于操作（如图2）。

缺点：每次页面刷新后焦点都会停在页面的第一个链接。用户想到达搜索list,要走一条漫长的路（如图2）。此时只能寄望于手机本身对链接焦点的执行顺序，结果非常不可控（很多手机不支持快速跳转，另外，并不是所有的用户此功能都十分了解）。

2功能区在搜索结果list的底部

优点：刷新页面后，在页面顶部用户可以直达结果list；

缺点：重复筛选的成本会变得很高。刷新页面后用户必须要绕过结果list，到达页面的底部去完成这些筛选操作（如图3）。

图3 功能区在底部的焦点切换顺序

在SERP页面如何平衡功能和结果

这次改版的宗旨：

在SERP页面平衡list结果和 “筛选区”的优先级（对于我们找商户来说，前者高于后者）；
・尽量减少页面刷新次数，所以不采用链接到一个新页面的方式；

最后的优化方法是（如图4）：

・在搜索结果页list上方加个锚点，当用户需要重新筛选时，链到筛选功能区。
・当用户不需要时，直接忽略这个焦点，到达结果list。
・为提升用户跳转后的方向感，将锚点入口处的视觉表现形式设计得同筛选功能区一样。

图4 搜索结果页锚点链接的焦点切换顺序

总结

在Wap网页设计中，由于浏览器或者硬件方面的限制，运用锚点链接很有必要，同时也注意以下几个点：

・平衡搜索结果和功能区对用户的重要性，在适当的位置放出锚点链接

・搞清用户在用锚点链接时的实际意图，用含义明确的文案传达出来

・为提升跳转后的方向感，可统一锚点位置和目标位置的视觉表现形式

建议继续学习：

1. 解决IOS点击链接触发的颜色块    (阅读：3440)
2. WAP开发网站需要使用到的软件    (阅读：2826)
3. 如何获取用户访问过哪些网站    (阅读：2834)
4. unix文件系统：链接与文件    (阅读：2766)
5. 优雅地扩大链接响应区域    (阅读：2520)
6. html中链接地址的重要性    (阅读：2411)
7. Linux程序链接时-lpthread对程序正确性的影响    (阅读：2456)
8. 小屏幕移动设备网页设计注意事项    (阅读：2022)
9. 链轮策略：LinkWheel    (阅读：1775)
10. 最应该规范设计的元素――链接    (阅读：1672)