快好知 kuaihz

优雅地扩大链接响应区域

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

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

常规的做法有以下几种:

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

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

第三种是弄两链接,文本链接之外,图本身再配个链接。这个比以上两种都好一些,但仍然不够理想,因为两个链接的交互一致性不够,用户对点图和点链接是不是去同一个地方会存在疑虑。

这样或许会优雅一些:

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

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

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

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

这样或许会优雅一些:

让详细描述响应点击,同时让hover效果出现在标题上。如图:

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

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:优雅地扩大链接响应区域  响应  响应词条  优雅  优雅词条  扩大  扩大词条  区域  区域词条  链接  链接词条  
设计

 互联网产品的三层网络模型

互联网本身赋予了互联网产品三个重要的特点,联接、交互和结网。这三点使得网络图变得越来越复杂,而理解复杂网络的钥匙就是网络的通讯协议。那一起从文章中看看互联网产品...(展开)

设计

 微信系列(1):浅析记录功能

本文作者将要通过一个系列来聊一聊微信的一些缺点。当然,这些缺点很多大家都深有感触,只是微信一直不愿意改而已。今天的这篇,讨论的是关于微信聊天记录。如果说在移动时...(展开)