神奇的交互设计工具 Principle 中文文档

起点学院产品经理365成长计划,2天线下闭门集训+1年在线学习,全面掌握BAT产品经理体系。了解详情

iPhone SE

最近在学习 Principle,边学边整理了它们的官方文档,今天也算是有了初步的入门吧。整理的文档还有很多不足,比如没有较好的截图供大家参考,也没有好的步骤引导和答疑。后期慢慢完善,希望大家不要介意~

简单描述下这个应用,Principle 是前 Apple 工程师打造的一款交互设计工具,短时间内即可制作出一个具有完整交互动画的原型,并且可将交互动画生成视频或者 Gif 分享到 Dribbble、Twitter 等社交平台,也能够生成 Mac 应用,以及使用 Mirror 预览交互。此外 Principle 还支持多种尺寸的原型设计,包括 Apple Watch。你的动画交互想法,比如设计更好的移动APP交互效果成为现实,用 Principle 轻松帮你实现。Principle 的原则使得它易于创建动画和交互式的用户界面设计。

界面(Interface)

画布(Canvas)

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

预览(Preview)

你可以随时通过预览功能,查看你当前的设计。预览功能默认锁定浮动在画布的右上角。你可以拖拽预览窗口到画布外进行解锁。你可以通过选择 “查看 -> 切换查看光标类型(View -> Toggle Preview Cursor Type)”来调整预览光标类型。这时候预览鼠标光标会在箭头和圆形两种类型之间进行切换。

图层列表(Layer List)

图层列表在界面的的左下方,图层列表包含你设计中的所有图层,主要有画布、子图层、图层间的层级关系。在图层列表中拖拽图层可以将图层编组或者取消编组。拖拽画板还能够改变画板在画布中的显示顺序。点击图层以及组右侧的眼睛可以在隐藏和显示之间进行切换,不过这不会影响图层在预览窗口中的可见性。

检查器(Inspector)

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

动画视图(Animate View)

动效视图会出现在界面的底部,动画视图用来自定义画板之间的动画。你可以点击工具栏上的 Animate 按钮,或点击画板间的跳转箭头打开动画视图。动画视图通常用来调整切换动画的时间和动画曲线。

联动视图(Drivers View)

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

绘图(Drawing)

乍一看,Principle 像一款绘图工具,并且跟你平常使用的工具长得很像。一些基本元素可以在 Principle 中绘制,并且能够导入图片。

画板(Artboards)

Principle 的画板使用跟其他绘图工具类似:每一块画板代表了一个独立的设计状态。你可以随意调整画板的尺寸以适应不同的设备,活着窗口大小。一些画板在概念上等同于屏幕,但是完全不同。例如:两个音乐播放器设计的画板,除了 播放/暂停 按钮,都是相通的。被选中状态的画板,在当前窗口展示为一个绿色边框的矩形;新图层会默认添加到这个选中画板中。

想要创建画板,可点击工具栏左上角的“画板(Artboard)”图标,或者快捷键 A 来增加一个新的画板。

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

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

Principle 一开始便是针对移动互联网设计的交互动画工具,系统已经内置了iPhone4/5/6/6p、iPad、Apple Watch 以及 Dribbble 的标准尺寸;当然,你也可以自定义尺寸。

矩形(Rectangles)

想要在当前画板中创建矩形,可点击工具栏中的“矩形(Rectangle)”图标,或使用快捷键 R 来添加个新的矩形。如果想画一个圆,只需把圆角度数调成一个非常大的数值。如果想给图形设置一个图片背景,只需要把图片(支持格式 PNG、JPEG、TIFF)拖到检查器的图片区中即可。新创建的矩形默认尺寸为 44×44 点,这符合 iOS 中的点击区域设置。

文本(Text)

文本图层和矩形图层属性类似,只多了字体、对齐方式、字体大小三种属性。其中,字体和对齐方式两个属性在创建补间动画的时候不能发生改变。创建文本,可点击工具栏左上角的“T(Text)”图标,或者快捷键 T 来增加一个新的文本。

字体(Custom Fonts)

并不是所有的字体都适用于 iOS 设备,并且也不是所有的字体都能够在 Principle Mirror中显示。使用常规字体或安装所需字体来可解决这个问题。

图片(Images)

在 Finder 中可以将拖拽图片到 Principle,也可以直接粘贴 PNG 或 JPEG 到 Principle 中。如果你是 Sketch 用户,也可以合并选区为一张 PNG 图片后,复制并粘贴到 Principle。图片图层默认是被锁定的,你可以在检查器中点击图右侧的小锁图标来解锁图层。

调整图片(Changing Images)

要调整图层的图片,拖拽一张新图片到检查器中图片属性位置。如果这有一个已在使用图片的图层,Principle 会给你选择将所有图层更新为新图片的权利。

在检查器中点击图片属性位置,或者按键盘中的 Delete 键,也可以将图片从图层中移除。

高分辨率图像(High Resolution Images)

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

视频和音频文件录制(Video and Audio Playback)

当你将鼠标放到预览界面上的时候,视频和音频文件是可以播放的。默认情况下,文件将会一直循环播放,但是当你在检查器中点击媒体按钮,活着选择“播放一次(Play Once)”的时候,就会改变播放方式。

在画板之间播放视频或者音频,只需要复制视频或者音频文件到对应的画板,并确认图层有相同的命名。默认情况下,媒体时间属性是锁定的,并允许连续播放。但是,需要手动去控制重新播放。

编组(Groups)

在 Principle 中,图层可以编组,选中希望被组合在一起的多个图层,点击工具栏上的“组合(Group)”图标,或者使用 Command+G 快捷键。你还可以在检查器的图层列表中,通过拖拽图层到另一个图层中实现编组。

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

蒙板(Cropping/Masking/Clipping)

你可以通过文件夹对图层进行“编组 Grouping(或快捷键 Command+G)”快速编组。想要得到一个圆形蒙板,调整编组的半径属性。

连续的交互(Continuous Interactions)

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

拖拽(Dragging)

对某个图层开启拖拽后,当点击按住移动图层的时候,就能够改变图层的位置。

滚动(Scrolling)

滚动能够有机会在组中使用。当手指被拖拽到一个滚动图层上的时候,子图层将随着手指移动,但是组缺不会改变位置。地图、消息列表、或者大量内容,都可以利用滚动视图。如果你开启的图层上使用了滚动,可是这个图层有没有子图层,Principle 将会为你自动的创建一个滚动视图组,很棒吧。

翻页(Paging)

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

事件(Events)

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

拖拽时如果指向当前的画板的图层,会在右侧复制出一份当前画板。

如果把图层的透明度设置为 0,那么这个图层就不会产生交互。创建一个明确的可点击区域,将填充调整为 0 就可以了。

事件类型主要有:

点击(Tap)

点击是最常用的事件,当点击图层并释放的时候就会被触发,点击不需要移动。

拖拽开始(Drag Begin)

当手指按住图层并开始移动时,就会触发这个事件。使用这个事件的前提是图层开启了可移动属性(draggable)。如果在目标画板中有同样名称的图层,完成拖拽事件后图层的位置也就确定了。

拖拽结束(Drag End)

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

滚动开始(Scroll Begins)

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

滚动释放(Scroll Released)

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

滚动结束(Scroll Ended)

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

按下(Touch Down)

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

抬起(Touch Up)

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

长按(Long Press)

手指按住0.5秒后触发事件。

鼠标移进(over Inside)

当手指移进一个图层时触发事件。

鼠标移出(Hover Outside)

当手指移出一个图层时触发事件。

自动事件(Auto)

自动触发,并不需要雨用户交互。多用于循环或复杂的多步骤动效。只有当鼠标进入预览区域时才会触发该事件,这一设计的主要目的是为了避免循环导致缩短电池寿命。

为自动事件添加延迟,点击自动事件的肩头并在动画面板中调整动画就可以了。

延迟场景中没有动画的事件,你可以在画板外稍微偏移的位置添加图层,这样就能创造出延迟的动画了。

改变事件类型(Changing an Event Type)

如果你想改变控制补间动画的类型,你可以通过点击补间动画尖头并通过“Delete”键删除补间,或者你创建一个新的事件类型。你创建的动画关键帧并不会随之消失,因为它们被存储在画板中,而不是补间动画中。

动画(Animation)

当触发事件时,Principle 会自动创建当前画板与目标画板之间创建补间动画。

动画映射(Animation Mappings)

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

自定义动画(Custom Animations)

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

关键帧(Keyframes)

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

缓动曲线(Easing Curves)

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

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

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

弹性曲线(Springs)

