动效是如今UI设计中的重要组成部分，也是目前最热门的设计趋势之一。动效在不同的环节发挥的作用越越来越大。而今天我们要聊的是光标悬停特效，这也是近年动效设计的热点之一。
正是由于Material Design 和苹果所引领的动效设计风潮，许多曾经有过的设计技巧和元素正在逐步回归，而悬停特效就是其中之一。但是相比于曾经那些闪烁弹跳的特效，现如今的光标悬停特效来的更加微妙，更加强调功能性和体验。
和其他动效相似，光标悬停特效让交互的引导性更强，有的还带有预览的作用，它的使用范围非常广，大到全屏，小到提示和导航元素，不一而足。
接下来，我们通过实战案例看看，光标悬停特效目前有哪些创新的玩法。
首页动效
光标悬停特效用的好，能成为你的网页整体设计中的大杀器。当你光标悬停在特定的位置的时候，整页的动效随之触发，视觉上是相当惊艳的。
触发全屏幕动画之后，让用户觉得愉悦而不是给用户带来压力。这中间的平衡很难把握。在这个案例中，设计师让黑色的背景和白色的非衬线体来构成对比，而中间留出空间给动效。这种设计手法是为了鼓励用户在向下滚动前，尽量多和屏幕上的内容进行互动。
按钮特效
一个简单的动效实际上能够让用户的点击欲望提升一大截。看起来，为按钮做特效是一件很简单的事情，是吧？正是因此，按钮的悬停动效一直都很火，也是设计师们最快能想到的。
一个设计良好的按钮悬停动效，能让用户更好的理解按钮的功能，并吸引用户触发它。
图库和轮播图
网页中的图库和轮播图也是相当常见的控件。几乎所有的图库和轮播图都带有动效，从图片切换的动效到光标悬浮显现的箭头，图库和轮播图和按钮的悬浮动效一样，堪称这类动效的典范。
不过，动效要设计合格也是非常讲究的：
·动效要快速
·动效要清晰
·动效要有凝聚力
导航和菜单
不管你喜欢不喜欢，隐藏式导航是目前最流行的设计趋势之一。大量的悬停动效的加入，让用户可以在拥有干净清爽的界面的同时，顺畅自然的随着导航浏览不同的内容。
悬停动效的加入，让代表菜单的汉堡图标可以随着光标移动而出现或者消失，用户可以在菜单或者导航出现的时候点击内容，而无需查看的时候移开光标，就能拥有一个开阔的视野。
这些微妙的动效和背景下快速切换的视频内容构成了鲜明的对比，用户会很容易发现它们的存在，被吸引注意力，并且被引导着去交互。
粤公网安备 44030902000135号
提交需求
在线咨询
13538018727