Principle教程：中文文档（带图）如何制作App应用高保真原型

本文为翻译内容，来自Principle官方文档
翻译： 张洪Heo（转载注明出处）
非原创内容须知

本译文对内容有部分删减和增加，可能与文档原义不符，配合我自己理解改动，仅供参考。

译者前言

principle是一款无代码，十分简单的高保真原型制作工具，体积小巧，适合制作简单的动画高保真，适合作为方案评估的工具。对于开发的对接可能比较复杂，不过能够快速出效果，制作多套方案和修改起来非常方便。

简介

Principle是一个为网络、移动设备和桌面设计动画和交互用户界面的工具(一些设计团队甚至将其用于虚拟现实！)通过允许你在投入宝贵的工程时间之前快速评估你的想法，Principle加快了设计开发周期。在确定最终设计后，原理样机会与工程团队交流想法。
Principle不提供专门用于传递设计趋势或利基用例的功能，而是致力于提供一个通用功能工具箱，这些功能可以创造性地组合在一起，产生各种结果。由于不可能涵盖所有可以组合这些功能的方式，因此本文档侧重于描述Principle是如何工作的，并将其留给读者去发现创造性的应用程序。

界面

画布

画布中心是你完成大部分工作的地方。它包含所有画板以及它们之间的过渡路径。当前画板用绿色边框突出显示。Principle会自动将画板从左到右定位。你可以通过在图层列表中拖动画板来重新排序画板。当你将图层移出画板边界时，Principle会将画板隔开留出空间。

预览

预览允许你随时与你的设计交互，并停靠在画布的一角。通过将其拖出画布，可以将其分离到其自己的窗口中。你可以通过选择查看->切换预览光标类型来更改预览中显示的鼠标光标。

图层列表

窗口左下角的图层列表显示设计中的所有层。可以通过拖动层的行来对层进行分组和取消分组。画布上的画板顺序可以通过拖动画板的行来更改。了解有关图层的详细信息

隐藏层

将鼠标悬停在层的行上会显示隐藏按钮，该按钮看起来像一只眼睛。单击图标可在编辑器中切换层的可见性，但不会影响层在预览中的可见性。

锁定的图层

可以通过进入排列菜单并选择“锁定图层”来锁定图层。如果图层被锁定，图层列表中将显示一个锁定图标。单击锁定图标以解锁图层。将鼠标悬停在锁定的图层上将在光标旁边显示一个锁定图标，让你知道在画布上单击可能不会选择预期的图层。如果你想要在画布中选择一个锁定的层，你可以右击该层并使用“Select Layer”菜单来选择它。

检查器

在窗口左侧的图层列表上方，检验器显示选定图层的特性。

动画面板

动画面板显示在窗口底部，用于自定义画板之间的动画。它可以通过单击工具栏上的动画按钮或通过选择画布上的过渡箭头来显示。
了解有关动画的更多信息

驱动面板

在窗口顶部，“驱动”面板显示当前选定画板的联动。联动用于创建复杂的连续交互。
了解有关联动的详细信息

绘图

乍一看，Principle感觉像是一个图形设计工具，就像你使用过的其他工具一样。基本元素可以在Principle内部创建，其他所有内容都可以通过导入图像。

画板

Principle的画板与其他绘图程序的工作方式相似：每个画板都代表你的设计的独特状态。可以更改画板的大小以适应不同的设备或窗口大小。所有画板都将具有相同的大小。如果需要更改大小，以模拟旋转或窗口更改大小，请将画板设置为所需的最大大小，并在该区域内更改内容。某些画板在概念上可能是相同的屏幕，但略有不同。例如：音乐播放器设计的两个画板可以是相同的，除了播放/暂停按钮。

预览窗口显示的画板在编辑器中将有一个绿色边框。

矩形

单击工具栏的矩形按钮或按“R”将新矩形添加到当前画板。可以通过将矩形的半径设置为较大值来创建圆角。通过将图像(PNG、JPEG、TIFF)拖动到检查器中的图像上，可以将图像添加到矩形内。创建的矩形的大小为44x44磅-这是IOS建议的点击区域大小。

文本

