仿站

现在很多网页为了提升用户体验都会使用一定的网页动效，既可以强化功能，又可以提升美感，同时还可以和用户形成互动，给用户一种惊喜的感觉。那么如何设计网页动效来提升用户体验？

1、我们设计网页动效时要尽量避免突兀的转变。动效中 的每一个动作都应当从现实世界中获取灵感，最简单的一点，例如现实世界中物体的加速和减速都会受到重量、惯性和摩擦力的影响，类似的，在动效设计中，瞬间 的启动和停止是不合规律的。同理，其他的动效设计例如翻页动效、上下滑动动效，都要合乎我们日常习惯才行，否则会感觉特别突兀。

2、我们可以在网页进行报错时做好动效，例如用户进行表单填写，或者用户登录提交时，某一项填写错误，这时候不妨设计左右晃动的网页动效，让用户感觉网 页正在摇头，正在“说ＮＯ”；或者表单颜色变成红色，呈现出醒目的颜色，让用户能够一眼识别出来问题；这些动效就参考了拟人化设计效果，让界面更加真实， 会有一种质感体现，反馈的信息也更直观。

3、 当我们使用淘宝或者支付宝进行支付成功时，会看到页面出现“打勾”的动效呈现，这个动效赋予了支付这个操作一种轻松写意的感觉，让用户明确知道支付成功， 有松了一口气的感觉；同理，如果支付出错，页面会出现一个“叉叉”告知用户有问题，这是一种很棒的动效细节。所以，当用户实现或者达成某个操作目标后，我 们就可以通过网页动效来体现，以视觉化的方式告知用户交互所达成的结果，赋予这种操作一种轻松写意的感觉。

4、当进行动效设计时，图片、文字、动效应当清晰直观，明确而一致。特别是当一个动效中容纳太多内容或者过程的时候，难免会让人看不清，感到迷惑，会有 眼花缭乱的感觉；同时不同的元素沿着不同的轨迹向着不同方向运动，人的眼睛很难捕捉到全部的过程，自然而然会感到混乱，用户甚至会头晕眼花。所以网页动效 要秉乘“少即是多”的原则，以简洁明了的方式呈现，特别是一些炫技式的动效还是少做的好。

5、相信用户们对“加载”非常厌烦，如果点击某个页面，一直打不开，页面是 “雪花一直转圈圈”，页面一片空白，会让用户觉得特别单调无聊。所以为了解决这种加载问题，我们不妨通过微妙而有趣的动效，让用户的注意力转移到动效本身 上，而不是被无聊的情绪所左右。例如我们打开某个页面时，从最基本的框架结构开始加载，一点一点呈现页面，这样就明显地缩短了等待的主观体验。

6、现在智能手机上的按钮基本上都消失了，网页设计时也沿用了这种简洁明了的设计方式，很多按钮或者图标都没有，都会通常动效来隐藏起来。设计这种具有 隐藏功能的动效，能提升用户对界面的操控感。例如点击某个图标或者按钮，会马上有动效出现一个新页面，这个特效不仅仅让界面看起来神奇无比，而且告知了用 户按钮的实际功能。

一个功能完备的动效不仅要足够微妙有趣，而且应当清晰且具有合乎逻辑的目的。网页动效的存在不仅降低了用户的认知负荷，沟通不同的环节，建立更为有效的信息和交互流程，能让界面变得栩栩如生。