首页涨停板正文

「集合竞价抓涨停」可用性研究：为文字链接扩大可点击区域

wx 2023-01-31 18:38:54 6

...

今日暴风彬彬要评论的站可用性技巧，是让你的站文字链接进步必定的可用性，并且完成起来十分简略，其实这也算是进步用户体会的办法。扩展可点击区域并不是要让你的文字链接占用其他可用资源或增加文字链接的数量。其实许多问题不必暴风彬彬说得很具体，由于现在许多站（特别国内）底子没有考虑到文字链接的可用性问题。下面就来看看怎么经过设置块级元素（block）和填充（padding）来完成扩展文字链接可点击区域吧。

首要品牌推行战略"，评论站可用性必定要找个比方，其实处处都是，但为了找个典型的，所以在这就以搜狐博客（刘翔）为例，其实搜狐的一切博客都有这种问题。在刘翔博客的右侧有个“老友”板块，其间便是文字链接，如下图：

咱们来剖析一下它有什么可用性问题：

1.链接在link状况和hover状况下都是粗体，问答营销计划"仅仅是改变了色彩罢了。这样会使一些区分色彩能力差的用户很难看出鼠标悬停时链接的改变。

主张：在link状况下不要运用粗体，hover状况下变成粗体；或link状况下不要下划线，hover状况下呈现下划线。引荐前者。

2.链接被设置为inline（内嵌），使得可点击区域过小。也便是说用户只需把鼠标移到文字上才干点击，这样显着降低了用户拜访站的功率。

第二点是咱们要着重的，下图展现了它的可点击区域：

可是咱们需求做的更具可用性。每个链接必定都会有一个父级元素，一般状况都是父级元素界说好了尺度，而链接仅仅一个inline（内嵌）元素。所以，咱们能够把链接的inline改成block（块），这样链接就会主动充溢它的父级元素。咱们期望的可点击区域如下图：

这样明显会使链接更快速便利的点击，由于用户鼠标的方针区域要大得多！用户会得到更好的点击体会。每个链接节约一点时刻，或许会让用户多阅读你的站上的几个页面哦！

其实这个作用完成起来很简略，只需将链接款式的disply特点从inline改成block，并恰当的增加填充（padding），下面是CSS代码示例：

.your_link{

display：block;

padding：10px;

}

假如想让作用更好些，那就为链接增加比父级元素背景色淡些或深些的背景色，这样能让用户更好的体会到能够点击一个区域而不是几个字：

.your_link：hover{{

background-color：#F2F2F2

}

假如你觉得在这个链接的区域内还有一些仅仅是静态文字方式的内容，比方发布日期或搜狐的这种链接描绘。解决办法有两种：第一种是把他们就放在a标签内，然后为它们前后增加span标签，并撤销hover款式。第二种是设置它们的z-index，并运用肯定或相对定位。其实，办法有许多，只需能让文字链接的点击区域扩展就能够了。

放眼望去整站优化公司"，国内的大大小小的站大都疏忽了这个可用性问题。其实只需增加那么两行CSS代码就能够完成，那为什么不去施行呢？记住，站的用户会理解你为站所做的每一个细节的。

你的观点怎么？是否会给自己的站文字链接扩展可点击区域呢？欢迎给暴风彬彬留言一起沟通。

感谢彬Go（blog.bingo929）暴风彬彬投递共享

，

内容来自:口碑营销蜓云koubei.tingclouds

本文地址：https://www.changhecl.com/249702.html