本期内容：如何设置画布尺寸、如何设置热区实现手机端的点按操作、练练小手

上期回顾： 理清了用keynote做原型的大体思路，用三个小案例讲解了如何添加单一或多个动作

http://www.ui.cn/detail/210822.html

#第二期开课#

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

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个热区，在每个页面都粘贴一遍

播放测试一下，实现点按就是这么简单！这里只是举了一个最简单的例子，至于点击出现弹窗、点击出现下拉菜单等操作动作，都是设置热区之后的变形，只要叠加操作就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原型制作流程、如何导出

更多内容欢迎关注青柠的公众号：Hello_qingning