CSS 揭秘(6)--鼠标相关的用户体验

Posted by liveipool on February 8, 2017

鼠标相关的用户体验

选用合适的鼠标光标

鼠标指针的用途不仅在于显示鼠标在屏幕上的位置,还可以告诉用户当前可以执行什么动作,这对提升用户体验相当关键。CSS2.1中提供了一部分光标类型,CSS3又新增了一部分,通过这个网页中的示例,运行后可以看各种光标的形状:http://www.css88.com/book/css/properties/user-interface/cursor.htm

下面是两个CSS3中新添加的光标类型的例子:

1.通过not-allowed光标来提示禁用状态:

:disabled, [disabled], [aria-disabled="true"] {
	cursor: not-allowed;
}

2.在触摸屏上,或观看全屏视频时,有时候会需要隐藏鼠标光标:

video {
	cursor: none;
}

扩大可点击区域

有一个很有名的FItts法则:人类移动到某个目标区域所需的最短时间是由目标距离与目标宽度之比所构成的对数函数。

另外一个可以增强用户体验的观点为:对于那些较小的、难以瞄准的控件来说,如果不能把它的视觉尺寸直接放大,将其可点击区域(热区)向外扩张往往也可以带来可用性的提升。随着触屏的不断普及,这一点变得愈发重要。没有人愿意对一个狭小的按钮尝试点按很多次。

为了方便看出变化,现在有一个半径为50px的圆形按钮,我们想将其热区在四个方向上均向外扩大50px,即在鼠标距离圆心100px的圆内就可以对圆就行点击操作,但并不把圆的视觉尺寸扩大。
30.1.png

我们最开始可能想到的是给它增加50px的透明border:

.test {
	color: #fff;
	background: #39f;
	border-radius: 50%;
	padding: 0;
	cursor: pointer;
	border: 50px solid transparent;
}

30.2.png
但是和半径为原大小50px的对比圆一对比就可以看出,现在的圆的视觉尺寸也变大了,不符合我们的要求。 这是因为背景会默认蔓延到边框的下层,因此我们需要对background-clip进行设置:

.test {
	// ..
	background-clip: padding-box;
}

30.3.png
可以看出,现在圆的视觉大小保持了原大小,并且鼠标移动到圆心100px以内的范围内时,就会变成pointer状,说明现在已经符合我们增大热区的要求了。

但是问题来了,如果我们现在想要给圆添上2px的黑色边框,但边框属性已经被我们用了,这时怎么办? 我们可以使用内嵌投影来模拟出一道边框:

box-shadow: 0 0 0 2px rgba(0,0,0,1) inset;

30.4.png

继续问,现在我们要是想要给圆外添加外部投影时,再次增加一条box-shadow可以实现效果吗?

box-shadow: 0 0 0 2px rgba(0,0,0,1) inset,
				0 .1em .2em -.05em rgba(0,0,0,.5);

30.5.png
可以发现,外部投影是加在了透明边框外,这样的效果相当奇怪。
因此综上所述,这一连串的方法虽然实现了一些要求,但总的来说还是不够完美。

再次转换思路:其实,伪元素同样可以代表其宿主元素来响应鼠标交互。
我们可以在按钮的上层覆盖一层透明的伪元素:

.test {
	color: #fff;
	background: #39f;
	border-radius: 50%;
	padding: 0;
	cursor: pointer;
	border: 0;
}

.test:before {
	content: '';
	position: absolute;
	top: -50px;
	right: -50px;
	bottom: -50px;
	left: -50px;
}

30.6.png
这种方法能够得到我们想要的结果,并且实现也相当的优雅。只要有任何一个伪元素可供利用,这个方法就可以发挥作用,也不会干扰其他任何效果。这个基于伪元素的解决方案极为灵活,我们基本上可以把热区设置为任何想要的尺寸、位置或形状,甚至可以脱离元素原有的位置。