Keynote：快速制作高保真交互原型

Keynote是诞生于2003年，由苹果公司推出的运行于OS X操作系统下的演示幻灯片应用软件。Keynote不仅支持几乎所有的图片字体，还可以使界面和设计也更图形化，借助OS X内置的 Quartz等图形技术，制作的幻灯片也更容易夺人眼球。另外，Keynote还有真三维转换，幻灯片在切换的时候用户便可选择旋转立方体等多种方式。随着iOS系列产品的发展，Keynote也推出了iOS版本，以便在移动设备上编辑及查阅文档，并可以通过iCloud在Mac、iPhone、iPad、iPod Touch以及PC之间共享。之后于WWDC 2013大会，苹果推出Keynote的iCloud版本。在2013年9月11日iPhone 5s、5c发布会上，苹果表示iWork套件将针对新购买苹果设备的用户开放免费下载。Keynote 是一个演示幻灯片应用软件，由苹果电脑公司出品，运行于Mac OS X 操作系统。Keynote 现在与Pages、Numbers组成工具软件套装iWork。它于版本3时实现了通用二进制内核转化，可以保证在PowerPC和英特尔两种处理器的Mac电脑上本土运行。

利用Keynote制作高保真交互原型的过程，那些用几百行代码才能实现的动效，Keynote两页就轻松搞定，给交互的同学多一个酷炫的选择。

让我们通过做一个案例来感受一下吧！先看视频链接：http://v.youku.com

Keynote 在一定程度上，制作高保真原型是非常快速的。

比如我下面的这个例子，在 Framerjs 的官网有用 Framer.js 的样例，我用 Keynote 重做了一遍。在这个例子里，相比用 Framerjs 的令设计人员忘而生畏的一两百行代码， Keyonte 可谓简单快速便捷。我把一些资源也放在 GitHub 上了：infodavid/keynote-prototype · GitHub。

用 Keynote 制作交互动效设计

– 硬件准备：Mac

– 软件准备：Keynote

– 素材资源（如果你想自己画的话，也没问题）：Google Logo，Avantar，Android L Icons，Roboto 字体

第一步，基本设置

新建一个 Keynote 文件，然后在 **文档** 的 **幻灯片尺寸** 中选择 **定制幻灯片尺寸**，并在输入框中输入宽为：640，高为：1136。我一般选择使用 iPhone5 的分辨率，以免尺寸过大导致的投影效果欠佳。

在 **格式** 中选择 **背景颜色**，输入 H:238 S:0 B:94。RGB 对机器友好，但 HSB 是对人更友好的色彩模式，推荐使用 HSB 模式。

第二步，画图

我图方便，顶部条部分直接在 Sketch 里画了图，导成 PNG 放在 Keynote 里。其实 Keynote 里也同样可以完成这个操作，下面就介绍下 keynote 里如何完成：

1. 自行绘制。Keynote 中的钢笔工具非常强大，你可以绘制任何你想要的图形，同时也可以让图形之间合并，相减相交。但是缺点是无法导成单独的图片。

2. 运用资源：图标字体，IconFont，安装此图标字体，即可使用。优点是你可以任意放大缩小不失真，缺点也很明显，要导出图片是麻烦的事情。

其他都较为简单，就不多赘述。

唯一需要注意的是在第二页中，并不是简单的一个矩形背景，而是由圆和矩形拼接成的。稍后介绍动效时，会介绍到 Magic Move 的运用。

第三步，添加动效

画好图之后，就可以添加动效了。其实我们分析一下就知道点击头像后，两个页面的交互动效是如何的：

1. 头像后的原型放大，并最后形成一个矩形。
2. 顶部条有轻微的上移渐隐效果。
3. 第二页的标题，文字等上移
4. 麦克风出现
5. 头像背后的圆放大并持续一小段时间

当然，哪个象征光标的圆圈也是有一个移入，并进行 Pop 效果的。

Keynote 里的 Magic Move（神奇移动），真的很 Magic，兼职就是无缝衔接。当你运用 Magic Move 时，注意要是相同的两个对象。比如说在这个 Demo 里，你把第一页中的蓝色圆背景，复制，黏贴到第二页，同时放大尺寸，那么在运用 Magic Move 之后，过渡就会非常自然。

同时，Build Order（构件顺序）也是非常重要的，你在此选择动效的持续时间，是否运用延迟，在点击还是在某构建之后开始。其中的妙处是需要自己去把玩的，说一百遍不如实地做一遍。