中文文档

迄今为止,也许面向产品设计师最友好的交互动画软件

界面 Interface

1. 绘图 Canvas

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

2. 预览 Preview

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

3. 图层列表 Layer List

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

4. 检查器 Inspector

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

5. 动效面板 Animate Panel

动效面板会出现在软件视窗的底部,你可以点击工具栏上的 Animate按钮Principle中文文档,或点击画布间的跳转箭头打开。它通常用来调节切换动画的时间和动画曲线。

6. 联动面板 Drivers Panel

联动面板出现在软件视窗的顶部,你可以点击工具栏上的 Drivers按钮Principle中文文档打开联动视图。联动面板展示了当前选中画布内元素之间的联动关系,它可以用来创建复杂的、持续联动的交互。

画图 Drawing

乍一看,Principle 跟你平常使用的画图软件长得很像。基本元素可以在 Principle 中绘制,复杂的图形可以通过图片形式导入。新图层会默认归入当前的画布中。

1. 画布 Artboards

*
Principle 的画布跟其他绘图软件也很相似:每一块画布代表了你一个独立的设计状态,你可以随意修改其尺寸大小以适应不同的设备。创建画布,可点击工具栏左上角的“画布”图标Principle中文文档,或者快捷键 A 来增加一个新的画布。

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

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

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

2. 矩形 Rectangles

创建矩形,可点击工具栏左上角“矩形”图标Principle中文文档,或使用快捷键 R 来画一个新的矩形。

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

3. 文本 Text

创建文本,可点击工具栏左上角的“T”图标Principle中文文档,或者快捷键 T 来增加一个新的文本。

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

4. 图片 Images

*

[KGVID width=”640″ height=”360″]http://7xo7hi.com1.z0.glb.clouddn.com/video_Principle%3A%20Working%20with%20Images.mp4[/KGVID]

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

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

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

5. 组合 Groups

*
图层可以组合在一起:选中希望被组合在一起的多个图层,点击工具栏上的组合图标 Principle中文文档,或者使用 Command + G 快捷键。

组合在 Principle 里可以视为一个含有子图层的矩形图层,所以,最终的组合结果会拥有自己独立的位置和大小。在 UIKit、Android 和 DOM 中也是如此绘制和动画元素的。但是,如果你按照 Photoshop 或 Sketch 的方式去使用组合可能会有意外情况发生;组合在制作更复杂的图层交互、旋转不同原点的图层、在每个图层的基础上实现多重动画是非常实用的。

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

Principle中文文档
当针对最终组合的图层勾选“Clip SubLayers”之后,就可以实现对图层的裁剪和遮罩效果。溢出的区域不再显示,同时,如果想要创建圆形的遮罩,只需要对成组后的图层调节圆角率参数即可。在Principle很多复杂的案例中,你会发现裁剪和遮罩功能的神奇之处,很多脑洞大开的交互实现都基于此。

连续的交互 Continuous Interactions

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

1. 拖拽 Dragging

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

2. 滚动 Scrolling

[KGVID width=”640″ height=”360″]http://7xo7hi.com1.z0.glb.clouddn.com/video_Principle:%20Scrolling%20and%20Tabs.mp4[/KGVID]

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

3. 翻页 Paging

[KGVID width=”640″ height=”360″]http://7xo7hi.com1.z0.glb.clouddn.com/video_Paging.mp4[/KGVID]

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

事件 Events

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

  • 拖拽时如果指向当前的画布,会在右侧复制一份当前画布
  • 如果把图层的透明度设置为0,那么这个图层就不能触发点击事件,是真的“透明”

事件触发器

