原型设计是什么，该怎么使用它

原型化方法是一种(自外向内 )型的设计过程。原型化方法，即Prototyping，为弥补瀑布模型的不足而产生的。产生过程：传统软件生存期模型的典型代表是“瀑布模型"。这种模型将软件生存期划分为若干阶段，根据不同阶段工作的特点，运用不同的方法、技术和工具来完成该阶段的任务。软件人员遵循严格的规范，在每一阶段工作结束时都要进行严格的阶段评审和确认，以得到该阶段的一致、完整、正确和无多义性的文档，把这些文档作为阶段结束的标志“冻结"起来，并以它们作为下一阶段工作的基础，从而保证软件的质量。传统思想之所以强调每一阶段的严格性，尤其是开发初期要有良好的软件规格说明，主要是源于过去软件开发的经验教训，即在开发的后期或运行维护期间，修改不完善的规格说明要付出巨大的代价。因此人们投入极大的努力来加强各阶段活动的严格性，特别是前期的需求分析阶段，希望得到完善的规格说明以减少后期难以估量的经济损失。但是，很难得到一个完整准确的规格说明。特别是对于一些大型的软件项目，在开发的早期用户往往对系统只有一个模糊的想法，很难完全准确地表达对系统的全面要求，软件人员对于所要解决的应用问题认识更是模糊不清。经过详细的讨论和分析，也许能得到一份较好的规格说明，但却很难期望该规格说明能将系统的各个方面都描述得完整、准确、一致，并与实际环境相符。很难通过它在逻辑上推断出(不是在实际运行中判断评价)系统运行的效果，以此达到各方对系统的共同理解。随着开发工作向前推进，用户可能会产生新的要求，或因环境变化，要求系统也能随之变化；开发者又可能在设计与实现的过程中遇到一些没有预料到的实际困难，需要以改变需求来解脱困境。因此规格说明难以完善、需求的变更、以及通信中的模糊和误解，都会成为软件开发顺利推进的障碍。尽管在传统软件生存期管理中通过加强评审和确认，全面测试来缓解上述问题，但不能从根本上解决这些问题。为了解决这些问题，逐渐形成了软件系统的快速原型的概念。在形成一组基本需求之后，通过快速分析方法构造出待建的原型版本，然后根据顾客在使用原型的过程中提出的意见对原型进行修改，从而得到原型的更新版本，这一过程重复进行，直至得到满足顾客需求的系统。总体来说，原型化方法是用户和软件开发人员之间进行的一种交互过程，适用于需求不确定性高的系统。它从用户界面的开发入手，首先形成系统界面原型，用户运行用户界面原型，并就同意什么和不同意什么提出意见，它是一种自外向内型的设计过程。

原型化技术的基本思想是：原型应该是可以实际运行的软件系统，具有最终系统的基本特征，且构造方便、快速、造价低。

原型化技术的基本特征：（1）不要求在系统开发之初就完全掌握系统的所有需求；（2）构造原型必须依赖快速的原型构造工具；（3）原型需要反复的修改。

原型化技术的适应范围：适用于用户不明确、管理及业务处理不稳定、需求常常变化、规模小且不太复杂、不要求集中处理的系统或者是有比较成熟的借鉴经验的系统开发中。

好处：有效防止设计师忽略重要元素、避免不准确不合理的假设

应该具备的属性：

1. 成本低 ，模型关注的是产品的某些功能，建议使用随手可得的材料

2. 便于沟通，原型应该易于理解，促进开发人员与需求方的沟通

快速搭建原型能推进方案的优化，从而实现高效的沟通。设计师在思维发散阶段得出最优的解决方案之后，需要在原型设计阶段把它初步呈现。原型设计阶段不是一步达成的，它与需求理解，问题定义，思维发散三个步骤共同构成了思维设计6大步骤中的一个内部小循环，内部反馈跟设计优化是推动小循环的动力。只有原型达到预期设计的目标，才会跳出内部的小循环。

原型设计——用手来思考

第一步：实用工具制作模型

- 不需要原型多精致，只要能表达想法即可

第二步：讨论模型并发现问题

- 原型开发完成之后，让小部分用户和内部人员进行测试，在不同的使用情景分别评估想法的可行性，并及时记录。

第三步：迭代优化

- 基于原型讨论的结果，保留好的设计方案，摒弃差的设计方案，然后根据新的问题重新设计方案，并制作原型进行测试。

例子：IDEO设计公司使用原型设计帮助喜达屋酒店拓展业务

目标：面向年轻时尚城市客户群体的雅乐轩

