动效设计解密

动效设计(Motiondesign)是通过动态手段,提升产品用户体验的过程。也可以视其为界面设计(UIdesign)与动态设计(motiondesign)的交集。好的动效设计能够清晰的表达产品层级之间的关系、提升易用性与可用性、减少用户的认知成本,也能够彰显产品品牌特性与差异。

在有些时候,动效很容易被想象成某种为了增加愉悦性质的内容,其本身并不具备什么价值,因此常常被当做可有可无的部分,而实际上,动效则是一种更为高级的设计展现形式,通过模拟真实世界的运动,建立起手机这个虚拟世界与用户之间的认知关联,从而创造出符合用户认知习惯的操作体验;与此同时,不同品牌之间独有的品牌特性也大不相同,对应表现的行为与动作也有所不同,所以,动效设计在品牌特性的影响下,差异化也会非常明显,这为塑造产品特色和品质感奠定了重要的基础。本质上,动效设计(MotionDesign)是因为整个用户体验行业的发展而细分出来的设计门类。

为什么要做动效设计,当然是能够为产品带来价值才会去投入资源去做,那么带来的价值是什么?在大多数的认知里,动效能吸引用户的注意,那么自然能为产品带来点击或跳转等价值,但这仅仅是动效赋能产品价值中的其中一种,动效设计的意义还有以下几种。

1.2.1让过度更加流畅

这种设计的目的在于使用户在操作APP产品的时候让它过度的更加流畅,使得界面与界面之间、界面上元素的出现和消失都尽量的流畅,通过大小、位置和透明度的变化,使用户和产品的交互过程更流畅。用户使用APP时,如何避免界面跳转太过生硬、刻板,能不能不使用一些默认的跳转方式,而是使用动画的效果,不断地思考与尝试,才能够使我们的产品给用户更好的体验。

1.2.2能够让反馈更高效

在产品设计里面有一个非常重要的原则:让用户有操纵感。这种操纵感不仅仅表现在对用户的操作有了反应、有了显示,还有一种方式是让用户知道当前APP运行的状态,是正在等待还是正在加载,还是正在下载或变化,那这种状态的告知也是增强用户操纵感的方式之一。我们可以通过动效的设计,来告诉用户当前APP正在处在哪种状态,可以通过平移、放大、缩小删除等等动效的方式来给用户做及时的反馈。

1.2.3有效引导用户

1.2.4更清晰的层级展现

一款APP无论是简单还是复杂,都有自己的逻辑架构和逻辑层级,那当逻辑比较多、层级比较深的时候,我们就需要让用户在APP使用过程当中不迷路,能够让用户知道自己处于哪一个层级,这个页面和下一个页面是什么层级关系。也可以通过动效的方法来展现。

1.2.5增强操作

通过动效的方式来进行现实世界的模拟并且不需要任何提示,迎合用户的意识认知,使产品的交互方式更接近真实世界。增强了用户对应用的操纵感和带入感。如网易云阅读的动效,由小到大进行翻书,贴近现实。

1.2.6更有趣的体验

在可用性良好的前提下,通过细节设计和交互方式创新为产品增加亮点,可以带来更惊喜的体验,同时更好表达产品的气质与态度。比如发微博时点击中间按钮会慢慢放大,增加了趣味。

1.2.7减少用户焦虑

一些动画效果可以在加载过程中减少用户的焦虑、不安。

1.2.8吸引用户注意力

好的动效设计可以吸引客户注意力,增加页面趣味,比如苹果删除应用时会抖动。

产品经理在考虑什么时候要动效的时候,就要考虑这个动效设计究竟会给产品带来哪些作用。如果说这个产品需要有一些引导作用,那就需要动效设计了;如果需要展现层级,也需要动效设计;如果这个产品缺乏亮点,需要给用户一些彩蛋,让用户感觉有一些创新的体验,这时也需要加一些动效的设计。所以说动效设计的出现并不是UI设计师自行想象的,也不是产品经理拍脑子出来的,而是其有它相应的作用。

因此,动效的意义整体可以分为以下两块:

1、对产品而言,动效设计能够达到的效果

2、对用户来说,动效设计能够达到的效果

