在现代网页设计中,动效常见的几种用法

在逐步的探索和发展过程中,动效在网页和APP中的运用方法与技巧已经逐步成熟,形成了一套相对系统的模式。今天的文章我们通过一系列实例,来展示一下动效是如何改善整个用户体验的。如果你无法将等待的时长缩短,那么尽量令这个过程有趣。动效让滚动式的交互充满了趣味。


在逐步的探索和发展过程中,动效在网页和APP中的运用方法与技巧已经逐步成熟,形成了一套相对系统的模式。今天的文章我们通过一系列实例,来展示一下动效是如何改善整个用户体验的。

在现代网页设计中,动效常见的几种用法

令人愉悦的动效几乎已经成为如今网页设计的标准配置了,融入动效的交互细节让现代网页同以往的设计在根本上区别开来。动效不仅可以表现状态,引导用户的关注点,帮助用于预测交互的结果,甚至影响用户的行为。

加载动效

动效最常用的一个地方就是进度条。加载进度条的加载动效会改变用户对于时间的感知,通过转移注意力的方式让用户等待感降低。

如果你无法将等待的时长缩短,那么尽量令这个过程有趣。

简单的加载动效其实比复杂的更好。额外的东西,比如声音效果就没有存在的必要了。用户在有趣的动效上投注了越多的注意力,就越容易忽略等待的过程。

在现代网页设计中,动效常见的几种用法

即使加载时间很短,有趣的动效依然能让这点时间变得好玩。

进度动效

动效还可以用来展示交互或者操作的进度。下面的这个加载进度条就是这类动效的代表:

在现代网页设计中,动效常见的几种用法

这个是Aviasales 的进度条。

同样的,你还可以考虑使用进度条来展示多个不同的步骤:

在现代网页设计中,动效常见的几种用法

界面框架

界面框架会将界面加载之后的大概样式给展示出来,界面框架会让用户产生内容一瞬间就加载好了的错觉。这种动效可以应用在绝大多数的网页和APP当中,它会明显强化用户的参与感。

在现代网页设计中,动效常见的几种用法

视觉反馈

将界面反馈视觉化地呈现给用户是非常实用的.良好的交互设计需要视觉反馈来支撑,传达交互完成后的结果,让交互可用、可见、可预期。网站界面中哪些元素可交互如果是不可知的、交互的结果也不可预期,混乱就不可避免了。周密的交互设计可以帮助用户理解,将这种混乱降到最低。

悬停动效

桌面端交互主要还是借助触控板和鼠标,光标悬停特效很大程度是为这种情况而存在的,同时,它也是最常见的动效之一。

在现代网页设计中,动效常见的几种用法

当用户不知道某个控件怎用的时候,会很直觉地将光标移动到上面去,这个时候,悬停特效能够很好的吸引他们的目光。

移动端由于交互方式的差异,几乎没法使用悬停动效。无论是按钮还是输入框,当你点击屏幕的时候就已经触发控件了,只能在随后呈现结果,而无法像悬停动效一样预览。

在现代网页设计中,动效常见的几种用法

吸引注意力

被运动的事物所吸引,是人类的生物本能。这也使得动效成为了吸引用户注意力的完美工具。

在现代网页设计中,动效常见的几种用法

举个例子,表单输入的用户体验加入动效就有很大的提升空间。比如你可以在用户输入完成或者输入正确之后,给用户一个点头的动效,在输入错误之后左右晃动提供“摇头拒绝”的动效,人性化地传递信息,用户也是很容易理解的。

导航

从设计趋势上来说,越来越多的网站开始选择使用隐藏式的导航菜单,将更多的选项隐藏在汉堡菜单之后。而菜单的打开和关闭中肯定需要动效加持来降低突兀的过渡,如果设计的足够精巧,用户会立刻被吸引住。

在现代网页设计中,动效常见的几种用法

下面是Brian Hoff Design 的网站设计,当用户单机圆形箭头按钮的时候,一个超大的菜单会从侧面弹出,弹出过程中不仅有动画,而且整个界面变暗会让用户更加难以忽略菜单的存在。

在现代网页设计中,动效常见的几种用法

动效帮助用户将两种不同的状态和界面连接到了一起。

平滑的状态切换

无论是从一个Tab切换到另外一个Tab,还是界面模式的变化,状态切换是UI界面中最常见的情况,动效能够让状态切换平滑无比。在《Smart Transitions In User Experience Design》 这篇文章中, Adrian Zumbrunnen 提供了一个很好的粒子,动效是如何帮助用户理解上下文和状态变化和不同的部分的。

简单对比一下下面的两个案例,就知道生硬的切换和平滑切换之间的差别了。

在现代网页设计中,动效常见的几种用法

在现代网页设计中,动效常见的几种用法

创意特效

充满创意的特效总能让用户真正难以忘怀,它们的价值在于取悦用户,让人记住。

长滚动页面

不得不说,首屏的设计一直是网页设计的焦点所在,设计师将注意力集中在这个充满价值的区域是有道理的。但是页面余下的部分同样很重要,事实上,有个说法是“正常媒体页面上百分之66%的用户注意力都在首屏之下”,因此结合了动效的长滚动页面同样非常有用。

动效让滚动式的交互充满了趣味。

动画能够让长滚动页面所承载的故事更加鲜活有意思,相比于炫酷的动效,微妙的动效给人的感觉更加到位。你可以将你的网站设计成可滚动的“区块”,每个区块中呈现不同的内容,下面的案例就是这么做的:

