合理地扩大页面链接响应区域

流年划过指尖▲

流年划过指尖▲

2016-02-17 03:39

想不想get新技能酷炫一下,今天图老师小编就跟大家分享个简单的合理地扩大页面链接响应区域教程,一起来看看吧!超容易上手~

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

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

合理地扩大页面链接响应区域,PS教程,图老师教程网

常规的做法有以下几种:

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

合理地扩大页面链接响应区域,PS教程,图老师教程网

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

合理地扩大页面链接响应区域,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/pmsj/)

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

这样或许会优雅一些:

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

合理地扩大页面链接响应区域,PS教程,图老师教程网

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

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/pmsj/)

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

合理地扩大页面链接响应区域,PS教程,图老师教程网

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

这样或许会优雅一些:

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

合理地扩大页面链接响应区域,PS教程,图老师教程网

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

合理地扩大页面链接响应区域,PS教程,图老师教程网

合理地扩大页面链接响应区域,PS教程,图老师教程网

合理地扩大页面链接响应区域,PS教程,图老师教程网

另外一些说明:

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、这个方案有个附带的好处,因为整个模块只要一个链接,如果是个手工维护的模块,更新的时候很省事。

参与讨论

展开更多 50%)
分享

猜你喜欢

合理地扩大页面链接响应区域

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
合理地扩大页面链接响应区域

教孩子合理地宣泄怒气

孩子
教孩子合理地宣泄怒气

什么是极简主义 如何打造极简风格家居

家居设计 装修设计
什么是极简主义 如何打造极简风格家居

如何合理地使用环磷酰胺

生活常识 养生 健康
如何合理地使用环磷酰胺

产后乳腺癌可自查 合理地进行预防

设计创意
产后乳腺癌可自查 合理地进行预防

2017榻榻米书房设计装修效果图 榻榻米书房设计图片

榻榻米 书房 装修设计 书房设计 平面设计
2017榻榻米书房设计装修效果图 榻榻米书房设计图片

减肥过快有损健康 科学合理地减肥才是关键

减肥知识 减肥 健康减肥 减肥秘籍
减肥过快有损健康 科学合理地减肥才是关键

word编辑区域怎么扩大?

word
word编辑区域怎么扩大?

2017春夏女装风衣外套流行趋势

服装设计 平面设计 设计 服装搭配
2017春夏女装风衣外套流行趋势

Fackbook的群组功能产品设计

Fackbook的群组功能产品设计

字体图形化在设计中的应用

字体图形化在设计中的应用
下拉加载更多内容 ↓