在这其中很多因素是互动或者呈因果关系的,比如引导用户操作可以减少用户对产品的认知成本,提升产品易用性也变相提升了用户和产品的互动性,为产品注入活力也会让用户减少部分不可避免的不适感等等,两者是相辅相成的。

动效设计涉及两种基本的交互类型:实时和非实时。

2.1.1实时

当用户在屏幕上点击UI元素时,实时交互提供即时反馈,会对用户的操作做出即时响应。

2.1.2非实时

非实时交互发生在用户操作后,这意味着用户需要经过短暂的转场才能看到结果,然后再继续。

转场类动效用于层级跳转或场景切换,除入场和离场动效外经常辅以缩放、透明度、旋转等平滑的效果,帮助用户理解界面间的变化和层级关系,也让界面更加真实生动。避免场景的瞬间切换导致用户产生变化盲视(视觉刺激的突兀变化会阻止用户注意到新的信息)。

2.2.2展示类

展示类动效用于突出产品核心功能和特点说明,界面信息按照一定的规律呈现,引导用户的视觉流向,帮助用户更好的理解产品,能够在第一眼吸引住用户。常见的如企业或产品的官网首页,能够对产品起到很好的宣传作用。

2.2.3引导类

引导类动效通过界面中某些元素的变化,引起用户注意或引导用户进行操作,避免用户困惑,能够自然而然的聚焦用户视线,降低其他视觉元素的干扰。

2.2.4反馈类

反馈类动效用于对用户的操作及时给出相应的反馈,如:悬浮、点击、拖拽等,以视觉的形式展现给用户,告知用户系统正在与用户发生交互,让用户产生一定的心理预期。

微交互是一个完成单个任务的一瞬间事件。它给出了让用户清楚某种物理交互已经完成的提示。比如,这可以是动画按钮、切换、触发等等。微交互非常重要,事实上也是设计的未来。

这种UI交互显示APP的刷新和加载状态。在移动端,下拉刷新动效目前算是最受欢迎的动效了。在等待加载更多内容时,不仅可以告知用户状态,还可以为用户提供时尚、美观和趣味。

清晰的导航对于APP产品的设计师来说总是非常重要的。用户总是希望抢先看到最关键的事物。通过表现对所选中的导航的活动状态,这将立即吸引用户的注意力到内容上来。

谈到数字时人们总会感觉无聊,数据对于用户来说就是数字和表格。添加UI动效,用形状、颜色的变化能够让用户更好的理解数据间的逻辑关系,更容易解读。

很多人认为,动效设计应当在视觉设计完成之后,对界面进行点缀和丰富,以此来提升界面的高级感,这种说法并不正确。此时交互和视觉均已定稿,动效形式会因定稿的内容受到限制,设计上就会出现牵强,动效失去了功能性,为了动效而动效则丧失了动效本身的意义。

动效设计应伴随原型设计开始,产品中存在交互的地方需要设计师仔细斟酌是否需要动效设计,动效的功能是什么,以什么形式出现等问题。这样能够保证每个动效都有其存在的意义,又能避免动效滥用的情况。

1、响应时长

2、持续时长

在动效设计时,物体的运动要符合现实世界的运动规律,符合物理运动法则的动效才符合用户的感知。

最常用的缓动曲线包括缓入、缓出两种形式,缓入为加速曲线,缓出为减速曲线。考虑到速度变化对用户心理和注意力的影响,(不断减速的物体会吸引用户的注意力,不断加速的物体会失去用户的注意力),因此入场动效要先快后慢,持续吸引用户视线,出场动效要先慢后快。

注重动效的功能性,设计前要反问自己:这个动效的作用是什么?必须要有吗?去掉会怎样?对用户来说有什么用?保证每个动效都应该有其存在的意义。

每个产品都有自己的品牌调性,动效设计要符合产品的品牌调性。对产品来说,符合品牌调性的动效能够保持与其他产品的差异化,提升产品的格调,也能够在用户心中形成品牌效应。如斗鱼的加载动画,对自身品牌形象进行有效传达的同时也给用户留下了深刻的印象。

1.1.1品牌建设

