今天为大家带来principle mac特别版的详细功能介绍!

时间:2018-08-21 浏览次数:310 编辑:user07

Principle  mac特别版是一款强大的交互式原型设计工具,用户可以通过Principle for Mac创建动画和设计交互界面,让您可以制作出一个完整的交互动画原型!今天小编为您带来Principle  mac特别版的详细功能介绍,希望对您使用Principle  mac版有所帮助!


一.接口

1.帆布

原则中心的画布是您完成大部分工作的地方。它包含所有画板,以及它们之间的过渡。当前的画板以绿色边框突出显示。原理自动从左到右定位画板。您可以通过在图层列表中拖动它们来重新排序画板,但是否则无法重新定位它们。当您在画板的边界外移动图层时,原理会将画板分隔开来。

2.预习

预览允许您随时与设计进行交互,并停靠在画布的角落。它可以通过将其拖离画布而分离到自己的窗口中。您可以通过选择“视图” - >“切换预览光标类型”来更改预览中显示的鼠标光标。

3.图层列表

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

4.隐藏的图层

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

5.锁定的图层

可以通过转到“排列”菜单并选择“锁定图层”来锁定图层。无法在画布中选择锁定的图层。如果图层被锁定,则图层列表中将显示锁定图标。单击锁定图标以解锁图层。将鼠标悬停在锁定图层上会在光标旁边显示一个锁定图标,让您知道点击可能无法选择您期望的图层。如果要在画布中选择锁定图层,可以右键单击图层并使用“选择图层”菜单将其选中。

6.检查员

在窗口左侧和图层列表上方,Inspector显示所选图层的属性。

7.动画面板

Animate面板出现在窗口底部,用于自定义画板之间的动画。可以通过单击工具栏上的“动画”按钮或在画布上选择过渡箭头来显示它。

8.司机面板

在窗口顶部,“驱动程序”面板显示当前选定的Artboard驱动程序。驱动程序用于创建复杂的连续交互。

9.画画

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

10.画板

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

预览窗口显示的画板在编辑器中将有一个绿色边框; 新图层将添加到此画板中。

11.矩形

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

12.文本

文本图层具有与“矩形”图层类似的属性,并添加了字体外观,对齐方式和大小。无法设置字体外观和对齐属性的动画。

13.自定义字体

并非您的计算机上的所有字体都可在iOS上使用,并且不会出现在“主镜”中。使用AnyFont等应用在您的设备上安装非iOS字体。

14.图像,视频,音频

通过从Finder拖动或使用复制/粘贴,可以将图片,影片和声音导入到Principle中。如果您是sketch用户,则从sketch复制会将所选内容展平为单个图像。默认情况下,图像和视频图层的宽高比处于锁定状态,可以通过单击检查器中的锁定图标来关闭它。

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

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

15.更改图层的资产

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

通过单击检查器中的media属性并单击菜单中的“cut”,可以从图层中删除资源。

16.高分辨率图像

在文件名末尾带有“@ 2x”或“@ 3x”的图像将以1x点大小导入,在视网膜屏幕上查看时资产看起来正确。如果您已经导入了没有后缀的高分辨率图像,则手动将图层的宽度和高度减半会导致相同的结果。(专业提示:检查员文本字段理解基本方程式,如“320/2”)

从sketch或其他工具复制和粘贴通常会产生1x资产,因此在导入原则之前以视网膜分辨率导出可确保资产的大小正确。

17.视频和音频播放

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

要在画板之间无缝播放视频或音频,只需将视频或音频层复制到两个画板,并确保图层具有相同的名称。媒体时间属性默认冻结,允许无缝播放,但可以手动解冻以重新开始播放。

18.组

可以通过选择图层并单击工具栏中的“组”按钮或按Command + G将图层分组为“原理”。您还可以通过将图层列表中的一行拖到另一行上来对图层进行分组。

