美文网首页翻译素材今日看点
【译】关于网页链接打开方式的一点想法

【译】关于网页链接打开方式的一点想法

作者: 光明奶人 | 来源:发表于2015-10-24 08:54 被阅读1254次

原文Nash Vail


在绝大多数情况下,如果一个用户界面像希区柯克的小说一样充满悬疑色彩,那它很可能会是一个笑话。一个好的用户界面设计师应该让用户很容易猜到接下来会发生什么,而不是为他们去制造“惊喜”。

当我在网页中想点击一个链接时,往往会犹豫,因为有时候我不想离开现在这个页面而打开一个新的标签页或者一个新的窗口。于是我每当我要在网页中点开一个链接时,我都会右键,选择打开新标签或者新窗口或者使用快捷键(按住Command点击链接, Windows用户按住Ctrl点击链接)。如此,我终于感觉我在界面中有点存在感了,但对我来说,我还是感觉这种方法过于粗暴了。

我们需要一个说明icon,当光标移至一个链接上的时候可以告诉用户这个链接(a)会在一个新的标签页打开,还是(b)一个新的窗口打开,或者是(c)当前页面打开。新窗口打开现在几乎很少见到了,但还是让我们把它视为一个选项。

猜猜我是a, b 还是c

先来做个小游戏,看看你能不能不借助以下文字说明,一眼就可以识别三个icon分别代表a,b,c哪一项?

公布答案,最左边的icon表示链接会打开一个新标签页,中间那个表示在新窗口打开,最右则表示会在当前页面打开。让我来解释一下最右边那个icon,大家可以注意下,前两个icon都有一个明显的箭头,而这个却唯独没有。事实上中间那个圆点就是那个箭头,只不过它正对着你,那它所表达的意思也显而易见了。

以下是三个icon的一些改版:

改版一

接下来我加强简化了三个icon,以圆形,三角形和正方形来分别表示当前页面,新标签和新窗口。

改版二:简化后的三个icon

那接下来的问题就是在哪里去放置这些icon呢?大家可以一起来想一下。在否定了一开始的几个想法后,我有了一个自觉不错的主意。当用户把光标移至链接上时,提示icon会出现,告诉用户这个链接会以何种方式打开。不仅如此,如果把光标移至提示icon上时,另外两个icon也会随之出现,提供给用户更多的链接打开方式,请看以下gif。

想法

我正在做一个与此相关的Chrome插件,并且已经放到GitHub上了。不知道你们是否和我一样,觉得这是一个值得探讨的问题,我很想听听你们的想法,欢迎在评论区留言。

感谢阅读!

P.S:原文作者,印度小伙 Nash Vail 正在寻求一份暑期实习,如果你或者你的朋友可以帮助到他,请邮件联系他 hello@nashvail.me

相关文章

  • 【译】关于网页链接打开方式的一点想法

    原文:Nash Vail 在绝大多数情况下,如果一个用户界面像希区柯克的小说一样充满悬疑色彩,那它很可能会是一个笑...

  • UX/UI设计工具的选择:对设计师的13条重要选择标准

    自译外文,资深设计师Tom Koszyk关于设计工具如何选择的13点建议。 原文链接多年之前,不管是做简单的网页,...

  • 关于网页爬虫的想法

    整体思考 分为如下三个模块:采集-过滤-存储。 各个模块相互独立,按照需求可定制开发,不同模块组装起来满足不同需求...

  • 不会找资源的进来

    2019网盘搜索网站整理 1、云盘精灵:网页链接 2、胖次:网页链接 3、盘窝窝:网页链接 4、西林街:网页链接 ...

  • clickjacking攻击解决方案

    介绍关于clickjacking: 在网页设计中,我们可能有过这样的想法, 在自己的网页中使用iframe嵌套别人...

  • 2015年8月最受欢迎iOS源码

    1.PullToBounceO网页链接 2.MaterialControlsO网页链接 MDTableViewCe...

  • 网页座席链接

    点击后进入如下界面 这模拟了一个客户公司网站,在您实际使用时点击箭头所示即可与座席人员交流。

  • 网页链接QQ

    tencent://message/?uin=1204667654&Site=QQ&Menu=no

  • 网页聊天链接

    登陆ppmessage后点击设置,下拉滚动条找到开发者设置框中网页聊天链接即图中所示 通过这个链接可以您的客服团队...

  • 网页知识链接

    1.免证书调试 http://blog.csdn.net/tht2009/article/details/4858...

网友评论

  • jzjz:感觉整个流程比较长,耗时会有点久。用户需注意到链接上的icon,光标移到icon上出现子级的icon+文字说明(默认是有文字说明的,因为用户第一次看有可能不明白这是要干啥,然后就不点了,或是要更长时间的考虑过程就更不流畅了),用户需要做一个文字与图形结合的理解。平时浏览,我喜欢弹出新窗口的模式,往往遇到不是这种模式的就会想,好不方便呀,要是做成弹出新窗口的就好了。而不是想,咋不在点链接的时候给我个选择呢。个人见解,还希望和大家多探讨。
    jzjz:@励逸洲 恩,看了原文,纵向设计确实清爽很多。其实在看到这个设计的时候,我心里也存在作者提到的这个问题 How do you train the meaning of the icons, or the behavior itself, to the end user?不过作者已在文中给了答案。
    因为我也是刚接触CEM这块,然后延展到UX这块的学习和了解。所以还有一个很门外汉的问题,纵向展示其实还蛮占空间的,如何解决链接在一段文字中时,光标的展示呢?是否移动到icon上时,纵向的列表直接覆盖那段区域的文字也是可以的,毕竟那时大家的注意力都聚焦在icon和说明上了
    光明奶人:@jzjz 是的,你说得很对,流程确实变长了。我昨天看到一篇基于这个想法的文章,作者建议将相对应的icon直接展示在链接旁边。此外,当光标移至icon的一定区域范围时,其它两个icons便会以纵向显示;若此时用户把光标移至其中一个icon时,相对应的文字也会在icon右侧展示,大大降低了学习成本。
    参考文章:https://medium.com/swlh/the-ux-of-links-taking-it-all-a-step-further-ce372cb31e29#.m23zup7m4
  • 18ce9f6925e6:插件怎么做的?
  • 羊羊丶You:感觉增加了信息量,对我的话用处也不算大
  • Jodoo:@励逸洲 很有趣且精致的思考,谢谢你的分享。
  • cdaa5be75d3a:没差啊
  • 38bacd3ea33e:你这和右键出菜单不是一样。。。
    光明奶人:@dashijuezihot 只是一种新的交互方式的尝试,算是抛砖引玉,未来或许有更多实用有趣的设计由此而生呢:)
  • 知行旅人:没觉得,还不是别让用户去选择了
  • LostAbaddon:原版和改版一的三个ICON和它们所对应的打开方式还是可以一目了然地联想到的,但简化后的改版二就没有那么直观了,所以反而不好。

本文标题:【译】关于网页链接打开方式的一点想法

本文链接:https://www.haomeiwen.com/subject/xigthttx.html