可点击性设计

制作 可点击的东西只有一个目的，让人们点击它们。然而，很多时候，设计器无法使链接或按钮看起来可单击。事实上,虽然这看起来很简单，很多网站都错了。

想象一下，你有一个旅游业的附属网站。你写的漂亮的文章生动地描述了人们可以在异国他乡度假的地方。在文本中撒上你与旅行社的附属链接，以防你不知道对推荐的客户有相当好的回扣，从而导致销售。
怎么办？

你不必把它带到可用性专家雅各布·尼尔森那里，他无耻地宣称链接应该是蓝色和下划线的（这些链接在他的网站上）使用网站顺便说一下)。我不想把这个问题推得那么远(即使这个网站上的链接是蓝色和下划线的)，但是一定要确保你的链接与其他文本的链接不同。

你最保险的做法可能就是画下划线。它承载着非常强大的功能可见性对于可点击性(查看快速事实部分以获得更多关于可视性的信息)。但是你也可以用不同的颜色，不同的背景颜色和/或以其他方式设计的样式。只需确保它们在文本的其余部分中脱颖而出。

注意:由于加下划线的文本对网络链接的负担如此之大，您应该确保所有带下划线的内容都是可点击的。即。不要为了强调而在文本下划线。

说明色盲

别忘了大约8%的男性是色盲。因此，有一些不仅仅是颜色来区分链接是一个好主意。

不仅仅是文本链接

同样的想法也适用于其他可点击的东西，比如按钮，复选框，选择列表，图像等。确保这些看起来也可以点击。

按钮，可以使他们看起来像物理按钮与三维效果。这使得它们从页面中脱颖而出，看起来更像物理对象。

提供线索

当用户将光标移动到对象上时，还要确保提供其他线索。例如，光标本身可以变为具有很强的可点击性的指针。默认情况下，浏览器中的链接会发生这种情况，但您也可以使用一些CSS在其他可单击元素上创建这种效果。

另一个好主意是当可点击对象悬停时，让它自身发生一些事情。一个常见的线索是改变背景颜色。这很容易通过:徘徊CSS中的伪类。

.click -item:hover{光标:指针;background - color: # ff9;}

适应键盘

有些人出于某种原因喜欢使用键盘而不是鼠标。在提供线索时，不要忘记考虑到这一点。只需轻敲tab键，键盘就可以轻松访问链接和表单元素。为了让用户知道当前哪个元素有焦点，大多数浏览器都会在元素周围创建一个虚线轮廓。

这是一个相当好的负担，但你可以说得更清楚。我经常做的一件简单的事就是把它做成和上面一样的样式:徘徊。这很容易通过使用CSS完成聚焦pseudoselector。

。可点击项：悬停，.可点击项：焦点光标：指针；background - color: # ff9;}

提示：如果你不喜欢虚线，你可以通过设置概述到没有人在CSS中。

别忘了为触摸设计

在触摸设备上没有悬停之类的东西。因此，让可点击的对象看起来像可点击的对象是非常重要的。你还想让点击区域更大以适应脂肪指综合症，但这是另一篇文章的主题。

快速事实

功能可见性

唐纳德·诺曼在他的开创性著作中普及了“负担”一词。日常事物的心理学。他后来把这个词改为从功能可见性因为太多人误解了他的意思。（实际上，他最新的任期是极大的可能性但这一术语还没有获得太大的吸引力）

可预见的启示是我们仅通过观察就能理解的对象的属性。例如，门把手与它可以被抓住和转动的形状进行通信。以同样的方式，我们可以，只要看一把剪刀，看那两个“洞”的形状看起来你可以把拇指和手放在某个地方。

门把手可以抓取和转动，剪刀可以把手插进洞里。同样，一个带下划线的链接和一个凸起的按钮提供点击（或触摸）。

参考文献

在线的

• 可视化链接的指南
• 唐·诺曼关于负担

注意:这篇文章是对这篇文章的改写让可点击的东西看起来可点击我以前发表过的代码绘制蓝图。