原则中的组实际上只是具有一些子图层的矩形图层。无论子层的位置如何,组都有自己的位置和大小。这就是UIKit,Android和DOM绘制和动画元素的方式,如果您习惯于在Photoshop和sketch等程序中使用组的方式,可能会出乎意料。此行为有助于使图层的交互区域更大,围绕不同的原点旋转图层,或将多个动画叠加在彼此之上。

19.裁剪/掩蔽/剪裁

您可以通过分组(Command + G)并在组上启用“剪辑子图层”来裁剪图层。要获得圆形蒙版,请调高组的半径属性。

20.改变锚点

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

21.持续的互动

原则中有三种常见的交互:拖动,滚动和分页滚动。这些可以在图层的垂直和水平轴上独立启用。

22.拖延

当您想要在图层上保持触摸时允许图层的位置移动时,启用对图层的拖动。

23.滚动

可以在组图层上启用滚动。当手指在滚动图层上拖动时,子图层将随手指移动,但组本身不会改变位置。地图,消息线程或任何大型内容都是滚动的理想选择。如果你在没有任何子图层的图层上打开滚动,Principle会自动为你创建一个滚动窗口组,有多好。在滚动图层上启用“剪辑子图层”,以在子图层滚动到组外时隐藏子图层。

24.分页

分页就像滚动一样,除了它在滚动结束时自动将其滚动位置捕捉到组大小的增量。使用分页图像轮播,带图标的主屏幕,任何现在如此受欢迎的卡片UI。如果您想在页面之间添加填充,请使分页组略大于一个元素,并将元素分隔开。

25.活动

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

将出口箭头拖动到所选图层的画板将创建一个复制画板。

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

有几种类型的事件:

  • 龙头
    触摸并在不移动的情况下释放图层时触发。常用于按钮。
  • 拖动开始
    当手指放在图层上并开始移动时,此事件将触发。将此事件添加到图层将使图层可拖动(如果尚未添加)。如果目标画板中具有相同名称的图层,则其可拖动状态将确定在事件触发后是否继续拖动交互。
  • 拖动结束
    当在图层上移动的手指被抬起时触发。将此事件添加到图层会将其垂直和水平属性设置为拖动。
  • 滚动开始
    当可滚动图层开始滚动时触发。将此事件添加到图层会将其垂直和水平属性设置为Scroll。
  • 滚动已发布
    手指滚动图层时会触发。此事件适用于滚动和分页。由于减速或分页动画,内容可以在该事件之后继续滚动。将此事件添加到图层会将其垂直和水平属性设置为Scroll。
  • 滚动结束
    滚动完全停止时触发。此事件适用于滚动和分页。由于减速需要一段时间才能完全停止,因此该事件在发生之前可能会有比预期更长的延迟。将此事件添加到图层会将其垂直和水平属性设置为Scroll。
  • 触摸下来
    手指与图层接触时触发。用于将按钮转换为突出显示状态。
  • 润色
    当手指抬离一层时发火。用于取消突出显示按钮。如果触摸源自另一层,则不会触发。
  • 长按
    将手指放在图层上半秒钟时闪光。
  • 悬停在里面
    当鼠标位于图层内部时触发
  • 外面悬停
    当鼠标位于图层外时触发
  • 汽车
    自动触发,无需用户交互。可用于循环原型和动画。当鼠标悬停在预览上时,自动事件才会触发,以便延长电池寿命和理智。
    要向自动事件添加延迟,请单击“自动事件”箭头并在“动画”面板中延迟其动画。
    要在没有动画的屏幕之间延迟自动事件,您可以在略微不同的位置在两个画板的屏幕外添加虚拟层。这将创建一个可以延迟的动画。

26.消息事件

从原则3.0开始,组件及其父级可以与消息事件进行通信。消息事件通过允许组件相互控制而无需导航到完全不同的画板,大大降低了原型的复杂性。消息事件可以从组件发送到父组件,父组件发送到组件,或从组件发送到组件。

