从三个方面从头梳理相关知识点

编者按：本小册子的目的不是教你如何制作动态效果，而是从基本动态效果、动态效果曲线、动态效果软件等方面梳理相关知识点，串在一起，帮助你了解动态效果的整体轮廓，适合零基础和新手阅读。近年来，UI设计领域最大的变化是越来越强调用户体验设计，在Web或应用程序中使用动态效果已成为一种主要趋势。这种趋势如此强烈，以至于我看到越来越多的应用程序使用的动态效果不再是为了改善用户体验，而是为了强调动态效果本身。在WebdirectionSouth会议上，设计师PasqualedSilva曾说过：好的动态效果应该是看不见的。(作为用户)你不应该注意到你在看动态效果。这是一个很好的动态设计建议，甚至可以说是原则。作为这些Web或应用程序的设计和开发者，在我们设计和开发动态效果之前，我们应该首先明确什么是正确的动态效果：动态效果应该是一种提高可用性的机制，并以一种自然和含蓄的方式提供有效的用户反馈。对优秀动效的理解往往被忽视，而不良动效迫使用户关注界面，而不是内容本身。用户使用你的网站或应用程序有明确的目的：买东西，学习新知识，找到新音乐，或者只是找到最近的地方吃饭。他们不会来玩你精心设计的界面。事实上，用户根本不在乎界面设计，只在乎他们是否能在这里轻松实现他们的目标。优秀的动态效果应适当地反馈用户的点击或手势，以便用户能够根据自己的意愿轻松控制应用程序的行为，从而增强应用程序的使用体验。我们通常在Web或应用程序中看到的基本动态效果实际上是由一些最基本的动态效果组成的，这些基本动态效果包括：移动（Translate），旋转（Rotate），缩放（Scale）。在一些动态设计工具的帮助下，你通常只需要设置它的起点和终点，并告诉它你想要什么类型的动态效果，设计工具会根据你的设置渲染整个动态效果。顾名思义，移动-Translate移动是将物体从位置A移动到位置B，这是最常见的动态效果，可以在滑动、弹跳和振动等动态效果中看到。旋转–Rotate通过改变物体的角度来产生旋转效果。当页面加载或点击按钮触发长时间操作时，常用的Loading效果或一些菜单图标的变换将使用旋转动态效果。缩放–Scale缩放广泛应用于App应用中，如点击App图标、打开App全屏界面、点击缩略图查看具体内容等。动态曲线自然界中大多数物体的运动不是线性的，而是根据物理规律进行的。一般来说，动效的响应变化与执行动效的物体本身的质量有关。优秀的动态效果应该反映真实的物理现象。如果你想展示的对象是一个沉重的对象，它们的初始动画响应/参数会变化缓慢。相反，如果物体是轻的，动画响应/参数的开始变化会更快。你也可以在easings中.查看net中的所有动态曲线，获取相应的CSS、JS代码，并在您的项目中使用。属性变换属性变换是一种非常常见的动态效果。例如，淡入/淡出效果可以通过改变透明度来实现。同时，几乎所有属性都可以改变物体的大小、颜色、位置等，以反映动画效果。注意下面动态效果底部的菜单栏。当他的高度降低时，他的透明度也相应降低，从而产生折叠效果。在大多数情况下，我们需要同时使用两种以上的动态效果来有效地结合它们，以达到更好的效果。另外，你还需要让你的动态效果遵循一般的物理规律，这样才能让它们更容易被用户接受。动图案例见：http://www.uisdc.com的动态效果不应该太慢。我认为理想的动态效果时间应该在0.5-1秒之间。当您设计淡出、滑动、缩放等动态效果时，应将时间控制在此范围内。假如动效时长设置得太短，会让人看不清效果，甚至更糟的是会给用户造成压迫感。另一方面，如果动效持续时间过长，会让人觉得无聊，尤其是用户在使用app的过程中，反复看到同样的动效。许多设计师经常遇到这样的麻烦，他们看到的最终产品的动态效果与他们在设计阶段的定义有很大的不同。这是因为，虽然作为一名设计师，可以定义非常酷的动态效果，但由于技术或成本的限制，一些动态效果往往因开发成本高而被抛弃。因此，作为一名设计师，你可能需要了解如何设计动态效果，以及动态效果背后使用的技术。这将有助于我们在整个项目设计阶段做出明智的选择，从而节省大量的开发成本。动效制作工具目前有一些非常流行的动效设计工具，它们基于不同的技术，也有自己的特点。您可以选择您最喜欢的使用方式。FramerFramer是基于JavaScript的原型设计工具，是开源项目。Framer具有支持手势、动态效果、状态、基于网页、易于实现、可浏览任何设备等特点。如果你精通Javascript，这个工具应该适合你。PrinciplePrinciple可能是所有动效工具中最简单易用的。您只需设置屏幕A和屏幕B，Principle就可以自动产生这两个屏幕之间的过渡动效。当然，你也可以通过设置不同的时间和动效曲线来调整动效。Principle是一款桌面应用，其界面与Sketch非常相似。此外，您可以轻松地将Sketch中的设计直接复制到Principle中。FlintoFlinto和Principle一样简单易用。特别是它提供了一个[Skech插件]，可以直接将您的Sketch中的Artbords和3dtransform导出到Flinto。PixatePixate是一款能帮助您快速制作原型的Webapp。与Flinto或Marvel不同，你可以区分层次（layers）与嵌入式交互，如拖动、点击、双击等。将原型保存在Web上，您可以使用iOSapp来预览原型的效果。Origamiorigami是一款免费的QuartzComposer插件，Origami使QC界面更加友好，更适合移动App的界面设计。Facebook的产品设计师从2013年5月开始开发这个QC插件。Origami的开发过程与Paper一起进行。随着Paper的功能越来越复杂，Origami变得越来越强大。Paper上的每一个动画效果都是由设计师先在Origami上制作成型，然后由IOS工程师编写的。AfterefectsAftereffect简称AE，是adobe公司开发的动态设计软件。对于那些不碰代码的纯设计师来说，这是一个非常理想的动画设计工具。在Dribble上有许多优秀的AE动效作品。与其他工具相比，AE是一种更传统的工具，使用真和层来定义动画。作为Adobe的产品，它的许多功能与Photoshop非常相似，但对动态效果有许多附加功能。