principle文本导入oracle,动效设计Principle：初识界面

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

1、界面的具体介绍

(1)菜单栏

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

(2)工具栏

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

(3)检查器

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

(4)图层列表

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

(5)工作区

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

(6)预览窗口

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

2、工具栏的使用

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

(1)Artboard(画板)

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

(2)Rectangles(矩形)

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

(3)Text(文本)

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