Principle 软件介绍（二）

Principle2.0中引入的组件允许您在多个位置重用设计元素，并将嵌入式交互添加到现有画板。在内部，组件的工作方式与标准Principle文件类似; 他们有自己的画板，活动和动画独立于他们的父母。如果编辑组件的一个实例，则将更新该组件的所有其他实例。组件还可以包含其他组件，从而可以实现复杂的组合。

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

如果需要创建一个更改大小的组件，例如弹出菜单，最好的方法是使组件的大小与折叠菜单的大小相同，然后使扩展的菜单层超出该范围。如果您将组件设置为展开菜单的大小，即使折叠也会阻止触摸，因为画板非常大。

创建和编辑：要创建组件，请在画板上选择一个或多个图层，然后单击“Principle”工具栏中的“创建组件”按钮。这些图层将组合在一个组件中，您将进入该组件以开始编辑它。单击Principle的画布左上角的“返回到父级”按钮，返回到创建组件的位置。如果以后需要再次编辑组件，可以选择它并单击检查器中的“编辑组件”按钮。您也可以双击要编辑的组件，或在选择组件时按Enter键。

您可以将现有的Principle文件拖到画布上，以将其作为组件导入。

触摸路径：主要路线接触最深的最顶层。如果你有一个组件或透明层高于其他一切，它将接收触摸。组件画板可以调整为较小或不在屏幕外，以便当内容不可见时，组件的画板层不会接收到触摸。

如果组件中的触摸事件和组件父级中的触摸事件，组件的触摸甚至会触摸，因为它是最深的层。这与在两个组和组的子图层上都有事件时触发路由的方式相同。

3. 导入

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

您需要导入一些内容时：

1.Sketch或Figma必须打开文档

2.文档必须在当前页面上至少有一个Sketch Artboard或Figma Frame

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

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

在导入过程中，有一些事情会导致图层自动展平为图像：

路径：不仅仅是具有单个半径的圆角矩形的图层将被展平

填充：图层必须具有单一的纯色填充，以避免被展平。

边框：图层最多只能有一个单一的实心内边框，否则它们会变平

模糊和其他效果：具有模糊或其他效果的图层将会变平

具有遮罩层的蒙版组或画板将拼合成单个图层。为了最大限度地减少由于蒙版而变平的图层数量，您可以将蒙版图层和蒙版图层分组。

文本文本图层被展平为图像，因为Principle不支持Sketch中的所有文本选项。展平文本的另一个好处是确保在iOS上查看Principle文件时所有字体都能正确呈现，而iOS上的字体与Mac不同。

导入故障排除：如果导入失败，您可以重新启动Principle以重新运行它的兼容性检查。在某些情况下，需要更新Principle才能从Sketch的新版本导入，这可能已经更改了其脚本API。如果没有可以从您的Sketch版本导入的新版本的Principle，则Principle将在导入对话框中显示一个链接以下载兼容版本的Sketch。如果导入仍然失败，您可以与我们联系，提供有关您拥有的Principle和Sketch版本的信息，我们将对其进行调查。

4. 导出

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

图片：通过选择图层并单击“文件”菜单中的“导出所选图层的图像”，可以将图层导出为图像。这会将每个选定图层的PNG图像导出到保存Principle文件的文件夹，如果尚未保存Principle文件，则将桌面导出到桌面。

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

导出为Mac程序：如果您想将您的设计分享给可能没有Principle的其他人，您可以导出一个独立的Mac程序，任何人都可以打开该程序。注意：Mac应用程序的导出在Mac计算机上运行，而不是在iPhone上运行。要导出Mac设计，请转到文件>导出为Mac。生成的应用程序可以根据您的需要进行共享，但根据您的共享方式，在将应用程序上传到文件共享服务或通过电子邮件发送之前压缩应用程序可能会有所帮助。

动画价值：Principle使用标准贝塞尔缓动函数，以及动画的延迟和持续时间值。由于这是描述动画的标准方式，因此无论您要定位哪个平台，这些值通常都会直接映射到代码中。单击并按住关键帧以查看其时间偏移。单击关键帧之间的蓝色区域以访问其缓动曲线。Spring动画使用标准的RK4物理积分器。我们不建议使用任何带有持续时间参数的UIKit弹簧API，因为这是弹簧物理的粗略近似，而不是真正的弹簧模拟。

5. 性能

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

①使用与其显示的图层大小相同的图像和视频。

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

③将非动画组展平为单个图层。

④某些组表示静态元素，如图标或状态栏，并且不会相对于彼此进行动画处理。将这些层组合为单个展平层是有帮助的。如果从Sketch导入，则可以将“principle flatten”（不带引号）附加到Sketch中组名称的末尾，以使原则将组导入为单个展平图像层。

⑤将图层用作组。

Principle的矩形层可以包含子层，就像一个组。使用此技巧可减少总层数。例如：按钮的文本图层可以直接放在其后面的矩形图层中，而不是将两个图层包装在一个组中。