发布时间：2023-8-30 分类： 行业动态
本文重点介绍动力学的原因，良好动态设计的标准是什么，如何进行动态设计，以及如何使设计的动态变得完美。
阅读本文后，您将学习：
1.为什么需要动态设计？
什么是动作设计？
动态效应在产品设计中的作用
动态设计的良好标准
2.如何设计动态效果？
6种概念化效果的方法
6种实现动态效果的方法
3.动态效果的类型
4.常用的动画软件
5.让效果发挥作用的4种方法
你为什么需要设计动画？
我第一次接触动态设计，但我觉得它很酷，很酷，翻滚，旋转和爆炸。只是感觉新鲜，有趣，并可以炫耀技巧。可以使设计更酷。当我第一次接触时，也许我的大多数同学会有或多或少相同的想法。这是我们运动设计的目的吗？它不应该。
为了解决如何设计动态效果的问题，有必要弄清楚什么是动态设计。动态设计的作用是什么？
1.什么是动态设计？
动态效果的提升，可能是在平面设计之后，平面设计的优势在于用户的注意力可以集中在界面的核心信息上，去除了对用户无效的设计元素，并且设计是不被打扰。这种体验更加纯粹自然。这个想法是正确的，回归产品设计的本质，就是提供更好的体验，而不是提供更漂亮的界面设计。然而，过于扁平的设计也带来了新的问题。如何显示一些复杂的层次关系？如何引导和吸引用户？这与用户在真实3D世界中的自然感受不一致。因此谷歌推出了Material Design设计语言。
在材料设计规范中，动态设计章节被命名为“动画”，动画生动。
动词Animate意为“赋予生命”。效果可以定义为使用类似动画的技术来赋予界面生命和活力。
之前我们讨论过Material设计语言，其中一部分是解决过度扁平化设计的缺点，如何呈现复杂的层次关系，如何引导和替换用户。为了解决这个问题，材料设计风格，充分利用Z轴，通过分层设计和动态效果的组合，提供了在扁平化的基础上更好地理解层次关系，给设计一个用户使用情绪增加。参与中间。
2.动态设计对产品设计有何影响？
动态设计的作用
如上所示，运动对产品设计的影响包括：
通过级别信息;
传递状态信息;
提示隐藏信息功能;
传递情感信息。
了解这一点，那么为什么我们需要动态设计？
通过以上结合自身产品设计的特点，我们可以总结出动态设计的动机如下：
等待而不是无聊;
做出改变并不难;
反馈不是单调的;
让体验变得情绪化;
让用户更愉快。
什么是好动力？
知道动态设计的原因，我们应该做什么样的动态设计？或者什么是好的动态设计？它很酷，翻滚，旋转，爆炸吗？判断复杂性很好。标准不好？
一位着名的外国一线设计师曾在分享会上做出了这样一个良好效果的定义：
良好的活力应该是看不见的，良好的活力应该建立在提高可用性和以一种被认为是自然和隐含的方式提供有效用户反馈的前提下。
事实上，良好的动态设计适合用户体验，最终服务是体验而不是动画设计的显示。
在这种情况下，让我们总结一下良好动态设计的标准。
首先，我们必须具备一些功能：
快速而顺利;
恰到好处的反馈;
改善运营经验;
提供良好的视觉效果。
动态设计标准
其次，良好的动态设计应该是第一个服务体验，其次是适当的设计（考虑综合性，如性能，实施成本，是否干扰用户等），再次是让用户感受到情感互动你的输出，最后是最基本的它是具有视觉美感。
如何设计动画？
知道什么是好的动态设计，然后扩展下一个问题，我们如何设计运动效果？或者，如何开始使用动态设计，尤其是初学者？
很简单，只需两步：
首先要有一个概念，想法;
根据想法全面实施。
不知道？你是如何提出想法的？你觉得怎么样？根据我自己的结论，我可以从这六个方面构思：
鼓舞人心的消息来源
1.将产品与设计相结合
要结合产品思考，创意的设计必须符合改进的产品体验，并且必须注意不要盲目。
2.理解基本常识
这些常识包括动态设计的基本常识（例如，基本运动规则，节奏，动画），基本的发展常识，预期如何实现动态效果，以及实现成本。确保你能顺利降落。
3.观察生活
大多数人对美的看法来自日常生活经历。例如，什么样的运动是温和，强烈和令人震惊的。当我们对我们需要构思的动态进行定性定位时，我们可以从生活中这些相同和定性的自然事物中找到灵感并拦截本质。
4.看，想想
除了观察生活，我们还需要看一些优秀的动态设计，并始终积累。与此同时，有必要仔细考虑“看”的事情。我想想一下他为什么如此设计，如何完成这套动画设计（通过那些构成这种动态设计的技巧，整体节奏就是一种感觉）。总是将自己与自己对类似事物的想法进行比较，找出差距，并弥补它们。这是积累经验和技能的过程。
5.学会反汇编
大多数网络和应用程序的动态设计都是由基本的变化组成的。我们必须学习如何拆除其他人的复杂动态设计，并通过观察更多观察来学习它们。然后，通过合理的安排设计自己的动态设计，你就是这个动态设计的导演。
6.专注于流行的
这很简单，就是每个人都应该关注设计行业，或者网络应用动态设计领域。了解新的设计技术，设计趋势和设计方法。不要落后，不要永远把自己定义为追随者。
之前我们说过，我们在web& app中看到的大多数动态设计都是由一些基本的变化组成的。这些基本变化是什么？ （见下图）
动画的基本变化
基本变化主要包括：移动，旋转，缩放和属性变化。之前的观点已经很好理解，这里不再详细解释。解释最后一个属性更改，它指的是属性的更改，例如透明度，形状和颜色。所有这些变化，经过合理的安排，与适当的运动节奏协调，是一个完整的动态设计。
简单地说：你必须决定你想要发生什么样的运动，以及运动应该采取什么样的节奏。贝塞尔曲线是速度和时间之间的关系，它以图形的形式显示，使其更加直观。
改变节奏
上图是一些常见的Bezier曲线，右侧是AE设计过程中的运动曲线调整界面。
为什么运动需要匹配正确的节奏？
因为自然界中的运动不是线性均匀运动，而是根据物理定律的曲线移动运动。这是我之前说过的基本常识和基本法。人们对一种运动形式产生的大部分情绪反馈来自于生活中看到的类似形式的运动。因此，我们必须遵守物理定律，以便我们能够准确地传达我们动态设计的情感。当然，它可以根据需要进行夸大和简化。规则是死人还活着。随时随地学习。
http://easings.net这个网站归结为Bezier曲线的基本全动态形式，并有预览。也可以直接使用js代码，非常方便，非常直观。
说出如何构思，然后考虑如何实现你的想法：
实现动态设计
如上所示：
实现想法基本上是技术和技能的问题。这需要学习和积累。你是如何学会积累的？
1.动手实验，练习完美。
继续努力锻炼你的技术技能。只有尝试才能真正验证您的设计。
2.临沂作品
学习任何东西，尤其是设计这项业务临沂是一种非常有效的入门方式。以前的现实图标现在是相同的。临沂的过程实际上是与优秀设计师沟通的过程。由此，您可以仔细了解和学习他的设计理念，并结合您自己在临沂的过程中的经验优化和升级原始设计技术。这是一个很好的升级。技巧的方法。
3.注意细节
这很简单，就像制作简单的视觉设计一样，你必须注意细节，细节决定成败，尤其是动态设计。要认真，多想想，全面思考。
4.有节奏感
之前已经说过了。为了使您的工作充满活力而不是僵化，您可以为产品赋予新的活力。
5.先添加然后减少
在实施过程中，当您不确定如何丰富您的设计，或者您不确定使用什么技能来实现自己的愿景时，您必须不断丰富您的原始设计理念。试着看看你可以动态的地方。这样锻炼可以创造一种可能性并创造突破。然后，在这些可能性和突破之后，进行减法以去除多余的保留精华。
6.搜索引擎
我有尽可能多地使用搜索引擎的建议。使用搜索引擎可以解决您遇到的95％的问题。重要的是自己找到问题的解决方案，你可以记住更深层次的系统。您还可以掌握问题的解决方案。
效果的类别是什么？
我们可以将当前的运动设计大致分为两大类：
1.功能效果（如下所示）
这种动态设计更适合产品设计，也是本文的主要内容。
功能活力（此图片来自网络集非作者原创）
2.显示效果（如下所示）
这些动态设计相对复杂，几乎没有实际应用。基本上用于一些显示动态设计，我们也不能使用我们的基本运动规律来嵌套（不嵌套，太复杂），它们的实现一般是通过AE插件实现的，插件不是很难，还有一个特殊的插件-in网站，每个人都有兴趣学习，一般的插件都是英文的。
显示类型效果（此图片来自网络集非作者原创）
什么软件用于动态设计？
运动设计软件
只需向您介绍一些常用的生产软件，并产生动态效果。头痛是时间成本问题。这些软件有自己的特点：
AE：全能玩家可以做出你想要的任何效果，但是操作的成本相对复杂。
原理：操作简单，效率高。适合制作快速显示或简单动画设计的演示。
炒作3：在AE与原则之间。它是近年来新兴的动画设计软件，它可以直接生成代码，并且具有高效的草图。
您可以根据工作中的实际情况适当使用它。
动态设计如何落地？
我谈到了为什么我这样做，什么是好的，以及如何做到这一点。下一步是谈谈我们如何才能使我们的勤奋设计变得完美。
基本上，您和开发如何设计这片效率，高效合作。通常的做法是听写+例子。基本上，我们使用中文与日语进行日语交流。我们只能传达一般的想法。他们中的大多数都有偏见，而且成本相对较高。很多时候，他们彼此不了解。
我们需要基本上告别沟通，我们怎样才能使开发爱上动态设计？
我简要总结了几个要点：
动态着陆
1.专业设计输出
为了让发展说服你，首先我们必须在自己的事务上保持专业。我希望有一个可靠的发展，首先，要成为一个可靠的设计师。例如，如果我们想要发展到像素级别，那么我们提供的输出必须精确到像素级别，同理心和专业性。
2.良好的早期沟通
在设计开始时，您必须与开发人员进行沟通，并了解是否允许执行此操作的时间成本。目前的技术条件是否有坑。只是为了确保您的计划基本可行，然后开始开发设计。总之，让开发人员知道你将要做什么，以及如何在他眼中看到这件事的实现成本。毕竟，他们是最终的代码生产者，避免浪费工作。
3.了解基本实施原则
我必须学会理解一些基本的实现原理和逻辑。通过这种方式，您可以在做到时更加了解，知道该做什么，做什么很难，目前平台无法达到您的目的。这允许更好地控制动态设计的节奏并最终着陆。有时它可以帮助开发和思考这个动画设计的逻辑实现，因为你是一个动态设计师，你更了解这个动画中的变化和步骤。
4.代表性动态设计
只需让开发图像知道您将要做什么。此时，您需要正确设计动画设计——
（如有必要，输出效果描述文件）
所以问题是，所有动态设计都被描述为可数据化吗？
确切地说，可以描述我们大多数常用的web和APP设计。
还有一些不可言说的动态设计。他们的基础知识用于品牌展示（例如徽标更改等），或者一些小的惊喜，例如JD的应用程序中的loadinggif，这是一个提供商品的小人物。这种动态设计归功于显示动态设计。
显示型运动设计：
显示类型效果（此图片来自网络集非作者原创）
因为它们基本上没有复杂的相互作用，特别是在运动效果原始本身，它基本上是满足某些条件触发回放的逻辑，并满足触发停止的某些条件。
它们的基本实现是输出PNG序列，或视频或GIF文件格式，因此输出文档没有问题。
输出视频将涉及压缩音量。我来谈谈如何压缩这些文件的数量：
AE文件压缩
AE压缩设置
如果使用AE，则在渲染输出时，如图所示。基本上，动态设计的一半可以控制在几百KB以内，复杂的运动可以控制在几M之内。
如果它仍然太大，我该怎么办？我需要压缩软件：
视频压缩软件
HandBrake是一款功能强大的视频压缩软件，可将数十（MB）视频文件压缩到几十千字节，几乎不会丢失。它很动人吗？更令人感动的是它是免费的。有需要的学生可以下载和学习它。
功能动态设计：
功能性动作（此图像来自网络集非作者原创）
与上述动态设计类似，我称之为功能动态设计，这是我们在正常工作中最常用的动态设计。这些运动设计需要涉及我们之前讨论过的运动设计数据化和输出效果设计文档。因为他们的动作本身涉及页面中的各种交互式组件，以及交互。您无法输出单个视频。有必要使用程序开发运动设计来控制原件的运动。但是，如果我只想开发这样一个动态的开发设计，很难理解你想做什么，以及在多大程度上？减少程度通常很低。将被开发和鄙视。为了使我们的运动对像素精确，我们需要在此时进行数据处理，这根据实际情况是合适的《动效设计文档》。
这里说，根据实际情况，写《动效设计文档》。我们为什么要根据实际情况及时添加？这是时间成本的问题。写这篇文章的目的是通过具有精确数字和单词的具象动态设计。因此，动态描述文档只是将视觉设计转移到开发的一种方式。该程序最终登陆的形式不需要是文件，可以根据实际情况使用。
如何编写动画设计文档？
你怎么写动态描述文件？或者我们如何将动态设计报告给发展代表？我创建了一个表格，简要描述了运动描述文档输出的基本流程（参见下图）。/P>
编写动作描述文档流程图
例如：
以下示例是先前在下车分部中执行的实际项目。
过渡效应
运动效果的基本参数：
动画大小: 750 * 1334（px）
帧速率: 25f/s（帧/秒）
动画时间: 1.0s（秒）
行动的详细描述：
（1）0f– 6f拾取器的顶部条从屏幕的顶部边缘移动到其相应的位置; Y轴移位为: 128px;动画速率:越来越快。
速度曲线:（屏幕截图中的时间范围不供参考）
（2）3f– 8f背景色edeff0，做淡入动画;透明度: 0％-100％;动画率:均匀运动。
（3）0f– 6f“呼叫按钮”的背景图像逐渐出现在表格中;透明度：0％-100％;动画率:均匀运动。
（4）2f– 8f表单下方的“Car按钮”由底部到顶部和淡入动画制作; Y轴位移：20px;透明度：0％-100％;动画率:首先进行短暂加速练习，然后慢慢进行动作。
速度曲线:（屏幕截图中的时间范围不供参考）
（5）15f– 23f从屏幕顶部边缘268px位置取出卡片;从屏幕的上边缘移动到148px（设计中的最终位置）;透明度：0％-100％;动画速率:首先做一个短暂的加速练习，然后做一个减速练习。
速度曲线:（屏幕截图中的时间范围不供参考）
（6）17f– 25f型号从852px到屏幕上边缘选择卡片;从屏幕的上边缘移动到732px（设计中的最终位置）;透明度：0％-100％;动画率:先做一个简短的加速练习然后做一个减速练习。
速度曲线:（屏幕截图中的时间范围不供参考）
我们输出动态描述文件的原因是：传输更加清晰，具体，效果更可控，通信成本降低，默契协议得到改善，设计恢复程度得到保证。
写在最后
话虽如此，我真的想尽可能地告诉每个人，我想如何做好设计。我不认为现在我们需要进行动态设计，现在是时候将原始界面设计师分成动态设计师的位置了。真正独立的动态设计师需要做的事情绝对不仅仅是我们产品设计中需要的东西。因为我认为这是界面设计师输出体验的一部分，但是现在我们可以使用另一种表达形式。设计师应负责最终的输出体验，用户使用产品的体验，而不是一些漂亮的设计。说到这么多动态设计，难以设计出动态效果吗？我之前亲自告诉过我一句话，我觉得这很有道理。
充满对设计或产品的热爱。我想用爱做设计。这样，您输出的输出将使用户感受到情感。
作者：Aogon-UED，AaronCui，公共号码：旧图形设计聊天
本文最初由@AaronCui出版。未经许可，禁止复制。
地图来自unsplash