事件可以发送消息,侦听消息,或两者兼而有之。事件侦听并向特定层发送消息:组件或组件的父级。要使消息起作用,必须同时发送和侦听事件。例如,电子邮件组件可以向父母发送“发送邮件”消息,并且父母具有来自侦听“发送邮件”消息的组件的事件。仅仅因为组件发送或侦听特定消息并不一定意味着该消息的另一端存在事件。在创建进出组件的事件时,Principle将为您创建发送和侦听事件。

27.将事件发送给父母

要将事件从组件发送到其父组件,请输入组件并像往常一样开始创建点击事件,但将箭头拖动到画布左上角的“发送到父级”按钮。将鼠标悬停在按钮上会显示一个弹出窗口,您可以在其中选择父级画板。这将创建两个事件:一个在组件中,当由tap触发时向父组件发送消息,另一个事件在父组件中侦听同一消息然后转到父组件中的另一个画板。

28.将事件发送到组件

要将事件发送到组件,请将事件箭头拖到具有闪烁蓝色边框的组件上,以显示组件画板弹出窗口。然后在期望的目标画板上释放。

29.触发现有组件消息

单击组件上的闪电按钮将显示列出传统事件(如tap)的弹出窗口,但还将显示组件发送给父组件的所有消息。

30.重命名消息事件

原则为消息提供唯一的默认名称,如“事件1”,但您可以更改此选项以为事件提供更有意义的名称或从一个消息切换到另一个消息。

双击事件箭头上的蓝色消息可以编辑消息。原则有一点神奇之处,因此重命名已发送的消息将自动重命名侦听消息,反之亦然。

由于消息只是文本,因此文本必须与发送事件完全匹配才能触发侦听事件。发送“发送邮件”的事件不会触发和事件侦听“发送邮件”。

31.更改事件类型

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

32.触摸路由

触摸被路由到最顶部,最内部嵌套的图层,这些图层被标记为可触摸,然后向上传递父图层,直到其中一个图层可以使用触摸。

我们来看几个例子:

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

点击图层将触发图层的点击事件。只有在无需触摸图层的情况下点击该组时,才能触发该组的事件。

另一方面考虑这种情况:

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

点击图层会导致组点击。由于图层不使用触摸,因此它会传递给Group,后者将其用于tap事件。

组件的工作方式相同:

组(具有拖动事件)
- 组件
- 图层(在组件中具有拖动事件)

拖动图层将仅触发图层的拖动事件,因为它是最内层,并且组中的拖动事件不会触发。

33.可触摸

可触摸属性允许您控制图层是否捕获触摸,或允许触摸通过它。向图层添加事件(如点按)或内置交互(如拖动)会将图层标记为可触摸。取消检查可触摸将删除事件并清除其“水平和垂直属性”。图层的可触摸属性不会影响它的孩子的可触摸属性:即使它的父级不是,也可以触摸可触摸的图层。

对于具有大型清晰画板的组件,保持可触摸不受控制是有用的,这样组件不会阻止触摸到达其后面的其他层。另一方面,有时您希望图层可以触摸,以防止其他图层被触摸,例如在为模态弹出UI设计叠加层时。

34.动画

触发事件时,原理会在当前画板和事件的目标画板之间进行动画制作。

35.动画映射

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

动画面板将在源和目标画板上同时存在名称的图层上显示动画属性。如果我们在Artboard 1上有一个同名的图层,位于(x:0,y:0),Artboard 2位于(x:0,y:50)。animate面板将显示y属性的动画信息,但不显示x属性。

36.自定义动画

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

37.关键帧

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

38.缓和曲线

缓动曲线决定了属性动画的速率:它是否缓慢移动然后加速?它快速匆匆到最后,然后逐渐缓慢停止?这样的行为用缓动曲线控制。

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

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

39.泉

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

40.冷冻属性