文本图层具有与矩形图层类似的属性，但增加了字体、对齐方式和大小。无法设置字体和对齐属性的动画。

自定义字体

并非你计算机上的所有字体在iOS上都可用，并且不会出现在Principle Mirror中。可以使用AnyFont之类的应用程序在你的设备上安装非iOS字体。

图像、视频、音频

可以通过从Finder中拖动或通过复制/粘贴将图片、电影和声音导入到Principle中。如果你是Sketch用户，从Sketch复制会将所选内容拼合到单个图像。默认情况下，图像和视频图层的宽高比处于锁定状态，可以通过单击检查器中的锁定图标将其关闭。

资源将复制到principle的源文件中，以便可以移动、通过电子邮件发送和查看设计，而不会丢失其资源。因此，请尽量使用最短的视频和音频资源来保持较小的文件大小。当连接到运行Principle Mirror的iOS设备时，保持较小的资产大小还可以提高速度。

设计中不支持动画gif，因为它们可能同时非常大(压缩较差)和低质量(仅支持256色)。它们的性能也非常差，因为与视频不同的是，没有硬件解码器。我们建议对小动画使用视频，而不是尝试使用gif。

本文图中演示视频来自Dribbble，后面不再赘述。

更改图层的资源

要更改图层的图像，请将新图像拖动到检查器中的Fill上，或单击检查器中的Fill，然后单击“选择媒体.”。在菜单上。如果还有其他图层也使用旧资源，则Principle将为你提供使用新资源更新所有这些层的选项。

通过单击检查器中的媒体属性并单击菜单中的“剪切”，可以从层中删除资源。

高分辨率图像

文件名末尾带有“@2x”或“@3x”的图像将以1x磅大小导入，并且资源在视网膜屏幕上查看时看起来将是正确的。如果你已经导入了不带后缀的高分辨率图像，则手动将图层的宽度和高度减半会产生相同的结果。(专业提示：检查员文本字段理解诸如“320/2”之类的基本公式)

从Sketch或其他工具复制和粘贴通常会产生1倍的资源，因此在导入到Principle之前以视网膜分辨率导出可确保资源的大小正确。

视频和音频播放

当鼠标悬停在预览窗口上时，将播放视频和音频资源。默认情况下，资源将永远循环，但这可以通过单击检查器中的Fill并选择“播放一次”来更改。

要在画板之间无缝播放视频或音频，只需将视频或音频图层复制到两个画板，并确保图层名称相同。默认情况下，Media Time属性处于冻结状态，这允许无缝播放，但可以手动解冻以使播放重新开始。了解有关冻结属性的详细信息

群组

原则上可以通过选择图层并单击工具栏中的分组按钮，或按Command+G组合键对图层进行分组。你也可以通过将图层列表中的一行拖动到另一行之上来对图层进行分组。

原则上，组实际上只是带有一些子层的矩形层。无论其子层的位置如何，组都有自己的位置和大小。这就是UIKit、Android和DOM绘制元素和设置动画的方式，如果你习惯了Sketch和Figma等程序中分组的工作方式，这可能会出乎意料。此行为可用于扩大图层的交互区域、围绕不同原点旋转层或将多个动画层叠在一起。

裁剪/蒙版/裁剪

你可以通过分组(Command+G)并启用组上的“剪贴子图层”来裁剪图层。要获得圆形遮罩，请打开组的半径属性。

更改锚点

默认情况下，层将围绕其中心旋转和缩放。如果你想围绕其他点旋转或缩放图层，你可以使用组来执行此操作。通过对图层进行分组、将其定位在组内并旋转组，你将围绕新锚点旋转层。将组的宽度和高度设置为0会很有帮助，这样可以更容易地知道旋转点将在哪里。

交互

Principle内置了三种常见的交互：拖动、滚动和分页滚动。这些功能可以在图层的垂直轴和水平轴上独立启用。

拖动

如果你希望在触摸某个图层时允许该图层的位置移动，请启用在该图层上拖动。

滚动