好的动效有利于品牌的建设与传播,能够更好的诠释品牌理念。

1.1.2H5专题营销

1.1.3产品展示

展示产品(或概念原型)的功能、界面、交互操作等细节,更直观的让用户了解一款产品的用途、使用方法等细节。

1.1.4趣味/游戏

在活动和游戏当中,更好的动效能够引导用户去理解它,理解产品的功能或活动的目的。

1.1.5交互反馈

从用户触发行为到预期结果之间的合理变化过程。早期互联网动画较少时,大部分动效都是为了解决某个具体的问题而存在的,有很强的目的性。

1.1.6状态缺省页

突出状态显示,往往以趣味性为目的让用户不为等待而感到烦躁。

1.1.7底部导航

图标动效突出统一性,操作状态区分明显。

另外动效设计通过四种不同的方式来提升产品的可用性:

播放型动效有以下几种比较常见的输出格式:

Gif、Apng、Webp本质上都是将位图进行压缩和转换,而Lottie则是基于代码层面的动画渲染,PAG则结合了两者的特性。目前一般使用Apng、Lottie、和PAG就已经可以覆盖大部分的输出场景,是可以优先考虑的动图格式。

结语

动效输出的手段目前虽然非常多样,而且随着技术手段进步选择会越来越多。但是目前来说没有任何一种方案,可以完全解决我们落地动效当中的所有问题。并且目前市面上所提供的任何一款工具无法真正解决设计思维所带来的局限性。作为设计师我们需要始终保持敏锐的观察力,并且持续的更新自身的知识树,才能应对多种多样需求下输出的动效效果的落地。

另一方面我们也需要站在更长远的角度去了解一个动效需求从产品逻辑到开发逻辑之间的鸿沟,并试着通过更多元的手段去跨越鸿沟。

设计无止境,沟通无极限。

感谢!

【本文作者:李衍、魏晓峰、祝佰彤、姜晓蒙、田文峰、魏茹、廉亚杰、赵翠翠】