困难：不知如何验证方案的效果，不kennel为了验证雅乐轩的用户反馈，花巨资装修房屋

解决方案：在网络平台上搭建了雅乐轩的三维模型，用户可以直观看到酒店的装潢、设计以及整体布局，同时还有提问模块允许用户提出意见，设计团队也可以根据反馈进行模型改进。

亮点：这里网站既是接触用户的载体，也是收集反馈的平台

2、原型图要规范，简单整洁，主要可以概括为：页面框架要清楚；页面不影响设计；页面元素要统一；页面排版要整齐。

3、原型设计不宜占用过多时间。原型图的意义是为团队成员呈现产品的主要功能和逻辑关系，因此不能为了好看而主次颠倒。对于产品经理来说，在原型设计阶段，只需要使用摹客Mockplus之类的专业工具，就能快速完成原型设计，更多的时间则留给用户需求和产品功能的整理，这样才不会犯本末倒置的错误。

下列角色使用用户界面原型：

用例阐释者，用来了解用例的用户界面；

系统分析员，用来了解用户界面如何影响系统分析；

设计员，用来了解用户界面如何施加影响及它对系统“内部”的要求；

类测试人员，用来制定测试计划活动。

特征

可建立三种基本原型：

图纸（在纸上）

位图（绘图工具）

可执行文件（交互式）

很多项目中，您需要按上述顺序使用全部三种原型。

时机

用户界面原型必须在先启阶段的初期或在精化阶段一开始建立。整个系统（包括它的“实际”用户界面）的分析、设计和实施必须在原型建立后进行。

请注意：创建用户界面原型的主要目的是在实际设计与开发开始之前揭示和测试系统的功能与可用性。这样，您可以在将太多时间与资源投入开发活动之前，确保所构建的系统是正确的。

为了成功进行该初期测试，开发原型的开支必须远远低于开发实际系统的开支，同时这个原型应具备足够的功能，可以进行有意义的使用测试。

职责

用户界面设计员负责维护用户界面原型的完整性，并确保按照用例示意板和边界对象的要求，使用原型构建一个可用的用户界面。

设计初期，还未确定整体设计方向的时候，采用低保真的原型，能够帮助设计师快速原型化各种设计想法，并及时与其它成员更新迭代，完成整体设计的确认和统一。所以，这一阶段的原型，仅仅展示设计的整体框架或某一部分的界面交互情况，设计还原程度较低。

当设计进行到更深层次的阶段之后，为了及时测试整体设计的可行性、检测设计可能引起的问题并顺利交付开发，设计师往往需要更能展示设计细节的高保真原型。所以，这一阶段的原型往往具有极其丰富的界面细节和交互设计，甚至能够做到几乎与成品无异，还原程度极高。

总之，高低保真原型使用在不同的设计阶段，设计师需要根据不同阶段的设计需求进行选择，加速设计和迭代过程。

而制作高低保真原型方面，大家可以试试摹客Mockplus，整体的优势就是简单、易操作，在线协作、一键分享、多平台演示等都能轻松实现。

现在原型设计工具有很多，那我今天就罗列一些UI设计师和产品经理经常用到的工具，以此提高工作效率，又好又快的完成工作。

第一款：Axure

Axure RP是美国Axure Software Solution公司旗舰产品，是一个专业的快速原型设计工具，让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具，它能快速、高效的创建原型，同时支持多人协作设计和版本控制管理

第二款： Adobe XD

Adobe XD是一站式UX/UI设计平台，在这款产品上面用户可以进行移动应用和网页设计与原型制作。同时它也是唯一一款结合设计与建立原型功能，并同时提供工业级性能的跨平台设计产品。使用Adobe XD可以更高效准确的完成静态编译或者框架图到交互原型的转变。Adobe XD 面向网站设计、移动 APP 设计等设计工作。

第三款：Mockplus（摹客）

Mockplus，一款简洁快速的原型图设计工具。适合软件团队、个人在软件开发的设计阶段使用。其低保真、无需学习、快速上手、功能够用。并能够很好地表达自己的设计。从设计上，采取了隐藏、堆叠、组合等方式，把原本复杂的功能，精心安排。上手很容易，但随着你的使用，功能层层递进，你会发现更多适合自己的有用的功能。新手不会迷惑，熟手可以够用。值得一提的是这是一款国产工具，我认为是国内目前最好的工具。因为目前Mockplus的在线原型设计协作平台已然走在国内甚至国际（很多老外也购买摹客英文版）的前列，不论是原型设计、流程协作还是设计规范，都能够在摹客完成，非常方便。并且支持Figma、Sketch、PS、Axure、XD几乎所有主流工具的插件，界面和语言对国内设计师也非常友好。有兴趣可以去摹客官网注册试试。网页链接

