当前位置: 首页 > 图文教程 > 网页制作 > 心得技巧 > 分享比较热门的原型设计工具

心得技巧
IE8 Beta 1两个地方需要大家注意
提高网站性能中内容有关的10条原则
网页设计者应该从三个方面优化网页
Web 设计 实现干净代码的12条定律[图文]
网页设计必备工具 firefox Web Developer插件 CSS工具组教程
UCenter Home 站点添加统计代码
9款很棒的网页绘制图表JavaScript框架脚本
提高网站可用性的10个小技巧
网站维护页面的列表制作技巧
B2C 网站用户体验细节设计参考
收集12个实用的网页在线工具
设计参考 漂亮和原创的博客设计
收集25个知名网站标志中使用的字体
极尽简约的网站设计实例
个性化创意鲜明的网站设计实例(30个)
水平滚动的网站设计 小结
更受欢迎 更具创造性的深底色网页设计实例
有创意的关于我们网页页面设计
整洁漂亮的网页设计的4项原则
设计参考 WordPress建站成功案例

心得技巧 中的 分享比较热门的原型设计工具


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-03-18   浏览: 74 ::
收藏到网摘: n/a

交互设计师的一项重要工作就是进行产品原型设计(Prototype Design)。而产品原型设计最基础的工作,就是画出站点的大体wireframe(框架图)并结合批注、大量的说明以及流程图等,将自己的产品原型完整而准确的表述给产品、UI、重构/开发工程师等等,并通过沟通反复修改prototype 直至最终确认,然后进入后续的设计开发流程。

要完成以上复杂的设计和沟通工作,需要一个好的原型设计工具。这里就目前常用的和比较热门的工具来分享一下:
Word(产品经理比较常用)
Fireworks(交互组内推广的)
Balsamiq Mockups(近期曝光率比较高)
Auxre RP(业界圈子内广为流传)

一、优势劣势对比

二、操作界面对比
Word:基本是通过绘图工具栏的各种线框来画wireframe。

Fireworks:通过公共库的WEB原型组件库画wireframe。

Balsamiq Mockups:操作类似FW,通过顶部的控件库拉取到工作区域画wireframe。

Auxre RP:基本操作也和FW,Mockups类似,3是工作区域,从5控件库里拉取到工作区域画wireframe。

控件库内含了许多会经常使用到的widget物件,例如:按钮(Button)、图片(Image)、文字面板(Text Panel)、单选按钮(Radio Button)、复选框(Checkbox)、下拉式选单(Droplist)。甚至可以藉由Dynamic Panel的功能,来设计动态介面,例如:下拉式选单、页签,甚至是更进阶的AJAX或RIA的功能。

Axure RP相对于其他原型工具,比较有特色的有以下几个方面:

·区域4站点地图(页面列表)
可以自动根据页面列表,快速绘制树状的网站架构图,而且可以让架构图中的每一个页面节点,直接连结到对应网页。

·区域6 Masters共用模板功能。
在设计Wireframe时,如果能善用Masters共用模板功能,您可以节省下不少重复修改的时间,Master可以是经常被使用到的widget集合,例如:页首、页尾、或是一个登入的画面。

·区域8为高级交互操作区域
Wireframe里的大多数的widget可以对一个或多个事件产生动作,包括 OnClick、OnMouseOver和OnMouseLeave诸如此类。模拟出逼真的交互工作,十分方面的进行演示和讲解。

·自动输出网站原型 (HTML Prototype)
Axure RP可以将您设计的wireframe,输出成符合Internet Explorer或Firefox等不同浏览器的HTML prototype。

也就是说,您不需要安装Axure RP或任何其它软件,就可直接将产生的Prototype档案email给客户,或是发布到网页服务器让客户或使用者检视和操作,Prototype包括 Sitemap、Page Notes、Annotations和功能性的交互效果,是一个能有效测试所提议的功能和清楚沟通设计的工具。

·自动输出Word格式规格文件(Functional Specification)

Axure RP可以输出Microsoft Word的格式的文件,不只容易阅读,更可以展现规格文件的专业,能有效的记录、沟通和取得设计的最后确认。

规格文件包含了目录、网页清单、网页和附有批注的Master、撷取的画面、Annotation、Interaction和Widget特定的信息,以及结尾文件(例如:附录),规格的内容与格式也可以依据不同的阅读物件来变更。

三、实例操作对比

这里,我们利用以上各工具,实际操作一次,制作一个简单的原型设计实例,看看各个工具的表现。
我们将实际制作一个Tab View的例子。

Word:

不足:对交互表达不好,也不利于演示。(一个基本的页面要分3页,且一页一页看才能表达交互效果);没有标准样式,各种线框画的很随意。

FW:页面效果同Word。

不足:对交互表达不好,也不利于演示。(一个基本的页面要分3页,且一页一页看才能表达交互效果);控件的扩展和修改不便利。

Balsamiq Mockups:

不足:对交互表达不好,也不利于演示。(一个基本的页面要分3页,且一页一页看才能表达交互效果);输出界面手绘风格,随意性较大。

Axure RP:基本的外观和Word、FW相差不大。

但最奇妙的是他能生成一个真实的页面,可以演示Tab切换的效果,同时生成一份word格式的交互说明文档(实例暂不提供下载)。

四、总结
通过以上几个方面的比较,4个原型工具在绘制wireframe的基本操作上不相上下,各具特色。但Axure RP快捷而简便的创建基于目录组织的原型文档、功能说明、交互界面以及带注释的wireframe网页,并可自动生成用于演示的网页文件和word文档,以提供演示与开发等方面完胜,我们给于其★★★★★评价,不愧为产品经理基本基本原型设计和交互设计师做快速高保真原型的一把利器。