建站常识
产品交互原型设计工具分享
2010-03-16 08:31:00
交互设计师的一项重要工作就是进行产品原型设计(Prototype Design)。而产品原型设计最基础的工作,就是画出站点的大体wirefra📖me(框架图)并结合批注、大量的说明以及流程图💧等,将自己的产品原型完整而准确的表述给产品、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相对于其他原型工具,比较有特色的有以下几个方面:
#p#·区域4站点地图(页面列表)
可以自动根据页面列表,快速绘制树状的网站架构图,而且可以让架构图中的每一个页面节点,直接连结到对应网页。
·区域6 Masters共用模板功能。
在设计Wireframe时,如果能善用M෴asters共用模板功能,您可以节省下不少重复修改的时间,Master可以是经常被使用到的widget集合,例如:页首、页尾、或是一个登入的画面。
·区域8为高级交互操作区域
Wireframe里的大多数的widget可以对一个或多个事件产生动作,包括 OnClick、OnMouSEOver和OnMouseLeave诸如此类。模拟出逼真的交互工作,十分方面的进行演示和讲解。
·自动输出网站原型 (HTML Prototype)
Axure RP可以将您设计的wireframe,输出成符合Internet Exp🥃lorer或Fﷺirefox等不同浏览器的HTML prototype。
也就是说,您不需要安装Axure RP或任何其它软件,就可直接将产生的Prototype档案email给客户🍌,或是发布到网页服务器让客户或使用者检视和操作,Prototype包括 Sit✤emap、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文档,以提供演示与开发等方面完胜,我们给于其★★★★★评价,不愧为产品经理基本基本原型设计和交互设计师做快速高保真原型的一把利器。
原文://webteam.tencent.com/?p=1741
近期更新
- [2025-02-11 14:34:54] 加拿大预测网-在线预测:青岛高端网站定制化设计
- [2023-06-25 23:22:29] 加拿大预测网-在线预测:优秀网站设计的五大特点
- [2023-04-27 14:05:55] 加拿大预测网-在线预测:Html 5 响应式网站设计制作
- [2023-04-10 11:07:30] 加拿大预测网-在线预测: 网站建设制作流程知多少
- [2022-10-14 10:11:30] 加拿大预测网-在线预测:做网站设计应该更看重框架搭建还是视觉观感?
- [2022-08-09 15:57:48] 加拿大预测网-在线预测:以“产品”思维搭建网站!
- [2022-08-08 09:12:57] 加拿大预测网-在线预测:一家公司的网站应该有哪些板块内容?
- [2022-08-05 09:28:06] 加拿大预测网-在线预测:企业网站建设为什么要设置新闻板块?
- [2022-07-04 15:58:06] 加拿大预测网-在线预测:网站加拿大预测网-在线预测设计的好看,这个网站就成功了一大半!
- [2022-05-20 09:34:19] 加拿大预测网-在线预测:网站后台管理系统是什么?有什么作用?
- [2022-05-17 11:29:32] 加拿大预测网-在线预测:作为消费者,应该如何选择一家水平高的网站建设公司
- [2022-05-17 11:27:01] 加拿大预测网-在线预测:高端网站定制与模板化网站应该怎么选择?
延伸阅读
- [2009-09-27 21:49:00] 加拿大预测网-在线预测:互联网产品交互事件分析
解决方案
加拿大预测网-在线预测: 轮胎行业网站设计解决方案 加拿大预测网-在线预测: 机械行业网站设计解决方案 加拿大预测网-在线预测: 房地产行业网站设计解决方案 加拿大预测网-在线预测: 科技企业网站设计解决方案 加拿大预测网-在线预测: 电子家电网站设计解决方案 加拿大预测网-在线预测: 食品行业网站设计解决方案 加拿大预测网-在线预测: 集团公司网站设计解决方案 加拿大预测网-在线预测: 企事业单位网站设计解决方案 加拿大预测网-在线预测: 外贸行业网站设计解决方案 加拿大预测网-在线预测: 健身运动网站设计解决方案 加拿大预测网-在线预测: 美容与化妆品网站设计解决方案 加拿大预测网-在线预测: 建筑设计行业网站设计解决方案 加拿大预测网-在线预测: 物流行业网站设计解决方案