THE END
1.前端状态同步:WebRTC实时通信随着互联网应用的不断发展,实时通信已经成为了众多应用的基本需求,而WebRTC作为一种支持浏览器之间实时通信的技术,已经逐渐成为了开发者关注的技术之一。本文将介绍WebRTC的基本概念、原理,以及如何在前端实现WebRTC实时通信。 什么是WebRTC 简介 是指Web实时通信技术(Web Real-Time Communication),它是由Google、Mozillahttps://www.jianshu.com/p/7568c9f86814
2.前端实时刷新技术前端怎么做到实时要在前端页面实现实时刷新,可以使用以下技术: 轮询(Polling):前端通过定时向服务器发送请求,询问是否有新的数据更新。这种方法简单易实现,但效率相对较低。 长轮询(Long Polling):前端发送请求到服务器,服务器在有新数据时立即响应,否则将请求挂起一段时间,直到有新数据或超时。这种方法相比轮询减少了请求次数,但仍然https://blog.csdn.net/m0_58367408/article/details/132337431
3.实现JavaScript中数据响应的方法总结javascript技巧JavaScript 数据响应是一种重要的前端开发概念,是指在应用程序中的数据发生变化时,能够自动更新与这些数据相关的用户界面(UI)部分的能力,本文我们来总结一下目前可以简单实现 JavaScript 中的数据响应的方法,需要的朋友可以参考下+ 目录 GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!【 如果你想靠AI翻身,你先https://www.jb51.net/javascript/29819117f.htm
4.前端发送请求的三种方式Fetch API返回一个Promise对象,可以通过then()方法处理响应数据,或者使用catch()方法处理错误。总结前端发送请求的三种方式各有特点和使用场景。同步请求适用于短时间操作或后端已处理完毕的情况;异步请求可以提高用户体验,常见的实现方式包括Ajax和Fetch API;Fetch API是一种新的网络请求API,基于Promise设计,强大灵活,https://developer.baidu.com/article/details/2774403
5.java接口响应时间太长但是前端必须接收到后端的响应前端怎么处理抽离出操作DB的方法insertData(), 在执行抛出事务超时异常时,会启动一个子线程重试调用insertData(), 后续提示用户"下单成功,刷新页面", 避免用户重复点击造成重复下单 2 查询出的数据不需要持久化 这种就是只针对于查询的需求了, 可能因为第三方接口不稳定导致接口响应慢, 在要求实时性不是很高时, 可以做一段时间https://blog.51cto.com/u_16213633/11188957
6.前端开发技巧实现动态添加表格行与实时数据获取功能在前端开发中,实时获取数据是提升用户体验的重要手段。以下是一些前端实时获取数据的常见方法: 5.1 轮询(Polling) 轮询是一种简单的前端实时数据获取方法。客户端每隔固定时间向服务器发送请求,服务器响应请求并返回最新的数据。这种方法易于实现,但可能会对服务器造成较大压力,并且在数据更新频繁的情况下效率不高。 https://my.oschina.net/emacs_8491653/blog/16509722
7.安防监控方案7篇为了确保事情或工作有序有力开展,时常需要预先制定一份周密的方案,方案是从目的、要求、方式、方法、进度等方面进行安排的书面计划。写方案需要注意哪些格式呢?以下是小编为大家整理的安防监控方案,仅供参考,希望能够帮助到大家。 安防监控方案1 一、系统概况 https://www.ruiwen.com/fangan/7522515.html
8.javascript你可能不知道的浏览器实时通信方案这就有了HTTP持久连接(HTTP persistent connection, 也称为HTTP keep-alive), 它利用同一个TCP连接来发送和接收多个HTTP请求/响应。持久连接的方式可以大大减少等待时间, 双方不需要重新运行TCP握手,这对前端静态资源的加载也有很大意义: Ok, 现在回到WebSocket,浏览器端用户程序并不支持和服务端直接建立TCP连接,但是https://segmentfault.com/a/1190000019697463/
9.一种基于智能客服业务的应答响应方法及系统与流程43.本技术实施例所提供的一种基于智能客服业务的应答响应方法及系统,本技术实施例通过将前端客服交互设备实时接收到的当前互动咨询请求输入至事先配置得到的交互内容解析线程中进行解析,以得到当前互动咨询请求对应的交互内容解析结果。并根据交互内容解析结果中的每一个关键内容属性的标签划定出当前互动咨询请求中的交互内容https://www.xjishu.com/zhuanli/55/202111111415.html
10.非招标公告中国南方电网标的3标包1-《基于前端实时分析模式的电网勘灾智能化关键技术研究及应用》科技项目(技术研发外委):本项目根据广东气候灾害对配网线路勘测的影响特点,开展基于大规模配网勘灾要求,通过对前端实时图像智能识别和多无人机协同控制等关键技术的研究,选取适用的技术路线,形成配网线路前端实时分析的智能勘灾综合解决方案,通过原http://www.bidding.csg.cn/fzbgg/1200333584.jhtml
11.前端获取http状态码,cdn技术,cdn软件,cdn自建,cdn部署,cdn安装PingCode前端如何获取http协议返回状态码 | PingCode智库2024年9月20日?·?前端获取HTTP协议返回状态码的常用方法包括使用XMLHttpRequest、Fetch API、以及通过库如Axios等方式进行网络请求、解析响应。 在本文中,我们将详细探讨这些方法,并提供具体的实现代码示例和注 更多内容请查看https://docs.pingcode.com/baikehttps://wdcdn.com/html/SSLzhengshu/20241216/3988.html
12.平潭“智能环卫”监管平台二期采购项目附件(3)出现“评标方法和标准”无效投标规定的。 (4)出现第三章投标人须知无效投标规定的。 (5)出现第四章资格审查与评标无效投标规定的。 (6)出现第五章招标内容及要求无效投标规定的。 (7)明显不符合技术和服务要求的为无效响应。 (8)内容不全或关键字迹模糊、无法辨认的为无效响应。 19.3根据《政府采购质疑和https://zfcg.pingtan.gov.cn/upload/document/20210707/f4e7d1eca6c648b89a59cbdeb245cdc9.html
13.前端开发:实时刷新(及时预览)工具小汇总,兼有gulp+browser写这篇文章是因为自己在平时的学习中,一次次试验了很多的前端实时刷新工具,有顺手的,有蹩脚的,有简单的,有麻烦的,安装完又折腾,折腾完又卸载,体验完这些也着实花费了不少时间,就在昨天又刚刚折腾完gulp+browser-sync的方法,估计可以让我消停一阵子了。这篇文章主要介绍和汇总一下我用过和见过的前端页面实时刷新工https://www.ucloud.cn/yun/86201.html
14.Ajax入门到精通全套完整版(ajax2020最新版本)Web前端Ajax初学者流输出响应包返回的方法 jsp文件响应包返回的方法 ?Ajax-012-ajax计算bmi创建异步对象 P12 - 00:03? 若使用局部刷新,则应答页面无需重新创建 直接使用应答对象输出 ajax 正式开始 改用异步对象发送请求,而不是浏览器提交的方式 Ajax的四个步骤是为前端页面做的 https://www.bilibili.com/read/cv14734701
15.Java线程池实现原理及其在美团业务中的实践首先,所有任务的调度都是由execute方法完成的,这部分完成的工作是:检查现在线程池的运行状态、运行线程数、运行策略,决定接下来执行的流程,是直接申请线程执行,或是缓冲到队列中执行,亦或是直接拒绝该任务。其执行过程如下: 首先检测线程池运行状态,如果不是RUNNING,则直接拒绝,线程池要保证在RUNNING的状态下执行任务。https://tech.meituan.com/2020/04/02/java-pooling-pratice-in-meituan.html
16.JW页面工厂的教程完美锦囊技巧教程资讯完美锦囊1、充分响应和移动端友好的设计 无论您使用页面工厂构建什么,它都会实现完全响应和移动端友好的效果。页面工厂使用Bootstrap 4顺利完成。如果你用这个工具创建一个页面,它将会100%响应并且对移动端友好,就像魔法一样。 2、实时前端编辑 页面工厂为您带来全新的前端编辑系统,为您带来最便捷的web开发体验。添加一个元素https://tech.wmzhe.com/article/86576.html
17.网页tpm零代码企业数字化知识站网页TPM(Technical Performance Monitoring,技术性能监控)是通过一系列工具和技术手段,对网页的加载速度、响应时间、用户交互性能等进行实时监控和分析,以确保网页的性能始终处于最佳状态。它包含了多种核心元素:页面加载时间、服务器响应时间、前端性能优化、用户体验监控等。页面加载时间是一个关键指标,它直接影响用户的留存https://www.jiandaoyun.com/blog/article/728317/
18.web前端如何实时获取数据?Worktile社区在Web前端开发中,实时获取数据是一个常见的需求。实时获取数据能够让用户获得最新的信息,并提供更好的用户体验。下面是几种常用的实时获取数据的方法: 使用XMLHttpRequest对象 XMLHttpRequest对象是用于在后台与服务器交换数据的核心技术。通过创建XMLHttpRequest对象,可以发送AJAX请求以获取服务器上的最新数据。使用该对象https://worktile.com/kb/ask/809584.html
19.一文读懂智能语音前端处理中的关键问题雷峰网以下是对Chime-3和Chime-4比赛中的有效方法进行的梳理。 首先看一下前端部分,有效的估计噪声协方差矩阵将有助于提高算法性能。为了有效的估计噪声协方差矩阵,需要对各个通道的各个时频单元进行屏蔽值估计,可以采用深度学习等方法进行估计,在此基础上计算噪声协方差矩阵;使用最多的波束形成方法包括:最小方差响应失真波束https://www.leiphone.com/category/industrynews/rd8sWYQ5qyLUAnx7.html
20.零式未来实用形堂示波器原理完整版教程一篇就够某些数字示波器可以选择采样方法:实时采样或等效时间采样。这些示波器提供的采集控制功能可以选择采集信号使用的采样方法。注意,这—选择与低速时基设置没有关系,只在ADC不能以足够快的速度采样,用—遍中的波形点填充记录时,才会有影响。视进行的测量类型,每种采样方法不同的优势。现代示波器—般提供控制功能,用户可以选http://m.szlswl8.com/university/oscilloscope.html