产品经理画原型图哪些工具好用,求推荐~
1、Axure RP(Rapid Prototyping) Axure(读音为Ack-Sure)无疑是目前最受关注的原型开发工具,其能通过组件的方式帮助网站或软件设计师快速建立带有注释的原型(流程图、线框图),并凭借自定义可重用的元件、动态面板以及丰富的script能够建立基本功能或页面逻辑的动态演示文件。
Axure借鉴了office的界面,能够让用户快速上手,并且提供了丰富的组件样式修改,使得通过其能够创建低保真、高保真甚至接近于实际效果的界面。
然而最让人称道的是,Axure的丰富的脚本模式,可以通过点击和选择能够快速完成界面元素的交互,如链接、state切换、动态变化等效果,使得Axure能够生成十分接近于真实产品的原型。
另一方面,Axure能够导入其他人创建的元件库,使得Axure能够满足绝大多数类型产品的设计。
但Axure仍然有一个让人头痛的问题:对于中文的支持不太友好。
在小部分元件上输入中午的时候,经常需要像碰运气似的反复切换输入法,破坏了咱们设计师的用户体验。
瑕不掩瑜,Axure仍然是交互设计师的首选原型工具。
2、Microsoft Office Visio Visio在2000年被微软收购,并在2002年成为office2003套件中的一个组件,最新版本是2007。
Visio能够获得推荐的原因是因为Visio的适用性非常之广,从网站界面、数据库模型,到平面布置图到工艺流程图,Visio都提供了相应的元件库和模板来进行快速创建。
相较Axure而言,Visio更适合于传统行业的生产或流程设计,或者软件及互联网行业中的信息、数据和流程的说明,而不太适用于web界面。
因为其的基于web的元件库还是比较少,并且形式和结构也更类似于word中的图形工具,因此在原型开发效率上都有所不足。
3、Balsamiq Mockups 这个基于Adobe AIR Runtime的工具实在是有让人眼前一亮的感觉,手绘风格的元件样式粗犷淋漓,能创建接近于纸上手绘的原型文件。
其提供了丰富的手绘风格的web常用元件,包括常用的html控件、以及一些组合控件,如多媒体控制器、标签页、列表、Iphone界面元件等。
Mockups最值得赞赏之处在于其提供的多数组件都可定制外观,对于中文的支持也不错(选择View > Use System Fonts)。
4、Mockflow Mockflow和以上工具最大的不同在于Mockflow是一项基于Adobe Flex技术开发在线服务,提供了与Balsamiq Mockups基本相似的功能,甚至更丰富的组件,虽然其元件定制化不够强大,但其提供的元件库默认样式却非常适合用来做商业产品原型的搭建。
有一个让我爱不释手的功能是模板,可以设置基于任何页面的模板来进行新的页面设计。
与其他模板工具相比,mockflow有一个非常特色的功能,基于web的存储可以在任意电脑上联机打开,同时可以其他人进行快速的分享,并收集在线反馈意见,非常适合虚拟团队的原型设计交流。
虽然在线服务的基本帐号只能创建一个文件,但单个文件却没有限制页数,因此也基本上足够使用。
5、Pencil sketch Pencil 是一款基于Firefox的扩展组件,安装之后即可在Firefox的工具菜单中打开Pencil的绘图面板。
功能比较简单,仅能用以日常简单工作的辅助 说明。
提供的默认元件都是基于软件工程,因此更适合用于windows桌面程序的简易界面搭建,或者是基本的页面功能说明,并不适用于严肃的原型开发,但 好在体积小、又轻便,能够方便将网页中的元素直接拖到或者复制到当前的画布中,这也是Pencil安装在Firefox所带来的便利之一吧。
更多工具...在以上列举的原型开发工具都是较为常用的,也是在国内的交互设计师们比较常讨论的,但其实和Axure功能相似的软件还有很多,下面也就一些简单说明:6、GUI Design Studio 这 是一款真的非常强大的原型制作工具,没有在上面推荐的原因是因为我还没有实际体验过,但冲着这工程级的界面设计就没有去尝试的冲动,但是从官方网站的截图 和视频演示来看,这款软件的操作模式和前面的原型工具大有不同。
Axure之类多是基于页面的原型设计,对于web网站尽管很实用,但是对于软件界面的流 程设计却略显繁琐。
而GUI Design Studio却另辟蹊径,直接以建立元素与元素之间的关联的方式来自动化的创建动作流程,而从视频演示来看,这样的确很大程度上提升了软件界面原型搭建的 效率。
7、Prototype Composer Serena 公司免费提供的原型开发工具,功能确实强大,提供了基于项目管理主要流程的产出物文档模板、原型工具以及开发流程控制,这个软件的开发理念非常好,用这一 款工具来满足项目开发流程中各个环节的沟通和决策。
但软件的学习和使用成本比较高,要了解其中的全部功能,貌似需要花不少时间。
另外软件的效率和稳定性还 有待提高,试用的过程中多次出错及停止响应。
8、Lucid Spec 由 Elegance科技推出的Lucid Spec是一款很类似Pencil的原型工具,仅仅是提供了更多控件。
不过Lucid Spec强调了生成干净的说明文档的功能,这可能是针对于多数原型工具的自动化生成规范的冗余而言的,不过老实说Lucid Spec提供的原型界面太过简陋,并且生成的说明文档也未见优化有怎样的提升。
视频介绍9、Irise Professional Edition Irise与其他原型工具相比其中一个...
app的原型图怎么做
AxureRP是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档.功能非常强大!
ui和画原型图的区别
UI即User Interface(用户界面)的简称。
泛指用户的操作界面,包含移动APP,网页,智能穿戴设备等。
UI设计主要指界面的样式,美观程度。
而使用上,对软件的人机交互、操作逻辑、界面美观的整体设计则是同样重要的另一个门道。
好的UI不仅是让软件变得有个性有品味,还要让软件的操作变得舒适、简单、自由,充分体现软件的定位和特点。
原型图的产品最初的构想图,一般是产品经理绘制,内容比较粗糙;设计效果图,一般是由设计师出图,根据产品经理的原型图,进行设计后的很形象、美观的图‘;框架结构图,指的是整个软件的架构。
UI即视觉:是根据原型设计的包装,美化,使原型更完整的出现在大众的眼前。
原型图:是包括交互、线框在内的产品雏形。
Sketch 和 OmniGraffle 哪个更适合画原型图
OmniGraffle比较万金油,流程图框架图交互稿视觉稿啥都能干,加上一些跳转还能代替Axure,导出导入格式也很丰富,最大的两个缺点:1、移动稿真机演示比较费劲,2、无法切片输出。
Sketch完美解决。
1. 如果你要画流程图,OmniGraffle更好。
2. 如果你的原型图不要求像素级对齐,不需要导出到iPhone上看,不需要处理位图,不需要画图标,OmniGraffle更好。
3. 画图速度、软件稳定性、各种功能的位置,在使用熟练程度相同的情况下OmniGraffle目前略微胜出一点,Sketch还有很多优化空间。
总之,只描述框架和流程,选OmniGraffle,要演示给其他人,选Sketch,只输出一份文档,产品经理选OmniGraffle,设计师选Sketch。
如何设置手机APP原型
目前比较好的解决办法是:1.下载Axure 2.如果是给itouch或者iPhone用的,比较好办,直接用320*480的分辨率画好辅助线,然后画原型3.按F5生成原型的时候,在“Mobile/Device”选项中可以设置适配移动设备的特殊原型4.设置说明见下图:(页面大小显示我的这个设置是按320*480的大小,默认不缩放)5.用你的移动设备访问你生成的原型链接(如本地服务器,或Dropbox托管)6.把该页面创建一个桌面快捷方式7.完成(有icon,有闪屏)另:想做鼠标动作或者复杂的页面交互比较麻烦,不推荐,尽量简洁。
APP交互原型图 怎么画?
Low-fi,即低保真原型图,整个APP设计阶段,设计师真正开始上手的环节。
待PM制作好PRD文档和逻辑流程图之后,交互设计师开始依据已有的结论,画出Low-fi。
Low-fi的作用1. 方便团队进行方案的讨论和统一。
就像使用场景Scenario和用户画像Personas,团队每个成员脑海中所理解的都会有所不同,但通过PRD,咱们可以进行至少是大体上的统一。
而在这基础上,APP的具体画面和流程,每个人都有自己想象的视觉效果。
Low-fi就在此时起了相同的作用。
当然统一的进一步促进效果是,进行后面核心功能的深入探讨,将概念落实到实施方案,并验证逻辑上是否能跑通,以及主页面元素的确定。
2. 方便开发人员进行整体架构的布置,开始着手一些基础元素的部署。
3. 做出demo进行内部尝试、小范围的用户调查,一般会有一些更改,不会影响项目主方向,大多是功能上的调整Low-fi 的处理工具与文件要求作为交互设计师,在Low-fi阶段多使用的是sketch,PS更侧重于用来做图片的处理。
出发点还是更多的从效率上进行考虑,sketch运行速度非常快,文档小,测量距离方便,可复用的图层组(symbol),做好图之后导出多倍图也十分方便。
所以在此阶段做草图,sketch是不二之选。
然而,对Low-fi的文件处理也有一些要求,主要分为视觉效果和文件名整理。
视觉效果上倾向于使用黑白灰无色彩感的设计方案,目的是为了降低视觉上的干扰,让设计师和团队其他成员,将精力重点放到APP本身的功能完善和逻辑完整上面。
而文件名的整理主要表现在图层命名需要规范。
统一的控件用symbol进行管理,symbol的命名建议使用驼峰式,即每个单词间没有空格,每个单词首字母大写(这里说的是大驼峰式,即第一个单词的首字母也大写了)。
...
有哪些好用的在线界面原型工具,且支持IE
十大界面原型与布局工具作者夏梦竹工具开发者原型设计SolidifyPowerMockupAntetypePOP摘要:原型设计能起到有效沟通的作用,漂亮,直观的原型图更是让人赏心悦目。
本文罗列了2013年最新的10大界面原型与布局工具以帮助设计师和开发者创建出更加优秀的产品。
创建网页或者程序不仅要关注主页的排版以及与主题想匹配的图片,还应注重视觉设计,这是因为它更能吸引用户进而提升搜索量。
因此,项目开发首先需要确立良好的设计,创意是必不可少的。
所以,项目经理、Web设计师、开发者在线框和原型工具方面需要具备一定的功底。
本文罗列了2013年最新的10大界面原型与布局工具以帮助设计师和开发者创建出更加优秀的产品。
1. SolidifySolidify允许用户在模型、线框或者草图中获取原型图。
此外,你还可以快速地查看屏幕界面原型。
如果在桌面、计算机或者手机上运行Solidify还能轻易地测试出项目原型。
如果你没有太多的时间花在这上面,你也可以共享给其他测试人员,随时随地获取反馈意见。
2. PowerMockup专为设计师准备的PowerMockup在创建PowerPoint时为线框提供模板。
包含各式各样的模板,包括菜单、表格、文本框、按钮和标签。
当你在创建PPT时你可以轻易的将这些模板拖入使用。
另外,用户还能在库中添加自己的条目,只需选择PPT的外形,然后点击“添加模板”标签,一款自定义的模板即可轻松创建。
3. Antetype当你创建大型的且连续性的项目时,Antetype是最佳选择,这是因为它允许开发者创建一整套的构件库。
该构件库可收集各小部件,在原型中方便易用。
此外,每个小部件都有一定数量的定制和默认状态可单独或者同时进行编辑。
因此用户在编辑时无需使用不同的副本,Antetype可适应不同项目的需求。
4. UXPinUXPin是为那些不擅长UX设计的开发者而开发的。
经验丰富的UX设计师为UXPin提供了一整套的完整的工具包。
在UXPin上用户可以为自己的项目找到所需要的模板。
他们通过上传UX和项目文件来获取模板,比如Project Canvas、Project Kick Off、Business Model Canvas、Personas等等。
此外,用户无需来回收发邮件,因为在这里任何项目都可在一起工作。
UXPin旨在帮助项目经理开发适应任何一款分辨率和设备的响应式线框和原型。
5. QuirkToolsQuirkTools让网站创建更加简单和便捷。
利用QuirkTools构建Web应用可帮助用户创建属于自己的一款应用。
Wires就是典型的例子,该应用帮助用户创建基于桌面、移动手机或平板电脑的线框模型。
此外,QuirkTools还能让开发者与同事、客户共同协作打造最完美的设计。
6. Wireframe.cc利用Wireframe.cc即可轻易的创建线框。
Wireframe.cc支持有限的调色板和模板,以简洁为主。
有两个模板供选择:移动手机和浏览器窗口,前者包含景色和垂直风格;后者则是纵向和横向风格。
有了Wireframes.cc用户可清晰的看到整个创建过程。
7. EaselEasel是一款基于浏览器的Web设计工具,允许用户记录模型和创意。
其功能包括按钮、表和文本框。
这款工具还集成了Twitter Bootstrap库贯穿其他额外的图标和颜色。
此外,Easel 让用户在Web中设计保持最佳像素,用户可以使用先进的工具比如CSS3、Web字体,无需在浏览器和文本编辑器之间来回查看,告别繁琐的过程,轻松创建应用。
8. InVisionInVision让你以高水准的级别快速创建令人印象深刻的原型。
利用这款工具,用户可在很短的时间内链接到UX草图、设计以及线框,还能与其他团队分享该项目。
InVision使设计演示更加轻松方便,用户可以在项目中进行实际演示,在浏览器中加载或者以SMS形式连接到移动设备上。
该工具还支持追踪功能,让你轻松查看项目进度。
9. Proto.ioProto.io这款工具完美适合设计师在触摸屏幕上的小工具。
支持主流的移动触摸风格和手势,包括swipe、pinch、tap、zoom、tap-hold。
此外,还能整合动画屏幕转换比如,幻灯片、旋转、流、翻转等等。
该工具不仅仅是为了生产先进的屏幕转换,还能允许用户学习和应用最基本的动画技能比如在原型创建中的移动、缩放、旋转等等。
10. POP有了Prototyping on Paper (POP)创建iPhone原型不再是难事,其提供了一个传统的高科技线框技术。
没有复杂的软件,所有的用户需要在纸上或者笔记本上绘画或绘制出线框。
该线框仅通过摄像头拍摄,利用POP确保草图能自动调节对比度和亮度,然后通过“链接点”连接到草图来设计模板。
首先确保任何事情都在完美状态,用户只需点击“play”并模拟接口即可。
最后:在设计网页或程序之前,需要把界面给“画”出来成为原型设计,就像动画片要画分镜头、手稿一样。
原型设计能起到有效沟通的作用,漂亮,直观的原型图更是让人赏心悦目。
有了这些工具,原型和线框变得更加简单和方便,即使是初学者也可设计自己的网站或者应用,赶紧尝鲜吧。
当然,原型工具还有很多很多,欢迎与我们分享。