位置:首页 > 科学教育 >

动效设计-交互设计的最后一公里(二)

作者:四川新闻 | 发布时间:2018-12-28 13

整个动效制作时间只有5分钟,效率远远高于AE,这正是Principle优势所在。

当前,设计行业存在多种设计软件,在互联网产品设计领域,Sketch已经取代了PS成为主流视觉设计软件,并有逐渐取代Axure来进行交互设计趋势。然而,相对于交互原型工具Axure而言,sketch不支持交互动效设计,同时,导出HTML文件排序需要人为干预,不能自动体现页面逻辑关系。因此,很多衔接sketch软件完成动效设计软件应运而生,包括Flinto、Principle。其中,Principle+Sketch被称为UI设计黄金搭档。

相较于Flinto,Principle强大动效预置,可以极大减少动效设计时间,并能完成出较为优质动效设计。在效率为王互联网产品时代,Principle确实是一款适合交互设计师使用动效软件。

下面,我们就详细了解一下principle。

一. 主要功能

目前版本Principle,就动效设计功能方面,相较于Axure、AE而言,要简单很多。它是一款主要用来衔接交互原型与动态效果呈现动效制作软件,其功能可分为五大类,分别是基础功能、Create Component(组件)、Animate(时间轴)、Drivers(联动)以及页面动效。

主要功能

1. 基础功能

基础功能包括矩形、文字工具,导入功能,群组、Mirror、上/下一层。目前自定义工具仅支持矩形(快捷键R)和文字工具(快捷键T),因此在制作页面动效时,需要从sketch中导入或copy页面元素,来完成页面动效。在矩形工具基础上,可以延伸出正方形、圆型、圆角矩形。

导入功能是衔接sketch主要接口,每次只能导入已打开sketch文件一个page页面中元素。在导入sketch文件时,比较省事做法是,在文件中新建一个page,作为导入素材入口,同时,page可以重复导入,最新导入页面(不同页面元素)会放到最后。Principle中画板大小与最后一次画板大小保持一致,因此导入画板也要保持一致。

群组、上/下一层功能操作与sketch一致。Mirror是用来在制作手机应用时,在手机端进行预览操作功能,目前只支持Apple产品连接。

2. 组件

组件(Create Component)与Axure中元件库、sketch中symbol类似,可以包含动效,支持在不同principle文件中进行复制、粘贴。这是一个实用功能,如《动效设计-交互设计最后一公里(一)》中菜单动效、加载动效等,就可以制作成组件,在其他项目中可以作为动效控件加以应用,直接复制、粘贴即可。由此,可以推演提炼出动效设计控件,在版本迭代中可以在动效方面保持产品气质延续性。

3. 时间轴

时间轴(Animate)是对AE时间轴一种简化,不能进行K帧(此处有疑问者,请参考本系列文章《动效设计-交互设计最后一公里(一)》),只能控制某一动效在时间维度上起止位置以及持续时间。另外,元素运动形式也可以在时间轴上进行设置调整,包括:默认、缓入、缓出、缓动、弹性、线性、无等七种运动形式,同时可以对前五种进行曲线调节。

运动形式及调节

4. 联动

联动(Drivices)是对时间轴功能补充与扩展。Principle主要应用于制作移动端产品交互、动效设计,相较于web页面,移动端设备主要是触屏操作,包括点击、拖动、滑动等,这些元素之间关系是位置上联动关系,而不是时间上

5. 页面动效

页面动效包括静态、拖拽、滚动、翻页四类。严格意义,页面动效并不是独立功能,需要配合Drivices来使用。因此,在确定了滚动、拖拽、翻页以后,选择一个触发操作元素,在Drivices中,对其在不同位置节点处K关键帧,同时,将联动元素在不同节点处变化进行调整,进而形成位置关系上联动。

二. 优势

相较于其他工具,Principle优势还是比较明显。基于其优势,Principle在合适动效设计上效率非常高,同时动效质量也比较高。整体来说,Principle优势如下:

1. 拥有sketch页面布局