- 可分工协作，多人编辑同一个项目；

- 通过评论和标注原型，完成对项目的审阅；

- 提升开发团队的生产力；

- 大大降低沟通交流成本。

第四款： Justinmind

JustinMind是由西班牙JustinMind公司出品的原型制作工具，可以输出Html页面。与目前主流的交互设计工具axure，Balsamiq Mockups等相比，Justinmind Prototyper更为专属于设计移动终端上app应用。justinmind的可视化工作环境可以让你轻松快捷的以鼠标的方式创建带有注释的高保真原型。不用进行编程，就可以在原型上定义简单连接和高级交互。

第五款：Balsamiq Mockups

Balsamiq Mockups是一款共享软件，每个lisence授权是79美刀，对个人用户来说，价格不菲。它推出之后如此受欢迎的原因是在软件产品原型图设计领域，特别是web原型图设计领域，还没有哪款产品有如此丰富的表现形式。使用Balsamiq Mockups画出的原型图都是手绘风格的图像，看上去非常美观、清爽（当然，跟使用者的设计水平也有关系）。它支持几乎所有的HTML控件原型图，比如按钮（基本按钮、单选按钮等）、文本框、下拉菜单、树形菜单、进度条、多选项卡、日历控件、颜色控件、表格、Windows窗体等。除此以外，它还支持目前如火如荼的iPhone手机元素原型图，这为开发iPhone应用程序的软件工程师提供了非常好的设计图。

第六款： Proto.io

Proto.io是一个专门用于移动应用的产品原型工具——可以构建和部署全交互式的移动应用的原型，并且可以模拟出相似的成品。基于Web的在线环境，它可以让你制作流行的 iPhone，iPad，Android 手机以及任何带有屏幕界面的产品原型。

推荐这几款产品原型工具：

1.Pop (Prototyping on Paper)

学习曲线：低

适用于iOS和Android平台。借助POP，开发者或设计师只需在纸上简单地描绘出创意或想法，拍下几张草图照片，并将照片按顺序放置，利用链接点描摹出各张图片之间的逻辑关系，就可轻松创建一个动态模型，点击播放即可演示整个模型。

优点：与Balsamiq等同类应用相比，POP的优势在于简单易用，学习曲线短，生成快速且能被分享。

缺点：只支持低保真原型。对于被展示的客户或者团队成员，只知道产品的大概方向；交互效果复杂时不能很好地表达设计。

适用人群：追求手绘风格及快速原型的产品经理和设计师（对于短期内使用免费原型工具的人群来说，这也不失为一个好选择）。

2.Mockplus

学习曲线：低

Mockplus是一款简洁高效的免费产品原型工具。它为用户提供丰富的组件和图标资源，通过拖曳即可实现界面设计。支持一键导入项目页面和模板，快速搭建基础页面。软件还支持自定义组件库，数据填充，Sketch导入，拖曳设置交互等特色功能实现快速设计。近期，该工具还推出了团队协作功能，团队成员之间可以查看、编辑、评论项目，帮助用户更好地完成协作设计。

优点：学习曲线短，快速上手，交互简单（只需拖曳），功能多样，组件资源丰富，支持8种预览方式和多种文件导出类型，支持团队协作。

缺点：不支持手势交互。

适用人群：各阶段的产品经理及UI/UX设计师，追求中低保真，交互效果，快速原型，新手或专业人群皆适宜。

3.Axure

学习曲线：高

Axure RP是美国Axure Software Solution公司旗舰产品，是一个专业的快速产品原型工具，让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型工具，它能快速、高效的创建原型，同时支持多人协作设计和版本控制管理。

优点：变化多端的操作，自带组件库并支持强大的第三方组件库，提供强大的交互支持，完整的教程及支持文档，支持原型预览。

缺点：学习曲线较高，性价比不高，专业需求度高。

适用人群：适用于追求强交互效果及细节产品经理及设计师，需要具有一定经验或较强专业性。

4.Wireframe sketcher

学习曲线：较低

WireframeSketcher是一款强操作灵活、功能强大的线框图工具。可帮助设计人员，开发人员和产品经理快速创建用于桌面，Web和移动应用程序的线框和原型。值得一提的是Wireframe Sketcher还是一款带有手绘风格的创作工具，这在一定程度上可以帮助用户专注于设计。除此之外，这款产品原型工具还提供大量的UI控件，支持通过链接创建交互原型，灵活的Wiki形式，线框图注释，生成PDF文档等。