通过在曲线选择器中旋转“Spring”来使用弹性曲线。它可以把一个图层中元素的运动变成生动活泼,但也不能滥用,因为它会吸引人的注意力而打断思路。曲线选择器有两个选项,张力和摩擦力。动画曲线是没有结束关键帧的,因为弹性曲线动画的结束时间由物理弹性决定。你可以通过改变弹性曲线的张力和摩擦力调整弹性曲线。

锁定属性(Frozen Properties)

有时它是有用的,用来维持当前的画板在过渡期间的属性值。Principle 将这类属性称之为“锁定(Frozen)”(或者称冻结,不过我个人认为叫锁定更合理)。你可以通过点击动画面板中的雪花图标来锁定一个属性。锁定一个属性可以防止动画及其补间被改变。锁定属性可以用来记住其他画板等一组滚动偏移的东西,一个可拖动的层的位置,或选定元素的不透明度。默认情况下,Principle 锁定滚动 X 轴和 Y 轴的属性,以此来保持两个画板之间盾冬的位置。如果你需要一个事件来滚动到特定的位置,你可以解锁滚动 X 轴和 Y 轴。

动画分享(Animations are Shared)

每个转场动画的信息都被存储到了目标画板中。这意味着,所有专场动画将到达一个特殊的画板,并且拥有相同的动画设置。例如,如果你在画板 A 到 B 之间使用弹性动画,弹性动画也将会出现在画板 C 到 B 之间。

联动(Drivers)

想制作带有交互的视差效果?想让一个图层在拖拽的同时,根据拖拽程度旋转?联动功能可以实现。联动用关键帧链接了每个属性。和动画不同,动画发生在画板切换时,联动发生在同一个画板中。在工具栏点击 Drivers 按钮可以展开当前画板的联动面板。如果你的鼠标不支持水平滚动,按住 空格键(Space)同时拖拽联动面板来滚动。

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

联动源(Driver Sources)

想要创建联动,在画板上必须存在一个可改变的属性,这叫做联动源。在联动视图中列表中,可拖拽图层、可滚动图层,以及选择属性将自动展示出来。

联动属性(Driven Properties)

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

联动关键帧(Driver Keyframes)

完整的联动需要至少两个关键帧才能有效果。方法很简单:水平拖拽灰色标记移动到你想添加的关键帧位置,然后调整属性值。Principle 将自动为你插入一个新的关键帧。关键帧能够通过点击衣橱,然后点击红色按钮到关键帧的左侧。

导入(Import)

Overview

Sketch 是一个矢量设计工具,常被用来做界面设计。在 Sketch 中设计的元素可以很容易的通过工具栏上的导入按钮,将文件导入 Principle,或者通过”文件 > 导入(File > Import)”。

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

  • Sketch 必须打开状态;
  • Sketch 有一个文件打开;
  • Sketch 文档的当前界面,必须至少含有一个画板;

如果 Sketch 同时打开着多个文件,Principle 会默认导入置于当前窗口的文件。如果 Sketch 文件包含多个页面,Principle 会默认导入当前的页面。

位于 Sketch 底部的画板(左侧Page显示的画板列表底部)尺寸最终决定了 Principle 中画板的大小。画板将在 Principle 中按照它们在 Sketch 中的顺序展现,这与在画布中展现的顺序是不同的。

缩放(Scaling)

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

再次导入(Importing again)

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

是时候做出改变了!

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

图层的扁平化 (Layer flattening)

会尽其所能将 Sketch 中的图层导入 Principle,并作为其原生的图层保留,以保证他们的属性是可以被添加各种动画。如果你不需要在组中为突出添加动画,你可以将组扁平化之后再导入到 Principle。

但是事与愿违,一些客观的原因,Sketch 中设计的图层不得不扁平化,最终以图片的方式简单粗暴的导入到 Principle 中:

  • 路径(Paths)多于一个带有半径的圆角的矩形会被扁平化
  • 填充(Fills)含有填充的图层,其填充必须是一个纯色填充,否则会被扁平化
  • 边框(Borders)含有边框的图层,其边框必须是一根实线,否则会被扁平化
  • 阴影/模糊/其他效果(Shadows,Blur,other effects)含有阴影、模糊或者其他效果的图层,都将被扁平化
  • 蒙版(Masks)含有蒙版的组或者图层,将被扁平化。为了最大限度的减少扁平化厚图层的数量,蒙板图层会被编组并且图层会带有蒙板

导出(Export)

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

视频录像和 Gif 动图(Videos and Gifs)

