Wap网页设计技巧:关于锚点链接的心得

网页制作Webjx文章简介:浅议Wap网页设计中的锚点链接。

最近做了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网页设计中,由于浏览器或者硬件方面的限制,运用锚点链接很有必要,同时也注意以下几个点:

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

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

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

时间: 2024-10-24 04:39:48

Wap网页设计技巧:关于锚点链接的心得的相关文章

Wap网页设计中的锚点链接

关于锚点链接 锚点链接一般用于比较长的网页,使用内部链接建立页内目录.单击目录跳转到文本的相应位置,最常见的如"回顶部.模块间跳转"等. 关于锚点链接,可用性研究的宗师jakob nielsen写过一篇名为avoid within-page links的文章,排斥锚点链接,认为它有害页面健康,最典型的例子是"返回顶部",反对原因大致可归纳为: ·干扰用户浏览页面: ·认为没有必要,浏览器或键盘足以完成此功能: ·操作结果不明确,用户对"顶部"认知

浅议Wap网页设计中的锚点链接

最近做了wap站中的搜索结果页的改版,记录一下关于锚点链接的心得~ 关于锚点链接 锚点链接一般用于比较长的网页,使用http://www.aliyun.com/zixun/aggregation/8882.html">内部链接建立页内目录.单击目录跳转到文本的相应位置,最常见的如"回顶部.模块间跳转"等. 关于锚点链接,可用性研究的宗师Jakob Nielsen写过一篇名为Avoid Within-Page Links的文章,排斥锚点链接,认为它有害页面健康,最典型的例

登陆网页设计技巧深入分析

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 在前面"案例分析:高转换率的着陆网页设计技巧"内容,我和大家分享了高转换率着陆网页设计技巧,在本篇文章中,继续和大家一起分享登陆页面设计实践. 商业性较强的的主登陆页面,简单设置 诱惑性极强,给页面创意四射的激情,多步骤形式,细分网站观众,当场得到与游客视频对接六个设计技巧是高转换率着陆网页设计必须要达到的,这里补充四点.

CSS网页设计技巧:input按钮在IE浏览器的兼容问题

文章简介:CSS网页设计技巧:input按钮在IE浏览器的兼容问题. 这段时间在处理网页默认的input 按钮时,IE下常显现不一致的宽度问题,让人感到很纠结.所以今天请教了几位高手把这个问题解决了,现在贴出来和大家共享一下,当然这个方法在网上曾有人写过,大家可以一起来相互探讨一下. Html Code: <input type="submit"; class="form-submit" value="subscribe" name=&qu

网页设计技巧:创建网页背景材质的方法

文章描述:网页设计技巧:创建网页背景材质的方法. 在网页设计中创建背景材质通常是根据设计方向展开设计的第一步,也是确定设计基调的重要环节.虽然大多数情况下,网页背景材质是非常细微和低调的,但是由于整个背景的范围较大,所以会给人强烈的心理感受.所以这篇文章中,我会就网页背景材质创建过程中常用到的方法做一总结,希望对于大家在设计中的开头步骤能够给与帮助的参考. 一.使用现成的图案来创建网页背景材质. 1.下载现成的图案样式,或者自己动手创建图案,关于如何自己创建图案,之前我写的一篇文章<在Photo

网页设计技巧:特殊人群的设计关怀

文章描述:网页设计技巧:特殊人群的设计关怀.   2010年12月,Thomas应邀参加中国交互设计体验日大会,展开了一次主题为<特殊人群的设计关怀>的演讲.演讲主要介绍了在做产品设计时,公司对于特殊群体的一些考虑.以下是对这次演讲的现场记录: "盲人对QQ的依赖度非常高." 在正式演讲之前,想请大家看一段视频.大家可以看出这是个怎样的用户吗?是的,这是一位盲人.可能很多人会吃惊,盲人怎么可以使用QQ?其实盲人不光使用QQ,他们正在利用互联网的很多服务充实自己的生活.我们关

网页设计技巧:弹出网页窗口设计全攻略

攻略|技巧|设计|网页|网页设计 如何利用网页弹出各种形式的窗口,我想大家大多都是知道些的,但那种多种多样的弹出式窗口是怎么搞出来的,我们今天就来学习一下: 1.弹启一个全屏窗口 <html> <body >; <b>www.webjx.com</b> </body> </html> 2.弹启一个被F11化后的窗口 <html> <body >; <b>www.webjx.com</b>

网页设计技巧系列之文本排版

技巧|设计|网页|网页设计 太长时间没写文章了,主要是工作太忙.今晚上没睡着起来把这篇文章写了希望对初学者提供点帮助,同时也在此再次感谢曾经帮助过我的人与我所看书籍的作者们. 我们在做网页的时候会发现:自己画的图也不错,自己做的布局也很精致,做的图标也很漂亮,第一眼看起来都觉得很漂亮,但是看看就觉得不舒服,也不清楚为什么-- 这里我告诉你,也许就是你的排版出现问题了.页面排版不合理产生的视觉效果会让读者的眼睛产生的疲劳感,基本的毛病在于"字间距太挤或太宽"."行距太小或太大&

网页设计技巧:设计精美网页图标技巧

文章描述:满足四大要素!让网页设计中图标更有吸引力. 图标在网页设计中用途广泛,几乎每个网站中都存在着图标.通过这些小小的图标,可以方便的实现视觉引导和功能划分.如果选用恰当,图标能和页面中的图片有机融合,保持视觉上的一致性,同时也能够和整个网站的风格相契合.图标并不是华而不实的小玩意儿,小图标有大用处.在网页设计中,如果设计师并不擅长图标设计,那么就需要在图标选择上下功夫了. 一般来说,根据使用手法.使用场合的不同,一张图像可以有多种解读,图标亦如此.图标不但能够吸引用户的注意力,还能分割页面