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(构件顺序)也是非常重要的,你在此选择动效的持续时间,是否运用延迟,在点击还是在某构建之后开始。其中的妙处是需要自己去把玩的,说一百遍不如实地做一遍。
优化一下
1. 复制第二页的标题和文字到第一页的画布底下。
1. 把首页中底部的矩形背景复制到第二页,然后调整其高度为450,
这样,运用 Magic Move 的时候,就会更自然了。