提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
通过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的试用版)
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册