本手册翻译自 Principle官方用户手册,由爱交互网站(iueux.com)夜雨翻译,适用Principle5.2以上版本。
爱交互网站地址:http://www.iueux.com/1703.html
1.Principle简介
Principle是一个为Web,移动和桌面设计动画和交互式用户界面的工具(一些设计团队甚至将它用于虚拟现实!)。通过允许您在投入宝贵的工程时间之前快速评估您的想法,Principle加速了设计开发周期。在决定最终设计之后,Principle原型可以将想法传达给工程团队。
与其提供专门用于传递设计趋势或小众用例的功能相比,Principle显然更致力于提供通用功能的工具箱,这些功能可以创造性的方式组合以产生各种结果。由于无法涵盖这些功能可以组合的所有方式,因此本文档重点介绍Principle如何工作的原理,并让读者发明创造性应用程序。
2.界面
画布
Principle中心的画布是您完成大部分工作的地方。它包含所有画板,以及它们之间的过渡。当前的画板以绿色边框突出显示。Principle自动从左到右定位画板。您可以通过在图层列表中拖动它们来重新排序画板,除此之外没有其他办法重新定位它们。当您在画板的边界外移动图层时,Principle会将画板分隔开来。
预览
预览允许您随时与设计进行交互,它就停靠在画布的角落。它也可以通过将其拖离画布而分离到独立的窗口中。您可以通过选择“视图” - >“切换预览光标类型”来更改预览中显示的鼠标光标。
图层列表
窗口左下角的图层列表显示了设计中的所有图层。可以通过拖动行来对图层进行分组和取消分组。可以通过拖动画板的行来更改画布上的画板顺序。详细了解图层
隐藏的图层
将鼠标悬停在图层的行上会显示隐藏按钮,该按钮看起来像一只眼睛。单击该图标可在编辑器中切换图层的可见性,但不会影响图层在预览中的可见性。
锁定的图层
可以通过转到“排列”菜单并选择“锁定图层”来锁定图层。锁定后,将无法在画布中选择锁定的图层。如果图层被锁定,则图层列表中将显示锁定图标。单击锁定图标以解锁图层。将鼠标悬停在锁定图层上会在光标旁边显示一个锁定图标,让您知道点击可能无法选择您期望的图层。如果要在画布中选择锁定图层,可以右键单击图层并使用“选择图层”菜单将其选中。
检查器
在窗口左侧和图层列表上方,检查器会显示所选图层的属性。
动画面板
动画面板出现在窗口底部,用于自定义画板之间的动画。可以通过单击工具栏上的“动画”按钮或在画布上选择过渡箭头来显示它。详细了解动画
联动面板
在窗口顶部,“联动”面板显示当前选定的画板的联动。“联动”用于创建复杂的连续交互。详细了解联动
3.绘画
乍一看,Principle就像一个图形设计工具,就像你使用过的其他工具一样。你可以在Principle内部创建基本元素,并可以导入所有形式的图像。
画板
Principle的画板与其他绘图程序的工作方式类似:每个都代表了您设计的独特状态。可以更改画板的大小以适应不同的设备或窗口大小。所有画板都具有相同的尺寸。如果您需要更改尺寸,模拟旋转或更改窗口大小,请使画板成为您需要的最大尺寸,并使内容在该区域内更改。某些画板在概念上可能是相同的屏幕,但略有不同。例如:除了播放/暂停按钮之外,音乐播放器设计的两个画板可以是相同的。
预览窗口显示的画板在编辑器中将有一个绿色边框; 新图层将添加到此画板中。
矩形
单击工具栏的“矩形”按钮或按“R”将新矩形添加到当前画板。可以通过将矩形的半径设置为较大的值来创建圆。通过将图像(PNG,JPEG,TIFF)拖动到检查器中的图像上,可以将图像背景添加到矩形中。创建的矩形大小为44x44点 - iOS的推荐点击区域大小。
文本
文本图层具有与“矩形”图层类似的属性,并添加了字体外观,对齐方式和大小。无法设置字体外观和对齐属性的动画。
自定义字体
并非您的计算机上的所有字体都可在iOS上使用,并且不会出现在“预览”中。使用AnyFont等应用在您的设备上安装非iOS字体。
图像,视频,音频
通过从Finder拖动或使用复制/粘贴,可以将图片,影片和声音导入到Principle中。如果您是Sketch用户,则从Sketch复制会将所选内容展平为单个图像。默认情况下,图像和视频图层的宽高比处于锁定状态,可以通过单击检查器中的锁定图标来关闭它。
多媒体资源将复制到Principle文件中,以便可以移动,通过电子邮件发送和查看设计,而不会丢失其资源。因此,尽量使用最短的视频和音频多媒体资源来保持文件大小。保持较小体积的资源还可以提高连接到运行Principle Mirror的iOS设备的速度。
设计中不支持动画GIF,因为它们可能同时非常大(压缩性差)和低质量(仅支持256种颜色)。它们的表现也很差,因为与视频不同,它没有硬件解码器。我们建议将视频用于小动画,而不是尝试使用GIF。
更改图层的资源
要更改图层的图像,请将新图像拖到检查器中的“媒体”按钮上,或单击检查器中的“媒体”按钮,然后单击菜单中的“选择...”。如果还有其他图层也使用旧媒体,则Principle会为您提供使用新媒体更新所有这些图层的选项。
通过单击检查器中的media属性并单击菜单中的“cut”,可以从图层中删除资源。
高分辨率图像
在文件名末尾带有“@ 2x”或“@ 3x”的图像将以1x点大小导入,在视网膜屏幕上查看时资源看起来正确。如果您已经导入了没有后缀的高分辨率图像,则手动将图层的宽度和高度减半会导致相同的结果。(专业提示:检查员文本字段理解基本方程式,如“320/2”)
从Sketch或其他工具复制和粘贴通常会产生1x资源,因此在导入原则之前以视网膜分辨率导出可确保资产的大小正确。
视频和音频播放
当鼠标悬停在预览窗口上时,将播放视频和音频资源。默认情况下,资源将永远循环播放,但可以通过单击检查器中的媒体按钮并选择“播放一次”来更改。
要在画板之间无缝播放视频或音频,只需将视频或音频层复制到两个画板,并确保图层具有相同的名称。媒体时间属性默认冻结,允许无缝播放,但可以手动解冻以重新开始播放。详细了解冻结属性
组
可以通过选择图层并单击工具栏中的“组”按钮或按Command + G将图层归为一组。您还可以通过将图层列表中的一行拖到另一行上来对图层进行分组。
Principle中的组实际上只是具有一些子图层的矩形图层。无论子层的位置如何,组都有自己的位置和大小。这就是UIKit,Android和DOM绘制和动画元素的方式,如果你已经习惯了在Sketch和Figma等程序中工作的方式,那么可能会出乎意料。此行为有助于使图层的交互区域更大,围绕不同的原点旋转图层,或将多个动画叠加在彼此之上。
裁剪/蒙版/修剪
您可以通过分组(Command + G)并在组上启用“剪辑子图层”来裁剪图层。要获得圆形蒙版,请调高组的半径属性。
改变锚点
默认情况下,图层将围绕其中心旋转和缩放。如果您想围绕其他点旋转或缩放图层,可以使用组来执行此操作。通过对图层进行分组,将其放置在组内并旋转组,您将围绕新的锚点旋转图层。使组的宽度和高度为0有助于更容易地知道旋转点的位置。
4.持续交互
Principle中有三种常见的交互:拖动,滚动和分页滚动。这些可以在图层的垂直和水平轴上独立启用。
拖动
当您想要在图层上保持触摸时允许图层的位置移动时,启用对图层的拖动。
滚动
可以在组图层上启用滚动。当手指在滚动图层上拖动时,子图层将随手指移动,但组本身不会改变位置。地图,消息线程或任何大型内容都是滚动的理想选择。如果你在没有任何子图层的图层上打开滚动,Principle会自动为你创建一个滚动窗口组,非常的棒。在滚动图层上启用“剪辑子图层”,以在子图层滚动到组外时隐藏子图层。
分页
分页就像滚动一样,除了它在滚动结束时自动将其滚动位置捕捉到组大小的增量。使用分页图像轮播,带图标的主屏幕,任何现在如此受欢迎的卡片用户界面。如果您想在页面之间添加填充,请使分页组略大于一个元素,并将元素分隔开。
5.事件
事件是触发画板之间的过渡。要添加事件,请在画布上选择一个图层,然后单击其右侧显示的闪电按钮,然后从其中一个圆圈拖动到目标画板。将从源画板指向目标画板的画布添加过渡箭头。
将出口箭头拖动到所选图层的画板将创建一个复制画板(译者按:例如从A画板拖到指向A画板本身,会额外复制一个A画板 copy)。
不透明度为0%的图层不是交互式的。要创建清晰的可点击区域,请使用清除填充的方式而不是0%不透明度。
有几种类型的事件:
点击 #
触摸并在不移动的情况下释放图层时触发。常用于按钮。
拖动开始 #
当手指放在图层上并开始移动时,此事件将触发。将此事件添加到图层将使图层可拖动(如果尚未添加)。如果目标画板中具有相同名称的图层,则其可拖动状态将确定在事件触发后是否继续拖动交互。
拖动结束 #
当在图层上移动的手指被抬起时触发。将此事件添加到图层会将其垂直和水平属性设置为拖动。
滚动开始 #
当可滚动图层开始滚动时触发。将此事件添加到图层会将其垂直和水平属性设置为Scroll。
滚动已释放 #
手指滚动图层时会触发。此事件适用于滚动和分页。由于减速或分页动画,内容可以在该事件之后继续滚动。将此事件添加到图层会将其垂直和水平属性设置为Scroll。
滚动结束 #
滚动完全停止时触发。此事件适用于滚动和分页。由于减速需要一段时间才能完全停止,因此该事件在发生之前可能会有比预期更长的延迟。将此事件添加到图层会将其垂直和水平属性设置为Scroll。
按下 #
手指与图层接触时触发。用于将按钮转换为突出显示状态。
抬起 #
当手指抬离图层时发生。用于取消突出显示按钮。如果触摸源自另一层,则不会触发。
长按 #
将手指放在图层上半秒钟时触发。
鼠标移入 #
当鼠标位于图层内部时触发
鼠标移出 #
当鼠标位于图层外时触发
自动 #
自动触发,无需用户交互。可用于循环原型和动画。当鼠标悬停在预览上时,自动事件才会触发,以便延长电池寿命,和节省你的时间。
要向自动事件添加延迟,请单击“自动事件”箭头并在“动画”面板中延迟其动画。
要在没有动画的屏幕之间延迟自动事件,您可以在略微不同的位置在两个画板的屏幕外添加虚拟层。这将创建一个可以延迟的动画。
消息事件
从Principle3.0开始,组件及其父级可以与消息事件进行通信。消息事件通过允许组件相互控制而无需导航到完全不同的画板,大大降低了原型的复杂性。消息事件可以从组件发送到父组件,父组件发送到组件,或从组件发送到组件。
事件可以发送消息,侦听消息,或两者兼而有之。事件侦听并向特定层发送消息:组件或组件的父级。要使消息起作用,必须同时发送和侦听事件。例如,电子邮件组件可以向父母发送“发送邮件”消息,并且父母具有来自侦听“发送邮件”消息的组件的事件。仅仅因为组件发送或侦听特定消息并不一定意味着该消息的另一端存在事件。在创建进出组件的事件时,Principle将为您创建发送和侦听事件。
将事件发送给父组件
要将事件从组件发送到其父组件,请输入组件并像往常一样开始创建点击事件,但将箭头拖动到画布左上角的“发送到父级”按钮。将鼠标悬停在按钮上会显示一个弹出窗口,您可以在其中选择父级画板。这将创建两个事件:一个在组件中,当由tap触发时向父组件发送消息,另一个事件在父组件中侦听同一消息然后转到父组件中的另一个画板。
将事件发送到组件
要将事件发送到组件,请将事件箭头拖到具有闪烁蓝色边框的组件上,以显示组件画板弹出窗口。然后在期望的目标画板上释放。
触发现有组件消息
单击组件上的闪电按钮将显示列出传统事件(如tap)的弹出窗口,但还将显示组件发送给父组件的所有消息。
重命名消息事件
Principle为消息提供唯一的默认名称,如“事件1”,但您可以更改此选项以为事件提供更有意义的名称或从一个消息切换到另一个消息。
双击事件箭头上的蓝色消息可以编辑消息。原则有一点神奇之处,因此重命名已发送的消息将自动重命名侦听消息,反之亦然。
由于消息只是文本,因此文本必须与发送事件完全匹配才能触发侦听事件。发送“发送邮件”的事件不会触发和事件侦听“发送邮件”。
更改事件类型
如果要更改触发转换的事件类型,可以删除转换(单击转换箭头并按键盘上的删除),然后创建具有所需事件类型的新转换。您的动画关键帧和曲线不会丢失,因为它们存储在画板中,而不是存储在过渡中。详细了解共享动画。
触摸传递
触摸被传递到最顶部,最内部嵌套的图层,这些图层被标记为可触摸,然后向上传递父图层,直到其中一个图层可以使用触摸。
我们来看几个例子:
组(具有点击事件)
图层(具有点击事件)
点击图层将触发图层的点击事件。只有在无需触摸图层的情况下点击该组时,才能触发该组的事件。
另一方面考虑这种情况:
组(具有点击事件)
图层
点击图层会导致组点击。由于图层不使用触摸,因此它会传递给Group,后者将其用于tap事件。
组件的工作方式相同:
组(具有拖动事件)
组件
图层(在组件中具有拖动事件)
拖动图层将仅触发图层的拖动事件,因为它是最内层,并且组中的拖动事件不会触发。
可触摸
可触摸属性允许您控制图层是否捕获触摸,或允许触摸通过它。向图层添加事件(如点按)或内置交互(如拖动)会将图层标记为可触摸。取消检查可触摸将删除事件并清除其“水平和垂直属性”。图层的可触摸属性不会影响它的孩子的可触摸属性:即使它的父级不是,也可以触摸可触摸的图层。
对于具有大型清晰画板的组件,保持可触摸不受控制是有用的,这样组件不会阻止触摸到达其后面的其他层。另一方面,有时您希望图层可以触摸,以防止其他图层被触摸,例如在为模态弹出UI设计叠加层时。
6.动画
触发事件时,Principle会在当前画板和事件的目标画板之间进行动画补全。
动画映射
如果不同画板上的两个图层具有相同的名称,则原则将在过渡期间自动为它们设置动画。如果源和目标画板上没有具有相同名称的图层,则图层将消失或显示为没有动画。
动画面板将在源和目标画板上同时存在名称的图层上显示动画属性。如果我们在画板1上有一个同名的图层,位于(x:0,y:0),画板2位于(x:0,y:50)。动画面板将显示y属性的动画信息,但不显示x属性。
自定义动画
默认情况下,所有动画的持续时间均为0.3秒,并使用iOS和OSX中使用的默认缓动曲线。您可以在动画视图中自定义此视图。单击画板上方的过渡箭头将显示动画视图,其中列出了将要设置动画的所有属性以及更改时间和缓动的时间轴。
关键帧
动画视图中的每一行都显示两个关键帧,一个表示动画的开始时间,另一个表示结束。拖动这些关键帧会更改动画的延迟和持续时间。
缓动曲线
缓动曲线决定了属性动画的速率:它是否缓慢移动然后加速?它快速匆匆到最后,然后逐渐缓慢停止?这样的行为用缓动曲线控制。
单击两个关键帧之间的蓝色区域将显示“曲线选择器”。曲线选择器有几条内置曲线,以及所选曲线的图形。
内置曲线与iOS和OSX中使用的曲线相同。在任何时候都可以通过拖动预览中的手柄或在弹出窗口底部为手柄键入新坐标来调整曲线。
弹簧
通过在曲线选择器中选择“弹簧”,可以使用弹簧动画。这对于为图层添加物理性和趣味性非常有用,但不应过度使用。曲线选择器具有弹簧张力和摩擦力的选项。弹簧动画没有结束关键帧,因为弹簧动画的结束时间将由物理模拟确定。您可以通过更改张力和摩擦值间接更改弹簧动画的持续时间。
冻结属性
有时,在转换期间保持前一个画板的属性值是有用的。原则将这些类型的属性称为“冻结”。您可以通过单击动画面板中的雪花图标来冻结属性。冻结属性可防止其在转换期间发生变化,从而实现动画制作。冻结属性可用于记住来自其他画板的内容,例如滚动偏移,可拖动图层的位置或组件所在的画板。原理默认情况下冻结Scroll X和Scroll Y属性,以便在画板之间保持滚动位置。如果您需要一个事件来滚动到特定位置,您可以解冻Scroll X和Y.
动画是共享的
每个转换的动画信息都存储在转换的目标画板中。这意味着进入特定画板的所有过渡都将具有相同的动画设置。例如,如果您在从画板A到画板B的过渡中使用弹簧动画,那么弹簧动画也将用于从画板C到画板B的过渡。
7.联动
想要制作互动视差效果?想要在拖动图层时旋转图层?“联动”正是你想要的。联动使用关键帧将属性相互连接。与动画过渡不同,动画过渡发生在画板之间,联动在画板中工作。单击“联动”按钮显示或隐藏当前画板的联动。如果鼠标不支持水平滚动,请保留空间并拖动“联动”面板进行滚动。
联动的工作方式与动画时间轴类似,但联动根据更改的属性而非时间进行动画处理。
联动源
为了创建一个联动,一个可以改变画架上需要存在的属性,这称为联动源。可拖动图层,可滚动图层和可选属性将自动在“联动”视图中列为联动源。
联动属性
拥有联动源后,您可以使用它来控制其他属性。选择您要控制的图层,单击“联动”视图中的蓝色“+”按钮,然后选择您需要的联动属性。这将创建一个具有当前值的关键帧的联动。这个单一的关键帧本身不会做任何事情,这导致我们要添加下面的联动关键帧:
联动关键帧
要添加关键帧,请将灰色驱动器光标拖动到您要添加关键帧的位置,然后更改该属性的值。原则将自动为您插入新的关键帧。可以通过单击关键帧,然后单击关键帧行左侧的红色按钮来删除关键帧。
8.组件
Principle2.0中引入的组件允许您在多个位置重用设计元素,并将嵌入式交互添加到现有画板。在内部,组件的工作方式与标准Principle文件类似; 他们有自己的画板,活动和动画独立于他们的父母。如果编辑组件的一个实例,则将更新该组件的所有其他实例。组件还可以包含其他组件,从而可以实现复杂的组合。
组件内的事件的工作方式与组的子图层上的事件的工作方式相同。如果组或组件的子图层具有点击事件,则会触发该点按事件,而不会点击该组或父级上的事件。
如果需要创建一个更改大小的组件,例如弹出菜单,最好的方法是使组件的大小与折叠菜单的大小相同,然后使扩展的菜单层超出该范围。如果您将组件设置为展开菜单的大小,即使折叠也会阻止触摸,因为画板非常大。
创建和编辑
要创建组件,请在画板上选择一个或多个图层,然后单击“Principle”工具栏中的“创建组件”按钮。这些图层将组合在一个组件中,您将进入该组件以开始编辑它。单击Principle的画布左上角的“返回到父级”按钮,返回到创建组件的位置。如果以后需要再次编辑组件,可以选择它并单击检查器中的“编辑组件”按钮。您也可以双击要编辑的组件,或在选择组件时按Enter键。
您可以将现有的Principle文件拖到画布上,以将其作为组件导入。
触摸路径
主要路线接触最深的最顶层。如果你有一个组件或透明层高于其他一切,它将接收触摸。组件画板可以调整为较小或不在屏幕外,以便当内容不可见时,组件的画板层不会接收到触摸。
如果组件中的触摸事件和组件父级中的触摸事件,组件的触摸甚至会触摸,因为它是最深的层。这与在两个组和组的子图层上都有事件时触发路由的方式相同。
9.导入
Sketch和Figma是经常用于静态界面设计的矢量绘图程序。通过单击工具栏中的导入按钮或转到文件>导入,可以将在Sketch和Figma中创建的设计导入到Principle中。
您需要导入一些内容时:
1.Sketch或Figma必须打开文档
2.文档必须在当前页面上至少有一个Sketch Artboard或Figma Frame
如果文档有多个页面,则将导入当前页面。
Principle将按照它们在页面上显示的顺序,从左到右,然后从上到下导入Sketch画板和Figma框架。
特殊后缀
通过将“principle flatten”(不带引号)添加到Sketch或Figma中的图层名称,可以将组或图层作为单个栅格化图像导入。这可以用于减少导入到Principle中的层数,这将使其更容易使用,导入更快,并以更高的每秒帧数运行。
要防止图层导入,请将“principle skip”(不带引号)添加到Sketch或Figma中的图层名称。
缩放
在导入下拉列表中,您可以选择导入时缩放图像的缩放方式。比例因子不会影响图层的尺寸,只会影响栅格资产的分辨率。如果您的Sketch或Figma文件的分辨率为1x,则此功能非常有用,但您希望在2x或3x视网膜屏幕上使原理原型看起来不错。
重新导入
如果您对Sketch或Figma文件进行了更改,则可以将其重新导入到Principle中,动画,事件和图层映射将保持不变。如果要更改导入的图层的位置或其他属性,最简单的方法是在Sketch或Figma中进行更改,然后再次导入。有时您可能会删除Sketch或Figma中的图层,然后重新制作它,可能采用不同的方法; 在这些情况下,Principle不会知道这个新图层在概念上是同一层,因此放置在旧图层上的任何事件都将丢失。已从Sketch或Figma文档中删除或从其他文档导入的画板不会再次导入。
做出改变
如果您发现需要对图层进行可视更改,最好在原始文档中执行此操作,然后再次导入。这包括创建重复的画板或图层。在Principle中复制导入的图层将创建一个与导入文档没有1:1映射的图层,因此它不会受到Sketch或Figma中所做更改的影响。
图层展平
尽可能地,Principle将尝试将Sketch和Figma图层导入为原生Principle图层,以便对其属性进行动画处理。但是,Principle,Sketch和Figma的功能不同,因此导入不能总是1:1。例如,Principle没有混合模式,因此所有Sketch图层都导入为默认的混合模式。通常,您可以通过将图层或图层组展平为单个图像图层来解决这些差异。
在导入过程中,有一些事情会导致图层自动展平为图像:
路径:不仅仅是具有单个半径的圆角矩形的图层将被展平
填充:图层必须具有单一的纯色填充,以避免被展平。
边框:图层最多只能有一个单一的实心内边框,否则它们会变平
模糊和其他效果:具有模糊或其他效果的图层将会变平
具有遮罩层的蒙版组或画板将拼合成单个图层。为了最大限度地减少由于蒙版而变平的图层数量,您可以将蒙版图层和蒙版图层分组。
文本文本图层被展平为图像,因为Principle不支持Sketch中的所有文本选项。展平文本的另一个好处是确保在iOS上查看Principle文件时所有字体都能正确呈现,而iOS上的字体与Mac不同。
导入故障排除
如果导入失败,您可以重新启动Principle以重新运行它的兼容性检查。在某些情况下,需要更新Principle才能从Sketch的新版本导入,这可能已经更改了其脚本API。如果没有可以从您的Sketch版本导入的新版本的Principle,则Principle将在导入对话框中显示一个链接以下载兼容版本的Sketch。如果导入仍然失败,您可以与我们联系,提供有关您拥有的Principle和Sketch版本的信息,我们将对其进行调查。
10.更新
您可以通过选择“Principle”菜单并单击“检查更新”来更新Principle。如果检查更新是否显示为灰色,则更新已下载并重新启动原则将安装它。如果您的许可证是在最新版本的Prot发布之前一年多购买的,则可以购买新许可证以使用最新版本。
11.导出
一旦你创造了完美的交互,你就会想要向世界展示。有几种方法可以做到这一点。
图片
通过选择图层并单击“文件”菜单中的“导出所选图层的图像”,可以将图层导出为图像。这会将每个选定图层的PNG图像导出到保存Principle文件的文件夹,如果尚未保存Principle文件,则将桌面导出到桌面。
视频和GIF动画
要导出设计的视频或动画Gif,请单击预览窗口右上角的摄像头图标。您可以选择使用圆形触摸光标,箭头光标,或将光标隐藏在录制中。选择光标选项后,Principle将开始预览窗口的屏幕录制。(彩蛋:夜雨翻译,请勿直接引用)因为它实际上是在录制您的屏幕,所以视频的导出大小受到显示器分辨率的限制。当图标开始闪烁时,录制已开始,您可以开始与您的设计进行交互(录制开始可能需要一些时间)。完成录制设计后,再次单击相机图标以停止录制。
视频导出目前不支持音频,因此如果您的设计使用声音,它将不会出现在录制的视频中。
Gif设置
导出Gif时,您可以通过从下拉列表中选择预设或使用以下格式输入设置来选择自定义导出大小:
45%
任何数字后跟百分号将导出Gif,这是您记录的缩小版本,输出将按您输入的百分比进行缩放。如果指定了百分比,则将忽略宽度和高度值。
134h
导出具有指定高度的gif,保持与画板相同的宽高比。
320w
导出具有指定宽度的gif,保持与画板相同的宽高比。
400w 300h
导出具有指定大小的gif。录制将按比例缩小以适合此维度,但将保留其原始宽高比。自动添加填充和投影。颜色井中设置的颜色将用于填充gif的背景。
关于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作为图层的原因。最好是在电影中拖动。
导出为Mac程序
如果您想将您的设计分享给可能没有Principle的其他人,您可以导出一个独立的Mac程序,任何人都可以打开该程序。注意:Mac应用程序的导出在Mac计算机上运行,而不是在iPhone上运行。如果您想分享iOS设计,请参阅在设备上运行。要导出Mac设计,请转到文件>导出为Mac。生成的应用程序可以根据您的需要进行共享,但根据您的共享方式,在将应用程序上传到文件共享服务或通过电子邮件发送之前压缩应用程序可能会有所帮助。
导出为Mac程序疑难解答
您发送应用程序的人可能会收到一条消息,说“无法打开,因为它来自一位身份不明的开发人员”。这是因为它是由您(未经识别的开发人员)创建的。或者在较新版本的macOS上,它可能无法工作,根本不会提供警告。在任何一种情况下,其他人都可以通过控制单击应用程序图标并单击“打开”来打开应用程序。
在设备上运行
适用于iOS的Principle Mirror可用于在iOS上查看和共享您的设计。将Principle Mirror应用程序下载到您的设备上,并将其连接到计算机的USB端口。Mac上的Principle和Principle Mirror将自动找到对方,并将最顶层的Principle文档发送到您的设备。在设计评论中,按Cmd~可在打开的Principle文档之间快速切换,iOS应用程序也会切换文件。
即使在断开USB连接后,设计仍将继续运行,从而可以轻松向队友展示。
共享交互式设计
如果您想与他人分享您的设计以便他们可以与之交互,他们可以在他们的iOS设备上安装Principle Mirror,然后您可以将文件发送给他们。您共享的文件必须具有.prd扩展名,并且无法压缩,以便iOS在Principle Mirror中打开它。
电子邮件
要从电子邮件中打开附加的PRD文件,请点按附件,然后点按iOS共享按钮。如果“原理”不可见,请在共享面板中选择“原理镜像”,或选择“打开方式...”按钮。
您自己的服务器
如果您担心出于安全原因使用文件共享服务,可以将.prd文件放在您自己的FTP服务器上。共享文件的直接链接,其他人可以在手机上查看。Safari将显示“Principle上打开”按钮。
Dropbox,Google Drive,Box等
您可以将.prd文件上传到文件共享服务并生成指向该文件的链接。
关于Dropbox的注意事项:
默认情况下,Dropbox链接会将您带到Dropbox页面而不是文件本身。您可以通过将Dropbox链接的末尾从“dl = 0”更改为“dl = 1”来绕过此操作
关于Google云端硬盘的注意事项:
Google云端硬盘应用在特殊文件类型方面存在问题,因此我们不建议您使用它来共享Principle文件。
动画价值
Principle使用标准贝塞尔缓动函数,以及动画的延迟和持续时间值。由于这是描述动画的标准方式,因此无论您要定位哪个平台,这些值通常都会直接映射到代码中。单击并按住关键帧以查看其时间偏移。单击关键帧之间的蓝色区域以访问其缓动曲线。Spring动画使用标准的RK4物理积分器。我们不建议使用任何带有持续时间参数的UIKit弹簧API,因为这是弹簧物理的粗略近似,而不是真正的弹簧模拟。
12.问题反馈
如果您有反馈意见,我们希望听到它!引起我们注意的最佳方式是通过转到“帮助”菜单项并选择“联系客户支持”,从Principle本身向我们发送反馈。与发布到社交网络不同,这可以确保将其添加到我们的工作队列中。
大多数修复的错误都是由一个人报告的!如果您发现问题,请不要认为我们知道它或其他人会报告它。最有用的错误报告包括在新文档中重现问题的步骤,以及指向触发问题可能需要的任何支持媒体的链接(Sketch文件,图像等)。
我们也对功能建议表示赞赏,但如果您描述问题而不是建议解决问题的功能,则会更有帮助。
13.性能
与静态设计工具不同,Principle需要以平滑的60帧/秒为您的设计制作动画。您通常不必考虑这一点,但为了获得最佳性能,请记住以下几点:
使用与其显示的图层大小相同的图像和视频。
如果您正在设计照片查看界面,您可能会直接从相机拍摄一些非常大的样本照片,例如超过3000 x 3000像素。由于界面可能只显示某些图像的150x150像素图标,因此在将图像拖入“Principle”之前,将有助于调整图像大小和裁剪图像。
将非动画组展平为单个图层。
某些组表示静态元素,如图标或状态栏,并且不会相对于彼此进行动画处理。将这些层组合为单个展平层是有帮助的。如果从Sketch导入,则可以将“principle flatten”(不带引号)附加到Sketch中组名称的末尾,以使原则将组导入为单个展平图像层。
将图层用作组。
Principle的矩形层可以包含子层,就像一个组。使用此技巧可减少总层数。例如:按钮的文本图层可以直接放在其后面的矩形图层中,而不是将两个图层包装在一个组中。
14.快捷键
图层
添加矩形:R(Alt + R添加为子)
添加文本:T(Alt + T添加为子)
添加画板:A
组合:Cmd + G
取消组合:Cmd + Shift + G
置于顶层:Shift + Cmd + ]
上移一层:Cmd +]
后移一层:Cmd + [
置于底层:Shift + Cmd + [
编辑
改变:键盘箭头键
大幅度改变:Shift +箭头键
旋转:Cmd +拖动手柄
以15度为增量旋转:Cmd + Shift +拖动手柄
复制:Cmd + D
复制并移动:Alt + Drag
检查器输入框:了解基本方程式,如“320/2 + 10”
检查器标签:拖动文本字段标签可快速擦除值
重命名图层:Cmd + R.
画布导航
平移:空格+拖动
放大:Z +单击
缩小:Alt + Z +单击:
连续缩放:Alt +空格+拖动
放大:Cmd + =
缩小:Cmd + -
全部缩放:Cmd + 1
缩放选择:Cmd + 2
中心选择:Cmd + 3
实际尺寸:Cmd + 0
联动导航
平移:空格+拖动
放大:Z +单击
缩小:Alt + Z +单击:
连续缩放:Alt +空格+拖动
动画导航
平移:空格+拖动
选择
选择父级:Esc
选择子级:Enter
选择下一个同级:Tab
选择上一个同级:Shift + Tab
选择所有兄弟姐妹:Cmd + A
预览
更改光标类型:视图 - >切换预览光标类型
后退原型:W
开始录制视频:Ctrl + V
开始录制没有光标的视频:Ctrl + alt + V
15.常见问题
我们的支持页面上可以搜索到更多问题。
许可证如何使用?
许可证适用于购买后一年内发布的更新。即使在更新年份结束后,您也可以无限期地继续使用您拥有的版本。如果您希望获得未来的更新,可以购买新的许可证密钥。
你能提供报价吗?你的价格是多少?
我们不提供报价。购买页面上提供当前价格。那里列出的价格可能随时改变,不是保证。
你接受采购订单,传真等吗?
不,我们的网站处理整个购买过程。
为别人买单
通过在结账时点击礼物图标,可以为其他人购买许可证。收件人将收到包含许可证密钥的电子邮件,购买者将获得一张包含发票的邮件。如果他们没有立即看到电子邮件,请告知收件人检查他们的垃圾邮件过滤器。
我如何获得增值税退税?
具有增值税号的公司可在购买后获得增值税退税。在电子邮件收据上,单击显示GENERATE的按钮。在那里,您可以输入增值税登记号码并自动处理您支付的增值税退款。此退款需要2-3天才会显示在您的信用卡或PayPal帐户中。
我可以在现有许可证中添加其他用户吗?
目前不是,但您可以为新用户购买额外的许可证。
发票
您可以通过单击购买后收到的电子邮件中的链接来生成发票。
Principle支持哪些平台?
Principle在OS X 10.13或更高版本上运行,Principle Mirror在iOS 10或更高版本上运行。
您是否提供批量,批量或团体折扣?
我们不。
您是否提供经销商折扣?
我们不。
为多个用户购买
可以通过更改购买页面上的数量来购买多个席位许可证密钥。如果将数量设置为大于1,则将获得单个许可证密钥,而不是可在多台计算机上使用的许可证密钥。
你能填写这份表格,合同等吗?
由于我们收到的查询量很大,我们无法按销售额填写表格,合同等。结账过程完全自动从我们的购买页面处理,以方便节省您和我们的时间。
最终用户许可协议(End User License Agreement)
有更多问题吗?
查看我们的支持页面。
Sketch使用手册:
Principle教程好书推荐:
网友评论