|
|
[size=1.063em]
[size=1.063em]官方微信：我是UE（昵称）,woshiue（订阅号）
[size=1.063em]官方Q群：156360020 验证：iamue
[size=1.063em]官方微博：我是UE网
[size=1.063em]若非单独声明皆属于原创文章
[size=1.063em]转载请注明：转载自 我是UE
[size=1.063em]本文链接地址: 将After Effects整合到用户体验工作流程里去。
网页设计过渡和动画，像视差滚动，隐藏导航，刷卡，拉来刷新，转换或真的任何UI过渡，高级动态原型在After Effects中进行设计。在这篇文章中，我们将介绍如何适应动效应到您的工作流程UX工作流程，我们将分享的细节，建议，经验和链接，你可以作为项目经验，并且在您的下一个项目开始体验这种工作方式。
[size=1.063em]
After Effects项目概述(查看大图片)
体验设计中的动效[size=1.063em]我喜欢把动效设计在用户界面上作为一种新型的审美观念- 内在的美感。用户可能没有意识到这一点，直到他们遇到缺乏它的接口。这内在审美模仿现实生活中物体如何移动实际。这一切都源于物理学的基本原理。物理学的定义是“自然科学与物质及其运动通过空间和时间的研究，随着相关概念，如能量和力。更广泛地说，这是一般性质的分析，以了解宇宙是如何运转的。” 在我们的例子中，我们的经验是这个截图。
[size=1.063em]
[size=1.063em]现实世界的物理原理可以提高用户体验。
什么是 After Effects?[size=1.063em]在过去一年左右的时间，你可能已经注意到了大量的非常酷的UI动画在网站上起舞。你可能会说：“这看起来很酷！他们是怎么做到这样精确的转换一样，没有任何的代码开发？“那么，答案很可能是After Effects. 对于那些谁不知道After Effects的来说：After Effects是从成立以来，一直用于构建复杂的标题动画和电影特效的Adobe软件。设计者意识到它的力量，并开始使用它来快速迭代，并表现出复杂的交互和动画。
[size=1.063em]下面的照片看起来吓人，与所有这些层和小钻石（关键帧）的。在动画关键帧是定义任何过渡的起点和终点。该点被称为帧，因为他们的点称为帧用来测量帧片时间位置。
[size=1.063em]
[size=1.063em]在After Effects如何看关键帧
[size=1.063em]如果你还记得在Flash闪存编程或“补间”，那么这个概念应该很熟悉。关键帧提供复杂的动画非常简单的逻辑。如果你是一名开发人员，你可以有一些真正的乐趣，通过创建软件的表达式引擎强大的关键帧动画。同样，类似的Flash，它允许用户通过关键帧补间，或通过编写自定义的ActionScript代码，After Effects中有一个内置的基于JavaScript引擎，使得更精简的动画，而无需手动创建几十或几百关键帧。
[size=1.063em]表达式是一个小的软件 – 就像一个脚本 – 计算结果为单个图层属性的单个值在特定时间点。而剧本讲述一个应用程序做一些事情，表达说，一个属性的东西，并告诉该特定层或财产或动画以某种方式转变。表情证明是非常有用的，当你想很快测试跨多个元素的特定动画。
[size=1.063em]
[size=1.063em]After Effects类似于在Flash中的补间。
AFTER EFFECTS的优点[size=1.063em]加快项目进度
[size=1.063em]
向客户解释一个复杂的UI动画真的很难。他们中的大多数无法想象它。我甚至有一个很难看别人的文档时，描绘出了一个UI动画。当客户看到一个漂亮的和巧妙的动画风格在After Effects，他们很高兴。这给他们的最终产品的外观和功能的清晰画面。这种功能的探索通过原型可以在设计过程的各个阶段进行。显示客户在项目的发现阶段的一些基本探索动画和过渡可以让他们真正兴奋的可能性，使他们想要更多的自己的网站或应用程序。我们通常使用After Effects，以此来验证功能和视觉设计选择。没有在该项目周期的阶段，你选择实施后对原型的事情，一定要有一个明确的最终目标，知道这种形式的原型应该是快速的。其目的可能是向人们展示了最复杂的部分功能和微调他们的开发人员，或者干脆显示客户端的东西光亮和性感。无论哪种方式，这个过程应该是快速的。
[size=1.063em]这种快速可视化的动画方式也非常适合与用户测试不同的设计。在这一点上项目，大多数的设计决策都是基于现有的网站（如果有的话），从用户群和大量的假设，得出人物角色的分析。因此，这个过程使我们能够轻松地创建相同的设计元素的一些变化，展示了它的动作，并提出了对用户和要求反馈的调查或与单对单的问题。通过让用户查看动画设备上,他们可以迅速判断哪些感觉更自然和最吸引人的。你也可以把这个变成一个更传统的测试方法,通过融合在一个可点击的原型作为一个GIF动画任何你正在使用的网络平台。现在大多数快速原型web工具支持gif。
[size=1.063em]
[size=1.063em]有很多方法可以激活相同的UI元素。
[size=1.063em]
[size=1.063em]上面这是另一个版本的动画,可以用来迅速得到用户的反馈。
[size=1.063em]菜单，按钮状态，离帆布容器或者其他的 – – 纸质（线框）的过渡似乎是一个简单的解决方案。但是，一旦你注明他们的开发商和看到他们在运动中，你可能会很快改变了主意，说：“其实，菜单看起来怪怪从左边滑动。我们能不能在尝试从顶部滑动呢？并且可以在菜单列表的链接项目进来后面彼此延迟吧？“这变成了开发商和设计师和审判的问题和错误两个部件之间的背，来回。
[size=1.063em]通过采取一些元素，从你的网站以任何形式，无论是方框和箭头或视觉谱曲，并使要素如何动画的几个变种避免这种情况。一旦完成，虽然视觉设计师们使他们的最后一分钟的调整和清理自己的文件进行开发，这些不同的动画，可以工作到快速原型的InVision或类似的基于Web的原型工具，他们可以被发送到股东或实际用户进行测试。然后，我们可以把这些快速的可用性测试的结果和调整我们的职能文件，以反映我们的调查结果，以及最有效的菜单变型的GIF。
[size=1.063em]伴随GIF文件，我们将增加我们的功能的文档，以及所应用的缓动曲线和动画的持续时间。因为动画的这些属性似乎表现最佳的变体中，我们就可以开始这些适用于其他功能和网页的元素以创建整个体验一致的内脏感觉。是的，其他元素会有轻微的变化，由于其不同的目的，但同样，这个问题的答案自带的测试。
[size=1.063em]通过引入该到精益UX或灵活的工作流程，对开发和设计团队之间的动画背部和往复讨论可以砍下的需求更多，开发团队将更有信心在它的方向设计方向，并会觉得少了认知负载而设计，并通过文档阅读。如果你有兴趣在如何去自定义转换后对缓和缓和曲线CSS3动画关键帧为您提供的开发人员更精确的文档,看看这篇文章由Ryan Brownhill关于这个问题的.
[size=1.063em]
[size=1.063em]Lean and agile UX methodology (Image: UXPin) (查看大图片)
EASING（缓动）[size=1.063em]如前面提到的，这个内脏审美模仿对象如何移动在现实生活中。在现实世界对象不以恒定速度移动整个运动的时间 – 他们缓解举例来说，如果你启动你的电脑鼠标办公桌对面，它不会移动在同一恒定的速度，然后走到了突然停止。在该数字字，我们模拟真实物体的运动用缓动曲线函数.
[size=1.063em]缓动函数通常介绍给完整性百分比的属性值。不同的框架使用略有不同的方法，但概念是容易掌握，一旦你的想法。这也可能是最好看的几个例子。
[size=1.063em]该缓动函数官网，可以去通过，并检查了在运动中各个曲线如何把对象，然后抢在函数或者CSS，SASS或JavaScript在您的After Effects项目得到充分利用。如果你正在寻找的东西多一点自动化和定制的少，你可以轻松下载Ease and Wizz,，一个伟大的剧本是预装了多条曲线后的影响;当关键帧被选中，你可以申请一个曲线的表达这些关键帧。
[size=1.063em]
[size=1.063em]可视化cubic-bezier曲线相比,线性曲线
结合不同程序的工作流程PHOTOSHOP 或 ILLUSTRATOR或AFTER EFFECTS[size=1.063em]这可能是大多数设计师团队将把你的线框图转化为视觉美。因为以后的效果是Adobe公司的产品，PS图象处理软件（PSD）和Illustrator（AI）文件是非常兼容的。你不需要任何特殊的输出规格为PSD文件。只保存一个文件并将其导入。和AI文件，所有你必须做的是确保你的“释放层序列”保存文件之前。
[size=1.063em]以PSD为后效应很大方面是能够编辑文本。这样，如果你要更高的保真度的动画测试和一些副本中发生的变化进行比较，在动画原型的变化变得很容易。
[size=1.063em]如果你没有启用文本，总是有实时更新选项。美在Adobe程序工作，他们中的大多数人很好地沟通彼此。所以，当你在一个PSD的改变或AI文件，它应该反映你的组合后的效果。你可能需要重启后影响项目看到的变化反映，尽管。
[size=1.063em]尽量限制动画GIF六秒-这是，不是整个过渡，而是整个视频你会出口。虽然我有时使用后效果显示更复杂的流动，最终被两到三分钟长，因为文件的尺寸太大，结构复杂，文件的不理想。做快微互动动画最有效。
[size=1.063em]当把这些动画视频给客户，我发现只击播放按钮并没有得到我所希望的反应。我最近一直在展示动画GIF形式的客户或放在视频的形式，让客户使用视频洗涤器，它创建一个交互模拟抢用鼠标和页面向下滑动滚动条的功能。这，当然，并非在所有的情况下工作，但它确实是一个有效的处理与页面滚动动画或视差效果，或当你需要隐藏滚动导航。
SKETCH 到 AFTER EFFECTS[size=1.063em]我们最近开始使用SKETCH 3，在工作中，这是一个伟大的工具。它说，与测量机CSS单位，数百名在GitHub仓库都有插件它，它促进协作与功能设计团队和视觉设计团队，如果他们都工作在同一个程序。我唯一的抱怨是，它不与After Effects的非常兼容。我想出了一个变通一些，最终并没有被证明是非常有效的。然而，Issara Willenskomer已经找到了一种巧妙的方法可以轻松地 转换 Sketch文件到两者之中任一PSD 或 AI 文件在After Effects轻松设计动画。
从SKETCH中导出画布[size=1.063em]当你的图形文件输出的AI，选择图板（S），你会喜欢的动画，选择工具面板中的SVG在正确的格式，然后单击“在面板底部导出的文件名”。现在，你准备好打开Illustrator导入SVG文件.
[size=1.063em]
从SKETCH中导出画布(查看大图片)
导入文件到ILLUSTRATOR[size=1.063em]一旦你选择并打开导出SVG在Illustrator,你会发现所有的层都集中在一起。默认情况下,当草图出口SVG文件,它组织所有的层,所以你需要取消组。一旦层未归类在个人的层次,他们在技术上仍然住在同一层。当准备任何AI文件后的动画效果,你需要使用特殊的“释放层序列”功能在图层面板。确保选中父层时这样做。一旦层被释放,你会发现他们都被分配自己的颜色。在这一点上,您可以选择的所有文件已经发布,移动它们父层之上。
[size=1.063em]
导入导出的文件Illustrator和使用“释放层序列”特性。 (查看大图片)
顺序与整理图层[size=1.063em]它的时间来组织这个大烂摊子，使其更容易编辑。这是逻辑的用武之地。想想这些层将被动画化，并简化尽可能。例如，如果一吨层都是在后台，但你并不需要这些层动画，你可以将它们在Illustrator中，使他们导入为单层，或给他们直观的标签，这样就可以预先撰写这些层在After Effects。预组成的路线将让你真正为它们制作动画以后，如果你决定这样做。
[size=1.063em]
顺序和整理你的层所以他们更容易编辑。导入ILLUSTRATOR文件到 AFTER EFFECTS[size=1.063em]在导入过程中最重要的一部分，大多数人感到沮丧，是小下拉菜单，你必须选择“作文 – 保留图层大小”。如果不选择，AI文件将导入为一个平面文件中，没有可编辑的图层。
[size=1.063em]
[size=1.063em]导入ILLUSTRATOR文件到 AFTER EFFECTS (查看大图片)
After Effects其他功能PRE-COMPOSE保持有条不紊[size=1.063em]Pre-comps将帮助你组织复杂的After Effects的项目。这是非常重要的，如果一个项目正在感动多人或者，如果你希望手头宽裕了一个项目，交互设计师。动画在AI和草图文件的PSD文件的优点是，如果这些层是在Photoshop文件夹中，该文件夹将被转换成一个预补偿。如果你不是一个动画PSD，那么一旦你在选择的UI平台，做您的尽职调查，你可以很容易地按住Shift键，选择图层预先撰写（即组），右键单击预撰写层并点击“预撰写。”现在，你可以激活整个集团或双击成预补偿和动画各层.
[size=1.063em]
Pre-comps可以帮助你保持组织的复杂的项目 (查看大图片)
EASE 和 WIZZ[size=1.063em]EASE和WIZZ是具有流行的预设宽松曲线强大的表达式引擎。在After Effects通过进入“文件”菜单项，然后进入脚本部分打开的易用性和用户界面威兹面板。这个脚本面板可以方便地放在任何最适合你的工作流程。一旦脚本面板是你想它，你可以设置一个选择的关键帧图层，选择那些关键帧，然后从易用性和威兹脚本面板缓和曲线，然后应用曲线。缓动曲线可以点击几下应用，而且他们真实世界的物理的感觉添加到您的UI动画的基本线性宽松政策不能。
[size=1.063em]
[size=1.063em]Ease 和wizz (查看大图片)
[size=1.063em]可视化的缓和曲线
[size=1.063em]一旦你已经应用的Ease和Wizz曲线的关键帧，你会发现他们从正常的钻石形状的关键帧已经变成一个沙漏。这意味着缓和曲线已被应用。另一个指标是，动画的坐标已经变成了红色。从这里，你可以去和自定义UI动画的缓动曲线。
[size=1.063em]
可视化的缓和曲线(查看大图片)
不同的方法来制作AFTER EFFECTS的原型[size=1.063em]Google的素材设计方法
[size=1.063em]
[size=1.063em]谷歌的素材设计方法 (Image: Jelio Dimitrov)
[size=1.063em]谷歌提供其素材设计微交互是太棒了。他们已经采取了类似的UI元素和它们快速地完成运动测试简单的形状。通过这种方式，串联功能和视觉设计工作，加快工作流程的重新设计 In Google’s words:
[size=1.063em]” 感知对象的有形形式帮助我们理解如何操作它。观察一个物体的运动告诉我们天气是轻或重，柔性或刚性的，或大或小。 Motion在材料设计的世界不仅是美丽的，它建立意味着对空间关系的系统，功能和意图。”
线框图[size=1.063em]
[size=1.063em]动画线框图 (Image: ShenQ)
[size=1.063em]这种方法可能是非常有效的，如果你没有对工作人员专用的交互设计师。一旦客户端已批准线框和设计师们把收尾的视觉界面，你可以迅速采取一些关键件的经验和动画，并对其进行测试。当你告诉客户端的视觉设计，重新构建这些动画可以起到支撑作用。
高保真度的方法[size=1.063em]High-fidelity动画方法 (Image: Sergey Valiukh)
[size=1.063em]高保真的方式需要一点时间，因为你必须等待视觉设计师把自己的自旋的UI。客户端会惊讶于技巧和对细节的关注程度。这种方法还为您提供了一个巨大的神器与各种在线社区GIF分享。
结尾[size=1.063em]最后一件事要记住的是如何在你的工作流程使用这种形式的可视化功能时，留在轨道。如所提到的很多以上，这意味着是该项目的快速，而不是它自己的相位。它补充的发现，功能还是视觉设计阶段。客户可能会要求更改动画，有时他们是合理的要求，但我不会把这些动画到多轮修订。如果它变得那么远，你就会知道，列车已经出轨。
[size=1.063em]除非你的项目结构精美，某些动画是一个痛苦的调整。只是让客户知道你的意图是什么动画，并让调整和发生细化和微调在最终产品的代码。在那之前，你只是画了客户和开发商的功能和视觉画面，给他们你的视野的清晰视图。
[size=1.063em]现在我希望你有一些弹药带回你的团队和充分的理由注入该软件到您的网页设计工作流程。诚然，这是没有必要为每一个web项目，但它是一个MVP（最有价值球员）的某些项目。下面是一些鼓舞人心的资源和参考材料相关的GIF动画，让你开始在After Effects中创造神奇的用户界面。
资源[size=1.063em]· uiGIFs
[size=1.063em]· UI GIF (search query), Dribbble
[size=1.063em]· “How to Create Professional Full-Motion UX/UI Prototypes With Adobe After Effects in Minutes” (video, registration required)
[size=1.063em]· Easing Functions Cheat Sheet
[size=1.063em]· “Animation,” Material Design, Google
[size=1.063em]· “Expression Basics,” After Effects Help, Adobe
[size=1.063em](英文作者：cc, ml, al)
[size=1.063em]翻译：王广西
[size=1.063em]官方微信：我是UE（昵称）,woshiue（订阅号）
[size=1.063em]官方Q群：156360020 验证：iamue
[size=1.063em]官方微博：我是UE网
[size=1.063em]若非单独声明皆属于原创文章
[size=1.063em]转载请注明：转载自 我是UE
[size=1.063em]本文链接地址: 将After Effects整合到用户体验工作流程里去。
|
|
发表于 2015-6-23 15:44:28
