目前设计行业的设计软件种类繁多。在互联网产品设计领域，Sketch已经取代PS成为主流的视觉设计软件，并且有逐渐取代Axure进行交互设计的趋势。但是与交互原型工具Axure相比，sketch并不支持交互设计。同时，导出HTML文件的排序需要人工干预，无法自动反映页面的逻辑关系。于是，很多连接草图完成动态设计的软件应运而生，包括Flinto和Principle。其中原理素描被称为UI设计的黄金搭档。
与Flinto相比，Principle强大的动态效果预设可以大大减少动态效果设计的时间，完成更好的动态效果设计。在效率为王的互联网产品时代，Principle的确是一款适合交互设计师的动态软件。
让我们仔细看看原理。
一.主要职能
相比Axure和AE，目前版本的Principle在动态设计功能上要简单很多。这是一个动态效果制作软件，主要用于连接交互式原型和动态效果演示。其功能可分为五类，即基本功能、创建组件、动画(时间轴)、驱动程序(链接)和页面动态效果。
强函数
1.基本功能
基本功能包括矩形、文本工具、导入功能、组、镜像、上/下图层。目前自定义工具只支持矩形(快捷键R)和文本工具(快捷键T)，所以在制作页面动画时，需要从sketch导入或复制页面元素来完成页面动画。在矩形工具的基础上，可以扩展方形、圆形和圆角矩形。
导入功能是连接草图的主要界面。一次只能从打开的草图文件的一页中导入元素。导入草图文件时，在文件中创建一个新页面作为导入材料的入口更容易。同时可以重复导入页面，新导入的页面(不同的页面元素)会放在最后。画板的尺寸原则上和上一个画板的尺寸一致，所以进口的画板也要一致。
组、上/下层的功能操作与草图一致。镜像是一个用来预览手机应用的功能。目前只支持苹果的产品连接。
2.成分
组件(创建组件)类似于Axure中的组件库和草图中的符号。它可以包含动态效果，可以在不同的原理文件中复制粘贴。这是一个实用的功能，比如《动效设计-交互设计的最后一公里（一）》中的菜单动态效果和加载动态效果，可以做成组件。可以作为其他项目中的动态控件，可以直接复制粘贴。从而可以推导和细化动态设计控制，在版本迭代中保持产品气质的连续性。
3.时间表
时间轴(Animate)是对AE时间轴的简化，不能进行K帧(有疑问的请在此参考本系列文章《动效设计-交互设计的最后一公里（一）》)。它只能在时间维度上控制一个动作的起止位置和持续时间。此外，元素的运动形式也可以在时间轴上进行设置和调整，包括：默认、慢进、慢出、慢动、弹性、线性、否、等七种运动形式。同时可以对前五种进行曲线调整。
练习形式和规则
4.联系
驱动是时间轴功能的补充和延伸。原理主要用于移动产品的交互和动态设计。与网页相比，移动设备主要是触屏操作，包括点击、拖动、滑动等。这些要素之间的关系是地点的联系，而不是时间的联系。
5.页面动态效果
页面动态效果包括静态、拖动、滚动和翻页。严格来说，页面动态不是一个独立的功能，需要和Drivices配合使用。因此，在确定了滚动、拖动、翻页之后，选择一个触发操作元素，在驱动中，不同位置的节点处的关键帧为k，同时调整不同节点处的联动元素的变化，从而在位置关系上形成联动。
二。优势
与其他工具相比，原理的优势是显而易见的。基于它的优点，Principle在合适的动态效果设计上非常高效，动态效果的质量也比较高。总的来说，原则的优点如下：
1.有草图的页面布局
就像PS/AI和AE的关系一样，原理和素描有很多相似之处，包括页面布局、风格、快捷键等。可以把交互设计和动态设计联系起来，降低动态工具的学习成本。草图文件可以实时导入。此时，草图文件就像动态设计阶段的元件。在动态设计的过程中，可以单独导入页面，从而降低页面的复杂度。
主要软件界面
2.补间动画
起源于Flash的孪生动画是几乎所有动态工具的特点，也是保持动态效果流畅的主要环节。与其他工具的补间动画相比，Principle的补间动画是预置的，经过实际实验验证后可以直接使用。如上所述，原理的效果被预设为隐藏在动态效果的时间轴上，在设置动态效果持续时间的同时，调整其移动风格和效果。此外，补间动画的形式和节奏会自动统一到整个动态效果设计中，即新创建的动态效果预设与之前的预设保持一致。
吞世代
如上图所示，制作动画的开始和结束画面，在两个画面之间刹车生成补间动画，调整补间动画的运动形式和风格，完成动态效果制作。
3.Keynote的神奇动人效果
熟悉keynote的朋友应该知道，它最大的亮点是魔幻运动。原理上，元素的移动变化原理与Keynote相同，即如果两个画板中的两个元素命名相同，在画板切换的过程中，元素会逐渐从画板1的样式默认变化到画板2的状态，包括颜色、位置、透明度、形状等。但前提是元素是可编辑的，而不是图片。这种神奇的运动效果保证了动态效果的连续性和流畅性。
基调般的“神奇之举”
可以在Animate中调整变化的形式、速度和时间。
4.简单方便的动画
Animate用于控制补间动画的节奏、形式、时间和时机。它的控制比较粗糙，没有AE那个时候那么细致。在神奇运动的情况下，有四种元素的变化：长度、高度、旋转和透明度。在Animate中，可以控制每个变化的开始时间(错误帧)和持续时间，以控制动态效果。同时，其动态效果形式的预设和对比符合用户的心理预期，在调整动态效果节奏上可以节省更多的时间。
动画面板
5.类似于折纸的事件管道拖动
像折纸一样的事件管道拖拽指的是Drivice，这是移动产品设计中原理的优势。Animate是时间和元素的变化效果之间的映射关系，所以Drivices是一个元素的坐标位置和其他元素的变化效果之间的映射关系。该面板广泛应用于拖动等操作中，可以逼真模拟触摸操作中的位置映射关系。
拖动的驱动应用
在示例中，将设置的滑块位置映射到矩形形状的圆角大小和旋转，从而实现滑动来调整圆角大小和旋转的效果。
三。不足之处
一个工具的优点是显而易见的，它的缺点(局限性)往往是突出的，原则也是如此。根据作者对几个项目的时间体验，发现了以下突出的缺点：
1.原理不适合整个产品的动态设计。Principle的画板是水平顺序排列的，用户无法自定义位置，所以画板数量不容易太大，否则页面管理会造成人崩溃。原则更适合核心功能、局部页面或页面细节的动态设计。
2.动态效果预设质量较高，但自定义形式较弱。原理的动态效果变化，包括颜色、大小、位置、透明度、变形(很少)等。限制了设计者对动态效果的修改和再创造。所以Principle更适合过渡、入场、引导效果，而对于涉及复杂变形、效果的品牌、反馈效果，则是Principle力所不及的。
3.由Sketch导入的某些元素不可编辑，包括文字、符号和某些组。这导致当它们的动态效果改变时，原则上需要重新制作这些元素。
4.每个画板原则上相当于一个关键帧。对于已完成的动态设计，在流程中增加一个关键帧(画板)会比较复杂。需要删除两个关键帧之间的动态链接，然后添加新的画板，最后将新添加的画板与前后画板链接，形成新的动态效果。这就是为什么Principle更适合顺序k帧的原因。
5.原理效果文件的导出只支持GIF和mov格式的导出。导出的是操作的录制，自动动画的录制时机很难把握，必要时还需要其他软件进行剪切编辑。
四。技能和特点
Principle的动态效果制作原理和AE不同，所以特点和应用技巧略有不同。长期使用Principle后，我也对一些函数的特殊使用方式有了一些思考：
1.在原理动态效果中，元素属性的变化是通过不同属性节点之间的补间动画形成的，原理通过名称的一致性来识别不同画板之间的元素。如果名称相同，该元素将在两个画板之间平滑地形成一个补间动画(可编辑元素)。所以，一个元素要出现在下一页，至少要存在于上一页，否则就违背了动态设计的原则(首尾相接，三无)。
2.每个画板原则上是最小单元的一个节点关键帧。制作动态效果时，将连接的动态效果指向主画板(或自己)，复制一个新画板，然后在新画板上调整动作效果元素的变化。这确保了每个画板中元素的名称是一致的。
3.不要将sketch中的整页页面的画板导入到原则中，这样画板的管理会造成很大的麻烦。我的做法是在sketch中新建一个页面，可以作为导入的入口。同时，页面中没有太多的画板。最好有主页面，其他页面可以作为备用素材。
4.对于透明元素，Principle是一个不能作为动态链接的元素。所以透明度不能降到零，制作触摸热区时不透明度可以保持在1%。但是，即使一个元素的透明度为零，不能用作链接元素，被该元素完全覆盖的其他元素也不能用作链接元素。此时，您可以选择该元素，选中可触摸，并可以单击它。
5.原则上，旋转是基于元素的物理中心。如果想让一个元素围绕一个点旋转，可以以该点为中心对称点构建一个完全相同的元素，将它们组合在一起，并将其中一个元素的透明度更改为零，这样该组的中心点就在旋转的中心。
6.组原则上是单个元素，其大小可以自定义，而不是由组的元素大小决定，组可以作为一个元素来制作链接对象的动态效果。因此，通过此功能，该组可用作热区或用于调整元素的旋转中心等。
它的功能不止于此，还有很多技能等着你去发现…
到目前为止，作者已经完成了一些线性加载动态控件的制作，如下图所示：
装货
我们以一个案例的产生来结束这个原理的讨论。
负载动态效应
动词（verb的缩写）示例说明
步骤1:创建直径分别为9、7、5、3和1的新圆。圆的直径应该是连续的奇数或偶数，以便圆可以绝对居中和对齐。
新原型
第二步：将每个圆单独分组，将其组的高度分别调整为54、52、50、48、46，居中对齐。如上所述，组的中心可以作为整个旋转中心，因此最大组高就是最终动态效果的直径。选择所有组并将它们左右居中。
调整组高度
第三步：选中画板，点击右边出现的小闪电图标，选中最后一个指向画板1的，生成新的画板，选中画板2中的所有组，旋转角度修改为360。
开始画板样式
新画板
第四步：在Animate中，将每个动态条的长度修改为1s，根据半径由大到小，以便错开帧(0.2s)。移动条的长度决定了元素旋转一周的长度。错误的框架可以实现元素的如下效果。错帧的长度控制着运动过程中两个元素之间的距离，同时也受到整体长度的影响。
反物质调节
第五步：按照第三步的方法，基于第二个画板，生成第三个画板，删除第三个画板中所有其他元素，只留下半径最大的圆，并修改其名称，使其不与其他元素重名。如果没有第三个画板，直接指回第一个画板，画面中的元素会反方向移动，即每组将旋转角度改回0，回到第一个画板的状态。
使身体加倍
第六步：选择最后一个画板，按第三步箭头指向第一个画板，这样就可以做出加载动态效果了。
形成一个闭环
总体来说，整个动态效果的制作时间只有5分钟，效率远高于AE，这是原理的优势。
另外，需要加载案例工程文件的童鞋可以从百度云盘下载：
链接：https://pan.baidu.com/s/17KWy1yEMRCKB4ip9-3T9ug
密码：d3j0
暂无讨论，说说你的看法吧
