美文网首页UI/交互设计规范产品交互设计
译文 | Buttons 不应该用手型光标

译文 | Buttons 不应该用手型光标

作者: 瓦力UX | 来源:发表于2016-07-20 16:41 被阅读94次

    手型光标代表着可点击的,这几乎成为一个定理。然而,这个理论却不一定不正确。我希望读完本文之后,你再也不会在 buttons 上用手型光标了。

    手型光标并不意味着可点击

    毫无意外,浏览器从来不给 buttons(或其他元素)一个默认的手型光标,因为他们从来就没有那种意思。看下面的截图

    Chrome on Mac OS

    目录,tab切换,留白,浏览按钮,书签栏,谷歌输入框等等,几乎所有的元素都是可交互的、可点击的,但是,没有一个用手形光标。

    还有很多图上没有显示的可交互、可点击元素,包括可选目录,切换,复选框,单选框,标签,文字等等,同样没有用手型光标。

    在很多你没有用过的电脑系统上也出现了同样的情况。你可以在包括 Buttons 的一系列的元素上点击,拖动,选择,按压,左键点击,右键点击,然而 Buttons 在鼠标悬浮的时候却没有出现手型光标。

    “License Agreement” 是链接,用了手型光标. buttons 却没有.

    这带给我们的启示是,光标是不被注意的。要记住,光标仅仅在鼠标悬浮时才是可用的。

    这就是为什么多选框从来都不是圆形的(同样单选框从来不是方形的)的原因。同时,这也是为什么链接都带有下划线的原因,事实上也是链接用手型光标的原因。

    手型光标是链接专用的

    手形光标(也有可能是带下划线的文字)意味着链接。链接不是 buttons 。链接来自于网页,为了帮助用户了解它的特殊,它们用手形光标来表示。这是一个额外的规律。原因有以下几点:

    1.点击链接会打开一个网页或者资源;

    2.在电脑设备上,可以右键点击一个链接从而有更多的操作,比如在新窗口/标签页打开,保存链接,复制地址,加入阅读列表,加入书签等等,但是在buttons上却不能;

    3.在手机设备上,可以点击并按住一个链接,得到一个相似的上下文菜单;

    4.链接同时会告诉我,我可以去不同的页面而不用修改任何的数据或者做任何改变(然而buttons却可能会这样做)。

    总结

    当一个button有手型光标时,它其实是在暗示用户正在和链接进行交互,然而它却不是链接。如果你想要在鼠标悬浮在button上时给一个视觉的反馈,你可以用其他方式的改变,比如背景颜色的改变。一个经过设计的button不需要手型光标来帮助用户意识到它的作用。

    手型光标是为链接而保留的,因为它们在行为上是独特的。浏览器和操作系统已经帮你做了该做的工作,和流行的理论相反,浏览器懂得最好的。

    从网页诞生以来,链接就一直用这种方式被处理,这是网页的惯例,你不需要在这上面搞创新。在浏览器已经帮你处理的问题上,你可以休息一下,而把精力用在解决真正的问题上。

    译者说明:作者在文中说的 button 是html中的一个标签,主要是用来提交表单的,而不是我们平时常说的“按钮”,因此在翻译过程中并没有把 button 直接翻译成“按钮”。在做设计的时候,如果是真正的 button ,我们可以按照作者所说的去做,不用特意给它一个手型的光标特效,但是如果是我们把“链接”设计成按钮的样子,还是需要有手型的光标特效的,因为它实际上还是链接。

    原文链接:Buttons shouldn’t have a hand cursor

    相关文章

      网友评论

        本文标题:译文 | Buttons 不应该用手型光标

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