点击
Tap
点击是最常见的事件,多数用于可点击的按钮。触发非常简单:按下,松开,发射!
拖拽开始
Drag Begin
当按住部件开始移动时,就会触发这个事件。使用这个事件的前提是开启部件的可移动属性(draggable),如果在目标画布有同样名称的图层部件,完成拖拽事件后部件的位置也就确定了。
拖拽结束
Drag End
拖拽图层部件之后松开鼠标会触发事件。同样在使用之前需要打开可移动属性。
滚动开始
Scroll Begins
当一个部件图层开始滚动时触发事件。使用前需要打开可滚动属性。
滚动释放
Scroll Released
当部件图层滚动并抬起鼠标时触发事件。注意,此时滚动可能还没停止,只是鼠标松开了而已。这个事件同时对滚动和翻页起作用,同样的,使用前也需要打开可滚动属性。
滚动结束
Scroll Ended
当滚动完全停止时触发事件。这个事件同时对滚动和翻页起作用。由于必须完全停止后才触发事件,所以整个动画可能有很长时间的延迟等待动画完全结束。使用前需要打开可滚动属性。
按下
Touch Down
当鼠标按下时触发事件。可以用于制作按钮的按下效果。
释放
Touch Up
当鼠标抬起时触发事件。注意,鼠标从外部按下,移入有事件的部件图层,这样是不能触发事件的,必须在带有事件的部件图层按下才可以触发事件。
长按
Long Press
按住0.5秒后触发事件。
鼠标移进
Hover Inside
当鼠标移进一个图层时触发事件。
鼠标移出
Hover Outside
当鼠标移出一个图层时触发事件。
自动跳转
Auto
当进入设置此属性的画布时,自动触发。多用于循环或复杂的多步骤动效。不过需要注意的是,只有当鼠标进入预览区域时才会触发事件,这一设计的主要目的是为了避免循环导致电池寿命,还有,让你更能理解这一交互行为。

动画 Animation

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

1. 动画映射 Animation Mappings

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

2. 自定义动画 Custom Animations

默认动画持续的时间是 0.3秒,这采用了 iOS 和 OSX 系统中默认的缓动曲线数值。你可以在动画面板(Animate Panel)中调节它,具体的方法是:点击两个画布顶部的箭头,在显示该转换的动画面板上,你可以看到所有发生动画的图层以及其属性以列表方式显示,在这个时间轴拖拽节点就可以调节动画持续时长、出现时机和动画曲线。

a. 关键帧 Keyframes

在动画面板中,每条时间轴都会有两个关键帧,一个代表动画开始时刻,另一个是结束时刻。拖拽关键帧可以改变动画延迟和持续时间等。

b. 缓动曲线 Easing Curves

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

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

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

c. 弹性曲线 Springs

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

3. 冰冻属性 Frozen Properties

Sometimes it is useful to keep the value of a property from the previous artboard during a transition. Principle calls these types of properties “Frozen”. You can Freeze a property by clicking the snowflake icon in the animate panel. Freezing a property prevents it from being changed, and thus animated, during a transition. Frozen properties can be used to remember things from other artboards such as a group’s scroll offset, the position of a draggable layer, or the opacity of a selected element. Principle Freezes the Scroll X and Scroll Y properties by default so that scroll position is maintained between artboards. If you need an event to scroll to a specific position, you can unfreeze Scroll X and Y..(…)

联动 Drivers

[KGVID width=”640″ height=”360″]http://7xo7hi.com1.z0.glb.clouddn.com/video_Principle:%20Intro%20to%20Drivers.mp4[/KGVID]

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

联动和典型的动画时间轴工作原理相似,唯一不同的地方在于:联动不是基于时间,而是基于属性参数的变化。

1. 联动源 Driver Sources

Principle中文文档

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

2. 可联动属性 Driven Properties

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

3. 联动关键帧 Driver Keyframes

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

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

  1. 选中想要控制的图层和属性,创建起始关键帧
  2. 水平拖拽灰色标记,使联动源移动到目的位置
  3. 修改该图层的属性值,系统会自动创建结束关键帧,并关联两个关键帧

导入 Import

1. 概述 Overview

在Sketch中设计的元素可以很容易的通过工具栏上的导入按钮 Principle中文文档 导入进Principle,或者通过文件(File)| 导入(Import)。

导入前有几件事你需要知道:

i. Sketch 必须打开状态;且必须打开一个有效的文件;
ii. Sketch 文档的当前界面,必须至少含有一个画板;
iii. 如果 Sketch 同时打开着多个文件,Principle会默认导入置于最顶层的视窗文件;
iv. 位于 Sketch 底部的画板(左侧Page显示的画板列表底部)尺寸最终决定了 Principle 中画板的大小。(这是由于 Principle 一个项目只允许一种画板尺寸,而 Sketch 允许多个尺寸的不同特性来决定的,所以 Principle 必须做出取舍)

2. 缩放 Scaling

