浅议Wap网页设计中的锚点链接
2019-03-18 05:49:17来源: 口碑网UED Team,ued.koubei.com 阅读 ()
最近做了wap站中的搜索结果页的改版,记录一下关于锚点链接的心得~
关于锚点链接
锚点链接一般用于比较长的网页,使用内部链接建立页内目录。单击目录跳转到文本的相应位置,最常见的如“回顶部、模块间跳转”等。
关于锚点链接,可用性研究的宗师Jakob Nielsen写过一篇名为Avoid Within-Page Links的文章,排斥锚点链接,认为它有害页面健康,最典型的例子是“返回顶部”,反对原因大致可归纳为:
1.干扰用户浏览页面;
2.认为没有必要,浏览器或键盘足以完成此功能;
3.操作结果不明确,用户对“顶部”认知不固定;
对于手机端WAP页而言,由于很多手机不支持脚本,因此很多时候只能寄期望于用户的浏览器有快速跳转功能。而对于按键机,焦点跳转就会相当痛苦。现在好多wap已尝试使用锚点链接,比如一些资讯类网站,这类网站信息量很大,页面很长,锚点链接的必要性由此被深刻体现。
图1 锚点链接的两种应用形式
目前对于锚点链接的应用主要分为两种(见图1):
1.模块间快速跳转
2.跳转到顶部
优点:页面过长,这种快速跳转可减少按键做功
缺点:目标位置传达得不明显,用户不能预期跳转后焦点位置落到哪;
3. 受手机屏幕大小的限制,用户无法了解全局,跳转后会失去方向感;
同样,对于搜索结果页面来说,由于向用户呈现了多条结果list,页面也会很长,因此适当地运用锚点链接会减轻用户的操作负担。
锚点链接在搜索结果页面的应用
一般来说,功能区在搜索结果页面的位置有两种情况:在搜索结果list的顶部、在搜索结果list的底部,以下分别对两种情况的利弊作分析。
1.功能区在搜索结果list的顶部
图2 功能区在顶部的焦点切换顺序
优点:利于重复筛选。如用户想选“西湖区的吃喝”或者“杭州地区的商城”,先选择其中一个条件,页面刷新后,在页面顶部再选 择另一个条件,会易于操作(如图2)。
缺点:每次页面刷新后焦点都会停在页面的第一个链接。用户想到达搜索list,要走一条漫长的路(如图2)。此时只能寄望于手机本身对链接焦点的执行顺序,结果非常不可控(很多手机不支持快速跳转,另外,并不是所有的用户此功能都十分了解)。
2.功能区在搜索结果list的底部
优点:刷新页面后,在页面顶部用户可以直达结果list;
缺点:重复筛选的成本会变得很高。刷新页面后用户必须要绕过结果list,到达页面的底部去完成这些筛选操作(如图3)。
图3 功能区在底部的焦点切换顺序
在SERP页面如何平衡功能和结果
这次改版的宗旨:
在SERP页面平衡list结果和 “筛选区”的优先级(对于我们找商户来说,前者高于后者);
尽量减少页面刷新次数,所以不采用链接到一个新页面的方式;最后的优化方法是(如图4):
在搜索结果页list上方加个锚点,当用户需要重新筛选时,链到筛选功能区。
当用户不需要时,直接忽略这个焦点,到达结果list。
为提升用户跳转后的方向感,将锚点入口处的视觉表现形式设计得同筛选功能区一样。
图4 搜索结果页锚点链接的焦点切换顺序
总结
在Wap网页设计中,由于浏览器或者硬件方面的限制,运用锚点链接很有必要,同时也注意以下几个点:
1.平衡搜索结果和功能区对用户的重要性,在适当的位置放出锚点链接
2.搞清用户在用锚点链接时的实际意图,用含义明确的文案传达出来
3.为提升跳转后的方向感,可统一锚点位置和目标位置的视觉表现形式
原文:http://ued.koubei.com/?p=1309
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
下一篇:站长应当如何保持一个良好的心态?
- 23款网页设计师必备经典私藏英文字体 2019-04-10
- 2018年,六大网页设计流行趋势预测 2019-04-10
- iPhoneX响应式网页设计 2019-04-10
- 手机网站建设如何使用分屏网页设计手法 2019-04-10
- 移动端网页设计如何打造优秀小屏用户体验 2019-04-10
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash