Principle 是一款交互设计工具,五分钟即可制作出一个具有完整交互动画的原型,并且可将交互动画生成视频或者 Gif 分享到 Dribbble、Twitter 等社交平台。此外 Principle 还支持多种尺寸的原型设计,包括 Apple Watch。
Principle 是一款交互设计工具,五分钟即可制作出一个具有完整交互动画的原型,并且可将交互动画生成视频或者 Gif 分享到 Dribbble、Twitter 等社交平台。此外 Principle 还支持多种尺寸的原型设计,包括 Apple Watch。
Principle for Mac 可以轻松设计动画和交互式用户界面。无论您是设计多屏幕应用程序的流程,还是新的互动和动画,Principle都可以让您创造出令人惊叹的设计。
使用驱动程序和动画处理交互,所有驱动程序和动画都显示在可访问的时间轴视图中,从而可以轻松更改其属性并全面了解项目的状态。 提供实时预览窗口,可以录制动画 您可以随时了解已完成的应用程序的外观并与您的设计进行交互。 当然,您肯定希望向其他人展示最终结果,而Principle提供了一种简单的方法。您可以录制在预览窗口中执行的任何操作,并将捕获的内容导出到QuickTime MOV视频或GIF动画。 当您设计新应用时,任何干扰都会降低您的工作效率并阻止您专注于您的项目。原理仅显示主窗口中绝对必要的功能,为设计所在的画布提供尽可能多的空间。 简约的界面,消除任何不需要的元素 如果您不使用桌面或触控板,浏览各种手册可能会更加困难,但使用开发人员主页上详细介绍的许多键盘快捷方式可以更轻松。 总而言之,Principle是一个简单的实用程序,对于app创建者非常有用,因为它提供了一种相对简单的设置和记录交互式界面设计的方法。 版本 4.2 更新内容: 调整“视频”选项的导出设置,以提高质量和颜色准确性。 固定画板不为画板外层提供空间 修复了在gif导出中修复崩溃的问题 修复了固定事件弹出窗口 修复了一些大的内存泄漏 |
简单介绍一下Principle这款软件,并附上学习笔记
Principle是一款小巧的交互软件,是目前我在工作中用来制作demo(动效)的主力软件,由于其可以直接导入sketch当前的画布内容,因此配合起Sketch来使用简直天衣无缝。
介绍的话就不多说了,先说说Principle和我接触过的其他交互软件的区别。最早接触的就是Axure,再后来换了mac之后,就尝试了Flinto、Pixate以及Principle。
在互联网圈,除传统的Office系列软件之外,Ps和Axure的使用人数应该也能排在前几名的。而作为交互软件始祖,Axure的功能全面,特别是在8之后,Axure已经可以实现大部分基础的动效了。因为Axure既可以画图,又可以编辑逻辑制作demo,如此全面的软件都会有一个缺点:卡 and 复杂!
Flinto最早只有网页版,后面才出了mac版,其链式的制作逻辑在当时来说非常新颖,因此上手很快,学习成本也很低,但是怎么说呢,反正我始终没有爱上它。
Pixate给我的感觉就像是瘦身后的Axure,重点放在移动端,加强了动效实现的效果,有双系统版本,可惜现在已经不更新了。
最爱的要放在最后说,Principle给我的第一印象就是:这是不是Sketch团队做的?因为这两个货的界面是在太像了,而且其上手也是非常简单,并且支持桌面实时预览和手机预览,导出gif的功能也非常实用。
Principle制作demo的原理类似Flinto,采用的也是链式的制作逻辑,核心交互原理有两个,一是Animate,另一个是Drivers。
Animate指的是不同画板之间元素的交互,即画板与画板之间的交互。
上图中两个画板间的图层相同,只是图层的属性不同。
导入Principle中后,分别对黄色的按钮编辑了交互动作,使其被点击时跳转到另外一个画板。
Principle的好处之一在于,其可以为同一个图层在不同画板之间的属性变化自动添加动效变化,你所需要做的只是调整动效的触发时间(时间轴)以及动画效果(动画曲线),这一点和Keynote的神奇移动效果有点类似。
目前Animate支持的属性变化包括:xy轴位移、宽度高度变化、不透明度变化、填充颜色变化、圆角变化、描边宽度变化、放大倍数变化、旋转角度变化、阴影距离及渐变变化、旋转角度变化。
Driver指的是同一画板内元素的交互,即画板自身的交互。
例如上图中,A按钮有一个横向拖拽的交互效果,同时我希望绿色的色块能在A按钮拖拽的过程中发成图中1、2、3所示的状态变化。
如gif所示,在Drivers中,当当前画板存在可交互的元素时,其他元素(包括可交互的元素自身)都可以随着交互元素的交互状态变化产生属性变化。
目前Drivers支持的属性变化包括:xy轴位移、宽度高度变化、不透明度变化、圆角变化、描边宽度变化、放大倍数变化、旋转角度变化、阴影距离及渐变变化、旋转角度变化。
通过Animate以及Drivers的相互配合,基本已经可以实现大部分的动效,看下Principle官网上给出的范例。
在Principle的官网上有教学视频,个人觉得如果你真的认认真真边看边做搞定了那7个视频,那基本已经可以直接上手去做实际的项目了,不用再淘宝买其他的教学视频,因为它真的:很简单。
这里放下我自己当时看完后的笔记,以下内容,建议你可以先收藏,看完视频再来看,绝对对你有帮助。
只能对单个对象进行滑动:图层/组。
可以选择横向滑动还是纵向滑动。
滑动有可视区域,类似axure的动态面板显示区域,可以通过勾选Clip Sublayers实现。
可视区域默认大小是图层/组的实际大小,需要缩小,因为只有缩小后才有空间实现滑动。
点击对象后出现的闪电即可编辑动作,点击动作后直接拖拽至目标画板。
在动作目标画板上对对象进行编辑,默认出现对应的动效,如大小变化、旋转、位移、颜色变化、圆角变化等。
不同画板之间的统一对象名称需要一样,否则会出现动画混乱
可以从sketch里面导入当前画布的所有画板。
sketch文件里面不能存在mask,否则整个画板会变成一个图层,解决方法是将mask与被遮住对象进行编组。
如要实现‘按住拖拽松手还原’的效果,需要两个一样的画布(图层名称需要一样),通过drag begin/drag end实现,drag end路线中可以冻结对象Y轴位移实现‘水平还原’效果。
图层属性中,若opacity为0%时,图层动作是不可激活的。
若要图层透明但动作可被激活,可通调整图层填充颜色fill的填充浓度a至0%即可。
通过在目标画板对图层进行编辑实现。
页面轮播需要将多个对象平均排开进行编组,选定page,并且选定好可视区域,如果要实现引导页效果,可是区域宽度需要与屏幕宽度一致。
需要通过drivers实现,选中所有图层添加效果,在不同时间节点对图层进行编辑以实现效果变化。
drivers有点类似动画时间轴
首先需要添加属性变化项,再在不同的时节点对对象的属性进行编辑。
时间轴需要当前页面存在可交互的对象,才能在时间的维度上产生属性变化。
可以只有一个可交互的对象,其余对象不一定要编进该对象的组内。
可以对图片的后缀名增加@2x、@3x,拖入principle后直接按倍数缩小。
可以复选不同画板内的同一图层一起更改图片。
可以从sketch里面直接把图层/组拖进principle,拖入时可以在sketch里面选择导出的倍数@2x、@3x。
priciple也可以实现类似蒙版的效果,将单一图片图层进行编组,然后勾选Clip Sublayers,选择可视区域大小。
可以将一个图层拖拽至另一个图层上,将其变成子图层,母层通过Clip Sublayers可以实现蒙版效果。
子图层内可以继续嵌套子图层。
由于上传图片大小限制,很多制作的demo都无法上传,这里只能上传一张之前做过的底部导航的动效demo,还是裁剪过的。
想说明的是,不管是页面场景切换,还是微动效,只要不涉及到特别复杂的形变(比如线条的抖动和扭曲),Principle都能很好的实现你的想法和目标。
Principle的动画和交互式用户界面设计的新工具开始在Dribbble上迅速普及。您可以使用这个易于使用的工具,帮助您生成动画的交互式设计,具有可自定义的布局和过渡。今天小编为您带来Principle如何创建交互式用户界面原型!
今天我想在原理中分享我对移动应用程序原型设计的印象,并解释如何使用它,这样你就可以花更少的时间来设计漂亮的交互式原型。
首先,让我们看看原则包括:
原则允许您创建文本和形状图层,并支持导入资产。创建或编辑画板时,您可以从最常用尺寸列表中进行选择,包括iOS尺寸和Dribbble的400 x 300和800 x 600像素。
要创建简单的交互,您需要做的就是使用现成的界面(使用预设元素)复制画板,更改这些元素的布局,并指定一个操作,以帮助您从一个画板到另一个画板。
所有过渡都以放置在画板上方的箭头的形式显示。我们可以通过单击它们来查看和编辑时间轴中动画的每个元素的属性。
另一件事是使用驱动程序动画交互!此功能类似于Pixate中的if条件。但在原则上,它是作为常规时间表实施的。这意味着元素的行为
我们可以使用原生原理格式保存原型,并制作视频并将其保存为视频格式或GIF格式。
总之,一些教程足以让您学习如何使用Principle。是时候谈谈它的优缺点了。
尽管有这些缺点,但Principle是一个很好的工具,可以为手机创建交互式UI原型,特别是考虑到它只是一个MVP!你可以用它制作很多令人惊奇的东西:光滑的交互,短动画,甚至是多屏应用。但作为移动UI原型制作工具的Principle最令人难以置信的品质是简单和方便,许多同行仍然缺乏。
加载中,请稍候......
}版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。