说起软件原型,有些人也许会对更广泛意义上的原型比较熟悉。其实两者本质也是一样的东西。原型设计在绝大多数的产品阶段中已不可或缺。经过思路,数据,信息,需求,评估等相关信息的收集和整理后,设计师往往需要将这些抽象的思维以原型的方式具体呈现出来。原型设计为非专业的股东们和用户们提拱了一种最直观的方式来理解设计者的思路和创造。也能保证最快最准确的从用户那里获取产品信息的相关反馈。

通常,常见软件原型有以下几种类型:

1.纸质原型 - 这主要是为了设计师自己记录创意和想法;

2.快速原型 - 最常见的原型,讲究快速呈现,应用范围广泛;

3.高保真原型 - 强调互动和用户界面,多用于呈现给股东和开发团队;

4.低保真原型 - 强调设计团队成员之间的互动和想法,运用广泛;

在常见的原型类型中,除了纸质原型,只需用到纸笔,其他的原型制作都需要使用原型设计工具。如今,形形色色的原型工具可以说是眼花缭乱,如何选择呢?尤其是原型又有不同的受众,加之时间成本,人力成本,资金成本等条件,设计师往往需要呈现不同品质的原型,以适应当前的最佳选择。这里,我精选出了5款各有所长的原型工具,希望对您的工具选择有所帮助。

每款工具,我将从主要功能、学习成本、价格、兼容平台、项目类型、上手速度、保真度、分享方式、用户反馈等几方面进行介绍。仅供参考。

1.Mockplus - 快速简洁的专业原型设计工具

平台:Windows, Mac, Android, IOS

价格:普通-免费;专业-¥199元/年

主要功能:

Mockplus致力于快速构建和迭代原型,为设计师提供简洁高效的设计方式,能在最短时间里创造出最优的设计成果。

快速设计:Mockplus拥有200多个高度封装的交互组件,3000个矢量图标,以及大量可供直接使用的模板、例子项目以及模板页面,并且支持在Sketch中直接导出MP文件,为快速原型设计提供了有效支持。

快速交互:Mockplus还是交互设计的不二选择。只需使用封装可见的交互组件,用鼠标进行拖拽即可完成可视化的交互,不需要任何一行代码或者参数的设置。Mockplus目前支持3种交互方式:页面交互,组件交互和属性交互。交互命令还可一键自动还原,贴切而周到。

新功能:Mockplus团队推出了一系列人性化设计,例如可视化格式刷,可快速进行批量复制,简单直观;格子功能,可轻松复制页面布局,并且可自定义属性;数据填充,智能解锁繁复操作;最新的表格组件,体会Excel里操作般的感觉;脑图设计模式,能快速完成项目的所有页面构架,然后一键转化为原型项目等等。

全新的表格组件

快速演示:Mockplus拥有8种快速测试和演示方式,支持手机端、浏览器及桌面端的原型测试。在线预览和离线演示都可轻松实现,不受终端,网络地域的限制。

视频地址:http://doc.mockplus.cn/?p=1668

学习成本:很低。Mockplus是一款让你关注设计,而非工具本身的工具,致力于让设计更快、更简单!无需写代码。

项目类型:手机APP,网页项目,平板项目,自由项目等

上手时间:5-10分钟

保真度:中低保真

分享和协作: Mockplus的团队协作功能支持多人编辑同一个项目,可以加强团队的配合,提高生产力。参与人员可对设计进行批注和审阅,即时获取反馈。

用户反馈:周边购+外卖+智能物业+类京东商城+聊天功能的APP,几百页很正常。感觉用mockplus做原型效率真高,几百页的交互原型一个月就能完成。

更多反馈:https://www.mockplus.cn/features

【新年福利】高效的原型设计工具Mockplus为各位赠送新年福利啦~

Mockplus3.5新版本新增了智能标注功能,2019年Mockplus将全面升级为摹客RP,为大家带来更好的体验,Mockplus春节送福利,赶快领取Mockplus个人版激活码吧,数量有限,时间有限,先到先得!

专属激活码:Mockplus2019

激活数量:限量150个。

有效期:2019年1月31日。

激活地址:https://www.mockplus.cn/user/upgrade