在现代网页设计中,动效常见的几种用法

结语

动效拓展了界面的视觉维度,它连接交互,让界面的功能和效果都更加圆融。

 

原文作者:Nick Babich

原文地址:uxplanet

译者:@陈子木

译文地址:优设

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/24280/

(0)
CatherineCatherine
上一篇 2017-05-08 05:18
下一篇 2017-05-08 07:12

相关推荐

  • “用户体验” 才是售电公司的未来(中电联课程)

    本文由全球首家智能传媒平台—中传媒平台(CMCNP)提供对于售电公司来说,用户体验就是电力用户用电过程的一个主观感受。那这样就有一个疑问:用电还有什么区别吗?电本身就是无差别的商品。所以,售电公司就应该提供差异化增值服务以满足用户体验。如果不谈用户体验,那售电公司单凭价差、所谓的增值服务去吸引用户,去谋未来?价差谁比的过电厂的售电公司,增值服务谁不会,不知道中国人最擅长的就是“借鉴”吗?如果是这样,独立售电公司在市场上就真的没什么竞争力...

    2018-02-05
  • 四个步骤,完成一个APP的LOGO设计需求

    希望这篇文章,能够在你做LOGO设计时,提供一些方向和思路。

    2017-05-01
  • 用户体验 | 6个细节成就了今天的X1 Carbon 2018(下篇)

    上篇我们聊了Logo配色、ThinkShutter以及电源键设计,这一次我们一起来看看外形设计、移动便携和扩展能力ThinkPad X1 Carbon 2018在用户体验上有什么有趣的故事吧!一条曲线的神奇虽然建筑师高迪说直线属于人类,而曲线属于上帝,而逐渐读懂曲线的意义,思考曲线与直线之间合理应用,这整个的过程正是人类自我救赎和思想进化的过程。纵观笔记本变化的历史,外形和颜色往往决定着“颜值”,改变外形或者颜色设计的情况比比皆是,连M...

    2018-03-22
  • 高手课堂!「按钮系列」之按钮位置与用户体验的关系

    @Daidai丶呆  :本文主要给大家讲解:「确认」、「下一步」等这类存在于页面中的按钮在摆放时,对页面 or 产品造成的影响有哪些。

    2017-09-29
  • 在一个老外微信PM的眼中,中国App UI那些事

    中美用户习惯的和文化的不同,造成了设计很多的不同。看惯了国内的设计,你了解外国人怎么看待我们的产品吗?接下来就可以带着疑问往下阅读。 本文编译自Dan Grover的博客,他现在是腾讯微信的产品经理。以下是他从…

    交互设计 2014-12-11
  • 基于交互体验下的包装视觉传达设计研究

    红河学院美术学院 文俊鸿摘要:包装视觉传达设计中交互体验的表现成为其设计重点,消费者与包装产品设计的关系更加紧密,让消费者在包装设计使用过程中感受到包装设计与消费者的情感交流互动,增强消费者视觉感官交互体验。采取理论研究和案例研究相结合的研究方法,对现代交互设计在包装视觉传达设计应用进行研究,让产品包装与消费者的联系更加紧密,让消费者的心理情感和视觉感官获得更具冲击力的体验,更为有效地实现包装设计与消费者的情感交流互动和传达。关键词:交...

    2018-01-30
  • 蜕变.进化——百度云Android端7.0项目总结

    项目背景: 百度云面世之初是一款网盘类产品,以安全、稳定、易用、快速的体验著称,经历近两年时间的升级优化,百度云已不仅仅只是“网盘”了,在慢慢的朝着平台化的方向不断发展。 旧版的Android客户端随着每一次版…

    2015-03-18
  • 支付宝开大招了,全新支付方式,纹身都可以用来支付了!|走无硬件支付道路

    虽近支付宝和微信支付打得火热,各种促销打折抢占支付市场,这个时候支付宝发大招了!宣布推出全新的支付方式“kungfu”(空付)也和功夫发音相近。 通过支付宝扫描任何一个实物进行授权,例如你身上的一个纹身。然后…

    交互设计 2015-09-10
  • 2018年移动端用户体验设计趋势

    在移动应用领域,事物正飞速发展。要想在用户体验设计领域获得成功,设计师必须有远见,并为即将到来的新挑战做好准备。为了简化这个任务,我列出了2018年最重要、最有影响力的趋势,而且很有可能远不止如此。1.简化用户的使用流程当我们与应用程序或网站互动时,我们有一个特别的目标。通常,我们花在实现这一目标上的努力越少,体验就越好。线性用户使用流程线性用户体验设计指的是一种带有特定的开始、过程和结束,并且可以让用户在每一步完成一个动作的用户体验设...

    2018-02-01
  • 同学进了大公司的UED部门,我想一部分原因是…

    2017年开年,已经陆续有毕业生提前找实习工作了,在与一位成功入职的新人设计师交谈中,有一个重要发现:交互设计越来越受重视了。这位计算机专业的小伙伴,机缘巧合接触了设计,从此一发不可收拾,短短不到一年时间就熟练掌握了PS、AI、AE等软件,还自学了手绘技能。不过即使如此,她的求职仍困难重重。不是985 重点大学/非视觉传达专业/只会画图标界面等等,都成为用人单位将她拒之门外的理由。虽然要求有点苛刻,但站在公司的角度,想要在浩浩荡荡的求职...

    2018-01-31