设计协作,用摹客

更好的产品协作设计平台,设计师的利器,产品经理的帮手,工程师的伙伴

文章分类
设计1+2,摹客就够了!

摹客,支持Sketch/PS/XD/Figma/Axure设计稿交付、自动标注切图、全流程协作。助力产品团队高效工作!

立即开启
【友情推荐】uimaker - 专注于ui设计,为ui设计师提供ui设计相关教程、素材及灵感。

了解更多
入门教程 了解更多
成都君德鑫力达科技发展有限公司

分享到微信朋友圈:

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

博客 > 产品设计 > 【经验之谈】用户体验之如何设计网页链接打开方式

【经验之谈】用户体验之如何设计网页链接打开方式

Nash Vail
2015-10-26
79141

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

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

感谢阅读!


上一篇
从使用者的角度看目前手机通讯录功能

@蒜苗聪   10/27

移动端文本输入框的设计探索

江南掌勺 翻译   10/25

下一篇
需要帮助?

我是小摹,你的7*12小时产品顾问

立即扫码加入官方微信群

官方热线:19130671449

服务邮箱:service@jongde.com