2.Balsamiq - 一款基于Flash的快速原型设计工具

平台:Windows, Mac, Web-based

价格:$89

主要功能:

Balsamiq Mockups是一款备受青睐的原型图工具,是2008由一个软件工程师开发的,能帮助设计师更快地进行原型设计。

拖拽操作:Balsamiq拥有可以直接进行拖拽使用的元素,包括一些按钮和列表,值得一提的是,这些元素都是手绘风格。设计师还可在编辑器里提前准备好需要使用的小部件。

资源模板:Balsamiq官方网站还提供了很多模板,包括桌面App、移动端App以及网站模板等。可供点击下载,使用起来快速便捷。

手绘风格:Balsamiq独一无二的手写设计在如今的机械化设计中显得十分别致,能让设计师体会一种在空白屏幕里进行手绘设计的独特体验。加上其种类繁多且风格独特的UI库,能为设计师提供最便捷的服务。

线框图设计:但Balsamiq并不是一款适合做超大型项目的工具,虽然它也可以用于做一些设计,但想要加入一些比较深入的动态效果就比较局限,当然,这和他们的设计初衷也不相一致,Balsamiq更专注于简洁粗略的线框图设计。

视频地址:https://www.youtube.com/watch?v=0mYYqsJ-rE8&feature=youtu.be

学习成本:低。拖拽和放置元素都很简单。初学者也可以尝试不用纸笔,而是以贴近纸笔的设计方式进行设计。

项目类型:手机APP,网页项目等

上手时间:15-20 分钟

保真度:低保真

分享和协作:Balsamiq可以说是专为协作而设计。整个团队可以进行交流,以确保设计的正确方向。客户和老板都可以更清楚地描述自己的需求。在Balsamiq Mockups中共享文件,可以通过共享模型项目文件,共享交互式PDF文档等方式。

用户反馈:

“Balsamiq is bitchin'. Pure and simple. It's rare to find a tool that both devs and non-devs enjoy using, and use productively together. Huge fan!”—Jay Simons form VP of Marketing, Atlassian.

3.Webflow - 设计和开发协同进行的简单静态网站原型工具

平台:Mac,Windows

价格:2个项目免费(10个项目:16美元/月,无限项目:35美元/月)

主要功能:

直观的设计和开发网站:Webflow为网页设计人员提供了HTML,CSS和JavaScript的全部功能。但是不需要编写代码,而是直接进行直观操作。在您构建网站并填充网站内容时,Webflow的“Designer”会自动创建简洁的语义代码,这些代码可以直接发布到网页上,也可以交给开发人员参考。

空白画布,创作空间无限:您可以在画布上填充需要的任何元素:盒子模型,浮动组件等,元素布局自由,尽在掌握中,然后使用强大的排版和配色工具进行美化设计。

精准的交互和动画:直观的可视化界面不仅仅局限于页面布局和风格选择,而且还可以自由使用JavaScript和CSS动画的所有功能。

轻松管理和低成本维护:整个网站的风格和组件都可以有效进行管理和维护。可视化构建绝不是重复、笨重的工作流程。如果结合CSS的系统样式以及自定义符号和组件库,设计和管理网站将会更轻松。

视频地址:https://www.youtube.com/watch?v=Ymn1sPuNMt8

学习成本:较低。Webflow可以让设计师在相对较短的时间内创建一个网站。虽然您不需要写代码,但仍需要根据客户需求导出甚至更改网站的html / css标签。

项目类型:Web网站

上手时间:15-20分钟

保真度:高保真。

分享和协作:一旦在Webflow发布网页,您的站点就已经算是完成了,可以直接分享给他人。但如果还需进一步改进再分享,可以使用Webflow Hosting进行网页托管。

用户反馈:“In comparison to the many site designing tools we've used during our 13 years in business, Webflow is absolutely the most user-friendly and capable out there.”

4.Fliud UI - 更简单的网页,桌面和移动原型工具

平台:Web端。支持Chrome,Firefox和Safari,不兼容Internet Explorer。

价格:个人- $8.25/月;高级版- $19.08/月;团队版- $41.58/月

主要功能:

高保真:Fliud UI是一款基于网页端的原型设计设计工具,与其他的大部分原型图工具不同,Fliud UI支持添加手势,并且具有动画效果,可以制作高保真的原型图。

快速线框图工具:Fluid UI更多是线框图设计,但也能影响到后期的界面设计、产品功能设置以及上线前测试。

界面关系展示:Fluid UI能够将不同的界面联立起来,以便于看到产品不同界面之间的关系,对于UX流程设计有很大帮助。

快速设计:Fliud UI有16个用于iOS,Android,Windows8的用户界面库,其中包含超过2000个可定制的小部件和图标,可以直接从这些内置库里拖拽元素创建页面,简洁高效。FluidUI还提供团队的实时协作,可用于用户测试的视频环聊,进行设备上的测试和交互式预览,团队共享非常便捷。

视频地址:https://www.youtube.com/watch?v=uodln1GmrFM

学习成本:较低。FluidUI是一个原型开发工具,可以让您快速设计,测试并获取有关的反馈信息,无编写代码要求。

项目类型:Web应用程序和桌面应用程序

上手时间:10-15分钟

保真度:高保真。

分享和协作:强大的协作功能,不受空间限制,随时可以实时进行设计。只需邀请你的团队成员到同一个原型项目上,就可以进行添加,反馈和评论等操作。分享原型,你可以选择在设备上直接查看,或通过电子邮件分享,甚至直接将项目发送给客户。

用户反馈:“It’s a great tool for working the project from scratch, for creating high quality prototype. It’s very easy and intuitive. Sharing is very easy.”—John Wastion.

5.Invision - 基于web端的原型设计工具

平台:Mac,Windows

价格:1个项目免费(3个项目:15美元/月,无限项目:25美元/月,团队版:99美元/月)

主要功能:

静动转化:在InVision中,设计人员可以直接上传设计文件并添加动画,手势和转换,将静态画面转换为可点击的交互式原型。

多格式支持:支持PNG,JPG,GIF,AI和PSD格式的文件。

高效协作:InVision App在产品讨论阶段使用非常合适,可以快速呈现,加之有效的协作,可以有效收集同事和客户的反馈意见。

视频地址:https://www.youtube.com/channel/UCndfHdRdEiGOyCOgxQ4W9YQ

学习成本:低。基于其可以在设计文件添加动画和手势,因此只需5分钟内即可获得高保真原型设计。无需代码和编程。

项目类型:移动和Web应用程序

上手时间:15-20分钟

保真度:高保真。

分享和协作:InVision最突出的优势就是它的协作功能,所有参与原型项目的成员都可以提供反馈,记录问题和查看实时设计。

用户反馈:“A lot of the products we're making are really meaty. InVision allows us to see if these really complex solutions are working." Joshua Taylor, Evernote

以上是我总结出的5款软件原型设计工具,各具特色,也各有不足,希望总有一款适合你当前的项目。但在设计过程中,对工具的要求往往会更多,譬如设计灵感的查找,更短的学习时间,更低的成本,多样的快速演示和分享方式,比较深入的交互和动效,以及更多的人性化设置,综合每款工具的分析,Mockplus是性价比较高的选择,也是我极力推荐的一款工具。

