神奇交互设计工具 Principle 中文文档.pdf

神奇的交互设计工具 Principle 中文文档 最近在学习 Principle ，边学边整理了它们的官方文档 ，今天也算是 了初步的入门吧。整理的文档 还 很多不足 ，比如没 较好的截图供大家参考 ，也没 好的步骤引导和答疑。后期慢慢完善 ，希 望大家不要介意～ 简单描述下这个应用 ，Principle 是前 A pple 工程师打造的一款交互设计工具 ，短时间内即可制作出 一个具 完整交互动画的原型 ，并且可将交互动画生成视频或者 Gif 分享到 Dribbble、Tw it t er 等社 交平台 ，也能够生成 Mac 应用 ，以及使用 Mirro r 预览交互。此外 Principle 还支持多种尺寸的原型 设计 ，包括 A pple Wat ch。你的动画交互想法 ，比如设计更好的移动A PP交互效果成为现实 ，用 Principle 轻松帮你实现。Principle 的原则使得它易于创建动画和交互式的用户界面设计。 界面 （Int erf ace ） 画布 （Canvas ） 在屏幕中心区域就是画布 ，你将会在这里完成绝大部分工作。它包括所 的画板 ，以及画板之间的 跳转关系。当前被选中的画板将会以绿色边框高亮显示。 预览 （Preview ） 你可以随时通过预览功能 ，查看你当前的设计。预览功能默认锁定浮动在画布的右上角。你可以拖 拽预览窗口到画布外进行解锁。你可以通过选择 “查看 - 切换查看光标类型 （View - Toggle Preview C rso r Type ）”来调整预览光标类型。这时候预览鼠标光标会在箭头和圆形两种类型之间 进行切换。 图层列表 （Layer List ） 图层列表在界面的的左下方 ，图层列表包含你设计中的所 图层 ，主要 画布、子图层、图层间的 层级关系。在图层列表中拖拽图层可以将图层编组或者取消编组。拖拽画板还能够改变画板在画布 中的显示顺序。点击图层以及组右侧的眼睛可以在隐藏和显示之间进行切换 ，不过这不会影响图层 在预览窗口中的可见性。 检查器 （Inspect o r ） 检查器在界面的左侧 ，图层列表的上方 ，在这显示了选中图层的各种属性 ，包括 ：对齐操作、X/Y 坐标、长/宽、角度、缩放、透明度、圆角、关联的图片、颜色填充、描边、组合裁剪、水平/竖直 操作等。 动画视图 （A nimat e View ） 动效视图会出现在界面的底部 ，动画视图用来自定义画板之间的动画。你可以点击工具栏上的 A nimat e 按钮 ，或点击画板间的跳转箭头打开动画视图。动画视图通常用来调整切换动画的时间和 动画曲线。 联动视图 （Drivers View ） 联动视图出现在界面的顶部 ，联动视图展示了当前选中画板内元素之间的联动关系。联动视图可以 用来创建复杂的、持续联动的交互。你可以点击工具栏上的 Drivers 按钮打开联动视图。 绘图 （Draw ing ） 乍一看 ，Principle 像一款绘图工具 ，并且跟你平常使用的工具长得很像。一些基本元素可以在 Principle 中绘制 ，并且能够导入图片。 画板 （A rt boards ） Principle 的画板使用跟其他绘图工具类似 ：每一块画板代表了一个独立的设计状态。你可以随意调 整画板的尺寸以适应不同的设备 ，活着窗口大小。一些画板在概念上等同于屏幕 ，但是完全不同。 例如 ：两个音乐播放器设计的画板 ，除了 播放/暂停 按钮 ，都是相通的。被选中状态的画板 ，在当 前窗口展示为一个绿色边框的矩形 ；新图层会默认添加到这个选中画板中。 想要创建画板 ，可点击工具栏左上角的“画板 （A rt board ）”图标 ，或者快捷键 A 来增加一个新的 画板。 通常情况下 ，考虑到创建逐帧补间动画 ，本质上是两个画板间内部元素属性的细微转场 ；所以 ，我 们经常会在增加事件的时候 ，连接当前画板。Principle 会帮我们自动创建一个完全一模一样的画板 ，并且画板中的元素也完全一样。 每个画板对应一个或者一组状态 ，而多个画板很 可能才代表一个真实的用户界面。画板和画板之 间只 细微的差别 ，这在创建补间动画的时候很 意义。例如 ：设计播放器的播放和暂停两个状态 就会使用到两个画板 ，但它对于用户而言 ，实际上只呈现了一个用户界面。 Principle 一开始便是针对移动互联网设计的交互动画工具 ，系统已经内置了iPho ne4/5/6/6p、 iPad、A pple Wat ch 以及 Dribbble 的标准尺寸 ；当然 ，你也可以自定义尺寸。 矩形 （Rect angles ） 想要在当前画