如何用keynote做可操作App原型（三）

#第三期开课#

梳理可操作App原型制作流程、原型如何导出

1、拿起鼠标就是干

用keynote做动效大致分为三个大步骤

青柠通常使用的“伴侣”软件有这些

#Sketch#

神器一枚，青柠画线框、UI时候的最爱，优势一大堆，之后会出一期Sketch的教程，记得关注青柠乌冬，吃下我的这枚安利！

#Premiere／iMovie#

主要用来做动画视频时候的后期剪接工作

#Ps／GIF Brewery#

用来将小动画效果生成GIF格式

Step 1 

绘制图形——绘制线框图／视觉稿&切图

在最开始绘制线框图／视觉稿的时候，青柠通常使用sketch来完成，因为sketch有一个非常赞的“一键切图”功能（就是将每个图层分别保存成一个png文件）方便我们下一步的动画制作。（并不是每个元素都要切图，只需将会发生动效的元素切图即可）

sketch操作界面

有的时候也会直接就在keynote里面画原型，下面的截图就是青柠参加的一个工作坊，一个下午就要快速给出方案，我果断选择keynote，一下子可交互的原型都做好了，事半功倍，效率棒棒哒

用keynote画原型

Step 2 

动画制作——在keynote中将所有切图拼合&设置动画效果

首先设置画布尺寸，改为移动端分辨率（怎么设置第二课有讲哦）

把所有的切图都拖进keynote操作区中

做动效限制你的不是软件功能，永远都是你的想象力！

回忆一下第一期提到的两件非常重要的事情：

第一，将每一个动作拆解为元素如何出现、出现后有什么动作、如何消失三个步骤

第二，对这一组动效的前后关系有一个明确的时间轴

把握这两点，依次按照元素出现的先后顺序，把元素拼回原有位置并添加动画效果

PS：青柠不建议一开始就把所有元素先拼好再添加动画，如果元素之间是有遮挡关系的话，操作起来是非常麻烦的～

开始制作动画

Step 3

A.原型展示——同步到ios设备端，测试使用

在手机分辨率尺寸上制作完，用手机端keynote打开，一个“假”的可以交互原型就大功告成啦！

B.后期剪辑——以视频格式导出，按照时间轴剪辑

keynote没有时间轨道，所以有限后题的配乐或速度调整就需要导入pr／imove／ps（视频编辑软件）再做调整。

keynote怎么保存成视频格式：

点击文件——导出到——QuickTime——调节参数——下一步

 保存为视频文件

通常来说“前往下一张幻灯片之前等待”&“前往下一个构件之前等待”都选为“0秒”，格式就要看你对视频大小的需求了，1080P更清晰当然文件也会比较大。

调节参数

Step 6，后期制作

将导出的视频文件拉到iMovie／Pr里面进行剪辑，包括调节视频的速度、长度、配音等操作

或者将视频剪成小段，导入Ps／GIF Brewery制作GIF小动画

方法：视频导入Ps——点击“文件”——选择“存储为Web所用格式”——选择格式为“GIF”——循环选项选择“永远”——储存

选择“存储为Web所用格式”

调节参数

《如何用keynote做可操作App原型》三期的小教程到这就全都结束啦，刚刚开始可以临摹一些大牛的动效，如果一下子看不出来这个动效是由哪几个动作组成的，可以用录屏软件把效果录下来，然后一帧一帧的看，上手做几次，就能发现keynote做原型没你想象的那么困难！欢迎在后台给青柠留言继续交流，一起提高～～

往期回顾：

如何用keynote做可操作App原型（一）：keynote动画功能怎么用

制作动效前应如何思考、如何添加单一或多个动作、如何使用转场效果

http://www.zcool.com.cn/article/ZNDcwODM2.html

如何用keynote做可操作App原型（二）：keynote动效实例

如何设置画布尺寸、如何设置热区实现手机端的点按操作、案例实践

http://www.zcool.com.cn/article/ZNDcwODQ0.html

更多内容欢迎关注#青柠乌冬#