在导入的下拉菜单中,你可以选择以何种缩放尺寸从Sketch中导入。当你Sketch文件是在1x的分辨率环境中创作的,但是你本人又喜欢在2x 或者 3x Retina屏幕上完成Principle交互原型,这个功能就显得十分有用。Principle会记住最后一次你使用的缩放尺寸,所以不必每次导入的时候都去选择。

3. 再次导入 Importing again

如果你修改了Sketch文件,你可以重新将Sketch文件再次导入Principle,其动画、事件以及图层的动画映射依然保持不变。所以,你的工作方式可能变得更高效:在Sketch中修改位置以及其他属性,然后重复倒入就行了。有时候,你在Sketch中删除了一个图层,然后重新创建了它,这需要使用其他的方式来实现导入;因为在这种情况下,Principle是不清楚这个新的图层跟之前的图层是概念上的同一个,所以,之前绑定在旧图层上的所有事件将都会丢失。画板从Sketch文件中删除,或者从另外一个Sketch文件中导入,将不受再次导入特性的影响。

是时候做出改变了!

如果你发现你需要针对图层做视觉上的修改,建议最好是在Sketch中修改,然后再次导入;包括复制画板和图层。在Principle中复制图层,由于并没有一对一映射到Sketch文件中,显然不会对Sketch文件中做任何修改。

4. 图层的扁平化 Layer flattening

Principle 会尽其所能将Sketch中的图层导入Principle,并作为其原生的图层保留,以保证他们的属性是可以被添加各种动画。但是事与愿违,一些客观的原因,Sketch中设计的图层不得不扁平化,最终以图片的方式简单粗暴的导入到Principle中:

路径 通过路径绘制的图层,将被视为一张图片被导入
填充 含有填充的图层,其填充必须是一个纯色填充,否则会被视为一张图片被导入
边框 含有边框的图层,其边框必须是一根实线,并且是内边框(insider),否则会被视为一张图片被导入
阴影/模糊/其他效果 含有阴影、模糊或者其他效果的图层,都将视为一张图片被导入
蒙版 含有蒙版的图层,将被视为一张图片被导入。同时,为了最大限度的减少图层的数量,that get flatted due to a mask, group the mask layer and the layers it masks.

导出 Export

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

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

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

  • 按住 Alt 键再点击可以在导出的视频中隐藏鼠标指针
  • 按住 Cmd 键可以切换显示鼠标箭头形状还是手指形状,在设计桌面应用时可能会用到

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

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

在设备上运行 Running on Device

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

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

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

动画参数 Animation Values

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

在这个例子中,我们给图层的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

描述 快捷键
图层 添加矩形 R(Alt + R作为子图层添加)
添加文本 T(Alt + T作为子图层添加)
添加画布 A
组合 Cmd + G
拆分组合 Cmd + Shift + G
移到顶层 Shift + Cmd + ]
上移一层 Cmd + ]
下移一层 Cmd + [
移到底层 Shift + Cmd + [
编辑 移动部件 方向键
快速移动部件 Shift + 方向键
增大部件 Cmd + 方向键
快速增大部件 CmdShift + 方向键
旋转部件 Cmd + 拖拽”旋转”把手
旋转15°的倍数 Cmd + Shift + 拖拽”旋转”把手
原处复制 Cmd + D
复制并移动 Alt + 拖拽部件
选择器文本框 可以识别简单运算,如”320/2+10″
选择器标签 鼠标左右拖动可以快速调节数值
画布导航 移动画布 空格键 + 拖拽画布
放大画布 Z + 点击需要放大的地方
放大画布 Cmd + =
缩小画布 Cmd + -
缩小画布 Alt + Z + 点击需要缩小的地方
连续缩放 Alt + 空格键 + 鼠标拖拽
完整显示 Cmd + 1
选区完整显示 Cmd + 2
把选区移至中央 Cmd + 3
实际大小 Cmd + 0
选择 选择父部件 Esc
选择子部件 Enter
选择其他子部件 Tab
选择全部子部件 Cmd + A
预览 重置原型预览 W
显示鼠标指针 Cmd(当鼠标在预览框中)
录制 录像中隐藏鼠标指针 Alt + 点击录像按钮
开始录像 Ctrl + V
开始录像(不显示指针) Ctrl + Alt + V

常见问题 FAQ

1. Princile 会有 Windows/Linux/Android 版本吗?

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