美文网首页Principle
动效设计Principle:初识界面

动效设计Principle:初识界面

作者: 夜雨y | 来源:发表于2019-07-01 13:42 被阅读24次

    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。


    推荐阅读:

    Principle中文手册:Principle中文手册(2019)

    相关文章

      网友评论

        本文标题:动效设计Principle:初识界面

        本文链接:https://www.haomeiwen.com/subject/qtiqcctx.html