犹如PS/AI与AE之间关系,Principle与sketch之间存在着很多相似之处,包括页面布局及风格、快捷键等,很好让交互设计与动效设计进行衔接,减少了动效工具学习成本。sketch文件导入可以实时进行,此时sketch文件犹如动效设计阶段组件,在动效设计过程中,需要哪一个页面,就可以将页面单独导入,减少了页面复杂度。

Principle软件界面

2. 补间动画

源于Flash补间动画几乎是所有动效工具特点,也是保持动效流畅主要环节。相较于其他工具补间动画,Principle补间动画是预设,并且经过实际实验验证,可以直接使用。如上文中所描述,principle效果预设是隐藏在动效时间轴上,在设置动效持续时长同时,调整其运动样式与效果。另外,补间动画形式与节奏会自动统一到整个动效设计中,即新建动效预设与上一次预设保持一致。

补间动画

如上图,制作出动画起点与终点画面,在两个画面之间制动生成补间动画,通过调整补间动画运动形态与样式,完成动效制作。

3. Keynote神奇移动效果

熟悉keynote小伙伴应该知道,其最大亮点就是神奇移动。在Principle中,元素运动变化原则与Keynote一致,即若两个画板中两个元素命名一样,在画板切换过程中,则默认该元素从画板一样式渐变到画板二状态,包括颜色、位置、透明度、形状等,但前提是该元素是可编辑,而不是图片。这种神奇移动效果保证了动效连续性与流畅性。

类似Keynote”神奇移动”

对于变化形式、速率以及时机可以在Animate中进行调节。

4. 简易方便Animate

Animate是用来控制补间动画节奏、形式、时间以及时机等,其控制较为粗糙,不如AE时间细致。在神奇移动案例中,元素变化有长、高、旋转、透明度四种,在Animate中可以控制每种变化开始时间(错帧)以及持续时长,来控制动效效果。同时,其动效形式预设与比较符合用户心理预期,在动效节奏调整上可以节省较多时间。

Animate面板

5. 类似Origami事件管道拖拽

类似Origami事件管道拖拽该功能指就是Drivice,这也是Principle在移动端产品设计中优势所在。Animate是时间与元素变化效果之间映射关系,那么,Drivices就是一个元素坐标位置与其他元素变化效果映射关系。这个面板在拖动等操作中应用极为广泛,可以逼真模拟触控操作中位置映射关系。

DragDrivice应用

在示例中,设置滑块位置与矩形形状圆角大小、旋转映射,实现滑动调节圆角大小与旋转效果。

三. 劣势

一个工具优势较为明显,往往其缺点(限制)也较为突出,Principle也是一样。根据作者多个项目时间经验,发现了以下较为突出缺点:

1. Principle不太适合整体产品动效设计。Principle画板是横向顺序排列,用户不能自定义其位置,因此其画板数量不易过多,否则页面管理将会使人崩溃。Principle比较适合核心功能、局部页面或页面细节动动效设计。

2. 动效预设质量比较高,但自定义形式较弱。Principle动效变化形式,包括颜色、大小、位置、透明度、形变(极少)等,这就限制了设计师对动效修改与再创作。因此,Principle比较适合做转场类、入场类以及引导类动效,但是对于牵涉到复杂形变、效果品牌与反馈类动效,就是Principle所鞭长莫及了。

3. 对于Sketch导入元素,有些是不能编辑,包括文字、symbol以及有些群组。这就导致在这些元素动效变化时,就需要在Principle中重新制作。

4. Principle中每一个画板相当于一个一个关键帧,对于已经完成动效设计,在过程中新增关键帧(画板)会比较繁琐,需要删除两个关键帧之间动效链接,然后新增一个画板,最后将新增画板与前后画板进行链接,形成新动效。这也是在Principle比较适合顺序K帧原因。

5. Principle效果文件导出仅支持GIF与mov格式导出。其导出是对操作录制,因此,对自动类型动画录制开始时机较难把握,如果有必要需要其他软件进行剪切编辑。

四. 技巧与特点

Principle动效制作原理与AE不同,因此,其特点与应用技巧也略有差异。在长时间使用Principle以后,对于一些功能特殊使用方式也有一些心得:

