动效设计Principle：初识界面

Principle是一款轻量的、具有强大功能的动效设计软件，能和Sketch无缝链接，只需要简单的拖拽就能搭建一个在手机上可交互的原型。Principle默认的的主界面十分简洁，从左上到右下分别是：菜单栏、工具栏、检查器、图层列表、工作区及预览窗口5个区域，在实际使用中，还会根据情况调出底部的时间轴和顶部的drivers（联动）面板。

1、界面的具体介绍

（1）菜单栏

Principle的菜单栏分为：File（文件）、Edit（编辑）、Insert（插入）、Arrange（排列）、Plugins（插件）、View（视图）、Window（窗口）、Help（帮助）等，实际操作中，用到菜单栏的次数不多，大致了解一下，有空再研究即可。

（2）工具栏

Principle的工具栏集成了所有常用的功能，分别是Rectangles（矩形）、Text（文本）、Artboard（画板）、Import（从sketch导入）、Create Components（创建子集）、Drivers（联动）、Animate（动画）、Group（编组）、Forward（上移一层）、Backward（下移一层）、Tutorials（教程）、Mirror（镜像）。

（3）检查器

和Sketch不同的是，Principle的的检查器和图层列表一起，放在最左边，因为Principle没有Pages的概念。在检查器中，我们可以看到和Sketch检查器类似的一些尺寸、位置、填充等设置，这些我们都比较熟悉，就不再多说了。其中，Horizontal（水平）、Vertical（垂直）的设置需要特别留意，其中提供的下拉选项是整个软件动效中非常重要的功能，后面会具体讲述。

（4）图层列表

Principle的图层列表，是由简单的Artboard（画板）、Text（文本）layer（图层）组成的区域，双击画板或者图层，可以对其进行重命名。

（5）工作区

Principle的工作区也是无限延伸的，和Sketch画布的概念类似，不同的是，Principle只能在画板上添加内容。

（6）预览窗口

在预览窗口，我们可以实时预览我们做好的页面，并支持在预览窗口进行操作。上方还有两个功能按钮，一个可以返回最初的状态，一个可以录制操作的动效，并且支持导出GIF、MOV格式的视频。

2、工具栏的使用

Rectangles（矩形）、Text（文本）、Artboard（画板）用于创建Principle的基本元素，图片可以从其他地方导出，我们先简单了解一下这三款工具的使用：

（1）Artboard（画板）

Principle的画板和Sketch的画板非常类似，点击工具栏的Artboard工具，或者快捷键A，可以在工作区创建一个或者多个画板。画板的尺寸可以自由调整，或者使用官方定义好的尺寸，常见的iPhone、iPad、Apple Pay等设备的尺寸都有提供，非常的方便。但要注意的是，一个Principle文件中只能定义一种画板尺寸，因为Principle的逻辑是默认你要演示的尺寸是一样的，如果改变其中一个画板的尺寸，所有画板都会同步变化。

（2）Rectangles（矩形）

点击Rectangles（矩形），或者通过快捷键R，就可以在画板上创建一个默认大小为44*44px的矩形，官方文档解释这是iOS推荐的方便可点击区域的大小。矩形的大小可以自由调整，另外，可以通过检查器调整矩形Radius的值获得一个圆角矩形或者一个圆形。矩形也可以调整填充颜色，或者通过图片填充。

（3）Text（文本）

点击工具栏的文本图标，或者通过快捷键T，就可以在画板上增加一串文本，可以通过检查器调整字体类型、字体大小和对齐方式3种属性，但是这些属性不会参与动画效果，打个比方就是，我们不能设置一个动画，把字体从12px变成18px。