写点什么

[极致用户体验] 用户体验好的 Button,在手机上不应该有 Hover 态

作者:HullQin
  • 2022 年 8 月 17 日
    广东
  • 本文字数:1625 字

    阅读完需:约 5 分钟

[极致用户体验] 用户体验好的 Button,在手机上不应该有 Hover 态

我是 HullQin,公众号线下聚会游戏的作者(欢迎关注公众号,发送加微信,交个朋友),转发本文前需获得作者 HullQin 授权。我独立开发了《联机桌游合集》,是个网页,可以很方便的跟朋友联机玩斗地主、五子棋等游戏,不收费没广告。还独立开发了《合成大西瓜重制版》。还开发了《Dice Crush》参加 Game Jam 2022。喜欢可以关注我 HullQin 噢~我有空了会分享做游戏的相关技术。


我是 HullQin,公众号「线下聚会游戏」的作者 (欢迎关注公众号,联系我,交个朋友),转发本文前需获得作者 HullQin 授权。我独立开发了《我们用 48h,合作创造了一款 Web 游戏:Dice Crush,参加国际赛事》参加 Game Jam 2022。喜欢可以关注我噢~我有空了会分享做游戏的相关技术,会在这 2 个专栏里分享:《教你做小游戏》《极致用户体验》

1. Button 在 PC 端的 3 种状态

在 PC 端,如果你想自己实现一个让用户体验好的 Button,至少需要设置 3 种状态的样式:


  1. 常态

  2. Hover 态

  3. Active 态


(当然,你可以视情况增加其它状态,例如 Disabled 态、Loading 态)


拿 ant design 举例子,介绍下 3 种状态:

常态

Hover 态(光标悬浮在按钮上)

这种状态,通常的设计规范是:元素亮度比常态高。且鼠标是手形。(目的是突出展示鼠标停留的元素,避免点错按钮)


Active 态(光标左键按下按钮并保持按住)

这种状态,通常的设计规范是:元素亮度比常态低。(目的是反馈给用户元素已被点击,且亮度跟 Hover 态形成反差,让用户明确知道我点了哪个)


2. Button 在移动端不需要 Hover 态

而在移动端,通常是不需要 Hover 态的。

为什么?

因为在触摸屏设备上,你点哪里,“光标”就会固定在那里,你滑动到哪里,“光标”也会持续固定在那里。


这会导致 Hover 态持续触发,但此时手指已经离开设备了,且屏幕上是看不到光标的(大部分移动端用户并不知道移动端也有“光标”),所以用户第一反应会是——你的代码有 bug。

移动端注意事项

因为没有 Hover 态,所以移动端上,Active 态一定要跟常态差异足够明显,给用户制造一种「反差」。


例如本文的封面图,我开发的「斗地主」游戏,「创建房间」按钮的 Active 态跟常态有很大样式差异,就是为了制造「反差」。


当然,很多移动端浏览器,为了让 Active 态更明显,设置了这个默认的样式:-webkit-tap-highlight-color,会在用户碰到可交互元素时,有个非常亮的半透明的填充矩形。


如果你希望各个移动端浏览器上保持统一的交互体验,建议重写这个样式:


button:active {  -webkit-tap-highlight-color: rgba(0 0 0 / 0);}
复制代码


然后,靠自己,把 active 样式调整的明显些。

如何给 PC 端加 Hover,不给手机加 Hover?

如果你的触摸屏设备外接了键盘,那么它是有光标的,既然有光标,就需要 Hover 态。


问题来了,我们该怎么知道设备有没有光标呢?然后我们就可以给有光标的加 Hover 态,没光标的忽略 Hover 态了。


答案是:any-hover


@media (any-hover: hover) {  button:hover {    background: yellow;  }}
复制代码


将只会在用户有光标的情况下,展示 Hover 态样式。

3. 注意样式顺序

应该先写 hover 样式,然后再写 active 样式。这样 active 状态的样式才能覆盖 hover 状态的样式。


完整 css 代码如下:


@media (any-hover: hover) {  button:hover {    background: yellow;  }}button:active {  background: green;  -webkit-tap-highlight-color: rgba(0 0 0 / 0);}
复制代码

4. 写在最后

如果你像我一样,喜欢代码纯粹一点,不夹杂冗余功能,就可以自己写 Button,封装自己所需的组件 😎


如果你只是为了完成别人的需求,还是直接用组件库吧,就没这么多要操心的了。也许组件库功能很重体积很大,但考虑全面 😁


我是 HullQin,公众号线下聚会游戏的作者(欢迎关注公众号,发送加微信,交个朋友),转发本文前需获得作者 HullQin 授权。我独立开发了《联机桌游合集》,是个网页,可以很方便的跟朋友联机玩斗地主、五子棋等游戏,不收费没广告。还独立开发了《合成大西瓜重制版》。还开发了《Dice Crush》参加 Game Jam 2022。喜欢可以关注我 HullQin 噢~我有空了会分享做游戏的相关技术。

发布于: 刚刚阅读数: 3
用户头像

HullQin

关注

公众号【线下聚会游戏】 2020.10.07 加入

game.hullqin.cn 我做了一些联机桌游网页:支持2-10人联机的UNO、2-4人联机的斗地主、2人联机的五子棋。无需下载,点开即玩!叫上朋友,即刻开局!不看广告,不做任务,享受「纯粹」的游戏!

评论

发布
暂无评论
[极致用户体验] 用户体验好的 Button,在手机上不应该有 Hover 态_CSS_HullQin_InfoQ写作社区