提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
你是否还在和前端同事说,这个Button hover时要小手光标的样式?我们总是普遍的认为小手光标才能更好的代表着可点击,然而你了解手势光标真正的用途与含义吗?
很多人认为手势光标代表了“可点击的”,但其实并非如此而且这还存在潜在的误导性。希望在文章的最后,你不会再想在button上使用手势光标。
手势光标并不代表可点击
例如当你使用浏览器时你会发现所有的Button(以及其他组件)并没有使用手势光标,这并非是没有考虑到,而是他们没有那么去设计。
不妨看以下的截屏:
几乎所有的元素都有交互且可点击的——如菜单,Tabs,空白处,浏览器的按钮,书签栏以及Google的搜索框,然而,并没有任何一个是使用手势光标的。
还有更多带交互且可点击的元素没有在上面展示——如选单,滑动条,复选框,单选框,标签,图片以及文字等,这些同样没有使用手势光标。
你会发现在你使用的任何一台电脑中都是一样的情况。你可以在许许多多不同的元素(包括Button)上进行打字,拖拽,选择,点击,左键右键点击等操作,然而这些Button在hover时并不显示为手势光标。
功能可见性是通过忽略光标的样式来展现的。记住,光标仅在使用如鼠标的定点设备时才可见。
这就是为什么,例如复选框从不会是圆的(而单选框从不会是方形),链接通常都是带下划线的。事实上,这也是为什么链接会使用手势光标。
手势光标代表着链接
手势光标(通常在带下划线的文字上)代表着链接,而链接并非都是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. 特此分享给大家,希望能有所帮助。第一次翻译,有不恰当的地方还请见谅。
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册