Principle 交互原型Demo神器简介

Principle是一款交互原型设计软件，轻松让你的想法变成现实，支持将交互动画转换成视频或者GIF，分享给别人。

你的动画交互想法，比如设计更好的移动APP交互效果成为现实，用Principle轻松帮你实现。Principle的原则使得它易于创建动画和交互式的用户界面设计

软件说明

Principle是一款新开发的交互设计软件。相比 Pixate 更容易上手，界面类似 Sketch 等做图软件，思路有点像用 Keynote 做动画，更「可视化」一些。发现目前还不能做条件相关的交互，例如「当 A 的 Scroll Release 位置大于某值时跳到下页」。作者目前在对软件进行升级开发，值得尝试和继续关注。

不支持windows 、不支持windows、不支持windows~！

下载这个软件
http://principleformac.com/

PRINCIPLE 交互动画实例 http://iamue.com/12562

Principle 官方教程文档

界面 Interface

绘图 Canvas

屏幕中心区域是绘图空间，绝大部分工作将会在这里完成。它包括所有画布和画布间的跳转关系。被选中的画布将会以绿色边框高亮显示。

预览 Preview

预览功能可以随时操作预览你的设计草稿，它默认锁定在屏幕右上。当然你可以拖拽预览窗口到软件窗口外解锁。点击关闭按钮即可重置预览窗口到工作区右上角。拖拽预览窗口四角可以改变窗口大小，窗口大于画布时，画布不会放大，但窗口小于画布时会等比缩小。

图层列表 Layer List

图层列表在软件的左下，它显示了全部画布、子图层、图层间的层级关系。在图层列表中拖拽图层可以可以成组或解组。拖拽画布排序即改变画布在屏幕中的显示位置顺序。点击眼睛可以切换隐藏显示图层以便编辑，但不影响在预览窗口中的可见性。

检查器 Inspector

工作区左侧，图层列表上方是检查器，在这显示了选中图层的各种属性，包括：对齐操作、X/Y坐标、长/宽、角度、缩放、透明度、圆角、关联的图片、颜色填充、描边、组合裁剪、水平/竖直操作。

动效视图 Animate View

点击顶部 Animate按钮

，或点击画布间的跳转箭头即可打开动效视图。它通常用来调节切换动画的时间和动画曲线。

联动视图 Drivers View

点击顶部 Drivers按钮

打开联动视图。它通常用来创建逐帧补间动画。

画图 Drawing

初见Principle，可能会觉得它像一个绘图工具。基本元素可以在 Principle 中绘制，复杂的图形可以通过图片形式导入。新图层会默认归入当前的画布中。

画布 Artboards

创建画布，可点击左上角的“画布”图标

，或者快捷键

通常情况下，考虑到创建逐帧补间动画，本质上是两个画布间内部元素属性的细微转场；所以，我们经常会在增加事件的时候，连接当前画布，Principle 会帮我们自动创建一个完全一模一样的画布，并且画布中的元素也完全一样。

每个画布对应于一个或者一组状态，而多个画布很有可能才代表一个真实的用户界面。画布和画布之间只有细微的差别，这在创建补间动画的时候很有意义。例如：设计播放器的播放和暂停两个状态就会使用到两个画布，但它对于用户而言，实际上只呈现了一个用户界面。

Principle 一开始便是针对移动互联网设计的交互动画软件，系统已经内置了iPhone4/5/6/6p、iPad、Apple Watch 以及 Dribbble的标准尺寸；当然，你也可以设置任意你喜欢的长宽尺寸。

矩形 Rectangles

创建矩形，可点击左上角“矩形”图标

，或使用快捷键

如果想画一个圆，只需把圆角度数调成一个非常大的数值。把图片拖到检查器的图片区中可以给图形设置图片背景。新矩形默认尺寸为44×44像素，这是因为在iOS中至少44×44的区域才方便点击。

文本 Text

创建文本，可点击左上角的“T”图标

，或者快捷键

文本和矩形的属性参数类似，只多了字体、对齐方式、字体大小三种属性。其中，字体和对齐方式两个属性在创建补间动画的时候不能发生改变；还有就是，Principle 中使用的字体可能在iOS设备中不存在，所以这可能导致在设备连接“镜像”时不显示文字，使用常规字体或安装所需字体来可解决这个问题。

图片 Images在 Finder 中可以拖拽图片到 Principle 里 ，也可以直接粘贴 PNG 和 JPEG 到 Principle 中。如果你是 Sketch 用户，合并选区为一张 PNG 图片，粘贴到 Principle 即可。

