原型设计是交互设计师与PD、PM、网站开发工程师沟通的最好工具。而该块的设计在原则上必须是交互设计师的产物,交互设计以用户为中心的理念会贯穿整个产品。利用交互设计师专业的眼光与经验直接导至该产品的可用性。

简单说,“原型”是在项目前期阶段的重要设计步骤,主要以发现新想法和检验设计为目的,重点在于直观体现产品主要界面风格以及结构、并展示主要功能模块以及之间相互关系,不断确认模糊部分,为后期的视觉设计和代码编写提供准确的产品信息。

目的:

下列角色使用用户界面原型:

用例阐释者,用来了解用例的用户界面;

系统分析员,用来了解用户界面如何影响系统分析;

设计员,用来了解用户界面如何施加影响及它对系统“内部”的要求;

类测试人员,用来制定测试计划活动。

如何高效完成优秀原型设计,工具自然非常重要。下面我们介绍一些常用的原型设计工具,供大家参考。

093739_5202100455760

Axure Rp

Axure RP是美国Axure Software Solution 公司的旗舰产品,该原型设计工具可以专业快速地帮助完成定义需求规格负责设计功能和界面的原型设计者快速创建应用软件或Web网站线框图、原型、规格说明书等。Axure所针对的用户包括用户体验设计师(UX)、交互设计师(UI)、业务分析师(BA)、信息架构师(IA)、可用性专家(UE)和产品经理(PM)等等。

8.5
类别: 办公软件    大小:12.9M    语言: 中文
查看详细信息 >>

Axure RP 能让操作它的人快速准确的创建基于Web的网站流程图、原型页面、交互体验设计、标注详细开发说明,并导出Html原型或规格的Word开发文档。(通过扩展还会支持更多的输出格式)

• 网站架构图   (Site Structure)
• 示意图       (Wireframe)
• 流程图       (Flowchart)
• 交互设计     (Interaction Design)
• 原型设计     (HTML Prototype)
• 规格文档     (Specification)

用Axure RP设计线框图和原型会有效提高工作效率,同时方便团队成员一起完成协同设计,可以向用户演示和交流以确认用户需求以及自动产生规格说明书,极大地优化工作方式:设计更加高效、可快速体验动态原型,帮助清晰有效的沟通。Axure RP的可视化工作界面以让用户轻松快速的简单用鼠标拖拽的方式创建带有注释的各种线框图。无需编程,就可以在线框图上定义简单链接和高级交互。同时该工具支持在线框图的基础上自动生成HTML原型和Word格式的规格说明书。

093739_5578068375587

Balsamiq Mockup

Balsamiq Mockups是一款快速原型的设计软件,由美国加利福利亚的Balsamiq工作室推出,它真正抓住了原型设计的核心与平衡点——既能快速设计草图,又能较好地进入到平时团队工作的流程和工具。它基于Adobe Air,能够流畅的在不同浏览器,不同操作系统平台下完美运行,可以在线使用,亦可以离线使用,能够很顺利地将其安装在Windows 7、FreeBSD、Ubuntu等平台中,高效率地完成每个原型设计任务。

2.2
类别: 动画制作    大小:2.9M    语言: 英文
查看详细信息 >>

093739_9497833073139

Balsamiq Mockups具有极其丰富的表现形式,设计效果非常美观。它支持几乎所有的HTML控件原型图,比如按钮(基本按钮、单选按钮等)、文本框、下拉菜单、树形菜单、进度条、多选项卡、日历控件、颜色控件、表格、Windows窗体等。除此以外,它还支持Phone手机元素原型图,极大地方便了开发iPhone应用程序的软件工程师。

093739_7566633462905

Pencil Project

Pencil Project最初只是firefox的小插件,曾经得过Firefox插件Grand Prize大奖第一名,后来发布了独立软件。这款手绘风格的开源原型设计工具可以用来绘制各种架构图和流程图。Pencil Project内置丰富模板,可创建具有背景的多页面文档,支持文档内超链接跳转,支持富文本功能的文字处理,支持安装自制画笔和模版,具备所有标准绘图功能如对齐、堆叠层级、缩放、旋转等,支持添加外部对象,跨平台……可以创建可链接的文档并输出成为HTML、PNG、OpenOffice、Word、PDF等格式的文件。

093739_5188326776027

093739_9639424204826

Prototype Composer

Prototype Composer是一款Serena出品的能够让非技术型的用户进行原型设计的免费软件,同时它还包括商业过程、活动、用户界面、需求和数据,不但可以制作界面原型,方便用户在代码编写之前直观预览到网站的运行流程,同时还可以用来做项目管理,包括需求管理,数据管理。

093739_8944853842258

