数极客首页

优雅地扩大链接响应区域

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

实例一:一张图配一个链接。

优雅地扩大链接响应区域

常规的做法有以下几种:
第一种是最常规的,只有链接可点,但整张图不可点,点起来还蛮累的。
优雅地扩大链接响应区域

这样或许会优雅一些:
图片可点,鼠标移入图片上,鼠标变手型的同时文本链接变为hover状态。这样即有足够的链接响应区域,又有很好的交互一致性,暗示用户点图和点链接去的是同一个地方,如图所示:
优雅地扩大链接响应区域

实例二,可链接的标题配一段对标题的详细描述。

优雅地扩大链接响应区域

这样或许会优雅一些:
让详细描述响应点击,同时让hover效果出现在标题上。如图:
优雅地扩大链接响应区域

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

优雅地扩大链接响应区域

另外一些说明:

1、前端代码问题
虽然在html4中,作为inline属性的a只能在里面嵌套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标签包含的整个区域内,只响应链接了,文本拷贝比较麻烦点,需要在更大范围外进行拷贝。所以如果对拷贝文字有要求的模块,不适合采用这个方式。
3、这个方案有个附带的好处,因为整个模块只要一个链接,如果是个手工维护的模块,更新的时候很省事。

来源:http://ued.koubei.com/?p=1233

给大家推荐我国新一代大数据用户行为分析与数据智能平台:数极客(https://www.shujike.com),是支持无埋点、前端埋点、后端埋点、API导入四种混合数据采集方式,整合分析用户行为数据和业务数据,可以自动监测网站、APP、小程序等多种渠道推广效果分析,是增长黑客们必备的互联网数据分析软件。数极客支持实时多维分析、漏斗分析、留存分析、路径分析等十大数据分析方法以及APP数据分析网站统计网站分析小程序数据统计用户画像等应用场景,业内首创了六种提升转化率的数据分析模型,是用户行为分析领域首款应用定量分析与定性分析方法的数据分析产品

发表评论

评论已关闭。

相关文章