我相信很多人应该是没有注意到这个细节的，因为我们每天在互联网中浏览网页已经养成了一个认知习惯，也就是「当鼠标放上去变成手指的话就说明元素可以点按」。

当然，这其实是个误区，或者说我们的认知被十几年来的网站 UI UX 所引导去到了这个误区。

“无手指”样式的按钮

假如我在一个没有任何 css 的页面里，写上两个不同形式的按钮：

这两个不同展现形式的按钮都没有触发“手指”光标，而且 Chrome 这个原生应用的任何界面上可见的按钮也都呈现的是默认的鼠标样式。

我们再来看看在 macOS 上的系统设置原生应用：

没有一处的按钮、导航链接或者开关是会显示”手指“光标的，显示的都是默认光标。

这是为什么？

因为其实那只手最开始是给超链接设计的。

手指是给超链接的

我们可以在 W3C 的用户界面指南中看到：

The cursor is a pointer that indicates a link.

也就是说只有在有超链接的时候才需要把鼠标样式改成“手指”。

同时在 Cursor 的维基百科页面中写道：

当指针悬停在超链接上方时，鼠标悬停事件会将指针变成一只伸出食指的手。通常会弹出有关该链接的一些信息提示，当用户将指针移开时，该提示会消失。

也明确的说明了指针只有悬停在超链接上方时，才会变成一只伸出食指的手。

那到底什么是超链接？

如今 CSS 的强大让你无法简单的用肉眼来区分什么元素在界面中是纯超链接，什么元素是纯按钮。

同时也因为太多的前端开发者把按钮做的不像按钮，超链接做的不像超链接，久而久之，两者就会经常被混为一谈。

所以这也是为什么在 Web 中，一个 a 标签和一个 button 标签经常会需要使用相同或者类似的 css 来让他们都看起来“可按”。

可交互的错觉

我认为，鼠标悬停在元素上是否会变成“小手”，早已不是一个元素是否可交互决定性因素。

真正起作用的，或者说我们应该做的是，让按钮在鼠标悬停的时候做出样式的反应，不管是有外框改变，背景色改变，位移轻微的改变还是简单的透明度发生改变，都可以有效地让用户感知到这个元素是一个「可互动元素」。

而且其实如果你去 Apple 官网，你也会发现他们在产品页面里的所有按钮处，他们甚至只做了“手指光标”处理：

我并不认为 Apple 在这些按钮细节方面处理的很到位，因为他们为了让这些按钮显得可点击，只是加了个鼠标变成手指样式而已，而按钮本身却忽略了任何样式的改变。

当然了，这里没有绝对的好与坏，只有在不同的场景中做合适的设计处理。

对于开发者和设计师来说，我们的目标应该是创造出一个无缝、直观且满足用户需求的交互体验。

Adam Pietrasiak 前阵子在 Twitter 也分享到：

不要为可点击元素使用“手指”光标。手指光标在 web 上很流行，然而在桌面应用却很少使用它。如果在桌面应用中使用手指光标，它会体验起来像一个网站。

总结

如果回答一下本文的标题：“按钮真的需要手指光标吗？”，那就是：

看情况。

• 你在做网站？那需要的，给所有 button 加上 cursor: pointer 吧，毕竟大部份人已经习惯了这个表现形式。
• 你在做原生桌面应用？那其实并不需要，否则加上手指光标的话只会让用户更加难以信任你的原生应用足够“原生”，因为大部份原生应用都没有做这个鼠标处理。

甚至如果你像 Linear 他们一样热爱 UI UX 细节，当然可以让用户自己做选择：

Linear 很巧妙的在用户偏好设置里面提供了一个 “Use pointer cursors” 开关，可以让所有可交互的元素展示默认指针或者手指光标。

现在来说，没有一个绝对正确的答案，但至少这是一个交互设计里面很有意思的案例分析。