delphi中webbrowse控件中模拟点击文本超链接_超全面交互设计控件指南之——链接...

ae90d198cc52843f805f5e0eb13850c5.png

链接可以说是使用频率最高的交互控件了,因为我们每天都使用它在各种互联网信息中跳转。这也解释了为什么Tim Berners-Lee形容早期的网页由文档和链接组成。

今天的文章将会和大家讨论怎么设计出可用性高的链接。

四种链接类型

根据链接的使用场景,我们可以将链接分为四类:

  1. 导航链接/超链接通常被用于实现网页间的跳转,并没有发起新的任务。
  2. 命令链接/文字按钮与第一种类型不同,它们会发行新的任务。常常使用在次要的操作上。
  3. 帮助链接用于解释用户不熟悉的专有词汇。
  4. 主页链接(Logol链接)让用户可以很快的回到网站首页,已经演变成为网站必有的功能。

45ea27ea7cb0632a300349f942904445.png

使用按钮还是链接?

在互联网的初期,按钮和链接有着明显的差别:

按钮通常被用于应用软件。通过按下按钮,用户能发起新的操作从而更改后台。而链接更多的被用来实现网页间的导航和跳转。

但是如今随着网页功能变得越来越复杂,这种差别也已经越来越不明显了。你可以看到很多网站使用链接来开始一个操作,或者是使用按钮来实现跳转。

链接的3个交互状态

  1. 正常状态
  2. 悬浮状态
  3. 已访问状态

a6863534bbcd2beb3eb884ccd3d1b6dd.png

链接设计的最佳实践

视觉

  1. 无论你选择四种链接中的哪一种,都要在视觉上体现出链接的可点击性。一个传统的视觉表达是使用蓝色的带有下划线的文本。即便在2014Google取消了链接的下划线取,这也是安全的选择。如果你是为分类广告的网站做设计,你也可以不用遵循这一原则,因为用户在访问这类网站时已经预想到所有的文本都是可以点击的,并且会连接到其他的网站。
  2. 区分未访问和已访问链接的样式。这样做可以避免用户一直不停的访问他们已经访问过的页面。

文本

对于一个成功的链接设计而言,视觉上体现出可点击性只完成了一半的工作。链接的文本也起着关键性的作用。链接的文本需要让用户清楚点击以后会发生什么,就算在脱离前后文的情况下也链接文本也需要合理。

吸引点击率的一个重要因素是链接文本的质量 —— Nielsen Norman Group

有视力障碍用户的使用行为也影响着我们如何编写链接文本。阅读器可以跳过链接之间的文本直接提取出链接列表,并且能将列表按首字母排序。

  1. 链接文本需要明确的指出链接的去处,或者能帮助用户预测他们在点击链接后会看到什么内容,开始什么任务。
  2. 链接文本在脱离前后文的情况下也要合理
  3. 前置关键性的文字。在由Nielsen Norman Group开展的一项眼动研究中,他们发现用户更多的只看链接的前两个字。
  4. 避免使用不清晰或者通用的链接文本,比如说”点击这里“或者“更多”。通用化的文本一般都没有明确告诉用户接下来会发生什么。而且如果页面上有多个文本一样的链接,用户也会迷惑这些链接是不是都会跳转至同一个页面。对于视力障碍的用户也不友好。
  5. 对于一些常用的功能来说,跟从惯例是最好的方法。这将会帮助使用阅读器的用户更快的找到他们需要的链接。比如说使用”联系我们“而不是“如何联系我们”。

链接是否打开新窗口?看情况

新的链接是否要在新的窗口中打开,这一直是个争执不断的话题。其实大部分网页并没有在新窗口中打开链接,除非是以下的情况:

  1. 新的链接会打断用户当前的任务进度。
  2. 新的链接会打开其他类型的文档,比如说PDF文件。

链接设计的走查清单

当你在设计链接的时候,可以根据下面的走查清单来保证你所设计的链接符合大部分用户的预期:

视觉

  1. 链接是不是明显可点击?
  2. 对不同的交互状态,链接是不是有视觉反馈:正常鼠标悬浮已访问
  3. 链接的样式是不是统一贯穿了整个网站/应用?

文本

  1. 文本是否清楚告诉用户点击后会发生什么?
  2. 用户能否明白每个链接就算脱离前后文?
  3. 是否避免使用通用的文本,比如说“点击这里”或者“阅读更多”?
  4. 链接文本是否以关键字开头?

行为

  1. 链接是否遵循了只有在新链接会打断用户当前进度才在新窗口中打开的惯例?
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值