深度剖析6个实例 告诉你如何使用H5/CSS3动画效果快速提升用户体验

时间：2024-03-07 01:15:01 | 来源：网站运营

时间：2024-03-07 01:15:01 来源：网站运营

在网站中使用动画效果并不是什么新鲜事儿。建站早期，不少设计师经常在自己的网站中放置gif动画，但由于许多设计逐渐不能兼备实用性，动画效果慢慢成为糟糕的用户体验的代名词。不过，近些日子随着Html5技术的发展，依靠CSS3做出的动画比Javascript的操作更简单、浏览更顺畅，因此动画效果在历经起起落落之后再次回归到大众的怀抱，很多网站开发者开始重新思考怎样将它更好地应用到网站中。其实，适当的动画效果可以给枯燥无味的用户界面增加趣味，增添网站的个性化色彩，引起用户的情感共鸣，提升用户体验，提高用户转化率。今天小飞就带大家一起看看动效有哪些好处，以及在网站中可以怎样使用。

在网站中使用动画效果的好处：

1.增加趣味性

设计巧妙的动画常常会给用户带来意想不到的惊喜，给网站增加一定的趣味性。Deal in就是一个很好的栗子，这个界面的底部有一个牛皮纸袋，看上去并没有什么特别，但当我们挑选好自己心仪的商品将它们添加到袋子中时，某一行的商品像是从纸上被撕下一样。这种意料不到的操作虽然只是一个小细节，但却能让用户产生兴趣，激发他们的探索欲望。我们在自己网站的产品等页面也可以使用恰当的动画效果，给用户提供预期之外的效果，让他们更愉悦，更愿意在网站停驻浏览。

2.增添个性化色彩

动画效果能够给网站增添个性化色彩。在网站导航菜单处使用淡入的动画效果，能给网站营造一种优雅大方的感觉;在网站中使用滑出和倾倒让屏幕上出现天女散花般的绚丽效果，这会树立生动活泼的网站形象。不同形式的动画效果会给用户留下不一样的印象，这种个性化色彩是网站的特色所在，能将其与对手网站区别开来。

Optimo's hats 这个网站就使用悬浮的动画效果做出了很好的效果。当你将鼠标放在每个帽子的图像上时，它们会微微翘起，下方就会出现每个帽子的名称，移开时文本就会消失。这种动画让整个网站更显典雅别致，也让用户在浏览上更加轻松。

3.引起访客情感共鸣

在第二点中，小飞谈到了动画效果给网站带来的个性化特征。其实网站的个性化特征从某种程度上彰显着站长的性格偏好，如果某个网站上使用的动画效果比较活泼，不难判断出这个站长平时可能比较外向。对于网站访客来说，他们能因此更直观的认识电脑或屏幕背后的那个人。而站长在通过访客们表达对某种特效的好恶也能对用户们有一定的了解。这样一来，我们就能与用户建立情感上的纽带，更易引起用户与网站的互动。而且，如果一些访客比较欣赏网站上的某个动效，他们可能还会与朋友进行分享，这有利于网站知名度的扩大。

在网站中可以怎样使用动画效果?

1.在加载页面使用

建站早期，页面在加载时，用户只能看着空白的屏幕或闪烁的光标干等着，那时候的用户还是比较有耐心的。而现在，如果用户看到加载页一片空白，会觉得页面没有在加载或速度太慢，可能就会直接退出。加载页是给用户的第一印象，是沟通用户与网站内容的桥梁，无趣的加载页大大降低了网站的流量。而有趣的动画则能力挽狂澜，它够有效转移用户的注意力，降低用户的期待感，进度条式加载动画还能让用户了解目前的进度。如果你无法缩短页面加载的时间，那就尽量让这个过程变得有趣吧，让他们再多停留一小会吧。快在加载页面使用动画效果缓解用户的急切感吧!

2.在导航菜单栏使用