Prototype Composer提供了完整的集成环境,可轻松进行设计、建模,在进行开发之前使得商业应用软件合理化。该软件能够以可视化的形式描述软件的工作模型,提供可定制的Word格式说明书模板库,可自动组装上从模型中产生的数据,一键创建需求、功能、技术规格说明。

Omni Graffle

Omni Graffle软件由Omni Group公司出品,可以在OS X平台上轻松绘制漂亮的图表、树状结构图、流程图、页面等,可以用来规划电影或剧本的情节走向、绘制公司组织图、专案进度等等。该软件界面非常漂亮,模板丰富精致,容易激发灵感,辅助对齐和尺寸调整功能强大。目前还推出了iPad版本的应用(328元)。

093739_7637085437774

093739_8168911159038

GUI Design Studio(GDS)

GUI Design Studio是面向应用软件设计图形用户界面的专业工具,特别适合客户端软件设计。该软件能够快速将设计思路以可视化的方式来表现出来,并实现基本的交互,便于演示以及与客户完成有效沟通交流。GUI Design Studio是不需要软件开发和编码的完整的设计工具,它支持所有基于微软Windows 平台的软件,提供的了大部分C/S、B/S组件的示意图,可组合使用,是一款非常款适合界面原型设计者和界面原型开发员的软件,能够满足一般软件界面模型设计需要。

3.7
类别: 编程辅助    大小:4.4M    语言: 中文
查看详细信息 >>

093739_2767907261848

Office组件

大家熟悉的Office套件中有不少组件都可以用在原型设计中:如Visio、PPT、Word、甚至Excel等,但是操作过程相对比较繁琐。

093739_6459001839160

Visio:功能相对丰富,操作复杂。适合画流程图,框架图。不利于批注与交互的表达与演示。
Word:可以画线框图、流程图,添加批注与文字说明。对交互表达不好,不利于演示。
PPT:易于画框架图、做批注,也可以表达部分交互流程,擅长演示。

8.7
类别: 图像处理    大小:333.0M    语言: 中文
查看详细信息 >>

Adobe设计组件

一些视觉设计出身的原型设计人员因为软件使用习惯的原因,会选用Adobe的一些平面和网页设计工具来做原型设计工具。

093739_6896368741989

Photoshop/Illustrator:操作难度相对较大,易于画框架图、流程图。不利于表达交互设计,不擅长文字说明与批注。
Dreamweaver:操作难度大,需要基础html知识。易于画框架图、流程图、表达交互设计。不擅长文字说明与批注。

纸笔

当然,我们最传统的纸笔也是非常重要的原型设计工具,帮助我们在设计初期记录和整理思路,绘制最初的草稿。

093739_8362161099910

除了上面我们提到的这些,现在还有很多很多相关的原型设计工具他们各有特点,大家可以选择自己习惯地使用,也欢迎在文章末尾分享您的意见。无论是桌面软件、Web网站还是移动APP界面,原型设计都是产品设计流程中非常重要的一环,原型设计在一定程度上是为了说明用户将如何与产品进行交互,用来展现最初的产品设想,起到直观展示和有效沟通的作用。原型设计需要体现出用户在每个页面上期望看到的内容,以及这些内容在页面上的相对优先级,展示内容和结构及粗线条的布局,而不是视觉设计。原型是一个概念到实现的过渡,是不同部门对话的交流介质,重点在于沟通和帮助项目成员(比如团队中的工程师与设计师等)理解产品需求。 从整个项目的角度讲,在原型的设计与沟通过程中发现问题并加以调整,将更有效地避免将问题留到视觉设计和开发流程中,有效提高开发效率。

 

 

 

 

15款优秀移动APP产品原型设计工具

一新来小盆友问:“移动产品原型设计都用啥工具?”

答:“@#¥……&%*”

又问:“能详细说下各个工具吗?我比较一下”

“……”

好吧,谁让我那么的爱分享而你又是小美女呢

———————正文开始————————

首先,一款优秀的移动APP产品原型设计工具应该具备:

①.支持移动端演示(随时随地演示给BOSS,厕所&食堂&电梯…以体现我是那么的敬业——长点工资必备)

②.组件库(高效复用,谁用谁知道)

③.可以快速生成全局流程(程序猿看不懂拆解的,给丫的看这个)

④.在线协作(多个PM狗一起用)

⑤.手势操作、转场动画、交互特效…(这些都不需要,留给专业的交互、视觉,搞那么虚的不如多想想产品流程逻辑做做减法、写写xxRD啥的)

这些年,产品狗们折腾过的原型工具:

1. POP(Prototyping on Paper)

bd22fe7caa91b218822326fed2724c6f