当图片很多层级结构错综复杂时，会让人很烦恼。Principle 工程师深知这一情况，正在着手解决。图片的长宽比默认是锁定的，你可以点击长/宽属性框中间的小锁头图标解锁。拖拽图片到一个矩形的图片容器中可以把图片变成一个矩形，点击图形容器并按

如果拖入的图片名以”@2x”或”@3x”结尾（例如：logo@2x.png、menu@3x.png），那么导入的图片将会自动缩放为1/2和1/3大小；如果你已经导入了一个高分辨率的图片，也可以通过设置图片的长宽数值为1/2达到同样的效果。另外，检查器的属性输入框支持简单的数学运算，输入“320/2”可以方便的缩放为原图的一半。

组合 Groups

组合在 Principle 里可以视为一个有确定填充的矩形图层，所以，组合将会有自己独立的位置和大小。UIKit、Android、DOM 也是如此去绘图和理解的，但是，如果你按照 Photoshop 或 Sketch 的方式去使用组合可能会有意外情况发生；组合在制作更复杂的图层交互、旋转不同原点的图层、在每个图层的基础上实现连环动画是非常实用的。

裁剪/遮罩/剪辑 Cropping / Masking / Clipping

当针对组合的图层勾选“Clip SubLayers”之后，就可以实现对图层的裁剪和遮罩效果。溢出的区域不再显示，同时，如果想要创建圆形的遮罩，只需要对成组后的图层调节圆角率参数即可。

在Principle很多复杂的案例中，你会发现裁剪和遮罩功能的神奇之处，很多脑洞大开的交互实现都基于此。

连续的交互 Continuous Interactions

Principle 内建了三种通用的交互：拖拽、滚动、翻页。并可独立的在图层的X轴或Y轴开启。

拖拽 Dragging

开启拖拽后就能用鼠标点击按住移动图层来改变位置。轮播图、悬浮窗、探探，都是典型的拖拽案例。

滚动 Scrolling当一个图层（A）有了子图层（B）时，这个图层（A）才可以添加滚动的属性。当手指拖动滚动图层（A）时，子图层（B）会随手指移动，但父图层整体不会移动。地图、新闻列表、长文章都可以利用滚动实现。如果没有子图层时开启了滚动，那么系统会自动创建一个滚动图层组，很棒吧。打开“Clip children”选项后滚动到边界之外的部分会不可见。

翻页 Paging翻页和滚动很像，只不过翻页可以每次滚动固定的距离，这个距离和组合的大小一致。翻页可以用于图片切换、手机主页的图标翻页、或者任何卡片式翻页设计，最近这种设计非常流行，如果你想在页面间添加内边距，让翻页组稍稍比你需要的大一些，留空页面内容的边距即可。

事件 Events

事件触发器用于不同画布间的转场。点击图层或画布，在右侧发现“闪电”图标，点击图标会出现支持的事件列表。点击并按住事件前面的空心圆，拖拽指针到想要跳转的画布就能够按照选中事件行为创建了一种页面跳转的交互形式。这时你会发现两个画布之间会出现一条箭头，表示画布间的转场。

拖拽时如果指向当前的画布，会在右侧复制一份当前画布

如果把图层的透明度设置为0，那么这个图层就不能触发点击事件，是真的“透明”

Principle 内置的事件：

点击 Tap

点击是最常见的事件，多数用于可点击的按钮。触发非常简单：按下，松开，发射！

拖拽开始 Drag Begin

当按住部件，开始移动时，就会触发这个事件。使用这个事件的前提是要打开部件的可移动属性（draggable），如果在目标画布有同样名称的图层部件，不出意外完成拖拽事件后部件的位置就确定了。

拖拽结束 Drag End

拖拽图层部件之后松开鼠标会触发事件。同样在使用之前需要打开可移动属性。

滚动开始 Scroll Begins

当一个部件图层开始滚动时触发事件。使用前需要打开可滚动属性。

滚动释放 Scroll Released

当部件图层滚动并抬起鼠标时触发事件。注意，此时滚动可能还没停止，只是鼠标松开了而已。这个事件同时对滚动和翻页起作用，同样的，使用前也需要打开可滚动属性。

滚动结束 Scroll Ended

当滚动完全停止时触发事件。这个事件同时对滚动和翻页起作用。由于必须完全停止后才触发事件，所以整个动画可能有很长时间的延迟等待动画完全结束。使用前需要打开可滚动属性。

按下 Touch Down

当鼠标按下时触发事件。可以用于制作按钮的按下效果。

释放 Touch Up

当鼠标抬起时触发事件。注意，鼠标从外部按下，移入有事件的部件图层，这样是不能触发事件的，必须在带有事件的部件图层按下才可以触发事件。

长按 Long Press

按住0.5秒后触发事件。