要导出视频或者 Gif 动画,点击工具栏的录制按钮就可以了。你可以选择光标的类型,是圆形点击,箭头,或者是隐藏光标三种方式。在选择光标之后,Principle 开始在预览窗口展示动画。开始录制后,再次点击录像按钮停止录制。

Gif Setting

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

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

导出到 Mac(Export for Mac)

如果你想分享你的设计,其他人可能没有 Principle,你可以导出一个独立的 Mac 应用程序,任何人用苹果可以打开。

  • 注:导出的 Mac 应用程序只能在 Mac 上运行,而不是在 iPhone 上。如果你想在 iOS 设备上运行,请看 Running on Device 章节。通过“文件 > 导出为 Mac(File > Export for Mac)”,导出 Mac 应用程序。最终的应用程序,可以以你喜欢的方式通过电子邮件发送或共享。

不明身份的开发商警告

你发送应用程序的人可能会得到一个消息说它“不能打开,因为它是从一个不明身份的开发者”。这是因为它是由你创造的(不明身份的开发者)。他们可以通过点击应用图标运行应用,选择打开,然后在一个对话框中会出现让他们选择是否打开你的应用。

在 iOS 设备上运行(Running on Device)

Principle Mirror iOS 版应用可以帮助你在 iOS 设备上预览并分享你的设计。下载 Principle Mirror 在你的 iOS 设备上然后用数据线连接电脑。Principle Mac 版会自动发现已连接的设备,并立即连接当前的设计稿到移动设备上。在预览过程中,使用快捷键“Cmd + ~”可以快速切换两个设计稿(Principle 文档与 iOS 应用中的文件)。

iOS 设备上的设计稿在断开数据线后可以继续运行。这可以让你更容易地把设计展示给团队成员。Principle 文件可以在 iOS 设备上直接打开。所以你可把文件发送给他人,或者让别人把设计稿发给你,一切就是这样简单。

分享(Sharing an interactive design)

如果你想分享你的设计使自己能与他人互动的话,他们可以在他们的iOS设备安装原理镜子,你可以向他们发送文件。分享你的文件必须有。珠三角扩展和不可压缩为iOS开放原则的镜子。

  • 电子邮件

从电子邮件中打开一个 PRD 文件,点击附件,然后点击 iOS 分享按钮。在分享面板中选择 Principle Mirror,或者“打开…”按钮(如果 Principle 是不可见的)。

  • 自己的服务器

如果你担心使用文件共享服务,为安全起见,你可以把 .PRD 文件放到自己的 FTP 服务器。直接链接到该文件,其他人可以在他们的手机上查看。Safari 浏览器会显示“Open in Principle”按钮。

  • Dropbox,Google Drive,Box,等

你可以将你的文件上传到一个文件共享服务,并生成一个链接到文件。

关于Dropbox:

默认情况下,Dropbox 的链接将带你到一个 Dropbox 网页而不是文件本身。你可以绕过这个由 Dropbox 的链接最终从“DL = 0”链接到“DL = 1”

关于 Google Drive 的说明:

Google Drive 的特殊文件类型有问题,所以我们不建议使用它来共享原则文件。

动画参数(Animation Values)

Principle 目前没有导出动画的属性值,但工程师可以在 Principle 看到它们。单击并按住一个关键帧,就能看到。点击关键帧之间的蓝色区域来访问它的缓和曲线。这些值与平台无关的。

快捷键(Shortcuts)

图层(Layers)

  • 添加矩形(Add rectangle): R (Alt + R to add as child)
  • 添加文本(Add Text): T (Alt + T to add as child)
  • 添加画板(Add Artboard): A
  • 编组(Group): Cmd + G
  • 取消编组(Ungroup): Cmd + Shift + G
  • 移到顶层(Bring to Front): Shift + Cmd + ]
  • 上移一层(Bring forward): Cmd + ]
  • 下移一层(Send Backward): Cmd + [
  • 移到底层(Send to Back): Shift + Cmd + [

编辑(Editing)

  • 移动(Nudge): Arrow Keys
  • 快速移动(Big Nudge): Shift + Arrow Keys
  • 旋转(Rotate): Cmd + Drag handle
  • 旋转15°的倍数(Rotate in 15 degree increments): Cmd + Shift + Drag handle
  • 复制(Duplicate): Cmd+D
  • 复制并移动(Duplicate and Move): Alt+Drag
  • 选择器文本框(Inspector Textfields): understand basic equations like “320/2+10”
  • 选择器标签(Inspector Labels): dragging textfield labels quickly scrubs values
  • 重命名(Rename Layer): Cmd+R

画布导航(Canvas navigation)

  • 移动画布(Pan): Space + drag
  • 放大画布(Zoom in): Z + Click
  • 缩小画布(Zoom out): Alt + Z + Click:
  • 连续缩放(Continuous Zoom): Alt + Space + Drag
  • 放大画布(Zoom in): Cmd + =
  • 缩小画布)Zoom out): Cmd + –
  • 完整显示(Zoom All): Cmd + 1
  • 区域完整显示(Zoom Selection): Cmd + 2
  • 把选区移到中央(Center Selection): Cmd + 3
  • 实际大小(Actual Size): Cmd + 0