可以在图层组上启用滚动。当手指拖动到滚动图层上时，子层将随手指一起移动，但组本身不会改变位置。地图、消息线程或任何大型内容都是很好的滚动候选对象。如果你在没有任何子层的图层上打开滚动，Principle会自动为你创建一个滚动窗口组。打开滚动图层上的“剪贴子层”，以便在子层滚动到组之外时隐藏这些子层。

分页

分页就像滚动一样，只不过它在滚动结束时会自动将其滚动位置对齐到组大小的增量。使用分页来显示图像旋转木马、带有图标的主屏幕，以及现在非常流行的任何一种卡片UI。如果你想在页面之间添加填充，请使分页组略大于一个元素，并将这些元素隔开。

事件

事件触发画板之间的过渡。要添加事件，请在画布上选择一个图层并单击其右侧出现的闪电按钮，然后从其中一个圆拖动到目标画板。过渡箭头将添加到从源画板指向目标画板的画布。

将箭头拖到选定图层的画板上将创建一个重复的画板。

不透明度为0%的图层不能交互。要创建透明的可点击区域，请使用透明填充而不是0%不透明度。

有几种类型的事件：

• 点击
  当层被触摸并在没有移动的情况下释放时激发。通常用于按钮。
• 拖动开始
  当手指放在图层上并开始移动时，会触发此事件。将此事件添加到层将使该层变得可拖动(如果该层尚不可拖动)。如果具有相同名称的图层位于目标画板中，则其可拖动状态将确定事件激发后拖动交互组件是否继续。
• 拖动结束
  当在图层上移动的手指被抬起时激发。将此事件添加到图层会将其垂直和水平属性设置为拖动。
• 滚动开始
  在可滚动层开始滚动时激发。将此事件添加到图层会将其垂直和水平属性设置为Scroll。
• 滚动时手指抬起
  当手指滚动图层时激发。此事件同时适用于滚动和分页。在此事件之后，由于减速或分页动画，内容可能会继续滚动。将此事件添加到图层会将其垂直和水平属性设置为Scroll。
• 滚动结束
  当滚动完全停止时激发。此事件同时适用于滚动和分页。由于减速需要一段时间才能完全停止，因此此事件在触发之前可能会有比预期更长的延迟。将此事件添加到图层会将其垂直和水平属性设置为Scroll。
• 按下
  手指与层接触时激发。用于将按钮转换为高亮显示状态。
• 抬起
  当手指离开图层时激发。对于取消高亮显示按钮非常有用。如果触摸起源于另一层，则不会触发。
• 长按
  当手指在图层上按住半秒时激发。
• 鼠标移入
  当鼠标位于图层内部时激发
• 鼠标移出
  当鼠标位于层外时激发
• 自动
  自动激发，无需用户交互。可用于循环原型和动画。只有当鼠标位于预览上方时，才会触发自动事件，以节省电池寿命。
  若要为自动事件添加延迟，请单击自动事件箭头，然后在动画面板中延迟其动画。
  要延迟没有动画的屏幕之间的自动事件，可以在两个画板的屏幕外在略有不同的位置添加一个虚拟层。这将创建可以延迟的动画。

消息事件

从Principle 3.0开始，组件及其父组件可以通过消息事件进行通信。消息事件允许组件相互控制，而不必导航到完全不同的画板，从而极大地降低了原型的复杂性。消息事件可以从组件发送到父组件、从父组件发送到组件，或者从组件发送到组件。

事件可以发送消息、侦听消息或两者兼而有之。事件侦听特定层(组件或组件的父层)并将消息发送到该层。要使消息正常工作，必须同时有发送事件和侦听事件。例如，电子邮件组件可以向父级发送“Send Mail”消息，并且父级具有来自组件的事件，该组件侦听“Send Mail”消息。组件发送或侦听特定消息并不一定意味着该消息的另一端有事件。在将事件创建到组件和从组件中创建事件时，Principle将为你创建发送事件和侦听事件。

将事件发送到父级

要将事件从组件发送到其父组件，请输入组件并像往常一样开始创建点击事件，但将箭头拖动到画布左上角的“Send to Parent”按钮。将鼠标悬停在按钮上将显示一个弹出窗口，允许你在父级中选择画板。这将创建两个事件：一个在组件中通过轻触触发时向父组件发送消息，另一个事件在父组件中侦听相同的消息，然后转到父组件中的另一个画板。

