Button不应该使用手势光标

自译外文 分类: 经验/观点 版权: 原作者: Adam Silver
799 1 4 3
2017-04-25
1.5
编辑推荐

你是否还在和前端同事说,这个Button hover时要小手光标的样式?我们总是普遍的认为小手光标才能更好的代表着可点击,然而你了解手势光标真正的用途与含义吗?


很多人认为手势光标代表了“可点击的”,但其实并非如此而且这还存在潜在的误导性。希望在文章的最后,你不会再想在button上使用手势光标。


手势光标并不代表可点击


例如当你使用浏览器时你会发现所有的Button(以及其他组件)并没有使用手势光标,这并非是没有考虑到,而是他们没有那么去设计。

不妨看以下的截屏:



几乎所有的元素都有交互且可点击的——如菜单,Tabs,空白处,浏览器的按钮,书签栏以及Google的搜索框,然而,并没有任何一个是使用手势光标的。

还有更多带交互且可点击的元素没有在上面展示——如选单,滑动条,复选框,单选框,标签,图片以及文字等,这些同样没有使用手势光标。


你会发现在你使用的任何一台电脑中都是一样的情况。你可以在许许多多不同的元素(包括Button)上进行打字,拖拽,选择,点击,左键右键点击等操作,然而这些Button在hover时并不显示为手势光标。




功能可见性是通过忽略光标的样式来展现的。记住,光标仅在使用如鼠标的定点设备时才可见。


这就是为什么,例如复选框从不会是圆的(而单选框从不会是方形),链接通常都是带下划线的。事实上,这也是为什么链接会使用手势光标。


手势光标代表着链接


手势光标(通常在带下划线的文字上)代表着链接,而链接并非都是Button。链接伴随着网页而存在,为了使用户体会到差异,链接使用了手势图标,从而提供额外的线索。原因如下:


  1.    通过点击链接可以打开新页面或资源
  2.   (在电脑设备中)可以通过右键来点击链接进行许多操作(而Button不能满足这个需求),如打开一个新页面,复制地址,添加到书签等等。
  3.   (在移动设备中)可以通过点击或长按链接得到类似的操作菜单,如同上一点所述
  4.   链接还表示着我只是要跳转到其他地方,而不会修改任何数据或发生改变(不同于Button)



总结


当一个Button使用手势光标时,会隐约地暗示着用户它有着链接的交互。如果你想要表现出悬停时视觉上的反馈,完全可以通过其他样式来表现,如改变背景颜色。好的Button设计并不需要手势光标来展现其存在交互。


手势光标是为链接保留的特殊交互样式,浏览器和操作系统已经为我们做了很好的示范。


自网络出现以来,链接一直是通过这种方式来处理,可以说这是网页设计遵循的一个惯例。你可以轻松了解覆盖的浏览器,而这会帮助你和你的团队解决许多实际问题。



原文链接:https://medium.com/simple-human/buttons-shouldnt-have-a-hand-cursor-b11e99ca374b#.bbjub2wh6


在Medium上看到这篇文章的标题,确实让我疑惑了一下,因为在平时工作中总是会要求前端同事去把页面各种Button hover时光标的样式改成小手来体现可点击的效果。文章里那句话说的很好:A well-designed button does not need a hand cursor to help the user realise it does something.  特此分享给大家,希望能有所帮助。第一次翻译,有不恰当的地方还请见谅。

Mohanna

41粉丝/18关注

内容至上的11种网站布局2018年UX设计10大趋势预测

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2018 UI.CN