根据Fitts法则,可以得出:目标越大,越容易到达。因此,对于那些较小的,难以瞄准的控件来说,如果不能把他的视觉尺寸直接扩大,将其可点击区域扩大也能提高用户体验。
1 只是一个单纯图标时,设置一层透明边框
- 1
- 2
- 1
- 2
2 当点击元素旁有其他元素时,使用第一种办法可能会导致其他元素位置改变,显然不行,这时我们可以使用使用伪元素
我们可以在按钮的上层覆盖一层透明的伪元素,并让伪元素在4个方向上都比宿主元素大
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
只要有任何一个伪元素可用,这个方法就可以发挥作用,也不会干扰其他的效果,这个基于伪元素的解决方案极为灵活,我们可以把热区设置为任何大小,任何形状,任何位置。