如何用keynote做可操作App原型（二）
keynote如何设置画布尺寸、如何设置热区实现手机端的点按操作、练练小手
上期回顾：《如何用keynote做可操作App原型（二）》理清了用keynote做原型的大体思路，用三个小案例讲解了如何添加单一或多个动作
#第二期开课#
如何设置画布尺寸、如何设置热区实现手机端的点按操作、练练小手
1、画布尺寸如何设置
上一期的动画原型是在keynote 默认画布尺寸上完成的，如果我们想要同步到手机端进行操作演示的话（手机端也要安装keynote哦），就要先处理一下画布尺寸。
以iphone7 plus的分辨率1080 X 1920为例：
a. 点击“文稿”——点击“幻灯片大小”
点击“幻灯片大小”
b. 选择“自定幻灯片大小”
选择“自定义幻灯片大小”
c. 更改尺寸
更改尺寸
在此基础上进行绘制即可直接同步到移动端查看效果啦～so easy
画布成功改为手机分辨率尺寸
2、点按热区如何设置
上一期有提到用keynote做原型有一个很棒的地方，就是可以通过添加超链接，轻松实现点按跳转操作，可以达到逼真的效果。
下面就用一个最简单的Tab切换来教大家如何通过设置热区来实现点按切换界面的操作动作：
下图是“豆瓣”的首页，我们的目标效果就是点击底部的5个Tab，分别切换到对应的页面
豆瓣首页
Step 1 新建画布
新建5张幻灯片，且画布尺寸自定义为屏幕的分辨率（怎么设置详见上文）
将5个Tab对应的界面按顺序置入（绘制）到5张幻灯片中
新建自定义尺寸的幻灯片
置入（绘制）界面
Step 2 设置热区
制作原理是为5个Tab分别添加链接，实现点击之后的页面跳转
a. 在每一个Tab上方添加一个无填充、无边框、无投影的“隐形”方形，作为可点按区域（热区）
添加热区
b. 给每个“隐形”方形热区添加链接，对应到目标页面
方法：右键点击方形——添加链接——选择幻灯片页数
添加链接
c. 复制首页上设置好链接的5个热区，在每个页面都粘贴一遍
为每一个Tab添加链接
播放测试一下，实现点按就是这么简单！这里只是举了一个最简单的例子，至于点击出现弹窗、点击出现下拉菜单等操作动作，都是设置热区之后的变形，只要叠加操作就OK了。
3、练练小手手
经过两期的内容，基本上青柠已经把用keynote做动效的基本原理告诉大家了，下面三个小案例，带大家综合运用一下～
No.1 进度条
加载进度条是一个很常见的反馈动效，先看一下效果
进度条效果
具体做法请戳视频https://v.qq.com/x/page/a03735unbfe.html
No.2 点击发布
我们用“闲鱼”的“发布”button的动态效果为例，先看看效果
具体做法请戳视频
https://v.qq.com/x/page/x0373rnaplv.html
No.3 反馈动效“小对勾”
具体做法请戳视频
https://v.qq.com/x/page/v0373tx8b6e.html
附一个小视频链接看看keynote大神是怎么模拟 MaterialDesign 风格动画的，膝盖奉上！！
http://v.youku.com/v_show/id_XODU0MDQ3NDY0.html%20
今天就说到这，打开脑洞赶快操练起来吧！更多内容继续关注#青柠乌冬#
下期预告：《如何用keynote做可操作App原型（三）》
可操作App原型制作流程、如何导出