将事件发送到组件

若要将事件发送到组件，请将事件箭头拖动到具有闪烁蓝色边框的组件上，以显示组件画板弹出窗口。然后在所需的目标画板上释放。
在现有组件消息上触发

单击组件上的闪电按钮将显示一个弹出窗口，其中列出了传统事件(如TAP)，但也会显示该组件发送给父组件的所有消息。

重命名消息事件

Principle为消息提供唯一的默认名称，如“Event 1”，但你可以更改此名称以赋予事件更有意义的名称或从一条消息切换到另一条消息。

双击事件箭头上的蓝色消息允许你编辑该消息。Principle有一个小小的魔力，所以重命名已发送的消息将自动重命名侦听消息，反之亦然。

由于消息只是文本，因此文本必须完全匹配，发送事件才能触发侦听事件。发送“Send Mail”的事件不会触发，事件侦听“Send-Mail”。

更改事件类型

如果要更改触发转换的事件类型，可以删除转换(单击转换箭头并按键盘上的Delete键)，然后创建具有所需事件类型的新转换。动画关键帧和曲线不会丢失，因为它们存储在画板中，而不是在过渡中。了解有关共享动画的更多信息。

事件传递

在多个事件出现行为冲突时，只响应从最内层嵌套层，然后向上传递父层，直到其中一个层可以触摸。即在多个图层可触摸情况下，优先响应子图层。

我们来看几个例子：

1
2

组(具有点击事件)
-子图层(具有点击事件)

点击子图层将触发子图层的点击事件。仅当可以在不接触子图层的情况下点击该组时，才能触发该组的事件。

另一方面，请考虑以下情况：

1
2

组(具有点击事件)
-子图层

轻击子图层会导致组的点击事件生效。由于图层不使用触摸，因此会将其传递给Group，后者将其用于Tap事件。

组件的工作方式相同：

1
2
3

组(具有拖动事件)
-组件
--Layer(元件中有拖动事件)

拖动层只会触发层的拖动事件，因为它是最内层，组上的拖动事件不会激发。

可触摸

Touchable属性允许你控制层是捕获触摸，还是允许触摸通过它。向图层添加事件(如TAP)或内置交互组件(如拖动)会将该图层标记为可触摸。取消选中可触摸将删除事件并清除其水平和垂直属性。层的可触摸属性不会影响其子级的可触摸属性：即使父层不可触摸，可触摸层也始终是可触摸的。

对于具有大而清晰的画板的组件，将可触摸保留为未选中是很有用的，这样组件就不会阻止触摸转到其后面的其他层。另一方面，有时你希望层是可触摸的，这样它们就不会接触到其他层，例如在为模式弹出UI设计时。

动画

触发事件时，Principle会在当前画板和事件的目标画板之间设置动画。

动画映射

如果不同画板上的两个图层具有相同的名称，则在过渡期间，Principle将自动在它们之间设置动画。如果源画板和目标画板上没有同名的图层，则该图层将消失或显示时没有动画。

动画面板将显示其名称同时存在于源画板和目标画板上的图层的动画属性。如果画板1上的同名图层位于(x：0，y：0)，画板2位于(x：0，y：50)。动画面板将显示y属性的动画信息，但不显示x属性的动画信息。

自定义动画

默认情况下，所有动画的持续时间均为0.3秒，并且使用iOS和OSX中使用的默认缓动曲线。你可以在动画视图中对其进行自定义。单击画板上方的过渡箭头将显示动画视图，其中列出了要设置动画的所有属性以及更改计时和缓动的时间表。

关键帧

动画视图中的每一行显示两个关键帧，一个表示动画的开始时间，另一个表示结束时间。拖动这些关键帧会更改动画的延迟和持续时间。

缓动曲线

缓动曲线决定了属性设置动画的速率：它是先慢后快吗？它是不是快速地倾斜到尽头，然后逐渐减慢到停止？这样的行为由缓动曲线控制。

单击两个关键帧之间的蓝色区域将显示曲线选择器。曲线选择器有几条内置曲线，以及选定曲线的图形。

