原型设计:
线框图描绘的是页面功能结构,它不是设计稿,也不代表最终布局,线框图所展示的布局,最主要的作用是描述功能与内容的逻辑关系。原型图是最终系统的代表模型或者模拟,比线框图更加真实、细致。
原型设计的目的:
1.原型设计的核心目的在于测试产品,没有哪一家互联网公司可以不经过测试,就直接上产品和服务。
2.原型在识别问题、减少风险、节省成本等方面有着不可替代的价值。
3.虽然需求文档也是可以满足沟通需求的,通过用例将交互写到设计描述文档中,但是原型可以更详细地解释交互。
主要的原型设计工具:
1. Axure RP:
Axure RP,即Axure Rapid Prototyping是最常用的快速原型设计工具之一,帮助负责定义需求和规格、设计功能和界面的用户快速创建线框图、流程图、原型和规格说明文档,可用于应用软件和Web网站设计,支持多人协作设计和版本控制管理。
Axure RP的用户群体非常宽泛,包括商业分析师、信息架构师、可用性专家、产品经理、IT咨询师、用户体验设计师、交互设计师、界面设计师、架构师、程序开发工程师等相关从业者。
(1)Axure RP 特点:
1. Axure RP快速创建带注释的wireframe文件,并可根据所设置的时间周期,软件自动保存文档,确保文件安全。
2.Axure RP在不写任何一条html与javascript语句的情况下,通过创建的文档以及相关条件和注释,一键生成html prototype演示。
3. Axure RP根据设计稿,一键生成一致而专业的word版本的原型设计文档。
(2)怎样使用Axure:
1.基本控件很简单,拖拽相应控件(控件下方都有控件代表 名称可直接使用),然后布局整个页面。另外,模板的套用对绘制功能图以及页面布局有很大的作用。
2.给相关控件添加相关事件。
3.F5运行,看页面是否满足需求。
2. Balsamiq Mockups:
Balsamiq Mockups是一款快速原型的设计软件,既能快速设计草图,又能较好地进入到平时团队工作的流程和工具。基于Adobe Air,提供的原型图基于XML格式,能够流畅的在不同浏览器,不同操作系统平台下完美运行,可以在线使用,亦可以离线使用,能够很顺利地将其安装在Windows 7、FreeBSD、Ubuntu等平台中,高效率地完成每个原型设计任务。
(1)Balsamiq Mockups的特点:
1.可存储:告别那一堆堆的纸质线框图吧!
2.易使用:只能说在某种程度上容易使用。
3.手绘风格:简约清爽,属于讨论型风格。
4.丰富:从按钮到输入框,从导航条到页面、表格,甚至包括了最潮的Iphone元素。
5.易扩展:可使用XML语言保存元素,也可以导出PNG图片,可以插入到任何项目。
6.跨平台:Windows、Mac OS、Linux下都可以使用
(2)Balsamiq Mockups使用方法
1.Balsamiq Mockups使用非常简单,只要拖动上方的控件到下方的设计区域即可。
2.单击控件即会弹出控件的属性界面,每个控件都有不同的属性。
3.最上方的一排按钮分别为撤销、还原、重复、剪切、复制、粘贴、删除、组合、取消组合、锁定位置、画面大小。
3. justinmind
JustinMind可以输出Html页面,与目前主流的交互原型设计工具相比更为专属于设计移动终端上app应用。Justinmind Prototyper的收费版本提供iPhone,android,ipad等交互组件,并有丰富的动态效果,但免费版就要简单一些。Justinmind Prototyper同时提供winxp,win7和mac os的版本。
(1) justinmind特点:
1.使用JustinMind,你可以在几分钟内利用其广泛的组件和交互绘制高保真原型。它提供了一些基本的形状,如矩形和文本,还有特定的组件,如菜单,表单或数据列表。
2.关于手势的交互效果:JustinMind提供了多种触屏的交互效果,例如滑动、缩放、旋转,甚至捕捉设备方向等等。在需要产生效果的部件中选择对应的手势即可。
3.可以创建自己的组件库。JustinMind为iPhone,iPad,黑莓,Android提供了多样的组件。你可以创建自定义组件库,方法是将排列好的单个组件放在一起,并将它们集体框选拖动到组件库。这样下次你就可以直接使用自己定义好的组件。
4.更为便捷的定义样式。相比Axure,JustinMind更好的提供了属性窗口,并且更好的支持捕获PS等软件的图像属性。
5.JustinMind可以导出原型的所有信息到Microsoft Word。能够一键生成及其规范的文档。
6.共享原型进行测试。JustinMind支持将原型上传到服务器并提供给他人进行测试,为产品的改进做出了良好的贡献。最为特别的是,基于usernote的服务允许你将原型放到移动设备上进行测试。
7.更友好的定义交互方式。在JustinMind中,你可以通过拖拽等方式来实现跳转、定向等交互效果,无需像Axure一样每一步都只能通过点击来完成。并且显示更为直观,如进度条。同时可以通过一些简单的无代码逻辑语句实现更为高级的交互效果。
8.全球范围内的复用、数据共享。每一个模板都让这一套组件有不同的视觉风格,变量允许将数据从一个屏幕迁移到另一个,甚至使用它们来检查是否满足条件。
9.发布和收集反馈意见。发布Prototyper作品到usernote后,全球各地的人将通过Web浏览器访问您的原型。他们的反馈结果将会实时的呈现在您的原型页面。
(2)justinmind使用方法:
通过拖拽等方式来实现跳转、定向等交互效果,无需像Axure一样每一步都只能通过点击来完成。
4.墨刀:
墨刀分为网页版和客户端,网页版可以直接使用,客户端在网页版的功能的基础上增加了诸如可以随时提取页面中某一颜色然后应用于对应控件等小功能。
(1) 墨刀特点:
1.组件方面,墨刀更有优势: 墨刀自带了很多成熟的组件,例如键盘,开关,手机模型等;
2.交互方面,墨刀简单快捷;
(2)墨刀使用方法:
1 新建项目。登陆墨刀的官网,选择新建空白项目。
2 输入项目名称。这里我们使用默认设备尺寸。
3 添加导航栏。从左侧的功能栏里找到导航栏,把它拖到制制定位置。
4. 添加轮播图。从左侧的”母版“中找到”轮播图“,将它拖到制定位置。
5.Sketch:
sketch产出的内容有一个很大的特点就是颜值高,非常人性化的一点,就是自带了很多模板,而且用来画交互完全够用,省去了从网上各种非正规渠道找资源的麻烦。
(1)Sketch特点:
1.矢量(矢量图形)
2.文件小
3.画布无限小
4.每个图层都支持多种填充模式
5.Symbol和Style
6.强大的文件导入工具
7.自动保留所有历史版本
(2)Sketch使用方法:
1、新建一个文本
2、轮廓化
3、编辑形状
4、拖动编辑点变形成自己想要的样式
Axure RP初体验:
1.首先打开后,自动新建了一个项目,如下,双击page1,进行布局

2.从左下角的部件库中选择一个组件,如ButtonShape,拖拽到页面中

3.选择部件,可以在工具栏或者右下角的属性栏里设置部件的属性值

4.现在一个最简单的页面就可以发布预览了


5.可以给按钮增加一个链接,跳转到其他页面,选中按钮部件,在右边如图所示,可以快速的创建一个链接,选择要跳转到的页面发布

本文主要介绍了五种原型设计工具的特点和使用方法,希望你能找到适合自己的开发工具。
浙公网安备 33010602011771号