在网站中运用动画作用并不是什么新鲜事儿。建站前期，不少规划师经常在自己的网站中放置gif动画，但由于许多规划逐渐不能兼备实用性，动画作用渐渐成为糟糕的用户体会的代名词。不过，近些日子跟着Html5技术的发展，依靠CSS3做出的动画比Javascript的操作更简略、阅览更顺利，因而动画作用在历经起起落落之后再次回归到大众的怀抱，许多网站开发者开端从头考虑怎样将它更好地应用到网站中。其实，恰当的动画作用能够给枯燥无味的用户界面增加爱好，增加网站的个性化颜色，引起用户的情感共识，进步用户体会，进步用户转化率。今日小飞就带我们一同看看动效有哪些优点，以及在网站中能够怎样运用。
在网站中运用动画作用的优点：
1.增加爱好性
规划奇妙的动画常常会给用户带来意想不到的惊喜，给网站增加必定的爱好性。Deal in就是一个很好的栗子，这个界面的底部有一个牛皮纸袋，看上去并没有什么特别，但当我们挑选好自己心仪的产品将它们增加到袋子中时，某一行的产品像是从纸上被撕下一样。这种意料不到的操作虽然只是一个小细节，但却能让用户产生爱好，激起他们的探究愿望。我们在自己网站的产品等页面也能够运用恰当的动画作用，给用户供给预期之外的作用，让他们更愉悦，更愿意在网站停驻阅览。
2.增加个性化颜色
动画作用能够给网站增加个性化颜色。在网站导航菜单处运用淡入的动画作用，能给网站营建一种高雅大方的感觉;在网站中运用滑出和倾倒让屏幕上出现天女散花般的艳丽作用，这会建立生动生动的网站形象。不同方式的动画作用会给用户留下不一样的形象，这种个性化颜色是网站的特征地点，能将其与对手网站差异开来。
Optimo's hats 这个网站就运用悬浮的动画作用做出了很好的作用。当你将鼠标放在每个帽子的图画上时，它们会轻轻翘起，下方就会出现每个帽子的称号，移开时文本就会消失。这种动画让整个网站更显高雅特别，也让用户在阅览上愈加轻松。
3.引起访客情感共识
在第二点中，小飞谈到了动画作用给网站带来的个性化特征。其实网站的个性化特征从某种程度上彰明显站长的性格偏好，如果某个网站上运用的动画作用比较生动，不难判断出这个站长平常可能比较外向。关于网站访客来说，他们能因而更直观的知道电脑或屏幕背面的那个人。而站长在经过访客们表达对某种特效的好恶也能对用户们有必定的了解。这样一来，我们就能与用户建立情感上的枢纽，更易引起用户与网站的互动。并且，如果一些访客比较赏识网站上的某个动效，他们可能还会与朋友进行共享，这有利于网站知名度的扩展。
在网站中能够怎样运用动画作用?
1.在加载页面运用
建站前期，页面在加载时，用户只能看着空白的屏幕或闪耀的光标干等着，那时候的用户仍是比较有耐性的。而现在，如果用户看到加载页一片空白，会觉得页面没有在加载或速度太慢，可能就会直接退出。加载页是给用户的第一形象，是沟通用户与网站内容的桥梁，无趣的加载页大大下降了网站的流量。而风趣的动画则能力挽狂澜，它够有用搬运用户的注意力，下降用户的等待感，进展条式加载动画还能让用户了解现在的进展。如果你无法缩短页面加载的时刻，那就尽量让这个进程变得风趣吧，让他们再多逗留一小会吧。快在加载页面运用动画作用缓解用户的急迫感吧!
2.在导航菜单栏运用
简略易操作的导航菜单对确保网站的用户友好十分重要。恰当的动画作用能够使菜单栏更简练、精粹，更能捉住用户的眼球。并且，跟着极简主义的趋势越来越盛行，隐藏式导航菜单也遭到越来越多人的欢迎。隐藏在汉堡图标中的菜单怎样在点击或封闭时实现很好的联接呢?动效的作用不容小觑，现在许多规划师在导航菜单上会运用滑出或弹出的作用，下图就是一个栗子。网页右侧弹出的动画让导航明晰可见，也让网站整体内容愈加丰厚。
3. 在主页上运用
动画作用还能够用来美化网站的主页面，突出网站的品牌、图标，出现给用户不一样的视觉美感。Theory agency这个网站在主页面就运用了动画作用，当你打开这个网站时，页眉会以滑入的动画作用出现，这一点小改变会带来大不同。除了在主页面上运用动画作用，网站在其他元素上也运用了动效，按住翻滚条向下拖动时各种元素会给用户一种鱼贯而入的感觉，流通明晰。
除了Theory agency以外，Underbelly在将动画应用到网站主页上也是一个比较好的栗子。整个网站布局简练大气，最风趣的莫过于网站上方的图标了，往下拖动页面时这个鲸鱼图标会缩小，往上它又会康复原样，很是新颖特别。看了这样的动画作用，你还会对这个图标没形象吗?
4.在焦点区域上运用
人总是很简单为移动着的事物所影响，这是一种生理本能，动画作用能够极大的吸引用户的注意力。如果我们能够有用的将它用在用户重视的焦点问题上，能够很好的进步用户体会。比方在"回到顶部"上运用动画，给用户一个引导，在向下翻滚完毕后，不必细心查找即可跳回主页，这样能让用户觉得很便利。还比方商城的联络表单，我们能够给联络表单上增加一些动画作用，如果用户输入完结或输入正确时，表框能够给用户一个"允许"的动效，如果用户输入过错如暗码过错等，反应一个"摇头"的动效，以示否定，这种人性化的动效更能引起用户的共识。不过在这个进程中我们仅有需要注意的问题就是防止动画作用太酷炫，涣散用户的注意力。
5.在页面的天然过渡上运用
恰当的动效还能够实现不同页面之间滑润、天然的切换。有些网站虽然每个页面都做的比较精致，却疏忽了上下文、不同情境之间的天然过渡，生硬、突兀的变换是整个网站中的一大败笔。
6.在图片、数值和表格等内容上运用
网站的许多元素上都能够运用动画作用，图片、数值和表格也不破例。如果你觉得在网站中运用纯粹的网格画廊现已没什么新意了，你能够将网格画廊或卡片式规划同奇妙的动画作用相结合，让自己的网站比较其他的来说更具特色。别的，网站的数值和表格通常会让人们觉得很是枯燥无味，在这两种元素上运用动效能够让数据等更有生机，进步用户阅览的积极性，更有利于用户与网站的互动。或许在数据为主的商业网站上，运用动效会遭到必定的约束，但不可否认这是削减用户不适感的一种好方法。
讲了这么多，我们应该对怎么运用动画作用有必定的知道了吧!不过要注意，过犹不及，适度和过度只有一念之差。如果我们将动画作用过多的应用在网站的每个区块上或许将动效规划的很是杂乱，用户反而可能会有比较糟糕的用户体会，这是由于过多或杂乱的特效会让用户晕头转向，失掉焦点，还有可能滋生出抵触情绪。
还有，动画作用并不适合所有类型的网站，关于某些性质的网站，幽默的动画反而会影响他们效能的发挥，比方着重严谨性的公益网站，或是政府的税收网站。如果你在登录或许点击"纳税"按钮时看见天女散花般的动画作用，你会怎么想?所以在运用动画作用时要考虑到网站的类型以及目标用户的可接受程度。
微信：boxiangchina