苹果团队如何用Keynote制作产品原型.pdf

苹果团队如何用 Keynote 制作产品原型 史蒂芬说：苹果就自己有个专门制作原型的团队，他们流窜在各个项目组之间包揽所有的原 型制作工作，包括动画和交互。他们的主要工具就是 Keynote 。 WWDC 2014 Session Videos 这来自于 WWDC 2014 Session Videos 里有个视频 Prototyping: Fake It Till You Make It ，就是他们 指导如何用 Keynote 做出逼真的交互原型的，这段我也是刚看到，其实一直想补到之前的答案里。 下面结合这个视频的截图可以介绍下他们是怎么充分发挥 Keynote 的特点的。 综述一下先： 1. 静态图 1. 先用画好的线框图或者直接在 keynote 里用色块布局 2. 填充图片，可调整阴影等基本效果 3. 导出图片放进手机里 4. 根据用户反馈调整 2. 动画效果 1. 利用 Keynote 自带的物件动画 2. 活用 Keynote 最棒的 神奇移动“ ”转场效果 3. 手机装上 keynote app 打开演示文档 4. 根据反馈调整效果 3. 交互事件 1. 调整图片尺寸导入 xcode 2. 仅用针对图片的简单代码 3. 仅用简单的交互手势 代码 首先：制作静态图。 1. 先用画好的线框图或者直接在 keynote 里用色块布局， keynote 提供了多种智能的对齐，布局，格 式等等设计方式，整个过程会非常的轻松。比如自动标尺吸附等距等等，比绝大多数原型制作软件 都简单人性化。 色块布局 2. 对照一些线框图可以继续铺色块和布局，这个过程中你会发现这个对齐和吸附的过程是多么的 神奇。 对齐和吸附很轻松 3. 导入图片， Keynote 有很多种方式可以调整素材样式，包框，阴影，透明图，实时遮罩等等。 是的，你可以用 PS 慢慢玩，也可以用 keynote 一键完成。 调整图片样式 4. 很多人用原型软件是看中那些控件，其实大多数控件还不如自己在 Keynote 里制作快速。而 且 Keynote 自带了很多标志和 Icon ，完全不用到处去找了。比如这个例子里的打分用五星，改个黄 色就可以了。 自制图标 5. 依次类推，可以很快做出很多页面，导出图片格式，在手机中查看 手机查看 插入一段来自知乎评论里的内容，关于如何让 keynote 在手机上竖屏的 @Marc : 下载 Apple 官方给出的 Keynote 你就明白了，每个 xxx.key 文件都对应着一个 xxx- iPhone.key ，这个逆时针旋转 90 度之后的文件才是最终用来在 iPhone 上面演示的文件。 第二阶段，假互动，加入动画效果。 具体关于为何这么做，每个阶段完后的反馈过程，目标等等原理的东西请大家看视频或者 PDF 吧， 这里主要说下过程和他们是怎么充分发挥 Keynote 在原型制作中的特点的。 比如这个假互动的阶段，如果你不用 Xcode 的话，这个就是交互原型的最后阶段了。基本原理就是 活用图片，活用物件动画，活用转场动画，足以做出以假乱真的原型，只要你的测试用户不要 瞎点 …… 关于 Keynote 自带的动画有非常多种和微调效果，起初我不是很理解，因为很多花哨的效果很难用 到幻灯片里，直到开始做原型发现，其实很多动画经过调整都是很好的交互效果，包括现在看到的 一些令人惊艳的反弹，延迟等逼真的细节动作， Keynote 早就可以微调模拟了。 据说锤子手机和苹果的很多交互效果，都是先用 Keynote 做出来再给工程师写出来的。（是文末附 的许岑视频中说的，好像是，记不清了，无责任据说预警） 1. 制作动画有很多方式，可以根据你的职业，习惯选择不同的方法。 动画效果 也有很多很巧妙的方式，其中最简单，最快的就是一定要灵活运用图片。灵活到什么程度，我举个 视频里面全场爆笑的例子。动画是这样的：敲击键盘，字符一个个的蹦着出现在屏幕上。里面说， 我可以只用一行或者干脆不用代码