摘要
由于个人对用户界面设计的兴趣,经常关注一些优秀的界面设计工具。不经意发现一个用 Keynote 或者 PowerPoint 来设计 iPad 或者 iPhone 界面原型的教程。这种方式简单易用,方便快捷,只需要导入现成的设计模板到 Keynote 或者 PowerPoint 就可以开始进行设计了。这篇文章主要翻译了作者 Amir 的这篇帖子: http://blog.amirkhella.com/2010/06/16/how-to-prototype-interactive-ipad-applications-in-30-minutes-or-less-using-apple-keynote/ ,其中详细介绍了用 Keynote 或者 PowerPoint 构建交互式的 iPad 或者 iPhone 应用程序的界面原型的详细步骤。
背景
通常你需要花多少时间把一个好想法转换成一个可以给最终用户测试的原型?几个月?一个月?一个星期?如果我们能在30分钟完成呢?
你是否想将你的下一个好点子或者好想法迅速地转换成一个界面原型,而不需要一些特殊的复杂的设计工具或者Wireframe工具呢?
你是否想把你的界面原型发送给你的朋友们,收集他们的反馈,而不必担心上传和部署应用程序到服务器等繁琐的过程呢?
你是否想将你的界面原型内嵌到你产品展示PPT里面去?通过简单的鼠标点击向听众展示这个产品是如何工作的,而不是列举一些枯燥的条目。
你是否想完成所有这些任务,而不需要写一行代码?
现有的这些界面原型工具都存在一个很大的问题,那就是你必须成为一个真正的界面设计者,你才能够设计出好看的交互式的界面原型。如果我们把设计的部分拿出来由专业的设计者来做,我们就可以简单地专注于界面布局,把不同的组件放到页面上,编辑他们的文本,给组件添加的链接到其他组件或者其他页面。通常我们都认为,界面原型可以很粗燥,看起来很丑也无所谓。但是,通过使用这样的模板工具,我们的界面原型也可以很漂亮,甚至看上去和真的一样。特别是在给潜在的客户或者投资者面前演示的时候,尤为重要。
视屏介绍
下面这个视屏展示一个界面原型的样本,这个样本通过 Apple 的 Keynote 和 Keynotopia 的 iPad 模板元素 (prototyping elements) 创建,没有使用任何其他的图像工具。你也可以看到我是如何在 iPad 上测试这个界面原型的,就像一个真正的应用程序一样查看了不同的界面和对话框。
下面是我在这个演示中使用到的界面元素,所有都是用 Apple 的 Keynote 创建的。
为什么使用 Keynote ?
Keynote 包含了强大的画图工具 (drawing tools),智能导航 (smart guides),风格 (styles),锁定 (locking) 和分组 (grouping) 等。母板幻灯片使我们可以在多个屏幕中重复使用界面组件,超链接使我们可以点击界面原型,而幻灯片之间的转换使我们可以创建在鼠标点击时产生很酷的动画效果。最后,它可以和 Adobe CS 的系列应用程序无缝地结合,我们可以方便的互相拷贝和粘贴图像内容。
如何用30分钟或者更少的时间创建一个类似的界面原型?
从 Keynotopia 网站上下载 iPad 界面原型模板 (Prototyping template),将文件 “iPad Prototype.kth” 安装到 -> Library -> Application Support -> iWork -> Keynote -> Themes 目录下。或者你也可以双击在 Keynote 中打开这个文件,然后选择“Save Theme”。这样,我们就在 Keynote 创建了一个新的主题 (Theme),可以用来创建新的演示文件,如下图所示。
当你基于 iPad 界面原型主题 (iPad Prototype theme) 创建一个新的演示文件的时候,你将会看到一个空白的幻灯片。要显示母板提供的界面元素,你需要在工具条中通过选择 “View” -> “Show master sliders”。
这样,母板就会显示在幻灯片面板的上方,我们就可以方便的从母板中拷贝我们需要的界面元素,然后粘贴到我们的设计幻灯片中。
第一步:描绘用户的使用流程
要创建界面原型,刚开始我们要定义不同的应用程序页面 (Screen) 以及用户在这些页面之间如何跳转。我通常使用一个状态图来表示,如下图所示 (使用 iPad 上的 Adobe Ideas 创建的)。
画一个正确的状态图非常重要,因为这会节约你很多的修改界面原型的时间。
第二步:将应用程序所有页面组合在一起
接下来,给应用程序的每个页面创建一个幻灯片,然后从母板拷贝和粘贴需要的界面组件到每一个幻灯片中 (选择一个母板 > 选择一个界面元素 > 拷贝这个界面元素 > 选择目标幻灯片 > 粘贴这个界面元素)。所有的界面组件都是通过 Apple 的 Keynote 创建的,因此它们都是完全可编辑的,例如改变大小,修改标签,改变颜色,添加或删除元素等等。每个组件是一个分组,包含了其他的小组件。你可以通过双击来选择一个小组件,或者使用工具条上的 (Ungroup) 按钮来取消分组,编辑小组件,然后重新创建分组。分组可以使我们方便的选择和移动多个界面元素。
提示:当你创建了所有的应用程序页面的幻灯片后,你会发现把所有的页面都会出现的界面组件放到一个单独的母板幻灯片中,有时候会很方便。这样如果你以后需要修改一些东西,只需要修改一个地方就可以了,会节约很多时间。
创建好每个页面的幻灯片之后,你可以复制 (CMD+D) 幻灯片然后添加其他的界面元素,例如对话框,提示框等等。
第三部:添加页面之间的交互 (Interactivity)
最后,是时候创建页面之间的跳转了。查看之前设计好的用户使用流程的状态图,在每个幻灯片,选择需要跳转到其他幻灯片的界面元素。例如,点击一个图片来显示一个网站个人信息的弹出框,你需要选择一个个人头像图片,然后在 “Inspector” 中设置设置超链接到目标幻灯片。就像这样对状态图中设计的每个跳转进行设置就可以了。Keynote 会在每一个有超链接的界面元素上显示一个蓝色的标记。
提示:Keynote非常聪明,在你重新整理幻灯片后,它仍然能够保证所有超链接指向正确的页面,即使你改变了幻灯片的顺序。
经常测试你的演示文件,仔细的检查,确保所有的超链接都指向了正确的幻灯片页面。
就是这些!现在,在你的演示文件中,就有了一个交互式的界面原型了。
在 iPad 中测试!
如果你想让用户来测试这个界面原型,看他们如何使用,你需要将它导出成 QuickTime 格式的文件。这样可以保证当用户点击一个没有超链接的地方的时候,不跳转到下一页。然后,你就可以用 QuickTime Player 7 打开这个界面原型,然后进行交互了。
如果你想在 iPad 中测试这个界面原型,你需要将这个界面原型导出成 PDF 格式的文件,然后给你自己发一封电子邮件或者放到 DropBox 中,然后在 iPad 中打开。在上面的视频中,我使用了 GoodReader 来显示这个 PDF 文件。
提示:不幸的是,iPad 上的 Keynote 不支持超链接跳转,所以如果你用 iPad 打开这个 Keynote 文件,它将只按照幻灯片的排列顺序跳转。
结束语
记住,界面原型不需要完美。它只是一种比文字表达更好的表达方式,用来表达你的想法。不要花太多时间,过度的设计,过度的优化。只是把一些东西和想法放到一起,让用户看到,并能够拿来实际的玩玩就可以了。比起花大量时间搞市场研究和调查,这样的界面原型能让你得到更深刻的理解和反馈。
下次再搞推销的时候,记得多做一些实际演示,少说一些空话。如果说一张图片胜过说一千句话的话,那么一个交互式界面原型胜过了一千张图片。
创建界面原型就像玩魔术一样:一旦你真正理解了将会在观众脑海里发生的魔术戏法的原理后,你就可以专注于思考和设计如何更好的展示给观众。所有的其他事情都是不重要的。
如果你觉得这个教程对你有用,或者你有其他的反馈和问题,请在下面留言。我会尽力的回复每一个评论。
近期评论