2017/11/24 Principle中文文档 Principle 中文版 | Principle 教程 | Principle 视频 | Principle Windows | Principle 汉化 | Principle 破解 | Principle License Key | 1. http:/principleux.com/principle-chinese-document/1/14 心之所向 至美设计 PrincipleUX 中文文档 迄今为止，也许面向产品设计师最友好的交互动画软件 界面 Interface 1. 绘图 Canvas 屏幕中心区域是绘图空间，绝大部分工作将会在这完成。它包括所有画布和画布间 的跳转关系。被选中的画布将会以绿色边框高亮显示。 2. 预览 Preview 预览功能可以随时操作预览你的设计草稿，它默认锁定在屏幕右上。当然你可以拖拽 预览窗口到软件窗口外解锁。点击关闭按钮即可重置预览窗口到工作区右上角。拖拽 预览窗口四角可以改变窗口大小，窗口大于画布时，画布会放大，但窗口小于画布 时会等比缩小。 3. 图层表 Layer List 图层表在软件的左下，它显示全部画布、子图层、图层间的层级关系。在图层 表中拖拽图层可以可以成组或解组。拖拽画布排序即改变画布在屏幕中的显示位置顺 序。点击眼睛可以切换隐藏显示图层以编辑，但影响在预览窗口中的可见性。 4. 检查 Inspector 工作区左侧，图层表上方是检查，在这显示选中图层的各种属性，包括：对齐 操作、X/Y坐标、长/宽、角度、缩放、透明度、圆角、关联的图片、颜色填充、描 边、组合裁剪、水平/竖直操作。 5. 动效面板 Animate Panel 界面 画图 连续的交互 事件 动画 联动 导入 导出 快捷键 常见问题 Version 1.1.2016.4.2 HomeDocument (中文)Download 2017/11/24 Principle中文文档 Principle 中文版 | Principle 教程 | Principle 视频 | Principle Windows | Principle 汉化 | Principle 破解 | Principle License Key | 1. http:/principleux.com/principle-chinese-document/2/14 动效面板会出现在软件视窗的底部，你可以点击工具栏上的 Animate按钮 Principle中文文档，或点击画布间的跳转箭头打开。它通常用来调节切换动画的时间 和动画曲线。 6. 联动面板 Drivers Panel 联动面板出现在软件视窗的顶部，你可以点击 工具栏上的 Drivers按钮 Principle中文文档打开联动视图。联动面板展示当前选中画布内元素之间的联动关 系，它可以用来创建复杂的、持续联动的交互。 画图 Drawing 乍一看，Principle 跟你平常使用的画图软件长得很像。基本元素可以在 Principle 中 绘制，复杂的图形可以通过图片形式导入。新图层会默认归入当前的画布中。 1. 画布 Artboards * Principle 的画布跟其他绘图软件也很相似：每一块画布代表你一个独立的设计状 态，你可以随意修改其尺寸大小以适应同的设备。创建画布，可点击工具栏左上角 的“画布”图标Principle中文文档，或者快捷键 A 来增加一个新的画布。 通常情况下，考虑到创建逐帧补间动画，本质上是两个画布间内部元素属性的细微转场；所以，我 们经常会在增加事件的时候，连接当前画布，Principle 会帮我们自动创建一个完全一模一样的画 布，并且画布中的元素也完全一样。 每个画布对应于一个或者一组状态，而多个画布很有可能才代表一个真实的用户界 面。画布和画布之间只有细微的差别，这在创建补间动画的时候很有意义。如：设 计播放的播放和暂停两个状态就会使用到两个画布，但它对于用户而言，实际上只 呈现一个用户界面。 Principle 一开始是针对移动互联网设计的交互动画软件，系统已经内置 iPhone4/5/6/6p、iPad、Apple Watch 以及 Dribbble 的标准尺寸；当然，你也可以 设置任意你喜欢的长宽尺寸。 2. 矩形 Rectangles 界面 画图 连续的交互 事件 动画 联动 导入 导出 快捷键 常见问题 Version 1.1.2016.4.2 2017/11/24 Principle中文文档 Principle 中文版 | Principle 教程 | Principle 视频 | Principle Windows | Principle 汉化 | Principle 破解 | Principle License Key | 1. http:/principleux.com/principle-chinese-document/3/14 创建矩形，可点击工具栏左上角“矩形”图标Principle中文文档，或使用快捷键 R 来画一个新的矩形。 如果想画一个圆，只需把圆角度数调成一个非常大的数值；如果想给图形设置一个背 景，只需要把图片拖到检查的图片区中即可；新创建的矩形默认尺寸为4444像 素，这是因为在iOS中至少4444的区域才方点击。 3. 文本 Text 创建文本，可点击工具栏左上角的“T”图标Principle中文文档，或者快捷键 T 来增 加一个新的文本。 文本和矩形的属性参数类似，只多字体、对齐方式、字体大小三种属性。其中，字 体和对齐方式两个属性在创建补间动画的时候；还有就是，Principle 中 使用的字体可能在iOS设备中存在，所以这可能导致在设备连接“镜像”时显示文 字，使用常规字体或安装所需字体来可解决这个问题。 4. 图片 Images * KGVID width=”640 height=”360http:/7xo7hi.com1.z0.glb.clouddn.com/video_Principle%3A%20Working%20with%20Images.mp4/KGVID 在 Finder 中可以拖拽图片到 Principle ，也可以直接粘贴 PNG 和 JPEG 到 Principle 中。如果你是 Sketch 用户，合并选区为一张 PNG 图片，粘贴到 Principle 即可。 当图片很多层级结构错综复杂时，会让人很烦恼。Principle 工程师深知这一情况，正 在着手解决。图片的长宽比默认是锁定的，你可以点击长/宽属性框中间的小锁头图 标解锁。拖拽图片到一个矩形的图片容中可以把图片变成一个矩形，点击图形容 并按 DELETE 键可以删除矩形的图片背景。 如果拖入的图片名以”2x”或”3x”结尾（如：logo2x.png、menu3x.png），那么导入的 图片将会自动缩放为1/2和1/3大小；如果你已经导入一个高分辨率的图片，也可以通过设置图片 的长宽数值为1/2达到同样的效果。另外，检查的属性输入框支持简单的数学运算，输 入“320/2”可以方的缩放为原图的一半。 5. 组合 Groups 能发生改变 界面 画图 连续的交互 事件 动画 联动 导入 导出 快捷键 常见问题 Version 1.1.2016.4.2 2017/11/24 Principle中文文档 Principle 中文版 | Principle 教程 | Principle 视频 | Principle Windows | Principle 汉化 | Principle 破解 | Principle License Key | 1. http:/principleux.com/principle-chinese-document/4/14 Principle中文文档 * 图层可以组合在一起：选中希望 被组合在一起 的多个图层，点击工具栏上的组合图 标 Principle中文文档，或者使用 Command + G 快捷键。 组合在 Principle 可以视为一个含有子图层的矩形图层，所以，最终的组合结果会 拥有自己独立的位置和大小。在 UIKit、Android 和 DOM 中也是如此绘制和动画元素 的。但是，如果你按照 Photoshop 或 Sketch 的方式去使用组合可能会有意外情况发 生；组合在制作复杂的图层交互、旋转同原点的图层、在每个图层的基础上实现 多重动画是非常实用的。 6. 裁剪/遮罩/剪辑 Cropping / Masking / Clipping 当针对最终组合的图层勾 选“Clip SubLayers”之后，就 可以实现对图层的裁剪和遮罩效果。溢出的区域再显示，同时，如果想要创建圆形 的遮罩，只需要对成组后的图层调节圆角率参数即可。在Principle很多复杂的案 中，你会发现裁剪和遮罩功能的神奇之处，很多脑大开的交互实现都基于此。 连续的交互 Continuous Interactions Principle 内建三种通用的交互：拖拽、滚动、翻页。并可独立的在图层的X轴或Y轴 开启。 1. 拖拽 Dragging 开启拖拽后就能用鼠标点击按住移动图层来改变位置。轮播图、悬浮窗、探探，都是 典型的拖拽案。 2. 滚动 Scrolling KGVID width=”640 height=”360http:/7xo7hi.com1.z0.glb.clouddn.com/video_Principle:%20Scrolling%20and%20Tabs.mp4/KGVID 当一个图层（A）有子图层（B）时，这个图层（A）才可以添加滚动的属性。当手 指拖动滚动图层（A）时，子图层（B）会随手指移动，但父图层整体会移动。地 图、新闻表、长文章都可以用滚动实现。如果没有子图层时开启滚动，那么系 统会自动创建一个滚动图层组，很棒吧。为组合的图层勾选上“Clip children”选项， 滚动到边界之外的部分会可见。 界面 画图 连续的交互 事件 动画 联动 导入 导出 快捷键 常见问题 Version 1.1.2016.4.2 2017/11/24 Principle中文文档 Principle 中文版 | Principle 教程 | Principle 视频 | Principle Windows | Principle 汉化 | Principle 破解 | Principle License Key | 1. http:/principleux.com/principle-chinese-document/5/14 Principle中文文档 3. 翻页 Paging KGVID width=”640 height=”360http:/7xo7hi.com1.z0.glb.clouddn.com/video_Paging.mp4/KGVID 翻页和滚动很像，只过翻页可以每次滚动固定的距离，这个距离和组合的大小一 致。翻页可以用于图片切换、手机主页的图标翻页、或者任何卡片式翻页设计，最近 这种设计非常流，如果你想在页面间添加内边距，让翻页组稍稍比你需要的大一 些，空页面内容的边距即可。 事件 Events 事件触发用于同画布间 的转场。点击图层或画布， 在右侧发现“闪电”图标，点击图标会出现支持的事件表。点击并按住事件前面的空 心圆，拖拽指针到想要跳转的画布就能够按照选中事件为创建一种页面跳转的交 互形式。这时你会发现两个画布之间会出现一条箭头，表示画布间的转场。 拖拽时如果指向当前的画布，会在右侧复制一份当前画布 如果把图层的透明度设置为0，那么这个图层就能触发点击事件，是真的“透明” 事件触发 点击