邮箱订阅

订阅即可免费获取优质的设计资讯!

邮箱订阅

感谢你的支持!

分享到微信朋友圈:

Close

打开微信,点击底部的“发现”,使用 “扫一扫” 即可将网页分享到我的朋友圈。

Mockplus是什么?

更快更简单的原型设计工具,微软、联合国国贸中心、华为、东软、育碧、中石油、Oracle、西门子、IBM都在用,你呢?

开始使用

2019,都在用 iDoc了!

更高效的协作设计工具,产品团队必备。智能标注、一键切图、多样批注、交互原型、全貌画板、团队管理。

免费使用

【友情推荐】人人秀,H5活动制作工具,3分钟完成制作。

了解更多

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

Nash Vail 2015-10-26 19:11:20 阅读:25414 www.jianshu.com

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

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

当我在网页中想点击一个链接时,往往会犹豫,因为有时候我不想离开现在这个页面而打开一个新的标签页或者一个新的窗口。于是我每当我要在网页中点开一个链接时,我都会右键,选择打开新标签或者新窗口或者使用快捷键(按住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上了。不知道你们是否和我一样,觉得这是一个值得探讨的问题,我很想听听你们的想法,欢迎在评论区留言。

感谢阅读!


原型工具难上手、速度慢?试试Mockplus!

_____

Mockplus,更快更简单的原型设计工具。快速创建原型,一键拖拽创建交互,团队协作省事省力。微软、华为、东软、育碧、Oracle、西门子、IBM等全球知名企业和全球300多所高校都在用,你也可以免费开始你的设计!

免费下载
logo

咨询客服

帮助群:813815974 加入QQ群

服务邮箱:service@jongde.com

咨询客服

在线客服

置顶