2018年,你一定要选对这些原型工具相关推荐

  1. 强烈推荐!2018最受欢迎的8款产品原型工具

    工欲善其事必先利其器.作为一名产品经理,如何才能快速地设计一款产品?一款优秀的产品原型工具必不可少.如何才能选择一款适合自己的原型工具呢?小编特意整理了8款工具以供参考,并从学习曲线,性价比,功能优缺 ...

  2. 计算机系双选会方案,黄山学院2018届毕业生就业双选会工作方案

    为更好地搭建毕业生就业平台,促进我校毕业生充分就业,学校决定于2017年10月28日举办2018届毕业生就业双选会.为确保双选会安全.有序进行,制定具体工作方案. 一.成立"双选会" ...

  3. LLVM邮件列表2018年4月内容选辑

    缘起: LLVM的邮件列表关注了很久,最闲的时候每篇都读,也回过几篇邮件.忙的时候,可能好几个月不怎么读,积累一大堆未读,只能直接清理了.后来,有人做了llvmweekly,好了很多,每周花点时间看一 ...

  4. 后来朋友选了伪原创工具下载这个词

    首先,这个词太热门,伪原创工具最好的每天八九万的检索量,现有排名都已经是比较专业的站了,而且百度自己还为这个词竞价了(这点比较讽刺).你完全可以看一下百度下面的相关搜索,找一个相关的长尾词竞争不很激烈 ...

  5. ps基础学习:利用选框和填充工具做图标

    1. 新建画布 文件---> 新建,新建一张画布,画布尺寸设置为15cm*15cm,分辨率为300像素,背景色为白色,点击确定.如下图所示: 2. 添加标尺 视图-->标尺,勾选标尺选项或 ...

  6. 2018湖湘杯海选复赛Writeup

    2018湖湘杯Writeup 0x01 签到题 0x02 MISC Flow 0x03 WEB Code Check 0x04 WEB Readflag 0x05 WEB XmeO 0x06 Reve ...

  7. 随笔日记2018 4.10 关于多选框

    多选框的全选反选很好做 上面的选项卡 要一小选项为真则选项真很简单 要所有的选项为假大选项才为假 开始做的时候就一真则真 一假则假  这是错的!!! 想过把他的input框取出来进行比较 重新定义一个 ...

  8. RubyMine 2018.3.5 发布,流行的 Ruby 开发工具

    开发四年只会写业务代码,分布式高并发都不会还做程序员?   RubyMine 2018.3.5 (build 183.5912.16) 发布了,带来了一些平台上的改进.RubyMine 是一个为 Ru ...

  9. 2018年最受大家欢迎的五大机器学习工具和五大数据学习工具

    2018年将会是人工智能和机器学习快速发展的一年,有专家表示:相较之下Python比Java更加接地气,也自然而然地成为机器学习的首选语言 在数据科学方面,Python的语法与数学语法最为接近,因此是 ...

最新文章

  1. 在macOS Sierria 10.12.2上升级默认的vim
  2. 表达式 控件 html,获取HTML表单控件的UrlEncode字符串表达式
  3. 极速理解设计模式系列【目录索引】
  4. 53帧变900帧!AI让你不用昂贵的高速摄像机也能制作慢镜头,来自华为|CVPR 2021...
  5. OPhone2.0应该重在中文应用体验
  6. 8 list切片_Python中14个切片操作,你常用哪几个?
  7. 系统内存分布及操作过程
  8. jpa级联添加_JPA中的一对多双向关联与级联操作
  9. 教你如何删除顽固文件
  10. 【3d建模】全网最全3dmax快捷键【附软件安装包和角色基础教程下载】
  11. 联想ThinkServer RS260服务器静音降噪改造及CentOS拷机测试
  12. tinymce 富文本限制字数 超出不显示
  13. JQuery的属性操作及事件
  14. 最新彩色文字方格广告位代码
  15. 基于javaweb的房屋租赁管理系统(java+ssm+layui+mysql+jsp)
  16. 图解通信原理与案例分析-3:“家书抵万金“看书信通信背后的通信原理
  17. 计算机网络应用基础教学计划,高一计算机网络应用基础教学计划.doc
  18. 智慧农业物联网—解决方案
  19. IPv4, IPv6, IPv9能表示多少IP地址?
  20. javacv开发详解之11补充篇:使用批量多张图片制作gif动态图,再也不用担心不会制作动态图了

热门文章

  1. 游戏系统开发笔记(六)——服务端架构设计
  2. 微信支付返回-1的问题集锦与各种爬坑过程
  3. 2020年10月29日普及组
  4. 简单的J2EE(一)J2EE诞生的一些破事
  5. 远翔降压FP6150B,36V输入,3A输出
  6. 视频加字幕软件哪个好用?视频教程添加文字怎么添加
  7. 史上最全慕课网免费职业路径,总有一个适合你
  8. ufo末日余晖java下载_幽浮:末日余晖
  9. linux横版游戏,横版传奇复古版-横版传奇平衡职业下载v1.76-Linux公社
  10. 快手书单号保姆级从起号到变现-基础规则