位置：首页>> 网络编程>> 网页设计>> 可用性研究：为文字链接扩大可点击区域

可用性研究：为文字链接扩大可点击区域

作者：暴风彬彬　来源：chinaz　发布时间：2008-09-18 18:23:00　

标签：文字链接,链接,用户体验

今天暴风彬彬要讨论的网站可用 * ，是让你的网站文字链接提高一定的可用性，而且实现起来非常简单，其实这也算是提高用户体验的方法。扩大可点击区域并不是要让你的文字链接占用其他可用资源或增加文字链接的数量。其实很多问题不用暴风彬彬说得很详细，因为现在很多网站（尤其国内）根本没有考虑到文字链接的可用性问题。下面就来看看如何通过设置块级元素（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代码就可以实现，那为什么不去实施呢？记住，网站的用户会明白你为网站所做的每一个细节的。

你的看法如何？是否会给自己的网站文字链接扩大可点击区域呢？欢迎给暴风彬彬留言一同交流。

投稿

可用性研究：为文字链接扩大可点击区域

猜你喜欢