算是移动App原型设计神器 ,很多公司在用:quora、sina、豆瓣、36氪、ifanr…

操 作轻巧简单:先用手机拍下草图原型(存到POP app内);然后开始编辑图片的哪个区域(按钮)链接到什么页面,添加跳转链接热区,就可以在iPhone上给小伙伴们演示了,并且POP内嵌的交互动作 如侧滑、展开、消失等,即可满足一般的动态演示需要。不太明白?

 

2、Pencil Project 
5501d33cd1f4642094bcfb5e7cfc9f7b
Pencil是一款开源的可以用来制作图表和GUI原型的工具,可以作为一个独立的app,也可以作为Firefox插件。内置模版可以帮你绘制桌面和移动界面中用到的各种各样的用户界面,包括流程图、UI和一般的通用图形。

通过它内置的模板,你可以创建可链接的文档,并输出成为HTML文件、PNG、OpenOffice文档、Word文档、PDF。Pencil Project还包含大量移动app模版。

 

3.Axure

9ad1f86475acdc1c2dff0823bc85399e

大 家都很熟悉了,这里主要说下移动端的演示,这样才充分表达原型意图。按F5生成原型的时候,在“Mobile/Device”选项中可以设置适配移动设备 的特殊原型(Axure 6.5以下版本),再用移动设备访问你生成的原型链接即可(该页面创建一个桌面快捷方式)。

 

4、Proto.io
319834358db3c1a964b2826e8bd225a7
Proto.io是一个专用的手机原型开发平台——可以构建和部署全交互式的移动程序的原型,并且可以模拟出相似的成品。它可以运行在大多数的浏览器中,并提供了3个重要的接口:dashboard、编辑器以及播放器。

dashboard 可以用来管理项目。编辑器是构建原型的环境,由一组设计和开发原型的工具组成,另外还可以构建交互。播放器用来观看原型,并与原型进行交互,并提供了相关 工具来标注和保留反馈信息。你可以直接在真实的移动设备上对原型进行测试。并且可以使用iOS或Android上的浏览器以全屏模式运行原型。

 

5、Moqups
af7722890edc0c7e23280a1e45ceb73f
是一个非常好的、免费的HTML5应用,通过它可以创建可爱朴素的线框图、实体模型和UI概念。该程序使用起来非常简单,并且有内置的模板可以直接使用(模板包括单选按钮、链接、图像占位符、文本框以及滑块等)。

它还提供了iPhone和iPad模板,以及iOS相关的按钮、提示框、picker、菜单、开关以及键盘等。你可以设置网格的尺寸,并预览和分享你的线框图。Moqups提供了一个很有用的功能就是对齐网格,可以使对象精准对齐。

 

6、UXPin
c5400f2b9fc877ee7f6e014716a2da8f
UXPin是DeSmart团队开发的一个简易快速的实体模型和在线可点击原型创作工具。它基于优秀的用户体验设计原则,在构建原型中,它提供了一个完整的工具包(该工具包具有良好的用户设计模式和元素)来从头构建一个出色的原型。

UXPin 具有响应式的断点功能,创建的响应式原型和线框图可以运行在不同的设备和分辨率上。另外该软件还提供了版本控制和迭代功能,可以轻松的共享预览,直观的注 解和实时的协同编辑和聊天。该软件拥有大量具有吸引力的用户界面元素风格(包括web,iOS,Android等),并且具有快速、灵敏的响应拖放接口。

 

7、Omnigraffle
6f93675188db4eabbe9f685762a3e6f7
OmniGraffle是由The Omni Group制作的一款带有大量模版可以用来快速绘制线框图、图表、流程图、组织结构图以及插图等类型图的app,也可以用来组织头脑中思考的信息,曾获得2002年的苹果设计奖。

它采用拖放的所见即所得界面,你可以用钢笔工具绘制自定义的模版或者图形,此外还自带Graffletopia提供的多个iPhone、iPad以及Android模版。

 

8、JustinMind
aebf5a2ea8f4bf5ac37c8c6aa4d26455
JustinMind是由西班牙JustinMind公司出品的原型制作工具,可以输出Html页面。与目前主流的交互设计工具axure,Balsamiq Mockups等相比,Justinmind Prototyper更为专属于设计移动终端上app应用。

JustinMind 可以帮助开发者设计更丰富、更具交互新的移动产品线框图,包含了iPhone、Android 以及iPad常用手势,滑动、缩放、旋转,甚至捕捉设备方向等,从而创造出更具交互性的原型。另外,它可以导出原型信息到Microsoft Word,生成规范的文档。

此外,你还可以自定义小组件,创建自定义组件库,并进行分类,不管对象是iPhone、iPad、黑莓、Android还是其他。

 

