目前的人类发展阶段,人机交互主要集中在电脑,而与电脑的交互主要有两种,一种命令行,另一种就是UI(user interface)可视化界面。可视化界面具有交互自然的属性,所以更为受大众欢迎,但是不得不说,它受欢迎程度以后会逐渐被语音交互甚至更高级别的人工智能交互所替代,因为以后的交互的发展趋势是趋近于更为自然。貌似扯远了,回到当下,在可视化界面里,点击的交互占了绝大部分,不管是pc的鼠标还是移动端的手机点击。不难想象,这种点击交互的反馈,对我们对这款设备或应用的评价有直接作用。好吧,我发现貌似起高了,我主要想思考的领域没这么广,其实通俗来说就是你点击了,让你知道你的点击的确发生了的反馈, 而且我思考的领域是web前端技术。
在css里,对于点击有active伪类可以响应点击,响应点击后,据我总结,我们主要有5种方式来反馈。
- 使用背景色变化来响应。目前应用比较广泛,比如按钮、列表等模块;
- 字体颜色变化。
- 区域透明度变化。
- 设置filter滤镜,来改变区域明暗度,色值等。
- 动效,不多说。
有冲动总结这个是因为自己长期使用macOS和IOS系统,发现在这些系统下的应用,在点击打开时的反馈是使图标变暗,而我在web中,没有实现过这种效果,于是很好奇。在以往,我们的web交互反馈类似的效果,是改变某一区域的背景色来使用户感知。但这样有一个缺陷,就是你不得不对每种颜色去设置点击响应色彩,比如红色,点击反馈你需要设置深红色。很幸运,思考进入状态了,一不小心就抓住了本质,就是一个滤镜功能,才想起css拥有强大的filter样式。但是很不巧,经过www.caniuse.com查询,filter兼容性,IE完全不支持,不管是IE的PC版还是Mobile版。如果你是在移动端,且不考虑IE mobile,那么使用这个属性没有太大问题的,PC如果兼容需要纳入IE, 那么很不幸,这么fancy的样式,你是用不了。