原型设计工具比较及实践
一、目录
二、Mockplus、Axure、墨刀软件对比
1、Mockplus


(1)简介
Mockplus(摹客)是一款简洁快速的原型图设计工具。适合软件团队、个人在软件开发的设计阶段使用。其低保真、无需学习、快速上手、功能够用。并能够很好地表达自己的设计。
(2)优点
(1)基础版免费使用
(2)交互简单(只需拖曳就可以)
(3)功能多样,组件资源丰富
(4)预览方式和导出类型多样
(5)支持团队协作
(3)缺点
不支持手势交互
2、Axure


(1)简介
Axure RP是一个专业的快速原型设计工具。Axure(发音:Ack-sure),代表美国Axure公司;RP则是Rapid Prototyping(快速原型)的缩写。
Axure RP是美国Axure Software Solution公司旗舰产品,是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具,它能快速、高效的创建原型,同时支持多人协作设计和版本控制管理。
Axure RP已被一些大公司采用。Axure RP的使用者主要包括商业分析师、信息架构师、可用性专家、产品经理、IT咨询师、用户体验设计师、交互设计师、界面设计师等,另外,架构师、程序开发工程师也在使用Axure。
(2)优点
(1)操作变化多端
(2)自带组件库并支持第三方组件库
(3)提供强大的交互支持
(4)有完整的教程及支持文档
(5)支持原型预览
(3)缺点
(1)只能免费试用30天
(2)性价比不高
(3)专业需求度高
2、墨刀


(1)简介
墨刀 MockingBot 是北京磨刀刻石科技有限公司旗下的一款在线原型设计与协同工具。
墨刀致力于简化产品制作和设计流程,采用简便的拖拽连线操作,作为一款在线原型设计软件,墨刀支持云端保存,实时预览,一键分享,及多人协作功能,让产品团队快速高效地完成产品原型和交互设计。
使用墨刀,用户可以快速制作出可直接在手机运行的接近真实 app 交互的高保真原型,使创意得到更直观的呈现。不管是向客户收集产品反馈,向投资人进行 demo 展示,或是在团队内部协作沟通、文件管理,墨刀都可以大幅提升工作效率,打破沟通壁垒,降低项目风险。
(2)优点
(1)云端操作
(2)网页分享
(3)墨刀的APP原型可以支持下载在手机里
(3)缺点
(1)价格较贵
(2)不能画流程图
(3)相对于其他两款功能还不是很全面
4、三者的比较
axure作为老牌的原型图工具,功能最齐全,交互最多样,基本任何想要的效果都可以实现,尤其在制作PC端原型图上有优势。2axure缺点同样也相当明显,Axure的动态面板、中继器等功能都是强大的,但是不容易搞懂。AXURE的素材也是很蛋疼的问题,大部分PM 都会在AXURE原型库、素材库去寻找相应的第三方素材库,进行载入。需要花费相应的时间。
墨刀对于APP的原型设计真的是体验非常好,就像有一个无形的人在帮助你,和你一起打造你的原型APP。(当然以后也适用微信小程序的设计),其控件的拖拉、大小的调整,都会自然的去匹配相应的母版大小。无需去担心有多移动一点或多 选择一点。并且墨刀的系统控件都是基于APP,以及系统平台IOS和安卓,因此在里面可以首先选择相应的设备布局,减少了不少工作环节。
墨刀的缺点就是相应的就是不自由,首先这也于墨刀的产品定位有关,清晰定位为移动端原型设计工具,因此在交互效果上、控件组合上,操作面板的选择上都不如AXURE 灵活,并且效果切换因为是采用连线的方式,有时候会让使用者脑子错乱的感觉。并且目前原型的交互效果系统自带的还比较少,但基本满足日常所有原型的使用。另外需要充费才能够使用更强大的共享创建功能。
Mockplus操作简单,上手快,交互简单(只需拖曳就可以),功能多样,组件资源丰富,预览方式和导出类型多样,支持团队协作。但是Mockplus不支持手势交互。
相关链接
(1) https://www.zhihu.com/answer/211175244
(2) https://zhuanlan.zhihu.com/p/82214705
三、学习原型设计工具比较好的网站
1、Mockplus
(1) https://huke88.com/route/mockplus.html?sem=360PC&kw=106449
(2) https://huke88.com/route/mockplus.html?sem=360PC&kw=106449
2、Axure
(1) https://www.bilibili.com/video/BV1Yx411f7d6/?p=1
(2) https://b23.tv/BV1nx411p7Av/p1
(3) https://huke88.com/route/axure9.html?sem=360PC&kw=302153
3、墨刀
(1) https://b23.tv/BV1YE411f7mm/p1
(2) https://b23.tv/BV1AE41187ZC
(3) https://b23.tv/BV1KW411A7A7/p1
四、原型设计案例
1、主题名称
国潮盛典
2、主题介绍
该原型设计为一个中华古典文化答题小程序的界面设计,共有主界面、启动界面、开始界面、答题界面、解析页面以及结束页面共12个页面。这个原型设计的目的主要在于考验用户的古典文化的知识水平。中华上下5千年,流传下来的经典数不胜数,我们当代青年也应该多多了解一些文化常识,继承和弘扬中国文化。
功能介绍:该原型设计主要实现了以下功能:用户点击进入,进入启动页面,用户点击“开始答题”按钮,开始测试,测试结束后用户可以查看题目解析,也可以在答一次。
3、主题内容及说明
(1)相关链接
https://free.modao.cc/app/268ca697dd76dc88e927a04d7d363b0295c83811?simulator_type=device&sticky
(2)相关二维码

(3)主题使用说明
(1)主界面:主界面显示日期、时间和所在地点,点击“国潮经典”按钮进入。
(2)启动界面:启动界面主要包括三个界面,向左滑动切换下一个界面,每当切换到下一个界面时会渐现出一段有哲理的句子。
(3)开始界面:随机匹配另一位用户进行PK,点击“开始答题”按钮,进入答题页面。点击“退出”按钮,则返回主界面。
(4)答题界面:选择你认为正确的答案,若选择正确,则选项变为绿色,若不正确,则为红色,题目下方的题号显示用户已经做题数目,以及题目总数,做完该题目,点击“下一题”按钮继续答题。最后一题时,题目下方有一个“提交”按钮。点击提交即可。若中途退出,点击屏幕上方箭头,则返回主界面。
(5)结束界面:点击提交后用户就可以查看答题情况,点击“查看解析”按钮可以查看到题目的解析,查缺补漏,也可以点击“再测一次”返回答案界面。
(6)解析界面:给出正确的答案以及相应的解析和相关知识拓展,点击“下一个”可查看下一题的题目解析,点击上方箭头可返回主界面。
(4)界面截图












五、团队分工
由于对原型设计工具了解还不是很全面,所以我们在最开始先分别上网搜集了一些有关于常用的原型设计工具的资料,以便于后续的进行。接下来下载墨刀软件进行原型设计,我负责主界面以及启动界面的部分,在设计完成后,我们进行文档的编撰,我将我们之前搜集的资料进行汇总,编写原型设计案例的主题介绍说明等内容。