联动导航(Driver Navigation)

  • 选择(Pan): Space + drag
  • 放大(Zoom in): Z + Click
  • 缩小(Zoom out): Alt + Z + Click:
  • Continuous Zoom): Alt + Space + Drag

动画导航(Animate Navigation)

  • 选择(Pan): Space + drag

选择(Selection)

  • 选择父级文件(Select Parent): Esc
  • 选择子级文件(Select Child): Enter
  • 选择其他(Select Next Sibling): Tab
  • 选择当前其他(Select Previous Sibling): Shift+Tab
  • 全选(Select all Siblings): Cmd + A

预览(Preview)

  • 改变光标类型(Change cursor type): View -> Toggle Preview Cursor Type
  • 重置预览(Rewind Prototype): W
  • 开始录制(Start recording video): Ctrl+V
  • 开始录制不带光标(Start recording video without cursor): Ctrl+alt+V

常见问题(FAQs)直接贴原文啦~

有没有学生版?Do you have educational discounts?

有,价格 50%,需要发邮件提供证件,之后官方会发地址给你。

We have a 50% educational discount for students and faculty. Once you’ve tried the free trial and are ready to purchase, email a photo of your class schedule and student ID and we’ll make a discount link for you! The link expires two days after we make it.

是否有 Window 以及其他版本?Will Principle be released for Windows / Linux / Android / Web?

Principle 和 Principle Mirror 目前只支持 OSX 以及 iOS,没有其他版本

Principle and Principle Mirror are built on core technologies exclusive to OS X and iOS, so it won’t be available on other platforms.

试用版不管用了!The free trial link doesn’t work!

通过网络下载其他的文件,推荐用官方的 。Dropbox is probably blocked on your local network. Try downloading from another network.

Can you provide a Quote?

Principle is $99 per user. License keys that can be used by more than one person can be purchased by changing the quantity on the purchase page. We do not offer reseller discounts. Can I add additional users to an existing license? Not at this time, you must purchase a new license.

Do you accept purchase orders, faxes, etc?

Nope, our website handles the entire purchase process.

Will Principle be available on the Mac App Store?

We’re not planning to release Principle on the Mac App Store because of all its frustrations. By selling outside the store, we can release updates as often as we like and are free to pursue advanced features that may not be possible if Principle were in the App Store.

What is the road map for Principle?

We don’t talk about our future plans. If there is a feature you’d like to see added, send us an email!

Buying for Someone Else

Licenses can be purchased for someone else by clicking the gift icon at checkout. The recipient will get an email with the license keys, and the purchaser get one with the invoice.

Invoices

You can generate an invoice by clicking the link in the email you receive after purchase.

图文版获取地址:http://yuedu.baidu.com/ebook/5ae49c28770bf78a64295491

本文由人人都是产品经理专栏作家 @郑几块 授权发布于人人都是产品经理 。未经许可,禁止转载。

您的赞赏,是对我创作的最大鼓励。

评论( 8

登录后参与评论
  1. 这个软件是只能够在Mac 系统上使用的么 :?:

    回复
    1. 回复

      是哒

  2. principle、pixate、hype3、flinto都是非常好的交互工具

    回复
  3. 就像你跟程序员沟通的时候,没有原型图他啥都听不进去。你这没有图片我不知道这是啥啊。也没有找到下载链接和云盘

    回复
    1. 回复

      后期会补充的

    2. 回复

      好的好的,辛苦辛苦,谢谢分享。 :mrgreen:

  4. 为什么这么好的原型工具没有图全是文字呢?

    回复
    1. 回复

      因为我还木有时间添加图片 :!:

加载中