当前位置:网站首页 / 建站知识 / 网站设计知识

如何设计网页动效才能提升用户体验?

时间:2017-01-03 09:25来源:万诺达网络

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

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

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

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

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

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

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

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