发布时间：2023-1-9 分类： 行业资讯
如果你想学习如何设计APP的效果，那么让我们一起享受这篇文章〜
如今，丰富而精致的App效果分布在优秀的移动应用界面中，为用户提供了良好的动态沉浸式体验。动态设计在产品开发过程中越来越被认可和重视。
通过本文，您将轻松学习有关运动设计的一些基本知识：
为何设计动态？它的含义和价值是什么？
有多种形式的App效果，如何区分和分类？
优秀动机的实用指南是什么？
有这么多动态效果软件，如何选择合适的软件？
一，动态设计的必要性
1.改善用户体验
如果设计者只追求静态像素的完美呈现并忽略动态过程的合理表达，则用户将无法在视觉上感知元素的连续变化，因此难以清楚地感知到替换新旧国家。
迪士尼动画大师纳特维克说了一句话：
关于动画的一切都在时间和空间上。
通过“时间点”和“空间幅度”的设计，为用户建立了运动的可信度，即视觉现实。当用户意识到动作合理时，可以更清楚，更愉快地使用产品。
2.增加产品气质
没有添加动态产品，它会给人一种无生气的感觉。所有内容都是扁平的，没有生气。即使界面设计美观，也会缺乏精致细腻的气质。
如果把产品比作漂亮的女人，那么界面视觉就是美的价值，而互动效果就是美的身体语言。合理的动态性能将传达更多的三维和更多相关信息，提高产品的“表达能力”，增加亲和力和乐趣，也便于品牌的建立。
3.创造设计师优势
（1）降低沟通成本
设计师创造高保真和动态的Demo来展示设计理念和想法，大大提高设计方案的切换率，降低设计师的沟通成本和发展，提高动态效果的减少，体现专业性。
（2）建立核心竞争力
在当今的UI设计行业已经趋于饱和，产品设计过程逐渐变得系统化和模块化。设计人员只能使用该组件重复“拼接”页面而不会产生更多的值。可能性会增加。
除了日常工作外，为了给公司和团队带来更多价值，动态设计能力是互动/视觉设计师的基本技能和核心竞争力之一。
二，动态设计的类型
界面动态效果有很多种。根据App动力学的影响，它可以大致分为以下6种类型。:
1.过渡期过渡
人脑灰质对动态物体敏感（如：运动，变形，颜色变化等），在界面上增加一些平滑舒适的过渡效果，不仅使界面显得生动，还有助于用户理解更改前后接口的逻辑关系。 。
2.分级显示
在现实空间中，物体具有接近大小的原则，并且运动将快速和缓慢。当界面中的元素具有不同的级别时，适当的动态可以帮助用户澄清前后的位置关系，并使用该效果来反映整个系统的空间感。
3.空间扩展
在移动界面的设计中，由于有限的屏幕空间难以携带大量的信息内容，因此可以通过折叠，翻转，缩放等扩展附加内容的存储空间，以及用户通过逐行显示减少。
4.专注于
注意力集中在于通过元素的动作变化来提醒用户特征的内容信息。这种提醒不仅减少了视觉元素的干扰，而且使界面更加清爽简洁。它还可以在用户使用过程中以轻松自然的方式吸引用户的注意力。
5.内容呈现
界面内容元素按照一定的顺序规律逐步呈现，引导用户的视觉焦点，帮助用户更好地感知页面布局，层次结构和关键内容，并使整个过程更加丰富和流畅，添加界面的活力。
6.操作反馈
无论是点击，长按，拖动，滑动等，您都应该从系统获得即时反馈，以视觉或动态方式显示，帮助用户了解当前系统对交互过程的响应，并带给用户A安全感。
三，动态设计原理
这是一位充满活力的设计师，在五年内为40多个国家和数百家顶级机构提供咨询服务。总结了实用的动态设计原则，以帮助改善产品体验和可用性。 [翻译Z Yuhan注]
1.轻松进出
当老化事件发生时，元素的动作应该看起来自然并且符合用户的期望。
2.抵消和延迟
添加新的界面元素或场景时，可以使用与expression元素的关系。
3.父子关系
当有许多界面元素时，您可以使用时空差异来创建可感知的父子继承关系。
4.变形
表达元素的功能的变化以相干状态描绘。
5.价值变化
当元素的值改变时，前后之间的关联以连续动态方式表示。
6.面具
如果界面元素的不同呈现方法对应于不同的功能，则呈现模式的改变过程是连续的。
7.覆盖范围
堆叠元件的相对位置用于描述它们的平坦空间关系。
8.复制
当从现有元素复制新元素时，它们的关联以连贯的方式描述。
9.景深
允许用户获取非主要元素或场景。
10.视差
当用户滚动界面时，在平面中创建空间级别。
11.翻转
新元素的产生和离开由空间结构的描述表示。
12.幻灯片放大
使用连续空间描述来指导界面元素和空间。
四，动力学软件的选择
动态设计软件有很多种，不同软件的重点不同。设计人员可以根据项目的时间，精细度和面向对象选择合适的软件。下面我列出市场上常见的动画软件及其各自的优缺点，以供参考。
1. After Effects
AE因其软件而闻名。应该知道它的设计。它的优点是可以实现超高精度的动态效果。通常，UI动画制作仅使用AE的一小部分。缺点是阈值高，难以上手，无法进行实时交互。
2.炒作
Hype声称是无代码工件，使用时间轴设置AE等动画。动画效果可以直接在PC，Mobile和Pad侧预览，也可以导出视频或GIF。 3.0版还具有物理特性和弹性曲线，可实现更强大的动画效果。
3.原则
该原理功能强大，界面类似于Sketch，被称为Sketch的最佳合作伙伴。它主要是在页面，单元格动画和其他细节之间进行一些转换。优点明显，上手快，效率高，质地好，缺点是不易做一整套交互过程。
弗林托
Flinto界面与Sketch非常相似。它可以快速实现各种滚动，转换和点击反馈效果。它适用于以较低的学习成本模拟多个页面和复杂的交互过程。缺点是难以实现复杂的动力学效应，价格稍贵，试用期短。
5. Framer
Framer是一款基于Javascript的原型制作工具，可快速导入Photoshop中的图像，草图和模拟图层分层，支持手势，并具有可在手机或平板电脑上预览的高度动画。缺点是它需要一定的编程基础并且很难开始。
6. ProtoPie
ProtoPie是一种交互式原型设计工具，支持Mac和Windows平台，更轻巧，并具有更多集成功能。它可以调用iPhone系统的陀螺仪，麦克风，指南针，3D Touch，智能传感器等。绝对是Windows用户设计者的好处。
总结
动态设计可以增强用户体验，增加产品气质，为设计师创造优势;
六种角色的动态效果类型：过渡过渡，分层显示，空间扩展，焦点注意，内容呈现，操作反馈;
12个实用的动态原则：轻松，逃避和延迟，亲子关系，变形，价值变化，面具，叠加，复制，景深，视差，翻转，幻灯片缩放;
根据项目时间，成色，面向对象等条件，选择合适的工具来制作效果。
至此，《Design System》系列运动理论文章将告一段落，如果您愿意，请给我一个恭维〜您还可以关注我的公开号码“彭鹏设计笔记”，我将更新UI不时设计。好文章。
最后，我希望每个人都能成为一个充满活力的人。
作者：彭鹏
来源：微信公众号：彭鹏设计说明。
本文由@彭彭发布，未经作者许可不得转载
该地图来自Pexels，基于CC0协议
