1.什么是原型
原型（prototype）这个词来自拉丁文的词proto，意谓“最初的”，意义是形式或模型。在非技术类的文中，一个原型是给定种类的一个代表性例子。在这里我们主要讲的是软件原型，在软件开发中，一个原型是产品或数据系统的一个基本的实用模型。软件原型包含但不限于：功能、交互、UI。
软件开发工程中原型的地位：便于快速沟通、确定明确需求
2．原型设计工具
原型设计工具，说白了就是能够帮助设计师制作静态或动态网页/App设计模型的工具。在界面设计初级或中期，为了能够方便和其他设计师讨论、测试产品相关的设计想法，需要利用各种原型工具将产品模型做出来，一个个界面修改和迭代，必要的时候，还可以制作成动态的模型，直接测试，看看可能会有哪些问题或不足等。
3.介绍几种原型设计工具
3.1. POP(Prototyping on Paper)
算是移动App原型设计神器，很多公司在用：quora、sina、豆瓣、36氪、ifanr…非常火的一款原型软件，第一次满足了大家人人都是产品经理的感觉。
优点：
轻巧型，低保真，无控件，iOS，少交互，免费，容易上手。
缺点：
分享不便。动画有如侧滑、展开、消失，快现的摇一摇。操作只可以单击。没有控件，所有东西都靠你的照片。
操作：
先用手机拍下草图原型(存到POP app内);然后开始编辑图片的哪个区域(按钮)链接到什么页面，添加跳转链接热区，就可以在iPhone上演示了，并且POP内嵌的交互动作如侧滑、展开、消失等，即可满足一般的动态演示需要。
官方截图如下:有需要的同学可以去使用下app stone和google play商店都有
3.2、Pencil Project
Pencil是一款开源的可以用来制作图表和GUI原型的工具，可以作为一个独立的app，也可以作为Firefox插件。内置模版可以帮你绘制桌面和移动界面中用到的各种各样的用户界面，包括流程图、UI和一般的通用图形。
通过它内置的模板，你可以创建可链接的文档，并输出成为HTML文件、PNG、OpenOffice文档、Word文档、PDF。Pencil Project还包含大量移动app模版。
3.3.Axure 是一款专业的快速原型设计工具。
Axure RP是一款专业的快速原型设计工具。是一个专业的快速原型设计工具，让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具，它能快速、高效的创建原型，同时支持多人协作设计和版本控制管理。
优点：
Axure这个软件功能强大，可以做出很多交互效果，直接通过拖拽画出原型、生成网页；效果高，只有遵循一些可用性原创，很快模拟出高保真页面原型。可拓展控件；自定义库；适配。
缺点：
收费，少交互，生成的原型在移动端很难用。
Axure主要界面介绍
跟一般office软件的菜单栏差不多。
其中，经常使用的菜单功能有：
文件-导出图片：当前打开页面对应的单张图片、所有页面
编辑-快捷键：保存、撤销
视图-重置视图：当关闭某个窗口，可通过此次菜单快速恢复窗口视图
布局-组合、对齐、分布，在工具栏也有快速按钮，包含shift键多选元######件、组合后右键或者概要中进行重命名
布局-显示网格和对齐辅助线
发布-预览、预览选项、生成HTML文件，在工具栏也有快速按钮
这里是平常我们使用Axure需要的工具，其实跟我们平时用word差不多
你可以放大缩小，设置文字大小颜色位置等。
钢笔工具：
双击或者esc结束钢笔工具
画直线、折线
画曲线：当前点位置左键鼠标按住不动，方向影响到曲线的方向，橘色的线长度影响到曲线的半径
样式：线条（颜色、粗细、样式）、填充（单色、渐变）
选择钢笔工具
你可以画一条直线
也可以画曲线
也可以乱画
钢笔工具是一个挺有用的工具，有时候可以解决你的燃眉之急，在美工好的同学手好那更是如虎添翼。
页面：导航视图，大纲
页面是项目页面的导航面板, 在这里面可以对所有设计的页面进行添加、删除、重命名和组织等。
当页面过多时，文件夹就显得格外重要了，它可以方面你管理你的所有页面。
可以通过拖拽，将你的页面管理起来。
大纲可以看你所有在使用中的元件，可以给元件进行命名，以方便查看管理。
元件库，母版
元件是Axure中最精髓的地方了，通过使用多种元件库，可以让你的原型页面更精美。
下面做一个小练习，用默认元件库做一个表单出来。
母版，让使用的风格统一，减少元件的复用
当你的几个页面中会重复使用一些元件时，你可以选择母版，当然如果只是一个页面的话，就不需要母版了。
使用方法：1.在已有元件中，右键生成母版。2.直接在左下角新建母版。
我新建了一个header母版，将顶部菜单栏元件拖入，这样一个母版就新建好了，我们去使用一下。
直接将母版拖拽到页面即可。
当你想修改母版的内容时间，使用改母版的页面也会随之改动，改页面的，母版也会被改动。
3.4、Proto.io
Proto.io是一个专用的手机原型开发平台——可以构建和部署全交互式的移动程序的原型，并且可以模拟出相似的成品。它可以运行在大多数的浏览器中，并提供了3个重要的接口：dashboard、编辑器以及播放器。
Dashboard可以用来管理项目。
编辑器是构建原型的环境，由一组设计和开发原型的工具组成，另外还可以构建交互。
播放器用来观看原型，并与原型进行交互，并提供了相关 工具来标注和保留反馈信息。你可以直接在真实的移动设备上对原型进行测试。并且可以使用iOS或Android上的浏览器以全屏模式运行原型。
优点
• 易于制作快速的实体模型，因为有大量的标准UI元素库，而且很多是可以定制的。
• Proto.io在这五种工具中是唯一一个同时也是基于页面的。你可以在一个项目中包含多个屏，屏之间可以创建过渡效果。
• 支持元件跟Dropbox同步。
缺点
• 没有即时预览。
• 如果加了很多交互，像本文的例子一样，动效会变慢。
• 你的所有原型都保存在Proto.io的web平台上，这意味着如果你要取消你的帐号，你连运行它们都不再能了。（有个可能是你把帐号“寄存”：当你重新激活帐号，你的项目还会在那儿。寄存帐号是免费的。）
• 3D动效不可能。
3.5、Moqups
是一个非常好的、免费的HTML5应用，通过它可以创建可爱朴素的线框图、实体模型和UI概念。该程序使用起来非常简单，并且有内置的模板可以直接使用(模板包括单选按钮、链接、图像占位符、文本框以及滑块等)。
它还提供了iPhone和iPad模板，以及iOS相关的按钮、提示框、picker、菜单、开关以及键盘等。你可以设置网格的尺寸，并预览和分享你的线框图。Moqups提供了一个很有用的功能就是对齐网格，可以使对象精准对齐。
3.6、JustinMind
JustinMind是由西班牙JustinMind公司出品的原型制作工具，可以输出Html页面。与目前主流的交互设计工具axure，Balsamiq Mockups等相比，Justinmind Prototyper更为专属于设计移动终端上app应用。
下面是JustinMind的一些特性：
使用JustinMind，你可以在几分钟内利用其广泛的组件和交互绘制高保真原型。它提供了一些基本的形状，如矩形和文本，还有特定的组件，如菜单，表单或数据列表。
关于手势的交互效果：
JustinMind提供了多种触屏的交互效果，例如滑动、缩放、旋转，甚至捕捉设备方向等等。在需要产生效果的部件中选择对应的手势即可。
可以创建自己的组件库。
JustinMind为iPhone，iPad，黑莓，Android提供了多样的组件。你可以创建自定义组件库，方法是将排列好的单个组件放在一起，并将它们集体框选拖动到组件库。这样下次你就可以直接使用自己定义好的组件。
更为便捷的定义样式。
相比Axure，JustinMind更好的提供了属性窗口，并且更好的支持捕获PS等软件的图像属性。
JustinMind可以导出原型的所有信息到Microsoft Word。能够一键生成及其规范的文档。
共享原型进行测试。
JustinMind支持将原型上传到服务器并提供给他人进行测试，为产品的改进做出了良好的贡献。最为特别的是，基于usernote的服务允许你将原型放到移动设备上进行测试。
更友好的定义交互方式。
在JustinMind中，你可以通过拖拽等方式来实现跳转、定向等交互效果，无需像Axure一样每一步都只能通过点击来完成。并且显示更为直观，如进度条。
同时可以通过一些简单的无代码逻辑语句实现更为高级的交互效果。
全球范围内的复用、数据共享。
每一个模板都让这一套组件有不同的视觉风格，变量允许将数据从一个屏幕迁移到另一个，甚至使用它们来检查是否满足条件。
发布和收集反馈意见。
发布Prototyper作品到usernote后，全球各地的人将通过Web浏览器访问您的原型。他们的反馈结果将会实时的呈现在您的原型页面。
3.7墨刀
墨刀是一款在线原型设计与协同工具，借助墨刀，产品经理、设计师、开发、销售、运营及创业者等用户群体，能够搭建为产品原型，演示项目效果。墨刀同时也是协作平台，项目成员可以协作编辑、审阅，不管是产品想法展示，还是向客户收集产品反馈，向投资人进行Demo展示，或是在团队内部协作沟通、项目管理
操作简单：
简单拖拽和设置，即可将想法、创意变成产品原型。
演示：
真机设备边框、沉浸感全屏、离线模式等多种演示模式，项目演示效果逼真。
团队协作：
与同事共同编辑原型，效率提升；一键分享发送给别人，分享便捷；还可在原型上打点、评论，收集反馈意见，高效协作。
交互简单：
简单拖拽就可实现页面跳转，还可通过交互面板实现复杂交互，多种手势和转场效果，可以实现一个媲美真实产品体验的原型。
自动标注及切图：
将 Sketch 设计稿墨刀插件上传至墨刀，将项目链接分享给开发人员，无需登录可直接获取到每个元素宽高、间距、字体颜色等信息，支持一键下载多倍率切图。
素材库：
内置丰富的行业素材库，也可创建自己的素材库、共享团队组件库，高频素材直接复用。
创建新的应用
访问墨刀官网，登录之后会看到如下的页面：
点击右上方的创建应用，可以选择不同的模板和设备类型，填写应用名称之后即可完成应用的创建，比方说上图的泡影就是我创建的一个应用，然后我们可以随时编辑应用或者与他人共同编辑和分享应用。
编辑应用
点击我们创建的对应应用进行编辑，进去之后会看到下图，其分为菜单栏、组件栏、编辑栏和预览排列栏几个部分。最左边是组件栏，我们可以在这里选择需要的组件，然后拖拽到中间编辑栏中进行设计；中间编辑栏里可以对选取的组件进行编辑；右边是预览排列，就是最终我们看到的页面的基本排列。
组件使用
如图，我们把左边组件栏中的一些组件拉到这个中间的编辑栏，通过双击对应的组件进行文字或者颜色的编辑：
页面管理
对于页面的管理，我们可以在最右边的页面管理栏进行新建或者复制页面，这样我们的原型也可以在不同页面之间跳转，如下图所示是一个原型部分页面树图：
页面跳转
如果要进行页面之间的跳转，可以点击组件，然后拉动组件旁边的超链接的样式图标到相应页面即可执行进行页面跳转功能，如下图所示：
导出下载图片或者安装包
点击页面上方的下载图标，具体如下图所示：
运行分享应用
点击页面上方的运行图标即可运行编辑的应用，而后在运行页面右方通过分享图标可以生成分享链接，如下图所示：
4.结语
介绍了这么多相信总有一款你会喜欢的，还有重要的是实战，光看没用啊，动起来吧！
部分内容来自
https://blog.csdn.net/sysulmh/article/details/73028629
https://blog.csdn.net/qq_44102500/article/details/119188869
https://baike.baidu.com/item/justinmind/8663841?fr=aladdin
标签：可以,母版,原型,组件,设计,工具,交互,页面 来源： https://www.cnblogs.com/fstring/p/16247278.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。