内置曲线与IOS和OSX中使用的曲线相同。任何时候都可以通过在预览中拖动手柄或为弹出窗口底部的手柄键入新坐标来调整曲线。

弹簧

弹簧动画可以通过在曲线选择器中选择“弹簧”来使用。这对于增加层的物理性和娱乐性很有用，但不应过度使用。曲线选择器具有弹簧张力和摩擦力的选项。弹簧动画没有结束关键帧，因为弹簧动画的结束时间将由物理模拟确定。通过更改张力和摩擦力值，可以间接更改弹簧动画的持续时间。

冻结属性

有时，在过渡期间保持上一个画板的属性值很有用。Principle将这些类型的属性称为“冻结”。你可以通过单击动画面板中的雪花图标来冻结属性。冻结属性可防止其在过渡期间更改并因此设置动画。冻结的属性可用于记住其它画板中的内容，如滚动偏移、可拖动图层的位置或组件所在的画板。Principle默认冻结Scroll X和Scroll Y属性，以便在画板之间保持滚动位置。如果需要将事件滚动到特定位置，可以解冻滚动X和Y。

动画是共享的

每个过渡的动画信息都存储在过渡的目标画板中。这意味着所有转到特定画板的过渡都将具有相同的动画设置。例如，如果在从画板A到画板B的过渡中使用弹簧动画，那么在从画板C到画板B的过渡中也将使用弹簧动画。

联动

想要制作互动视差效果吗？想让图层在拖动时旋转吗？可以使用联动。联动使用关键帧将属性彼此连接。与发生在画板之间的动画过渡不同，联动在画板中工作。单击联动按钮，显示或隐藏当前画板的联动。如果你的鼠标不支持水平滚动，请按住空格键并拖动“联动”面板进行滚动。

联动的工作方式类似于动画时间轴，不同之处在于联动基于不断变化的属性(而不是时间)设置动画。

联动来源

为了创建联动，画板上需要存在一个可以更改的属性，这称为联动源。可拖动层、可滚动层和可选属性将自动作为联动源在Drivers视图中列出。

受驱动特性

一旦拥有了联动源，你就可以使用它来控制其他属性。选择你想要控制的图层，单击联动视图中的蓝色“+”按钮，然后选择你想要驱动的属性。这将创建具有当前值关键帧的联动。就其本身而言，此单个关键帧不会执行任何操作，这会导致我们执行以下操作：

联动关键帧

要添加关键帧，请将灰色联动光标拖动到要添加关键帧的位置，然后更改该属性的值。Principle将自动为你插入新的关键帧。通过单击关键帧，然后单击关键帧行左侧的红色按钮，可以将其删除。

组件

原则2.0中引入的组件允许你在多个地方重用设计元素，并将嵌入的交互添加到现有画板。在内部，组件的工作方式就像一个标准的原理文件；它们有独立于其父组件的自己的画板、事件和动画。如果编辑零部件的一个引用，则该零部件的所有其他引用都将更新。组件还可以包含其他组件，从而使复杂的组合成为可能。

组件内的事件与组的子层上的事件的工作方式相同。如果组或组件的子层有点击事件，则会触发该点击事件，而不会触发该组或父组件上的点击事件。

如果需要制作更改大小的组件(如弹出菜单)，最好的方法是将组件设置为折叠菜单的大小，然后使展开的菜单层超出该大小。如果将组件设置为展开菜单的大小，则即使折叠，它也会触及挡路，因为画板太大了。

创建和编辑

若要创建组件，请在画板上选择一个或多个图层，然后单击Principle工具栏中的Create Component(创建组件)按钮。这些层将在单个组件中组合在一起，你将进入该组件以开始编辑它。单击Principle画布左上角的“Back to Parent”按钮，返回到你创建组件的位置。如果以后需要再次编辑该组件，可以选择该组件并单击检查器中的“Edit Component”(编辑组件)按钮。也可以双击零部件进行编辑，或在选定零部件时按Enter键。
你可以将现有的原理文件拖到画布上，将其作为组件导入。

触摸路径

