WebApp for Desktop: 请不要滥用手型指针

这是一篇吐槽。最近想用Electron做点东西，大致浏览了几个UI库，又想起一些用Electron做的App的糟糕体验，实在是想吐槽一番。也不知道大家是不是也有类似的感觉，还是只是我个人吹毛求疵。如果是我的问题，还请打醒我。

首先，这里的WebApp指的是用基于Web的技术制作的客户端程序，比如VSCode、Microsoft Teams、Github Desktop等等。我在使用VSCode和Microsoft Teams时，在用户体验上会跟NativeApp有严重的割裂感。除了渲染性能这种客观问题之外，最主要的问题是，手型指针被滥用了。

到处都是手型指针！

举例来说，在VSCode中，把鼠标放在一切能够点击的东西上，几乎都会变成手型，比如文件列表、文件Tabs、各种按钮等等：

然而，在主流的Windows/Gnome/KDE/macOS上，这些都不应该触发手型指针：

为什么在WebApp里面不应该大量使用手型指针?

因为滥用手型指针违背了各种Native UX设计指南——即，这就不是Native App的Feel。例如，在微软的Windows Desktop UxGuide中，明确说明了普通指针和手型指针的适用情况：

Normal Select – Used for most objects. Link select – Used for text and graphics links because of their weak affordance.

在苹果的Human Interface Guidelines中，同样明确说明了普通指针和手型指针的适用情况：

Arrow – This is the standard pointer that’s used to select and interact with content and interface elements. Pointing hand – The content beneath the pointer is a URL link to a webpage, document, or other item.

总结一下就是：只有在文本图片链接等情况下，才会推荐使用手型指针。所有一般情况，都应该使用普通的指针。

虽然手型指针为用户提供了额外的提示，表示这个元素可以被鼠标操作，但是在Native App中，很多时候不需要、也不应该依靠手型指针来增强操作提示。在微软的Windows App UxGuide中，有这样一段话：

Well-designed user interface (UI) objects are said to have affordance, which are visual and behavioral properties of an object that suggest how it is used.

也就是说，UI元素应当使用一些视觉和行为属性来表示它支持的操作——例如按钮应当做成看起来就可以被按下的样子、Slider应该有个槽槽来表示它可以被滑动，等等——而不是使用手型指针来提示这些操作。例子就像上面给出的Windows 资源管理器，以及QtCreator的侧边栏。

但为什么我不反感在普通网页中大量使用手型指针？

这里我也没有想的很清楚，可能的原因有：①在使用浏览器浏览网页时，我不期待网页会有Native的Look’n’Feel；②习惯了！

不过，我觉得主要的原因还是由于网页与客户端程序存在区别：

网页的本质是一篇文档。当我浏览一篇网页时，跟看一本杂志、看一本书很像。因此，网页上的交互组件应该优先与文档的整体风格保持一致，而不是优先显得“affordable”（不知道怎么翻译，可操作性?）。一个看起来就能够按下的按钮，且不说风格问题，更有可能喧宾夺主。所以我们可以弱化这些元素的affordance，而使用手型指针来增强操作提示。（说实话，很多Web UI Component的按钮，我就没什么按下去的欲望。）

然而客户端程序不是文档，尽管我们依然使用Web的技术来构建它，但它不是一篇文档。它的功能性更加重要，各类UI元素就是界面的主体。所以应该把各类UI元素在视觉上就设计得足够affordable，而不是去借助手型指针。上面贴出的VSCode中的各种button，有的甚至连hover效果都没有！

正例：Github Desktop

Github Desktop是我想举出的正例之一。它的下拉菜单、按钮、列表等等，全部使用普通鼠标指针，使用起来非常愉快：

结尾

其实除了手型指针这个问题之外，有些App还有一些小地方不够Native，比如Microsoft Teams中的一些图标存在延迟加载问题。在用Web技术做移动App时，大家都在往Native Look’n’Feel 靠拢；为什么到了Desktop，却不在意这些体验呢？

最后如果大家知道哪个UI库不滥用手型指针的，请推荐一个……

附：可以参考的其他讨论

https://ux.stackexchange.com/questions/105024/why-dont-button-html-elements-have-a-css-cursor-pointer-by-default