9、FluidUI
cfb8a202e338a588eaa4b34f2cb1ed33
Fluid UI是一款用于移动开发的Web原型设计工具,可以帮助设计师高效地完成产品原型设计。Fluid UI 内置超过1700款的线框图和手机UI控件,并且还会经常进行更新。

Fluid UI无设备限制,无平台限制(Windows、Mac以及Linux系统),支持Chrome和Safari浏览器(Chrome浏览器上的app也可离 线使用)。你可以使用Fluid Player来预览你的设计,收集意见和反馈。还可以以PNG、PDF方式输出。

Fluid UI使用方法简单,采取拖拽的操作方式,不需要程序员来写代码。另外,Fluid UI资源库非常丰富,有针对iOS、Android以及Windows 8的资源。如果你觉得库存资源不能满足你的需求,你也可以自行添加。

 

10、Protoshare
e856d8dcb2e57cc7b8362bf346d489cd
ProtoShare:在线网站开发协同制作工具是一个十分便捷的在线原型制作工具,侧重于团队协作。团队成员可以通过这个工具对工作进行审查,并及时提供反馈,对线框图或内容进行建议。

作 为一个强大的线框图和原型平台,Protoshare提供了大量移动工具集(有来自中心资源库的大量移动模版和大量2D、3D动画过渡)。通过“拖放”界 面,你可以快速创建交互式的线框图和移动原型,然后发送至iPhone、iPad或者Android设备进行测试,体验app的功能实现情况。

另外,Protoshare还支持分享和反馈功能,项目成员可以标记和跟踪的反馈信息来做出决定。而大量的资源库意味着你可以使用模版和获得的反馈创建移动产品线框图,进而演变为高保真的原型。

 

11、 Wireframe
dce53b6f73fc2d37c41e576eb2b99dce
Wireframe是一款具有“点击-拖-放”界面且超简单的线框图创作工具。双击实现编辑功能,有限的界面意味着你会把精力集中于你的想法上。还给每个线框图分配了特有的URL,便于标记和分享。
Wireframe有浏览器窗口和移动手机两个模版选项,移动版有纵向和横向两个选择。线框图的每个元素都可以编辑和转换。

 

12、InVision
20e207648e860189738a4772b13b44b4
InVision是一个便捷的产品原型生成工具,用户制作一个在线原型只需要四部:创建一个工程、上传视觉设计稿、添加链接以及生成在线原型。

确 切说,InVision提供的不是准确的线框图,而是一个快速原型的环境,可以把你的UX/UI草图快速连接起来。数字型的线框图和高保真的设计可以帮你 测试app的工作情况,同时该工具还支持协作和分享功能,生成的在线原型可以支持任何人在产品原型的任何地方评论,便于准确的交流。

针对iOS 开发,InVision还增添了其他功能,比如自定义主屏幕icon和自定义加载页面。

 

13、Mokk.me 
60cf913b81c2f7bc09acbac0a2828614

Mokk.me 是一个简单快速的原型工具,通过界面上简单的拖放操作,不用了解单线编程就能创作一个可以分享、测试以及多平台的app。目前,Mokk.me正在测试 中,但它是一个简单的基本的工具,任何人可以用它来创建app的布局。你可拖、放或者编辑小工具,可以搭建和连接页面,还可以选择过渡动画。它的特点还在 于页面和按钮、图片小工具、文本输入以及复选框形式。
另外,你可以借助HTML、CSS以及JavaScript完成app其他一些功能,一旦你创建了原型,你还可以进行分享,在iOS 和Android上进行测试。

 

14、iPlotz 
fd6389cb430181cb8d69b3594607f1dc

iPlotz 是一款可以用来创建可点击、可导航的原型和线框图工具,适合网站开发者和移动app开发者。你可以在一个可调整的页面拖放元件,然后连接起来,增加其他屏 幕或者页面的热点链接。你可以选择使用iPhone/iPad模版或者Android模版,任何模版都有独一无二的元件设置。

iPlotz界面明白易懂,支持协同工作、可分享的编辑权限、任务管理以及评价系统。另外,项目可以以IPML、JPG、PNG、PDF以及HTML形式输出。

 

15.Adobe Illustrator 俗称AI

8a78c6bf2a12fc85d2bb79ce0cefb1bc

这是adobe的一款矢量图设计软件,推荐给设计师转型过来的PM(没兴趣的跳过),电商圈不推荐再去费力学习其他软件,达到沟通的目的提高效率是王道。上图是设计出来的原型成品,可以结合上面提到的POP去演示,so easy。

写在最后:萝卜白菜各有所爱,没有最好的工具,只有最顺手的,最终的目的只有一个——沟通。

 

原文来自:互联网分析沙龙