有时,在转换期间保持前一个画板的属性值是有用的。原则将这些类型的属性称为“冻结”。您可以通过单击动画面板中的雪花图标来冻结属性。冻结属性可防止其在转换期间发生变化,从而实现动画制作。冻结属性可用于记住来自其他画板的内容,例如滚动偏移,可拖动图层的位置或组件所在的画板。原理默认情况下冻结Scroll X和Scroll Y属性,以便在画板之间保持滚动位置。如果您需要一个事件来滚动到特定位置,您可以解冻Scroll X和Y.

41.动画是共享的

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

42.驱动程序

想要制作互动视差效果?想要在拖动图层时旋转图层?司机是给你的。驱动程序使用关键帧将属性相互连接。与动画过渡不同,动画过渡发生在画板之间,驾驶员画板中工作。单击“驱动程序”按钮显示或隐藏当前画板的驱动程序。如果鼠标不支持水平滚动,请保留空间并拖动“驱动程序”面板进行滚动。

驱动程序的工作方式与动画时间轴类似,但驱动程序根据更改的属性而非时间进行动画处理。

43.驱动源

为了创建一个驱动程序,一个可以改变画架上需要存在的属性,这被称为驱动程序源。可拖动图层,可滚动图层和可选属性将自动在“驱动程序”视图中列为驱动程序源。

44.驱动属性

拥有驱动程序源后,您可以使用它来控制其他属性。选择您要控制的图层,单击“驱动程序”视图中的蓝色“+”按钮,然后选择您要驱动的属性。这将创建一个具有当前值的关键帧的驱动程序。这个单一的关键帧本身不会做任何事情,这导致我们:

45.驱动程序关键帧

要添加关键帧,请将灰色驱动器光标拖动到您要添加关键帧的位置,然后更改该属性的值。原则将自动为您插入新的关键帧。可以通过单击关键帧,然后单击关键帧行左侧的红色按钮来删除关键帧。

46.组件

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

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

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

47.创建和编辑

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

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

48.触摸路由

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

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

49.进口

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

您需要从sketch导入一些内容:
1。必须运行草图或草图Beta
2.草图必须打开文档
3.草图文档必须在当前页面上至少有一个美术板

如果sketch打开了多个文档,则活动文档窗口将导入到Principle中。如果sketch文件有多个页面,则将导入当前页面。

原理将按照它们在画布上显示的顺序导入sketch画板,从左到右,然后从上到下。

50.特殊后缀

  • 通过在sketch中的图层名称末尾添加星号(*),可以将组展平为单个图层。这也有助于减少导入到Principle中的图层数量,从而保持文件的清洁和灵活性。
  • 要防止图层导入,请在sketch中的图层名称末尾添加减号( - )。

51.缩放

在导入下拉列表中,您可以选择从sketch导入时缩放图像的缩放比例。比例因子不影响图层的尺寸,只影响图像的分辨率(如果有)。如果sketch文件的分辨率为1x,则此功能非常有用,但您希望在2x或3x视网膜屏幕上使原理原型看起来不错。原则将记住您使用的最后一个比例因子,因此您不必在每次导入时选择它。

52.重新导入

如果您对sketch文件进行了更改,则可以将其重新导入到Principle中,以便动画,事件和图层映射保持不变。如果要更改从sketch导入的图层的位置或其他属性,最简单的方法是在sketch中进行更改,然后再次导入。有时您可能会删除sketch中的图层,然后重新创建它,可能采用不同的方法; 在这些情况下,原则不会知道这个新图层在概念上是同一层,因此放置在旧图层上的任何事件都将丢失。已从sketch文件中删除或从其他sketch文件导入的画板不会再次导入。

53.做出改变

如果您发现需要对图层进行可视更改,最好在原始草图文档中执行此操作,然后再次导入。这包括创建重复的画板或图层。在Principle中复制导入的图层将创建一个与sketch文档没有1:1映射的图层,因此它不会受sketch文件中所做更改的影响。

54.层压扁