原则路线触及最深最顶层。如果你有一个组件或透明层高于其他任何东西，它就会受到触碰。可以将组件画板的大小调整为更小，也可以将其调整到屏幕外，这样当内容不可见时，组件的画板图层就不会受到触动。

如果你在组件内有触摸事件，并且在组件的父级中有触摸事件，则组件的触摸甚至会获得触摸，因为它是最深的层。这与在两个组和组的子层上都有事件时点击的方式相同。

导入

Sketch和Figma是静态界面设计中常用的矢量绘图程序。在Sketch和Figma中创建的设计可以通过单击工具栏中的导入按钮或转到File>Import导入到Principle中。

你需要导入以下几项内容：

1. 草图或图形必须打开文档
2. 文档的当前页面上必须至少有一个草图画板或图形框架

如果文档有多页，则将导入当前页。

Principle将按照Sketch画板和Figma框架在页面上的显示顺序(从左到右，然后从上到下)导入它们。

特殊后缀

在Sketch或Figma中，你可以通过在图层名称中添加Principle Flatten将组或图层作为单个光栅化图像导入。这可用于减少导入到Principle中的层数，这将使其更容易使用、导入更快，并以更高的每秒帧数运行。

要防止层导入，可在Sketch或Figma中将Principle Skip添加到层名称。

缩放

在导入下拉列表中，你可以选择导入时拼合图像的缩放方式。比例因子不会影响图层的尺寸，只会影响资源的分辨率。如果你的Sketch或Figma文件的分辨率为1倍，但你希望原理原型在2倍或3倍的视网膜屏幕上看起来不错，则此功能非常有用。

重新导入

如果你对Sketch或Figma文件进行了更改，则可以将其重新导入到Principle中，并且动画、事件和层映射将保持不变。如果你想更改已导入图层的位置或其他属性，最简单的方法是在Sketch或Figma中进行更改，然后再次导入。有时，你可能会删除Sketch或Figma中的一个层，然后重新创建它，可能会使用不同的方法；在这些情况下，原则上不会知道这个新层在概念上是相同的层，因此放置在旧层上的任何事件都将丢失。已从草图或图文档中删除或从另一个文档导入的画板不会受到再次导入的影响。

正在进行更改

如果你发现需要对图层进行可视更改，最好在原始文档中执行此操作，然后重新导入。这包括创建重复的画板或图层。复制导入的图层原则上会创建一个与导入的文档没有1：1映射的图层，因此它不会受到在Sketch或Figma中所做更改的影响。

图层展平

Principle会尽可能地将Sketch和Figma层作为原生Principle层导入，这样它们的属性就可以动画化了。但是，Principle、Sketch和Figma的功能不同，因此导入不能总是1：1。例如，Principle没有混合模式，所以所有草图图层都作为正常混合模式导入。通常，你可以通过将图层或图层组拼合到单个图像图层来解决这些差异。

有几种情况会导致图层在导入过程中自动拼合为图像：

• 路径
  超过单个半径的圆角矩形的图层将被展平
• 填充
  图层必须具有单一纯色填充，以避免被拼合。
• 边框
  图层最多只能有一个单一的实心内边框，否则将被展平
• 模糊和其他效果
  具有模糊或其他效果的图层将被展平
• 蒙版
  具有蒙版图层的组或画板将拼合到单个图层中。为了最大限度地减少由于蒙版而展平的图层数量，可以对蒙版图层及其蒙版图层进行分组。
• 文本
  文本图层被拼合为图像，因为Principle不支持Sketch中的所有文本选项。拼合文本的另一个好处是确保在iOS上查看源文件时所有字体都能正确呈现，iOS的字体与你的Mac不同。

导入故障排除

如果导入失败，你可以重新启动Principle以重新运行其兼容性检查。在某些情况下，需要更新原则才能从新版本的Sketch导入，新版本的Sketch可能已经更改了其脚本API。如果没有可以从你的Sketch版本导入的Principle的新版本，Principle将在导入对话框上显示一个链接，以下载兼容版本的Sketch。如果导入仍然失败，你可以联系我们，告诉我们你有哪些问题和Sketch版本，我们将对此进行调查。