自动跳转 Auto

当进入设置此属性的画布时，自动触发。多用于循环或复杂的多步骤动效。注意，只有当鼠标进入预览区域时才会触发事件，这一举措主要是为了避免循环导致电池寿命，还有，让你更能理解这一交互行为。

动画 Animation

当触发事件时，Principle 会自动创建两个画布之间逐帧补间动画，会以逐帧细腻的方式实现属性间的变化。

动画映射 Animation Mappings

如果一个图层部件在两个画布中名称一样，Principle 就认为这两个部件是同一个，继而会根据这个部件的位移等属性变化创建逐帧补间动画。反之，如果在两个画布间没有图层部件名称相同，画布切换时部件就会突然消失或显示。

预设动画曲线 Custom Animations

动画的默认持续时间是 0.3秒，默认曲线是 iOS 和 OSX中使用的曲线。在动画视图（Animate）中可以调节设置。点击两个画布顶部的箭头显示该转换的动画视图，可以生成动画的图层部件及其属性以列表显示，在这个时间轴可以调节动画持续时长、出现时机和动画曲线。

关键帧 Keyframes

在动画视图中，每条时间轴有两个关键帧，一个代表动画开始时刻，另一个是结束时刻。拖拽关键帧可以改变动画持续时间，拖动选区或用 Shift 可以批量修改。

缓动曲线 Easing Curves

缓动曲线决定了以下动画相关属性的速率：移动会不会从慢逐渐变得越来越快？或是开始非常快，但接近终点时突然又变慢了？以上现象就是由缓动曲线去控制的。

在动画视图中点击时间轴右侧的下拉菜单，菜单中显示了预设的几种曲线，点击曲线名称可以在坐标轴里查看图形。

预设的几种曲线跟 iOS 和 OSX 使用的一样。你可以随时调节预设的曲线：拖动曲线的两个手柄，改变长短和角度，或者在下方直接输入坐标都可以自定义动画曲线。自定义曲线不会抹掉预设曲线，可以大胆使用。

弹性曲线 Springs

弹性曲线模拟了物理弹性，和固定曲线那种从开始和结束的属性数值做渐变不同。它可以把一个元素的运动变成生动活泼。但也不能滥用，因为它会吸引人的注意力而打断思路。动画曲线的属性会根据持续时间自动的调节，所以只需微调关键帧即可改变动画的强度：越长力度越小，软绵绵；越短力度越大，干脆弹力十足。

可选择的属性 Optional Properties

动画视图中，图层名字后面有个绿色/红色方块。它可以切换是否允许一个属性在两个页面动画过度后变化。说白了，它把一个属性从上一个画布搬运到目标画布。This is useful when applied to a draggable layer to leave its position unaltered.(暂时没用过这个功能不知道如何解释，以后更新)

联动 Drivers

想制作带有交互的视差效果？想让一个图层在拖拽的同时，根据拖拽程度旋转？联动功能可以实现。联动用关键帧链接了每个属性。和动画不同，动画发生在页面切换时，联动发生在同一个页面中。在工具栏点击“Drivers”可以展开当前画布的联动视图。

联动和典型的动画时间轴工作原理一致，唯一不同在于动画不是基于时间，而是属性的参数变化。

联动源 Driver Sources

想要创建联动，必须存在一个可改变的属性，这叫做联动源。通常跟随用户手势连续的交互 —— 拖拽（Drag）、滚动（Scroll）、翻页（Page）的图层，其相应的X轴/Y轴的变化都可以作为联动源，在联动视图中列表显示。

可联动属性 Driven Properties

一旦有了联动源，你就可以用它控制其他任意（包括自己）图层的属性。选择一个你想控制的图层，点蓝色的加号图标，选择一个你想做联动的属性；这时会以当前的属性参数创建一个起始关键帧。只有一个关键帧不起任何作用。

联动关键帧 Driver Keyframes

完整的联动需要至少两个关键帧才能有效果。方法很简单：水平拖拽灰色标记，然后点击蓝色加号按钮在时间轴当前位置创建结束关键帧；最后不要别忘了修改第二个关键帧的属性参数。

在实际操作过程中，不需要手动点击蓝色加号按钮来创建结束关键帧，事实上有更加便捷的方式：

1. 选中想要控制的图层和属性，创建起始关键帧

2. 水平拖拽灰色标记，使联动源移动到目的位置

3. 修改该图层的属性值，系统会自动创建结束关键帧，并关联两个关键帧

导出 Export

一旦完成一个工程，你一定想让全世界都看到你的成果。有以下几种方式可以实现：

视频录像和Gif动图 Videos and Animated Gifs