尽可能地,Principle将尝试将sketch图层作为本机Principle图层导入,以便可以为其属性设置动画。但是,Principle和sketch的功能不同,因此导入不能始终为1:1。例如,Principle没有混合模式,因此所有sketch图层都导入为具有Normal混合模式。通常,您可以通过将图层或图层组展平为单个图像图层来解决这些差异。

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

  • 路径
    不仅仅是具有单个半径的圆角矩形的图层将被展平
  • 填充
    图层必须具有单一的纯色填充,以避免被压平。
  • 边框
    图层最多只能有一个单一的实心内边框,否则它们会变平
  • 模糊和其他效果
    具有模糊或其他效果的图层将会变平

  • 具有遮罩层的蒙版组或画板将拼合成单个图层。为了最大限度地减少由于蒙版而变平的图层数量,您可以将蒙版图层和蒙版图层分组。
  • 文本文本图层被展平为图像,因为Principle不支持sketch中的所有文本选项。展平文本的另一个好处是确保在iOS上查看Principle文件时所有字体都能正确呈现,而iOS上的字体与Mac不同。

55.导入故障排除

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

56.更新

您可以通过选择“原理”菜单并单击“检查更新”来更新原理。如果检查更新是否显示为灰色,则更新已下载并重新启动原则将安装它。如果您的许可证是在最新版本的prot发布之前一年多购买的,则可以购买新许可证以使用最新版本。

57.出口

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

58.图片

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

59.视频和GIF动画

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

视频导出目前不支持音频,因此如果您的设计使用声音,它将不会出现在录制的视频中。

60.Gif设置

导出Gif时,您可以通过从下拉列表中选择预设或使用以下格式输入设置来选择自定义导出大小:

  • 45%
    任何数字后跟百分号将导出Gif,这是您记录的缩小版本,输出将按您输入的百分比进行缩放。如果指定了百分比,则将忽略宽度和高度值。
  • 134h
    导出具有指定高度的gif,保持与画板相同的宽高比。
  • 320w
    导出具有指定宽度的gif,保持与画板相同的宽高比。
  • 400w 300h
    导出具有指定大小的gif。录制将按比例缩小以适合此维度,但将保留其原始宽高比。自动添加填充和投影。颜色井中设置的颜色将用于填充gif的背景。

61.关于Gif文件格式的注释

gif格式非常古老(它是1987年发明的)并且有一些让许多人感到惊讶的怪癖。

  • Gif只支持256种颜色
    如果您的设计有许多颜色或微妙的渐变,您可能会注意到某些颜色缺失,或者当您将其导出为gif时出错。这是因为gif文件必须从您的设计中挑选256种颜色,并将整个设计融入这些颜色中。如果你想生产一个非常好看的gif,它有助于减少设计中的颜色和渐变数量。或者,作为电影导出将具有更好的颜色。
  • Gif文件非常大
    大多数人都认为gif文件很小,因为他们在网上看到很多很小的GIF动画。实际上,gif文件格式非常难以制作小文件大小和某些内容,这是不可能的。如果您尝试导出几秒钟的1080p gif动画,则该文件可能很容易达到数百兆字节。与gif相比,导出为.mov几乎总是会导致文件较小。生成小型gif文件的最佳方法是导出小而短的动画。
  • Gif仅支持1位alpha
    与PNG(8位alpha)不同,gif文件格式仅支持1位alpha,这意味着像素要么完全可见,要么完全透明。由于不能从不透明到透明逐渐过渡,因此具有透明度的GIF边缘看起来非常锯齿状和像素化。不可能导出具有清晰背景的Gif或者来自Principle的透明元素,因为它看起来很糟糕。
  • Gif动画是一种资源困境
    曾经让你的网页浏览器在一个带有几个GIF的页面上打开,只是为了注意你的计算机的粉丝疯了,你的电池寿命消失了吗?多数民众赞成,因为动画GIF是资源密集型回放。与mp4等现代动画格式不同,计算机上没有专门的硬件可以有效地为GIF动画。这就是为什么Principle不支持动画GIF作为图层的原因。最好是在电影中拖动。

