新闻资讯频道
云计算数据中心领域最新资讯

那些无所不能的悬停动效们

悬停效果的设计范围真的很广,大到整个屏幕的视觉效果,小到导航元素都可以看到他不俗的表现。悬停效果将给用户带来更好的帮助和体验。

会动的首页
微信图片_20171019160229悬停效果可以是你用户体验的最关键的部分哦。当你的首屏被动画元素充斥的时候,额外的一些悬停效果可以让你首页的魅力值直线UP。HAUS,这个网站屏幕上有许多卡通人物在屏幕上移动,你可能完全无法把这些动画效果跟悬停效果联系到一起,看起来知识一个动作变换了另外一个动作而已。但是我负责任的告诉你,如果没有悬停效果,每个元素也就是单纯的在屏幕上规律的画圈圈罢了。

当你使用全屏悬停动画这样的效果时,诀窍是取悦用户,而不是让他们感到压抑,这是一个相当棘手的问题。如何让他们感到新奇又不至于太过于花哨?通过让其他设计元素简单例如例子中的黑色背景,一个再简单不过的背景与一个易于阅读的无衬线白色字体就十分合适了。这是一个用在首屏上的技巧,可以让用户去和体验,让他们更有兴趣滚动翻看下面的内容。

按钮效果
微信图片_20171019160248一个简单的动画设计实际上可以鼓励用户去点击按钮的。设计一个好的按钮效果,可以帮助用户更好地了解你想让他知道的东西。上面的例子就来自Luke Etheridge,当你鼠标移动到按钮上时,他就会改变颜色,并告诉用户点击后会发生什么。这个悬停动画效果,它不仅很有用并且也很好看哈~
幻灯片效果
微信图片_20171019160253网页很多时候是被各种图片和内容堆积起来的,他们经常看起来很拥挤。所以几乎所有的网站设计的时候都会选用一些滚动动画效果来平衡。在多个图片中设计上箭头和其他指示按钮,告诉用户如何前进或返回。以上这个动效案例是来自Baptiste Dumas。你根本不知道鼠标点击它后,下一步会怎么发生,它会在内容元素之间创建一条明显的线,所有的东西都被这条线连接在了一起,形成一个类似无缝衔接的运动流程,是不是很神奇。

导航菜单
微信图片_20171019160302不管你喜欢与否,隐藏的导航风格一直是是一个很受欢迎的设计元素哦。这个动画悬停效果可以帮助用户更好地浏览内容,也能让主页视觉更简洁。随着指示图标的显示和隐藏,菜单信息可以轻松的在屏幕上弹出和隐藏甚至是移动,动画效果的目录,是是个非常强大的指示工具。

Oxen Made,这个案例就使用了悬停效果和动画效果两种方式在主页上,为了指导用户如何使用网站,他们把右上角的菜单按钮设计成可以更改年色的悬停效果,让用户知道这是一个可以点击的元素。点击后弹出完整的菜单,是从页面的左侧摆动出来非常显眼。此外,右下角一个小三角形箭头,使用和菜单按钮相同的效果,让用户知道还有更多的内容可以滚动,不得不说你们真的好贴心哦~

这些微妙的动效设计,和相对复杂的背景视频搭配在一起,确实是十分合适的。在背景视频强烈的运动衬托下,按钮的那些柔和的动效更容易吸引用户的注意力,让用户更好的使用网站,按钮也充分起到了导航的作用。

表格和文字段微信图片_20171019160308
还有一些使用悬停效果优秀案例,例如把表格融入其中。几乎每一个你访问的网站都会要求你注册或者填写一些问题信息。这是一个很让人讨厌的步骤,因为真的很繁琐,所以如果用户提供这些信息越容易,你就越容易得到那些对你有用的信息。但如果让这些列表信息不那么乏味呢?一些视觉线索可以帮助用户记住如何进入一个领域,并指引他们确认提交是非常重要的。上面的这个例子它做了两件事。第一个是用户被告知要输入什么信息,他们可以看到整个操作过程,以及点击登录按钮后,我将要填写的信息是什么,这样用户就不必猜的我这一步操作完成后,下一步我要做什么了。

如果你还不知道如何去应用悬停效果的话,这个效果可以作为一个很好的起点哦。其实在这样简单的引导下,用户是享受跟网站进行互动的,这样简单的动画就能让我们收获到不错的反馈哦。

未经允许不得转载,内容均来自网上,如有侵权请联系删除,谢谢!中网科技新闻频道 » 那些无所不能的悬停动效们

分享到:更多 ()

评论 抢沙发

评论前必须登录!

 

域名、主机、云计算、服务器、机柜大带宽一站式服务平台

联系我们中网科技