通过预览视图上的录制工具可以导出视频或Gif，当你点击右上角的录制按钮就开始录制预览视图中的全部操作，开始录制后，再次点击录像按钮停止录制。

按住

按住

当你导出 Gif 时，你可以在下拉菜单选择或键入参数来设置下面几个预设格式：

·45%	输入一个百分数可以生成按百分比缩小的版本；并且这个设置会覆盖下面的设置
·134H	导出一个确定高度的 Gif ，是等比缩放的
·320W	导出一个确定宽度的 Gif ，是等比缩放的
·400W 300H	导出一个固定大小的 Gif，此时会缩放画布至合适的大小，并且会自动增加内边距和投影，还可以在右侧设置图片背景的颜色

在设备上运行 Running on Device

在手上把玩你的设计稿是最好的体验方法，它提供的体验和使用鼠标点按完全不同。下载 Principle Mirror 在你的 iOS 设备上然后用数据线连接电脑。Principle Mac版会自动发现已连接的设备，并立即发送当前的设计稿到设备上。使用快捷键

iOS 设备上的设计稿在断开数据线后可以继续运行。这可以让你更容易的把设计展示给团队成员。

Principle 文件可以在 iOS 设备上直接打开。所以你可把文件发送给他人，或者让别人把设计稿发给你，一切就是这样简单。

动画参数 Animation Values

动画参数可以用在代码中。工程师可以非常简单的获取动画参数。

核心动画(iOS,Mac)

在这个例子中，我们给图层的x属性做了动画

float newValue = 320.0f;

float oldValue = layer.position.x;

layer.position = CGPointMake(newValue, layer.position.y);

CABasicAnimation *animation = [CABasicAnimation animation];

animation.fillMode = kCAFillModeBackwards;

animation.additive = YES;

animation.toValue = @0;

animation.keyPath = “position.x”;

animation.fromValue = @(oldValue-newValue);

animation.duration = 0.3;

animation.beginTime = CACurrentMediaTime + 0.1;

animation.timingFunction = [CAMediaTimingFunction functionWithControlPoints:0.1 :0.1 :0.9 :0.9];

[layerToAnimate addAnimation:animation forKey:nil];

CSS3动画

div {animation-duration: 4s;animation-delay: 2s;
animation-timing-function: cubic-bezier(0.1,0.1,0.9,0.9)}

快捷键 Shortcuts

描述	快捷键
图层	添加矩形
	添加文本
	添加画布
	组合
	拆分组合
	移到顶层
	上移一层
	下移一层
	移到底层
编辑	移动部件	方向键
	快速移动部件
	增大部件
	快速增大部件
	旋转部件
	旋转15°的倍数
	原处复制
	复制并移动
	选择器文本框	可以识别简单运算，如”320/2+10″
	选择器标签	鼠标左右拖动可以快速调节数值
画布导航	移动画布	空格键 + 拖拽画布
	放大画布
	放大画布
	缩小画布
	缩小画布
	连续缩放
	完整显示
	选区完整显示
	把选区移至中央
	实际大小
选择	选择父部件
	选择子部件
	选择其他子部件
	选择全部子部件
预览	重置原型预览
	显示鼠标指针
录制	录像中隐藏鼠标指针
	开始录像
	开始录像（不显示指针）

常见问题 FAQ

Princile 会有 Windows/Linux/Android 版本吗？

Principle 和 Principle Mirror 是利用OSX 和 iOS 独有的核心技术构建构成的，所以很遗憾不会有其他平台的版本。

可以导出网页格式原型吗？

考虑到网页性能的局限性，我们暂时没有计划开发这个功能。

什么时候会在 Mac Appstore 上架？

我们不打算在 Appstore 上发行，因为它的审核速度慢又严格，而且还要扣除 30% 的收入。在 Appstore 之外提供下载，我们可以频繁的升级，自由的增加新功能而不用经过漫长严格的审核过程。

Principle 以后的发展路线是怎样的？

我们不说对未来功能有什么规划。但是如果你有一些很好的想法，可以在应用内的 feedback 功能上提交，说不定以后的版本我们就会增加!

IAMUE网站iamue.com是一个 专注分享交互设计的干货网站

交互设计师图书导航：http://books.iamue.com/

交互设计必备导航 ：http://hao.iamue.com

微博：

在微信里搜索：

喜闻

乐见

的

广告

时间

交互设计必读图书

《交互设计那些事儿》

原文链接限量签名版还有货！

预售购买的同学们的书

已经陆续到手了…

现在

点一下

左下角的原文链接

去天猫书店瞅一瞅去嘛~

复制给朋友：
http://share.laiwang.com/s/Shy7s?tm=9d74c2

来源：交互设计