62.导出为Mac

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

63.导出为Mac故障排除

您发送应用程序的人可能会收到一条消息,说“无法打开,因为它来自一位身份不明的开发人员”。这是因为它是由您(未经识别的开发人员)创建的。或者在较新版本的macOS上,它可能无法工作,根本不会提供警告。在任何一种情况下,其他人都可以通过控制单击应用程序图标并单击“打开”来打开应用程序。

64.在设备上运行

适用于iOS的Principle Mirror可用于在iOS上查看和共享您的设计。将Principle Mirror应用程序下载到您的设备上,并将其连接到计算机的USB端口。Mac和Principle Mirror的原理将自动找到对方,并将最顶层的Principle文档发送到您的设备。在设计评论中,按Cmd~快速切换打开的Principle文档,iOS应用程序也会切换文件。

即使在断开USB连接后,设计仍将继续运行,从而可以轻松向队友展示。

65.共享交互式设计

如果您想与他人分享您的设计以便他们可以与之交互,他们可以在他们的iOS设备上安装Principle Mirror,然后您可以将文件发送给他们。您共享的文件必须具有.prd扩展名,并且无法压缩,以便iOS在Principle Mirror中打开它。

  • 电子邮件
    要从电子邮件中打开附加的prD文件,请点按附件,然后点按iOS共享按钮。如果“原理”不可见,请在共享面板中选择“原理镜像”,或选择“打开方式...”按钮。
  • 您自己的服务器
    如果您担心出于安全原因使用文件共享服务,可以将.prd文件放在您自己的ftp服务器上。共享文件的直接链接,其他人可以在手机上查看。Safari将显示“原则上打开”按钮。
  • Dropbox,Google Drive,Box等
    您可以将.prd文件上传到文件共享服务并生成指向该文件的链接。

关于Dropbox的注意事项:
默认情况下,Dropbox链接会将您带到Dropbox页面而不是文件本身。您可以通过将Dropbox链接的末尾从“dl = 0”更改为“dl = 1”来绕过此操作

关于Google云端硬盘的注意事项:
Google云端硬盘应用在特殊文件类型方面存在问题,因此我们不建议您使用它来共享原则文件。

66.动画价值

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

67.性能

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

  1. 使用与其显示的图层大小相同的图像和视频。
    如果您正在设计照片查看界面,您可能会直接从相机拍摄一些非常大的样本照片,例如超过3000 x 3000像素。由于界面可能只显示某些图像的150x150像素图标,因此在将图像拖入“原理”之前,将有助于调整图像大小和裁剪图像。
  2. 将非动画组展平为单个图层。
    某些组表示静态元素,如图标或状态栏,并且不会相对于彼此进行动画处理。将这些层组合为单个展平层是有帮助的。如果从sketch导入,则可以在sketch的组名称末尾附加星号*,以使原则将组导入为单个展平图像层。
  3. 将图层用作组。
    Principle的矩形层可以包含子层,就像一个组。使用此技巧可减少总层数。例如:按钮的文本图层可以直接放在其后面的矩形图层中,而不是将两个图层包装在一个组中。

68.快捷键

图层

添加矩形:R(Alt + R添加为子)
添加文本:T(Alt + T添加为子)
添加画板:A
组:Cmd + G
取消组合:Cmd + Shift + G
置于前面:Shift + Cmd + ]
前进:Cmd +]
向后发送:Cmd + [
发送至后退:Shift + Cmd + [

编辑

Nudge:Arrow Keys
Big Nudge:Shift +箭头键

旋转:Cmd +拖动手柄
以15度为增量旋转:Cmd + Shift +拖动手柄

复制:Cmd + D
复制并移动:Alt + Drag

Inspector Textfields:了解基本方程式,如“320/2 + 10”
Inspector标签:拖动文本字段标签可快速擦除值

重命名图层: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 

推荐软件

客服QQ:

客服微信

返回顶部