1. Principle动效中,元素属性变化是通过不同属性节点之间形成补间动画形成,Principle识别不同画板之间元素是通过名称一致性。名称一致,则该元素在两个画板之间会顺畅形成补间动画(是可编辑元素),因此若下个页面中要出现某个元素,至少在上一个页面要存在该元素,否则就会违背动效设计原则(有始有终、三不)。

2. Principle中每一个画板就是一个最小单位节点关键帧,在制作动效时,将连接动效指向主画板(或自己),复制出新画板,然后在新画板上进行动效元素变化调整。这样可以保证每个画板中元素名称保持一致。

3. 不要将sketch中整个Page页面画板一起导入Principle,这样画板管理会造成极大困扰。本人做法是在sketch中新建一个页面,作为专门进行导入入口,同时页面中画板不易过多,最好有一个主页面,其他页面作为备用素材使用。

4. 对于透明元素,Principle是不能作为动效链接元素,因此在制作触控热区时不能将透明度降为零,可保持1% 不透明度。但是,即使元素透明度为零且不能作为链接元素,被该元素完全覆盖其他元素也是不能作为链接元素,这时可以选中该元素,勾选touchable,就可以被点击到。

5. Principle中旋转是以元素物理中心为圆心进行旋转。若要制作元素围绕一个点进行旋转时,可以以该点作为中心对称点建一个同样元素,并将二者进行群组,将其中一个透明度改为零,这样群组中心点就在旋转中心了。

6. principle中群组是单独一个元素,其大小是可以自定义,不是由群组元素大小所确定,并且群组可以作为一个元素进行链接对象制作动效。因此,在这种特性下,可以将群组作为热区使用或用来调整元素旋转中心等。

其特点不止于此,有很多技巧等待你去发掘……

到目前为止,作者已经完成了若干线性加载动效控件制作,如下图:

Loading

我们以其中一个案例制作,结束本次对Principle探讨。

加载动效

五. 示例讲解

第一步:新建直径分别为9、7、5、3、1圆形,圆形直径要是连续奇数或偶数,保证圆形能够绝对居中对齐。

新建原型

第二步:将每个圆单独群组,并调整其群组高度,分别为54、52、50、48、46,并将其进行居中对齐。上文中已经提起,群组中心可以作为整体旋转中心,因此,最大群组高度就是最终动效直径。选择所有群组,将其左右居中对齐。

调整群组高度

第三步:选中画板,点击右侧出现小闪电图标,选择最后一个指向画板1,产生一个新画板,并选中画板2中所有群组,修改旋转角度为360°。

起始画板样式

新画板

第四步:在Animate中修改每个动效条长度为1s,根据半径,从大到小,以此错帧(0.2s)。动效条长度决定了一个元素旋转一周时长。错帧可以实现元素跟随效果,错帧时长控制了两两元素在运动过程中距离,同时还受到整体时长影响。

Antimate调节

第五步:按照第三步方式,以第二个画板为基础,产生第三个画板,并将第三个画板中其他元素全部删除,只保留半径最大圆,修改其名称不与其他元素重名。如果没有第三个画板,直接指回第一个画板,画面中元素会出现逆向运动,即每个群组会将旋转角度变回0°,回到第一个画板状态。

制作替身

第六步:选中最后一个画板,按照步骤三,将箭头指向第一个画板,即可完成该加载动效制作。

形成闭环

整体上,整个动效制作时间只有5分钟,效率远远高于AE,这正是Principle优势所在。

另外,需要加载案例工程文件童鞋,可以到百度云盘中下载:

链接:https://pan.baidu.com/s/17KWy1yEMRCKB4ip9-3T9ug

密码:d3j0

相关阅读

交互设计最后一公里(一)——动效设计

#专栏作家#

弘毅道,公众号:UIUX设计工作坊,人人都是产品经理专栏作家。关注to B业务,尤其擅长后台程序界面设计,包括需求沟通,原型设计以及后期设计评审等。

本文原创发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于CC0协议