关于使用Principle的一些小建议

在日常的设计工作中，难免会遇到一些制作可交互原型的工作。可交互的原型对比于静态原型来说，直观是最大的优点。其次，在研究一些动效的时候，直接调好参数给工程师，会比口述来得更加简单粗暴，效率更好。现在的原型软件有很多，我最早接触的是Proto，后面也玩过Pixate、墨刀，总的来说不是功能比较粗陋就是功能太强大，以至于入门不易，做个Demo也同样不易。Principle是近年来很热门的一款原型软件，最近工作需要，也就是看了一下官网的几个教程，然后就可以折腾出可以使用的原型。总的来说，Principle具备了上手简单，制作高效等特点，完胜其他原型软件。

Principle的实现原理和其他有些不同，比如说Proto（很久没用了，可能记忆会有些出入）。Principle是把动效分解成几个状态，然后把几个状态串联起来，至于中间是怎么变，我可以不关心，也可以调整一下。而Proto是把动效分解为一个初始状态和变化过程，给一个初始状态，然后我再定义怎么变化，然后把过程演示一遍。

怎么说呢？Proto的方式更加使用者的直觉，但是做起来确实很复杂，Principle的原理思考一下也能理解，而且制作起来更加简单。这么讲可能有些抽象，举个例子吧。

动效原理演示

如图上所示，左边有三个小秋A、B、C，他们会变化到右边的状态。

Proto是这么做的：

A：初始状态如左图，向右移动100px，得到右图；

B：初始状态如左图，半径扩大两倍，得到右图；

C：初始状态如左图，左图是一个圆角直径等于边长的圆角矩形，圆角逐渐缩小到0，得到右图。

在Proto里，你就需要定义好这个过程。

而在Principle，你就直接把这两个状态丢进入，然后告诉Priciple，我这个动效就是从左图到右图，名字我都给你对应好了，右图的A、B、C各自对应左图的A、B、C，你自己去变吧。然后Principle就会自动算一下，然后把过程自动展示出来，当然，这个过程会有一些参数可以调整。

讲完Principle的原理之后，然后结合官网给出的几个demo，基本上就可以做出一些可以用的原型了。下面是在使用过程中的几个小建议。

1、配合sketch

principle的界面和sketch界面很相似，这也似乎预示了他们之间的关系。总而言之，principle配合sketch使用简直如鱼得水。principle支持直接从sketch导入artboard，而且导入之后，所有的图层结构都还完整保留。这一点省去了很多的麻烦，毕竟没什么能比“一键XXX”更省力了。

2、所有的修改都在sketch完成

这一点是基于上一点来讲的，从sketch导入的artboard会自动覆盖掉旧的artboard，这一点保证了这一条建议的可行性。其次就是，sketch确实比principle的编辑功能强大很多。最后有一点，在principle做的修改无法导出回到sketch。所以如果在principle修改，那么其他地方如果需要用到的话，都还要重新再做一遍。

3、配合rename it插件

前面将原理的时候讲过，principle是根据名称去对应的。但是在平常做界面的时候，肯定会有很多的编组是重名的，甚至于图层也是重名的。如果直接使用就会发现动效变得很酷炫，各种乱飞。刚开始做的时候，我都要一个个定位到出问题的图层，然后逐一修改。直到我发现了sketch的rename it插件。通过对编组（图层）加上编号，比如最外一层加上1~100，编号为1的编组里面的一层加上1.1~1.100，以此类推，这样可以保证编组（图层）命名不会重复。可以有效解决动效乱飞的问题。

4、用Principle去处理关键流程

正如前面所说的，principle是通过状态来定义动效的，理论上每一种变化都要占据一个artboard。所以随着流程的增加，状态数会呈几何式增长。而且principle的artboard都是成一行排列的，这样其实到最后自己也会乱掉。所以就建议，只用principle区处理关键流程，而忽略一些不必要的小流程。

零零总总大概就是这四条，虽然短小浅显，但是都是我认为非常有用的建议，可以参考一下~