优点：操作灵活，绘制页面速度很快，功能强大，支持手绘风格，提供大量模板，可以进行原型导出。

缺点：仅支持低保真，交互效果较少。

适用人群：简单表达设计或追求手绘风格的产品经理及设计师。

5.Proto.io

学习曲线：中

Proto.io是一个专门用于移动应用的产品原型工具——可以构建和部署全交互式的移动应用的原型，并且可以模拟出相似的成品。基于Web的在线环境，它可以让你制作流行的 iPhone，iPad，Android 手机以及任何带有屏幕界面的产品原型。并且它可以运行在大多数的浏览器中，并提供了3个重要的接口：dashboard、编辑器以及播放器。

优点：丰富的UI元素，且可以自定义；支持多屏互动和组件交互，可以从Dropbox上传设计图。

缺点：不支持实时预览，交互动效较多时动画不够流畅，性价比不高。

适用人群：擅长于使用Web浏览器的产品经理或设计师。

6.Balsamiq Mockups

学习曲线：较高

Balsamiq Mockups是一款软件工程中快速产品原型工具，可以作为与用户交互的一个界面草图，一旦客户认可也可以作为美工开发HTML的原型使用，特别是在web原型图设计领域有不错的影响力。使用Balsamiq Mockups画出的原型图都是手绘风格的图像，看上去非常美观、清爽。此外，这款工具支持几乎所有的HTML控件原型图，比如按钮（基本按钮、单选按钮等）、文本框、下拉菜单、树形菜单、进度条、多选项卡、颜色控件、表格、Windows窗体等。除此以外，还支持iPhone手机元素原型图。

优点：虽然不是免费原型工具，但性价比也算不错；工具内置大量模块，能够快速应用于原型设计，支持手绘风格。

缺点：原型没有配色，没有设计风格，不能进行交互展示。

适用人群：需要生成简单原型（草图）的产品经理或设计师。

7.Fluid UI

学习曲线：中

Fluid UI是一款用于移动开发的Web原型工具，可以帮助设计师高效地完成产品原型设计。用户可以选择低保真的线框图来加快开发，也可以选择高保真的组件来模仿真实的操作系统。Fluid UI 内置超过2000款的线框图和手机UI控件，并且还会经常进行更新，如果这些图片尚不能满足需求，还可以上传自己的图片。

优点：操作简单，无设备限制，屏幕流功能，资源库非常丰富，同时支持高低保真。

缺点：有时候看起来不够直观，性价比不是很高。

适用人群：适合习惯使用多平台的产品经理及设计师。

8．Justinmind

学习曲线：中高

JustinMind是一款来自西班牙的原型制作工具，主要致力于高保真原型。它提供的功能有绘图工具，拖放位置,大小,格式和导出/导入的小部件。你还可以自定义小组件，创建自定义组件库，并进行分类。此外，该产品原型工具还提供丰富的动画支持及强大的交互效果（支持手势交互），官网有丰富的组件及模板资源，用户可以根据需要下载使用。

优点：支持高保真，支持动画效果，便捷的自定义样式，支持原型共享，支持手势交互。

缺点：学习成本较高，程序启动较慢。

适用人群：追求高保真原型的产品经理及设计师。

根据设计者的专业程度，可以将原型设计工具分为两大类，一是专业原型设计工具，二是非专业原型设计工具。专业的原型设计工具常用的就是墨刀和Axure，墨刀是一款在线原型设计工具，其优点是云办公模式，支持协同设计，即时保存，不用担心因电脑断电或故障而导致设计内容丢失，其缺点是组件丰富程度不高。

Axure是电脑端的原型设计工具，其优点是组件丰富，功能比较强大，使用用户群体较大，其缺点是设计内容要及时保存，否则会因电脑断电或故障而导致设计内容丢失，给用户带来一定的困扰。非专业的原型设计工具有PPT和纸，PPT也是一个简单的制图软件，能让用户实现简单的原型设计，其优点是简单易学，缺点是页面交互功能不强；纸是大部分用户都可以用的原型设计工具，其优点是简单方便，专业和非专业的人士都可以通过纸将原型想法表示出来，缺点是保存和后期使用不方便。

2.原型设计的内容

原型设计主要包括三个方面的内容：一是页面设计，二是交互设计，三是备注设计。页面设计是原型设计的主要内容，包括对产品所有页面的原型设计；交互设计是指页面与页面之间的链接和跳转；备注设计是指对页面设计，交互设计，程序功能，跳转结果，出错提示等的设计。

原型设计是产品需求设计与UI设计之间的桥梁，是产品开发的一项重要基础工作，直接决定了产品界面的布局，影响产品的使用效果。