原型设计工具调查报告
原型设计工具调查报告
一、 什么是原型设计
原型是一种让用户提前体验产品、交流设计构想、展示复杂系统的方式。就本质而言,原型是一种沟通工具。[Nauman 1982]认为:“原型是一个系统,它内化了一个更迟系统的本质特征。原型系统通常被构造为不完整的系统,以在将来进行改进、补充或替代。”
线框图描绘的是页面功能结构,它不是设计稿,也不代表最终布局,线框图所展示的布局,最主要的作用是描述功能与内容的逻辑关系。
原型图是最终系统的代表模型或者模拟,比线框图更加真实、细致。
二、 原型设计流程
步骤一:画草图
画草图的目标是提炼想法,并且最好给画草图加上一个时间限制,那就是15分钟。画草图要避免陷入审美细节,尽可能快速的导出想法才是关键。
步骤二:演示及评论
演示和评论的目标是把一些想法拿出来跟大家分享,然后进一步完善想法。在演示过程中,要做好记录,演示和评论的时间可以对半分。
步骤三:做原型
在明确了想法之后,就可以开始进行原型设计了。这个阶段需要考虑很多细节,找出切实可行的方案,运用合适的原型来表达。
步骤四:测试
原型的目标之一是让受众来检验产品是否达到了预期,因此可以请5-6位测试者,通过音视频捕捉等方式,看看产品原型是否被顺畅地使用了。
三、原型设计工具
3.1原型设计工具选择
选择什么工具来制作原型?主要考虑以下几个因素(排名分先后):
- 熟悉程度和获得工具的便利度;
- 所需的时间和精力;
- 可复用的代码/框架;
- 为测试创建可用的原型;
- 价格和学习曲线。
3.2原型工具调查结果
1、墨刀
墨刀是一款高效的在线原型设计工具,支持移动端、Web端及网页端的产品原型设计。无需下载,通过浏览器即可操作,同时支持软件下载,随时随地进行设计与模拟。学习难度低,自带的强大素材库和简洁的设计界面,可帮助快速构建产品原型。
价格:个人版免费;企业版可免费使用5天。
功能亮点:
- 集合4款工具,原型、设计、流程图、思维导图,全面覆盖产设研团队
- 丰富强大的素材广场,涵盖了最全最新的原型图、流程图、图标、项目等素材
- 简单高效的自动标注,轻松解决设计与开发的沟通难题
- 方便快捷的PRD模式,轻松展示产品需求
- 可同步Sketch、Axure文件,一键即可导入文件进行再编辑创作
- 支持导出为apk文件,模拟真实使用效果
- 支持云端保存与实时手机预览
- 支持多人团队在线协作,实时同步更新
使用场景:线框图、移动端原型、视觉稿、高保真原型、大型复杂项目、Web线框图、网页原型
2、Figma
Figma是一款在线设计协作平台,支持团队协作并实时同步,能够无缝衔接产品、设计与研发。无需下载,打开浏览器即可使用,同时也提供桌面端。但是缺点是没有中文版,由于服务器在国外所以国内使用起来加载很慢,另外Figma主打设计,原型交互这块比较基础。
价格:个人免费。
功能亮点:
- 支持多人团队在线协作
- 矢量工具很好用,如钢笔工具、布尔运算、扇形工具等
- Auto Layout功能能够帮助设计师提升效率
- 有很多插件可以使用
使用场景:平面设计、图形设计、视觉稿、网页原型
3、Moqups
Moqups是一款在线设计平台,基于Web架构,支持在网页端进行原型设计,能够轻松管理设计规范和资源。上手快,可实现团队成员间协作的无缝链接,减少沟通成本。但是这款无法进行平面设计,没有矢量工具。
价格:一个项目免费(限制200个objects和5MB内存)
功能亮点:
- 支持页面交互、命令交互、状态交互等多种交互触发方式
- 可直接绘制流程图,直观展现产品逻辑
- 支持多人团队在线协作
使用场景:高保真原型、线框图、 移动端原型
4、Axure RP
Axure RP是一款专业的快速原型设计工具,拥有强大的组件库,可快速完成产品或Web线框图、流程图及原型设计,需要下载电脑端软件使用,支持Window、Mac OS系统。但过于专业庞大的软件功能架构,对新手要求较高,需要花费较多时间在学习上。
价格:免费试用30天。
功能亮点:
- 支持动态面板和复用模板
- 支持HTML原型预览
- 支持生成规格说明文档
- 拥有无限画布的设计区域,便于添加文字解析
- 支持多人团队协作
使用场景:高保真原型、Web线框图、视觉稿、网页原型、大型复杂项目
5、Proto.io
Proto.io是一个基于浏览器的原型设计工具,无需安装即可使用。有丰富的原型组件,能够实现多种交互效果,预览、分享、评论这些基础功能也都有。
价格:15天免费。
功能亮点:
- 很多现成的组件和模板资源,拖拽即可使用,非常方便
- 能够实现多种交互,包括页面交互、高级动画、各种事件手势等
- 文件储存在云端,可跨平台访问,也可以支持评论协作
- 使用场景:高保真原型、Web线框图、网页原型
6、Balsamiq
Balsamiq是一款可快速绘制原型草图的原型图绘制工具。就像是用笔和纸绘制,界面简洁,上手快,适合低保真原型这种需要快速产出的产品原型。
价格:免费试用30天。
功能亮点:
- 手绘风格,简洁美观
- 支持UI控件自动拖拽与自动对齐
- 拥有独特且多样的元素库
- 支持跨平台使用(Windows、Mac OS、Linux)
- 可使用XML语言保存元素,保存为PNG文件
使用场景:低保真原型、网页原型
3.3旅游APP原型设计实例
Guides是一款旅行类App,这款App本身的颜色并不多,重点是要突出各个旅游景点的图片,所以这类App讲究后期对图片质量的把控,特别是图片占比较大的页面。在原型设计上,主要还是注意交互友好、对景点的介绍全面以及搜索方便等。
原型设计软件是将产品需求进行可视化的工具,根据实际需求,选择最适合自己的一款原型产品设计软件,才能够在工作中最大程度降低设计时间成本与后续沟通成本,支持你更好地完成原型设计,腾出更多精力投入到后续的产品需求完善与产品迭代中。