更新

你可以通过选择“Principle”菜单并单击“检查更新”来更新Principle。如果“检查更新”呈灰色显示，则更新已下载，重新启动原则将安装该更新。如果你的许可是在最新版本的Principle发布前一年以上购买的，则可以使用最新版本续订许可。

导出

一旦你创建了完美的交互，你就会想要向世界展示。有几种方法可以做到这一点。

共享到Web

在principle6和更高版本中，共享到Web是其他人查看你的设计的最简单方式。只需在“文件”->“导出”->“共享到Web”中单击一下，你就可以获得一个链接，你可以将该链接发送给任何人，以便在Web浏览器中查看。你的许可证需要在过去一年内续订或购买才能共享到Web。你可以在帐户页面上续订许可证，以重新获得共享到Web的能力。

图像

你可以通过选择层并单击File->Export->Images of Selected Layers将层导出为图像。这会将每个选定图层的PNG图像导出到保存源文件的文件夹，如果源文件尚未保存，则导出到桌面。

视频和动画GIF

要导出设计的视频或动画GIF，请单击预览窗口右上角的相机图标。你可以选择使用圆形触摸光标、箭头光标或将光标隐藏在录制中。选择光标选项后，Principle开始预览窗口的屏幕录制。因为它实际上是在录制你的屏幕，所以视频的导出大小受到你的显示器分辨率的限制。当图标开始闪烁时，录制已开始，你可以开始与你的设计交互(录制可能需要一段时间才能开始)。录制完设计后，再次单击相机图标停止录制。

我们强烈建议你使用导出视频而不是gif，因为视频的文件大小比gif更小，质量也更高。

视频导出当前不支持音频，因此如果你的设计利用了声音，它将不会出现在录制的视频中。

GIF设置

导出GIF时，可以通过从下拉菜单中选择预设或输入以下格式的设置来选择自定义导出大小：

• 45%
  任何数字后跟百分号都会导出G值。如果这是你录制的内容的缩小版本，则输出将按你输入的百分比进行缩放。如果指定百分比，则宽度和高度值将被忽略。
• 134h
  导出具有指定高度的gif，并保持与画板相同的纵横比。
• 320W
  导出具有指定宽度的gif，并保持与画板相同的纵横比。
• 400W 300h
  导出具有指定大小的gif。录制将缩小以适应此尺寸，但将保留其原始纵横比。自动添加填充和投影。色井中设置的颜色将用于填充gif的背景。

关于GIF文件格式的说明

gif格式非常古老(它发明于1987年)，并且有一些可能会让你感到惊讶的怪癖。

• GIF仅支持256色
  如果你的设计有许多颜色或细微的渐变，你可能会注意到在将其导出为gif时某些颜色丢失或错误。这是因为gif文件必须从你的设计中选取256种颜色，并使整个设计适合这些颜色。如果你想制作一个真正好看的gif，在你的设计中减少颜色和渐变的数量是很有帮助的。或者，作为电影导出将具有更好的颜色。
• GIF文件非常大
  大多数人的印象是gif文件很小，因为他们在网上看到了很多微小的、简短的动画gif。在现实中，gif文件格式极难使带有某些内容的小文件大小变得不可能。如果你尝试导出几秒长的1080p gif动画，则该文件很容易达到数百兆字节。与gif相比，导出为.mov几乎总是会产生较小的文件大小。制作小gif文件的最佳方法是导出小而短的动画。
• GIF仅支持1位Alpha
  与具有8位Alpha的PNG不同，gif文件格式仅支持1位Alpha，这意味着像素要么完全可见，要么完全透明。由于无法从不透明逐渐过渡到透明，因此具有透明度的gif的边缘看起来非常锯齿和像素化。不可能从原则上导出具有清晰背景或透明元素的gif，因为那样会看起来很糟糕。
• GIF动画非常耗费资源
  有没有过让你的网络浏览器在一个页面上打开，只有几个gif，结果却注意到你的计算机的粉丝疯狂了，你的电池寿命消失了？这是因为动画gif的播放是资源密集型的。与MP4等现代动画格式不同，计算机上没有专门的硬件来高效地制作gif动画。这就是为什么Principle不支持动画gif作为层的原因。还是拖着看电影比较好。

