使用 Keynote 做高保真动效交互设计原型,有哪些教程或学习资料?

如题, 最近见到了有用Keynote做的Google新发布的material design短视频:vimeo.com/100377108 还有用Keynote做的Facebook paper:Move Over Origami: How To Prototype Facebook App Using Apple Keynote 觉得Keynote用来做交互设计比origami要简单很多,动效也可以做的不错,想学习一下这方面的技能,但是找到的全是比较旧的教程,除了Keynote,还有更好的更简单的用来做交互的原型工具么? --------------------------------…
关注者
2521
被浏览
65815

13 个回答

我原来尝试找过,但是没有找到。不过因为Keynote的教程有很多,里面的所有功能都可以学习到,结合自己的设计稿,可以尝试自己制作下。不用教程其实也是可以的。

这个是我做的 Keynote 制作的 产品交互原型 ,视频中有几处问题,当时因为时间很赶,也就没再调试。这个视频完全依靠我本来对keynote的了解,根据自己设计的动态效果制作出来的。

其实想制作这样程度的原型很简单,只使用了【添加动画】这个功能(新版 keynote 右上角第二个),具体包含:
  1. 出现
  2. 动作
  3. 消失
(Ps:其实还有【神奇移动】,在我做的这个原型中没有用到,但从其他人做的视频以及自己后续的尝试来看,【神器移动】是做原型一个很好用的功能,只是当时对这个功能没什么概念,所以没有使用)

下面说说我用 keynote 制作原型时总结的一些要点,不算详细,算是抛砖引玉吧。

【构件出现】设置这个属性后,控件一开始会变成隐藏状态。这里我一般选择“出现”“渐隐渐现”,然后设置时间参数,自己可以根据效果调试。

【动作】主要用于展示用户操作的反馈。常用的有“移动”“翻转”“放大”,都是软件常见的反馈效果。这些动作都有各自的参数,比如坐标,时间,抹入/抹出等。

【构件消失】同样属于用户操作的反馈,新控件的出现以及原有控件的动作,可能会伴有一部分控件的消失。这里立刻消失应该是最常见的,当然你也可以根据自己的需要选择不同的效果。

【构件顺序】这部分内容是用 keynote 做原型的重中之重。可以看下我的截图



在构件顺序的面板里,我们可以自由设置【出现】【动作】【消失】的出现时间。想要实现复杂的效果,往往就意味着,当有一个用户“点击”的输入后,我们需要安排后来n秒内的界面变化。其中可能包含了原有控件的变化,新控件的出现,还需要设置所有事件的触发事件,持续时间,后续触发事件。

总的来说,用 keynote 做原型主要包含了以下环节

  1. 添加界面元素,以及将一部分元素【打包成组】
  2. 为元素(组)添加【出现】【动作】【消失】事件
  3. 利用【构件顺序】功能,设置不同事件之间的逻辑
(Ps:用“【】”框住的都是 keynote 里面的功能)

下面说一些自己总结的Tips
  • 控件元素的分组在开始前最好想清楚。因为添加了“事件”以及“构建顺序”后,如果取消分组,这些原来的设置都需要重新来过。当事件非常多的时候,很麻烦。
  • 有“模块思维”。平时常见的程序反馈,是由“原来控件的动作”和“新控件的动作”组成,而后者很可能又可以分为不同的部分,比如新控件的“出现”“动作(移动之类)”,以及跟原有控件之间的互动。“模块思维”帮助我们在【构件顺序】面板中,面对着可能多达几百个事件时,不会太混乱。
  • 利用PPT注释添加“用户输入”。原型主要是为了演示,所以我们一般会在演示时加上自己描述,比如“这时用户会点击一下XXX”,把用户输入写在PPT的注释区域,可能帮助我们梳理这个页面所表现的内容。
  • 在开始做原型之前,一定要对所有能够添加的效果有个了解,根据自己的需要进行调用。
  • 还有就是找一个大一点的屏幕,原因嘛设计师都懂的。

至于其他的原型工具,常见的还有
  • Axure 特点是,可以在浏览器中预览,保真度高的时候可以直接给用户操作,因为原型会根据用户操作鼠标的输入进行反馈。很强大。
  • keynote 做纯演示时,凭借本身丰富的动态效果,可以做出让人惊艳的小视频。具体可以参看问题描述中的链接。但问题是,原型展示时像是放电影,无法让用户模拟真实的可以随意输入的场景。
  • Balsamiq mockups 手绘风格,适合设计前期。
其实工具真的很多,前端加浏览器也可以。要说的是,不同的工具有不同的优势,根据自己的时间,经验,目的(是给老板看,还是给用户测试)等因素选择。补充一点:设计新手都喜欢追求高大上的工具,以为学会的工具就立刻高端起来。其实工具都是浮云,设计过程才是最重要的,工具只是帮你把过程的结果展示出来,切忌舍本逐末。

以上内容算不上详细教程,算是自己的一个经验总结吧。
感谢收看。
以我们动效设计师的视角来说,大部分Keynote做的原型,很Low,一点也不Hi。如果要用Keynote做原型,那么目的是为了迅速给予开发者提供简单效果的工具。高保真不但要求视觉细腻、交互接近实际情况、动画感也要接近实际应用。这些Keynote是不具备的。

当然,凡事无绝对,开发和设计师基情无限,一切尽在不言中/开发者实现前端动效的能力非常屌/产品、交互需要快速展示理念的情况下,keynote依然是非常非常不错的工具,原因有以下:
1.用mac的人基本能迅速上手
2.支持手机预览
3.制作速度快
4.模板多
5.有部分keynote超级高手做出来的东西确实也很棒

但是,一般技能水平的人(假设他/她 QC/Form/FramerJS水平和Keynote水平持平),以同样的时间制作Keynote“高保真原型”,所能达到的高保真程度,是比不了其他专业工具的。

虽然说工具不重要,工具仅仅是工具,但是优秀的人会根据场景选择最优工具。