关于使用Principle的一些小建议.pdf

关于使用 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 、用 Pri