简单易操作的导航菜单对确保网站的用户友好十分重要。恰当的动画效果可以使菜单栏更简洁、精炼，更能抓住用户的眼球。而且，随着极简主义的趋势越来越流行，隐藏式导航菜单也受到越来越多人的欢迎。隐藏在汉堡图标中的菜单怎样在点击或关闭时实现很好的衔接呢?动效的作用不容小觑，现在很多设计师在导航菜单上会使用滑出或弹出的效果，下图就是一个栗子。网页右侧弹出的动画让导航清晰可见，也让网站整体内容更加丰富。

3. 在主页上使用

动画效果还可以用来美化网站的主页面，突出网站的品牌、图标，呈现给用户不一样的视觉美感。Theory agency这个网站在主页面就使用了动画效果，当你打开这个网站时，页眉会以滑入的动画效果呈现，这一点小改变会带来大不同。除了在主页面上使用动画效果，网站在其他元素上也使用了动效，按住滚动条向下拖动时各种元素会给用户一种鱼贯而入的感觉，流畅清晰。

除了Theory agency以外，Underbelly在将动画应用到网站主页上也是一个比较好的栗子。整个网站布局简练大气，最有趣的莫过于网站上方的图标了，往下拖动页面时这个鲸鱼图标会缩小，往上它又会恢复原样，很是新颖别致。看了这样的动画效果，你还会对这个图标没印象吗?

4.在焦点区域上使用

人总是很容易为移动着的事物所影响，这是一种生理本能，动画效果能够极大的吸引用户的注意力。如果我们能够有效的将它用在用户关注的焦点问题上，可以很好的提升用户体验。比如在"回到顶部"上使用动画，给用户一个引导，在向下滚动结束后，不用仔细查找即可跳回首页，这样能让用户觉得很方便。还比如商城的联络表单，我们可以给联络表单上添加一些动画效果，如果用户输入完成或输入正确时，表框可以给用户一个"点头"的动效，如果用户输入错误如密码错误等，反馈一个"摇头"的动效，以示否定，这种人性化的动效更能引起用户的共鸣。不过在这个过程中我们唯一需要注意的问题就是避免动画效果太酷炫，分散用户的注意力。

5.在页面的自然过渡上使用

恰当的动效还能够实现不同页面之间平滑、自然的切换。有些网站虽然每个页面都做的比较精致，却忽略了上下文、不同情境之间的自然过渡，生硬、突兀的转换是整个网站中的一大败笔。

6.在图片、数值和表格等内容上使用

网站的很多元素上都可以使用动画效果，图片、数值和表格也不例外。如果你觉得在网站中使用纯粹的网格画廊已经没什么新意了，你可以将网格画廊或卡片式设计同微妙的动画效果相结合，让自己的网站相比其他的来说更具特点。另外，网站的数值和表格通常会让人们觉得很是枯燥无味，在这两种元素上使用动效可以让数据等更有活力，提高用户阅读的积极性，更有利于用户与网站的互动。也许在数据为主的商业网站上，使用动效会受到一定的限制，但不可否认这是减少用户不适感的一种好方法。

讲了这么多，大家应该对如何使用动画效果有一定的认识了吧!不过要注意，过犹不及，适度和过度只有一念之差。如果我们将动画效果过多的应用在网站的每个区块上或者将动效设计的很是复杂，用户反而可能会有比较糟糕的用户体验，这是因为过多或复杂的特效会让用户晕头转向，失去焦点，还有可能滋生出抵触情绪。

还有，动画效果并不适合所有类型的网站，对于某些性质的网站，俏皮的动画反而会影响他们效力的发挥，比如强调严谨性的公益网站，或是政府的税收网站。如果你在登录或者点击"纳税"按钮时看见天女散花般的动画效果，你会怎么想?所以在使用动画效果时要考虑到网站的类型以及目标用户的可接受程度。

不管怎么说，最近动画效果正慢慢回暖，重获新生，是建站的最新潮流趋势所在。如果你想做一个带有动画效果的网站，不妨来起飞页自助建站平台（）看看吧!起飞页自助建站平台最近新推出了一些带有动画效果的模板，在标题、区块或其他细节处可以使用不同的动画效果比如悬停、滑入等，这些动画效果能让您的网站更富创意，更加高大上。快来看看吧!