Principle Mirror

Principle Mirror for iOS可用于在你工作时将你的设计实时同步到iOS设备。将Principle Mirror应用程序下载到你的设备上，并将其连接到计算机的USB端口。Principle for Mac和Principle Mirror将自动找到对方，并将最顶层的Principle文档发送到你的设备。在设计评审中，按Cmd~在打开的原理文档之间快速切换，iOS应用程序也会切换文件。
该设计在断开USB连接后仍可继续运行，便于向队友展示。

如果要在Android、Windows或Linux上查看你的设计，请使用“共享到Web”。

动画值

Principle使用标准的Bezier缓动功能，以及动画的延迟值和持续值。因为这是描述动画的标准方式，所以这些值通常会直接映射到代码中，无论你针对的是哪种平台。单击并按住关键帧可查看其时间偏移。单击关键帧之间的蓝色区域以访问其缓动曲线。弹簧动画使用标准的RK4物理积分器。我们不建议使用任何采用持续时间参数的UIKit弹簧API，因为这是弹簧物理的粗略近似，而不是真正的弹簧模拟。

提供反馈

如果你有反馈，我们想听听！联系我们的最佳方式是从支持页面。最有用的错误报告包括一个.prd文件，其中包含触发问题的详细步骤。功能请求是值得赞赏的，但是如果你描述你的问题而不是建议一个功能来解决你的问题，这将是最有帮助的。

性能

与静态设计工具不同，Principle需要以平滑的60帧/秒为你的设计制作动画。你通常不必考虑这一点，但为了获得最佳性能，请记住以下几点：

1. 使用与其显示的图层大小相同的图像和视频。
   如果你正在用照片设计界面，你可能会直接从相机拍摄一些非常大的样本照片，例如超过3000 x 3000像素。由于界面可能只显示某些图像的150x150像素图标，因此在将图像拖入“Principle”之前调整图像大小和裁剪图像，将有助于性能。

2. 将非动画组展平为单个图层。
   某些组为静态元素，如图标或状态栏，并且不会相对于彼此进行动画处理。将这些层组合为单个展平层是有帮助的。如果从Sketch导入，则可以将“principle flatten”（不带引号）附加到Sketch中组名称的末尾，以使原则将组导入为单个展平图像层。Principle的矩形层可以包含子层，就像一个组。使用此技巧可减少总层数。例如：按钮的文本图层可以直接放在其后面的矩形图层中，而不是将两个图层包装在一个组中。

快捷键

图层

添加矩形：R(Alt+R添加为子项)
添加文本：T(Alt+T要作为子项添加)
添加画板：A
组：CMD+G
解组：CMD+SHIFT+G
移到最前面：Shift+Cmd+]
前置：CMD+]
反向发送：CMD+[
后置：Shift+Cmd+[

正在编辑

微移：箭头键
大幅推动：Shift+箭头键
旋转：在按住CMD键的同时拖动控制柄
以15度增量旋转：CMD+SHIFT+拖曳控制柄
复制：CMD+D
复制和移动：按住Alt键并拖动
检查员Textfield：理解基本公式，如“320/2+10”
检查器标签：拖动文本字段标签可快速擦除值
重命名图层：CMD+R
画布导航
平移：空格键+拖动
放大：Z+单击
缩小：Alt+Z+单击：
连续缩放：Alt+空格键+拖动
放大：CMD+=
缩小：CMD+-
全部缩放：CMD+1
缩放选择：CMD+2
居中选择：CMD+3
实际大小：CMD+0

联动导航

平移：空格键+拖动
放大：Z+单击
缩小：Alt+Z+单击：
连续缩放：Alt+空格键+拖动

设置导航动画

平移：空格键+拖动

选择

选择父项：Esc
选择子项：输入
选择下一个同级：选项卡
选择上一个同级：Shift+Tab
选择所有同级：CMD+A

预览

更改光标类型：查看->切换预览光标类型
回放原型：W
开始录制视频：Ctrl+V
开始无光标录制视频：Ctrl+Alt+V