乐趣区

关于前端:用户体验好的Button在手机上不应该有Hover态

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。喜爱能够关注我噢~我有空了会分享做游戏的相干技术。

退出移动版