这是一篇来自Adobe开发者中心的文章,由RIAMeeting社区翻译小组成员王贺翻译,原文地址是:
http://www.adobe.com/devnet/fireworks/articles/atv_fw_interaction_design.html
在下面的4个简短的视频录像中,我演示了如何使用Adobe Fireworks CS4完成交互设计,非常快速的制作交互原型,以及如何使用Fireworks的设计工具到您的完整的设计过程中,从概念到开发。
在创建一个互动的原型之前,你需要为每个页面和包含的内容创建一个定义了结构和组织的线框。 Fireworks CS4 允许你在一个单独的文件中利用结构层样式和线格创建所有的页面。 Fireworks也包含了供通常用户界面使用的可复用的组件,例如:按钮,复选框,下拉列表——这样你可以每一次都专注于设计个性化的,而不是绘制或者再创作用户界面的组件。
这个原型也许是简单的允许用户用简单的点击就可以在页面间进行跳转,或者他们也许包含复杂的特性例如图片切换,翻转,甚至绑定在内部的动态内容,例如滑动切换和互动地图。 在这段视频中你将会看到我如何使用热点和片将互动内容添加到线框,并在其中内建导航,弹出式菜单的功能。 我会向你展示如何使用按钮和控件来创建更多有效的原型,并使用html的片段在输出的HTML文件中包含代码。
这个设计工具作为整体设计流程的一部分被包含在Adobe Creative Suite 4中。 例如,我在Adobe Illustrator中利用图例,复杂的矢量图形,演示创建网站地图的流程;Fireworks 作为线框设计跟Adobe Dreamweaver 一块创作原型,用Adobe Photoshop做视觉设计,并使用InDesign 做最后的文件设计。 Fireworks 可以打开Illustrator 和Photoshop 文件,并且你可以在InDesign 中很容易的替换导出的线框作为评注。
必要的准备
为了实践本视频中的大多数部分,你需要下面的软件和文件:
Fireworks CS4
示例文件:
- files_f1498v1661.zip (ZIP, 1 MB)
预备知识
具备使用FireWork工作的基本知识是很有帮助的。
使用Fireworks 做互动设计以及快速建立原型。
下载示例文件,并按照视频开始实践。 你重现这个设计需要的所有导出的CSS文件和图片都包含在里面。 享受这段视频吧~
信息和互动设计

在Fireworks里使用页面,层,方格,引导线和组件来创建线框。 利用主页面,共享层,内建工具,和通用库快速的创建复合的线框。(11:14)
互动原型设计。

在Fireworks 中创建一个导航条,并适用片段和热点为线框添加互动功能。 添加简单的互动使得用户可以在页面之间进行跳转,模仿在网站中浏览的过程。(10:43)
快速原型建立

在Fireworks 中使用不相交的变换图像,灵活的组件,和导出的html和图片来迭代和快速建立原型 在原型中添加更复杂的互动元素,来模拟窗口跳转,甚至包含动态内容。(9:42)
完成设计过程

让我们来看看如何使用Adobe 的设计工具完成整个设计过程,以及Fireworks,Illustrator,Photoshop和InDesign 怎样进行联合工作以提升你的团队的效率。 从概念构想,到框架设立,到视觉设计,到印证实现,Adobe Creative Suite工具协同工作都能进行高质量高效率的生产设计。
我们还可以知道些什么呢?
访问Fireworks 开发者中心可以阅读到其他的文章,和使用Fireworks 进行信息和交互设计,在网站和移动设备上进行原型创建的教程。 同样你可以观看我互动原型创建部分的屏幕录像,按照上面的步骤实现原型的设计,我在MAX 2009大会上演示过这个部分。
最后,从上面在“快速原型设计”视频中演示的过程中,你也许会对那三个从Fireworks CS4中导出CSS和图片的示例很感兴趣,在那个部分我向你展示了如何创建和组织网页设计,并准备将其从 Fireworks CS4导出成为CSS和图片。
关于作者
David Hogue是Fluid公司的信息设计和可用性方面的主管,这是一家在旧金山的数码设计及开发的公司,专注于电子商务和RIA应用开发。 他使用他的心理学以及认知科学培训实践,来学习人们如何在数码世界中进行学习和工作,同时也利用工作流程模型和用户界面来高效准确地了解用户的需求和期许。 David曾在来自各种不同领域客户的项目中工作过,包括嘉信銀行(Charles Schwab),华纳兄弟(Warner Bros),The North Face,锐步(Reebok),和Timberland。


.gif)





发表新评论