RYANLOLO
每人每天仅限5票，快给你心仪的作品鼓励的一票。
投票
0.0°
手把手教你用Principle制作原...
- 经验类型教程原作者：Abhinav Chhikara
- 经验属性自译外文
- 经验版权署名-非商业性使用-禁止演绎
41237
61
448
2016-03-02
通过12GIFs带你入门Principle（附件中提供Principle的试用版）
当Principle出来，我就花了几个星期尝试使用，尽管在之前我已经听过对它的各种好评。主要是因为原型制作软件总是一个死循环，新的原型工具问世>设计师感到兴奋>只使用了一段时间，如此不断重复这个循环。但自从用上了Principle，我被它深深地折服了。
视差滚动
为什么使用Principle？
我迄今为止使用最多的元素级别原型软件是Pixate，但Principle把我的原型设计时间减少到原来的十分之一。在Pixate上45分钟完成的工作，Principle只需要5分钟。原型设计时间越短，你就越有可能用它进行试验。你就可以开尽早始工作流程中试验动效，原型设计会变得更有意义。
下载与安装
Principle for Mac在其网站上下载可以试用14天，时间应该是充足的，可以帮助您确定它是否适合你的工作。而终身的许可证售价99$（约合648人民币）。
注：Principle目前只能在Mac上使用。它可以让你的Android，iOS和Web原型动起来，甚至是简单的GIF，但你只能在您的计算机或在iPhone上预览。
如果你是Sketch的用户，你会立即注意到Principle跟其十分相似。有画板，图层列表和图层属性窗格。
画板
在Principle每个画板都是一个屏幕或动画的状态。你可以从下拉菜单中预设的设备尺寸来创建一个画板。
创建画板
导入素材
您只需从Finder元素拖放到画板。将@2X添加到文件名，可以一半的尺寸将其导入。
或者，你也可以从Sketch复制和粘贴元素。只要选择要导入的图层按cmd+c和cmd+v。请记住，在你Sketch中的多个图层导入到Principle以后都会合并和一个图层，这样你就需要在导入图层之前好好规划一下需要动效的图层。
从Finder拖入元素
从Sketch复制粘贴元素
简单的过渡
在你导入素材后，是时候来建立你的第一个原型。您可以选择任何元素并为其添加动作。目前，Principle上支持点击（Tap），长按（Long Press），开始滚动（Scroll Begin），滚动释放（Scroll Release），滚动结束（Scroll End），开始拖动（Drag Begin），结束拖动（Drag End），Touch Down事件，Touch Up事件，悬停（Hover Inside）,外部悬停和自动。在Principle你都会用到这些动作。
复制当前的画板和它们之间添加一个动作。Principle会自动将两个画板中名字相同的图层的动效的跳转动作同步过来。
简单的过渡效果
添加更多过渡效果
用延迟和曲线来打磨动画
该动画面板展示了画板之间的每个动作变化。在这里，你可以改变动画的持续时间，缓解曲线和延迟两个画板之间运动。
添加转换延迟
编辑缓和曲线
添加滚动/分页/拖拽
要创建一个滚动组，只需选择图层，然后从下拉菜单中选择滚动，分页和拖拽也是这样实现。滚动和分页之间的差异在于，滚动是创建可以通过滚动内容的窗口，分页是用于捕捉内容的窗口。拖动类似于滚动，但您可以自由移动对象。可以通过每个实验来理解差别。
添加滚动效果
添加分页效果
添加拖动效果
动画由滚动/拖拽/分页驱动
要创建不依赖于一个单一动作（点击，长按等），但依靠滚动/拖入/分页的动画，我们需要使用到Drivers。Drivers面板的时间轴显示，您可以在画板创建对应的动作。要创建一个动画，选择图层列表图层，点击Drivers面板上的carat，并选择随时间而变化的特性。
水平的时间轴是根据在Y位移的滚动/拖拽/分页和随后的变化而运动。根据前后移动的时间表，然后再次单击carat创建另一个关键帧。Principle会在滚动/拖/页面动作发生关键帧之间自动制作动画。
导出和查看原型
要查看你在手机上创造了什么，你需要做的就是下载Principle Mirror，将你的iPhone连接到Mac。而需要演示文稿或上传到Dribbble，还可以记录原型并保存为MOV或GIF。你需要保持预览窗口在画板的100％，不然质量可能受到影响。
Driver动画
关于GIF导出的问题
GIF的导出还是有点靠不住的，其导出的GIFs质量低且尺寸大。当然你也可以在Photoshop中打开MOV来导出高质量的GIF。虽然这有点费时，但这是目前最佳的途径。
您也可以下载我提供的原型并尝试一下！ 这里还包括sketch文件哦！
下面是一些我用Principle做的小东西：
原文作者：Abhinav Chhikara
译者：RYANLOLO（喜欢请尽情点赞和关注，你的支持就是我的动力）
信息：欢创科技产品设计
转载前请先经译者同意。（附件中提供Principle的试用版）
全部评论：61条
更多作品
发表评论