当前位置:首页 > 经验学习 > 用户体验

优雅地扩大链接响应区域

所属栏目:用户体验 时间:2013-12-26 来源: 作者:不详 点击:

合理地扩大页面链接响应区域可以提高网页的易用性。同时还要兼顾到链接的交互一致性以及视觉上的平衡,就需要做一些特殊的处理。
实例一:yi(一)张图配一个链接。

常规的做法有以下几种:
第一种是最常规的,只有链接可点,但整张图不可点,点起来还蛮累的。

第二种是把整张图作为一个链jie(接),链接响应区域是够大,但其实那个链接就比较尴尬,不够优雅。

第三种是弄两链接,文本链接之外,图本身再配个链接。这个比以上两种都好一些,但仍然不够li(理)想,因为两个链接的交互一致性不够,用户对点图和点链接是不是去同一个地方会存在疑虑。
这样或许会优雅一些:
图片可点,鼠标移入图片上,鼠标变手型的同时文本链接变为hover状态。这样即有足够的链接响应区域,又有很好的交互一致性,暗示用户点图和点链接去的是同一个地方,如图所示:

前端代码角度上,就是把链接a标签包住整个图,那段文字用其他标签表示,比如span,再定义a的hover状态下,把span变成链接色,并加上下划线,来模拟hover效果。
实例二,可链接的标题配一段对标题的详细描述。

在这个例子中,视觉角度来看,一片文字需要主次清晰,所以链接色只加在了标题上。那么详xi(细)描述部分该不该响应点击呢?非链接色出hover效果会不会有点怪呢?即使决定这儿可以链接,那hover效果导致出现大片的hover色和多行下划线,视觉设计师会gen(跟)你急吧。
这样或许会优雅一些:
让详细描述响应点击,同时让hover效果出现在标题上。如图:

还有更复杂的模块,可以套用zhe(zhe(这))个方式来做,比如下面这个例子:



另外一些说明:
1、前端代码问题
虽ran(然)在html4中,作为inline属性的a只能在里Mian(面)嵌套inline的标签,可以看下XHTML1.1标签列表、属性和嵌套规则(抱歉未找到HTML4的,它们类似)。但在html5中,语法定义者扩大了它的嵌套能力,我们可以用a把各种block标签统统包进来。详见html5中对a的特别说明:http://www.w3.org/TR/2010/WD-html5-20100304/text-level-semantics.html#the-a-element (感谢钨龙提供资料)。毕竟HTML5还处于草案阶段,这种嵌套方式,还是偶尔会出现一些对链接的浏览器渲染问题,但目前还未发现出错规律。
2、a标签包含的整个区域内,只响应链接了,文本拷贝比较麻烦点,需要在更大范围外进行拷贝。所以如guo(果)对拷贝文字有要求的模块,不适合采用这个方式。
3、这个方案有个附带的好处,因为整个模块只要一个链接,如果是个手工维护的模块,更新的时候很省事。
来源:http://ued.koubei.com/?p=1233

请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

坚持免积分、免登录、无任何限制下载!如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

标签:

你应该也喜欢这些吧

共有 0 条评论

给个评价吧

验证码: