第一步:计划

创建一个不同页面之间的跳转关系,然后把这些关系按照用户的操作流程联系起来。

![](https://i1.wp.com/keynotopia.com/images/bf67265d96854b6aacba92c074c818df_thumb.png?w=960)
上图所示的就是一个社交应用的多账户管理,而且用户可以把状态更新到多个社交网络中。

第二步:制作原型

在新窗口中打开 Keynotopia Prototyping Templates 的 .key 文件。

开始为每个屏幕制作原型,直接从模版文件中把元素拷贝,然后粘贴到你自己的窗口中,然后双击即可编辑里面的内容。

你还可以修改元素的尺寸、颜色和一些其他的效果。

![](https://i0.wp.com/keynotopia.com/images/5b565dc4d4d34c08ab409e6080874ee7_thumb1.png?w=960)
![](https://i0.wp.com/keynotopia.com/images/65874a06e27d4e3082cbb3fc49f2552e_thumb1.png?w=960)
![](https://i1.wp.com/keynotopia.com/images/dca8f2bcf0564bc6820aceee05954737_thumb1.png?w=960)
当你把这些屏幕全都放到文档里之后,你可以把这些元素放进母版来重复使用,而不需要不断的复制粘贴,而且还可以快速修改多个屏幕内容。
![](https://i2.wp.com/keynotopia.com/images/Master-slides.png?w=960)
### 第三步:添加交互

选中某个元素,然后右击选择添加链接,选择要跳转的页面,就可以让元素变成可点击状态了。

![](https://i0.wp.com/keynotopia.com/images/1258da8c37ce42ff89c47e07ebb7cb9f_thumb.png?w=960)
我建议使用幻灯片页面,而不是上一张幻灯片或下一张幻灯片。这样 Keynote 就会智能的更新这些页面信息,即使你更改了幻灯片所在的页面。

每一次改动都要测试,以确保交互行为与你的预期相一致。

你可以添加一些过渡动画或者魔法效果来创建界面动画。不过请不要太过的指望这些特性。

在你测试最终稿之前,确保单击幻灯片的空白处不会跳转到下一张幻灯片,如果有问题,Keynote 的右侧栏里将演示文稿类型更改为「仅链接」

第五步:导出 & 测试(*原文并没有第四步)

从文件菜单中,选择到处并选择 PDF 格式。然后你可以把文件通过邮件或者 Dropbox 分享到你的手机上。

![](https://i0.wp.com/keynotopia.com/images/test.png?w=960)
### 第六步:分享 & 反馈

把你的文件上传到 iwork.com(免费)然后把链接分享给其他人,然后大家就可以在线测试并给予反馈。

![](https://i2.wp.com/keynotopia.com/images/Comments.png?w=960)
### 福利:自定义快捷键

当你越来越多的使用 Keynote 的时候,你就可以通过一些快捷键来节省时间。你可以打开 Mac 的系统偏好设置 ➡️ 键盘,然后快捷键 Tab,选择「应用快捷键」,然后点击 ➕ 来添加新的快捷键。从应用列表中选择 Keynote,然后输入菜单名称,这个名词和 Keynote 的菜单名称药完全一致,在下图的演示中,我为左对齐设置一个快捷键,在 Keynote 菜单中,左对齐的文字标签就是「左边」(Left),所以我就输入「左边」(Left),就这样。

![](https://i0.wp.com/keynotopia.com/images/KeyboardShortcuts.png?w=960)
下面是我自己用的一些快捷键:
菜单快捷键用途
成组CMD + G把元素组合在一起,这样可以快速选择和编辑
取消成组CMD + SHIFT + G取消组合的元素,连续使用多次可以取消多个重叠的组合
后移CMD + [ 将元素/组向后移动一层。元素的层级由创建时所在的层次决定
移到最后面CMD + SHIFT + [ 将元素/组移动到最后一层
前移CMD + ]与后移相反
移到最前面CMD + SHIFT + ]你猜猜看
锁定CMD + L锁定元素,这样在编辑其他元素的时候不会误操作选到该元素
解锁CMD + SHIFT + L解锁元素/组。当你选中所定的元素时,会发现它们的每个边角上都会有个「x」,而不是可以用来调整大小的方块。
较大CMD + SHIFT + >这个操作 iWork 虽然自带了快捷键 CMD++,但是调整字体大小我更习惯这一个
较小CMD + SHIFT + <同上
适合窗口CMD + 1当你的幻灯片尺寸大于屏幕时,这个快捷键就很好用了。比如我经常使用 iPad 的分辨率来做演示稿,但是 800px 的高度对笔记本电脑来说就有点太大了
实际大小CMD + 0显示文稿的实际尺寸
下面的视频是如何使用 Keynote 来制作和测试 iPhone 应用:

How to create an interactive iPhone app prototype in 19 minutes from Amir Khella on Vimeo.

Keynote 模版请在这里下载,包含免费的模版:Keynote 原型组合

原文链接:Creating Interactive Prototypes With Keynote
翻译:Max Cheung