Principle是一个为Web,移动和桌面设计动画和交互式用户界面的工具通过允许您在投入宝贵的工程时间之前快速评估您的想法,Principle显然更致力于提供通用功能的工具箱,这些功能可以创造性的方式组合以产生各种结果。

 

接下来我们来一起了解一下关于Principle部分的软件功能

 

1. 界面

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

联动面板在窗口顶部,联动面板显示当前选定的画板的联动。联动用于创建复杂的连续交互。

 

2. 绘画

 

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

 

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

 

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

 

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

 

自定义字体并非您的计算机上的所有字体都可在iOS上使用,并且不会出现在预览中。使用AnyFont等应用在您的设备上安装非iOS字体。

 

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

 

3. 持续交互

 

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

 

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

 

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

 

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

 

4. 事件

 

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

 

5. 动画

 

触发事件时,Principle会在当前画板和事件的目标画板之间进行动画补全。

 

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

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

 

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

 

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

 

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