五步做一个高保真可交互原型-Principle教程.pdf

五步做一个高保真可交互原型－ Principle 教程 这篇教程要介绍的案例是： App 界面上调整时间的可交互原型。我们先看一下效果： 这个案例用的是 Principle 这款软件做的。 Principle 近段时间非常流行的一款做原型的软件。很多公司 也用 Principle 做高保真原型，这样就可以作为最小可行性产品（ mvp ）,在正式开发前就进行用户 调查、可用性测试。 Principle 有如下几大优点： 案例里面就主要用了 Drivers 的功能。手指在屏幕上下滑动时，分针和时针会随着滑动一起旋转。这 就是 Drivers 。Drivers 是 Principle 的一个重要功能，也翻译成联动。 官方对于联动有有一大段的解释，但是如果没有做个是很难看懂的，但没有关系，因为接下来会通 过实例来介绍这个功能。 第一步：将素材导入到 principle 中 方法有 2种： 1、拖动素材到 principle 中，需要一个个拖 2、在 sketch 中做好素材，将 sketch 保持打开状态，再打开 principle 选择导入就可以了 第二部步：制作上下滑的动作 1、创建一个矩形，把矩形的高度做的很长。命名为 看不见的控制“ ”，调整 Vertical 属性为 Drag 。这样 就可以在 preview 中上下拖动这个矩形了。（见下图） 为什么第一步要这样做呢？这是因为我们要上下滑动这个矩形的时候，分针和时针可以旋转。那么 这个矩形就是联动源，矩形和分针、时针之间是联动关系。 为了更好的理解这个概念，我们看一下官方的解释： 联动源（ Driver Sources ） 想要创建联动，在画板上必须存在一个可改变的属性，这叫做联动源。在联动视图中列表中 ，可拖拽图层、可滚动图层，以及选择属性将自动展示出来。 2、然后将这个矩形的 Fill属性中的透明度调整到最高。让这个矩形变透明。（见下图）但是注意： 不能直接调整 Opacity 这个属性，是因为如果这么做，那拖动这个矩形不会产生任何效果的。 第三步：将分针和 看不见的控制“ ”联动，即上下滑动屏幕时分针会旋转。 1、首先要把分针的图片处理一下。因为分针要围绕表盘中心转动，所以分针的中心要调整到针的 末尾。但 principle 暂不能调整中心点（有谁知道如何调整可以告诉我，感激不尽）。所以我有个笨 办法，就是复制一个分针，放到对称的位置，选中这两个分针，按住 cmd ＋G 组合。再把其中一个 分针调整为透明。就调整好中心了。 2、然后关键时刻到来啦。选中 分针“ ”这个组，点击 Driver ，点击时针旁边的＋号选择 Angle 。 3、然后将下图这拉杆向后拉动到一个位置，在拉动的时候可以看到 看不见的控制“ ”这个矩形在向下 移动。这个和 AE 基于时间轴的概念不一样，这个是基于位置的。 4 、选中分针，调整角度为 4410 度，这个时候 Drivers 面板中自动出现蓝色的线条，这个和补间动画 的概念类似。 5、现在在将拉杆在蓝色线条区域内拉动会看见 看不见的控制“ ”在移动的时候，分针也在旋转。这就 完成了联动了。 这部分的操作，我们可以对照官方的解释，来理解一下： 联动属性（ Driven Properties ） 一旦有了联动源，你就可以用它控制其他任意（包括自己）图层的属性。选择一个你想控制 的图层，在联动面板点击蓝色的加号图标，选择一个你想联动的属性。这时会以当前的属性 参数创建一个起始关键帧。只有一个关键帧不起任何作用。 联动关键帧（ Driver Keyframes ） 完整的联动需要至少两个关键帧才能有效果。方法很简单 ：水平拖拽灰色标记移动到你想添加的关键帧位置，然后调整属性值。 Principle 将自动为你 插入一个新的关键帧。关键帧能够通过点击衣橱，然后点击红色按钮到关键帧的左侧。 第四步：重复上面的操作，将时针和 看不见的控制“ ”联动起来。 第五步：完成