原型设计工具比较及实践

1.关于原型设计

原型设计是交互设计师与PD、PM、网站开发工程师沟通的最好工具。而该块的设计在原则上必须是交互设计师的产物，交互设计以用户为中心的理念会贯穿整个产品。利用交互设计师专业的眼光与经验直接导致该产品的可用性。产品原型可以概括的说是整个产品面市之前的一个框架设计。以网站注册作为例子,整个前期的交互设计流程图之后,就是原形开发的设计阶段,简单的来说是将页面的模块、元素、人机交互的形式，利用线框描述的方法，将产品脱离皮肤状态下更加具体跟生动的进行表达.

特征：

可建立三种基本原型：
1.图纸（在纸上）
2.位图（绘图工具）
3.可执行文件（交互式）

2.原型设计工具及比较

AXURE：

Axure RP是一款专业的快速原型设计工具。Axure（发音：Ack-sure），代表美国Axure公司；RP则是Rapid Prototyping（快速原型）的缩写。
Axure RP是美国Axure Software Solution公司旗舰产品，是一个专业的快速原型设计工具，让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具，它能快速、高效的创建原型，同时支持多人协作设计和版本控制管理。主要是针对负责定义需求、定义规格、设计功能、设计界面的专家，包括用户体验设计师（UX）、交互设计师（UI）、业务分析师（BA）、信息架构师（IA）、可用性专家（UE）和产品经理（PM）。

 

下面是AXURE的原型设计界面

优缺点：

1.强大的Web功能

强大的动态面板、丰富的事件和参数功能，用的好的话，几乎可以还原略为复杂的动态前端页面

2.严格的层级管理

数量少的时候有点麻烦，但是多起来也方便寻找。

3.控件功能强大，但灵活性一般

可以做成动态组件，例如有焦点状态的输入框、悬停按下状态的按钮等。使用组件时能够切换状态，但是被封装成控件（模板）后，里面的文字图片等内容就不能轻易修改。一定要改的话，也能用事件和参数做到，但是很麻烦而且不能预览。控件的尺寸随着内容自动变化，但使用时不可以拉伸。

4.备注功能较为完善

可以写在每一页的说明参数里。甚至还可以另开一个说明页面，绘制流程图，并用缩略图引用其它页面。

5.矢量绘图一般

只能勉强画出基本能图形。

6.可以导出图片、HTML和文档

HTML导出功能很好，把生成的HTML生成地址共享给别人，别人可以在上面做评论。但是导出图片和文档的效果通常不是很理想。

7.标配Windows机，文件大了容易卡

一个页面上加上与真实环境相当的事件动作（下拉框、动态页签等），生成HTML预览时就会卡。除此之外页面达到二十页以上，在使用时也会有卡感。

墨刀：

墨刀是一款在线原型设计与协同工具，借助墨刀，产品经理、设计师、开发、销售、运营及创业者等用户群体，能够搭建为产品原型，演示项目效果。墨刀同时也是协作平台，项目成员可以协作编辑、审阅  ，不管是产品想法展示，还是向客户收集产品反馈，向投资人进行Demo展示，或是在团队内部协作沟通、项目管理。墨刀为北京磨刀刻石科技有限公司旗下一款在线原型设计与协作工具产品，用户群体包括：产品经理、设计、研发、运营销售、创业者等。

 

下面是墨刀原型设计界面图：

 

 

 优缺点：

1.组件方面

墨刀自带了很多成熟的组件，例如键盘，开关，手机模型等。

2.交互方面，墨刀简单快捷

墨刀做交互特别简单，只要拖动其各种元件右边的这根线，即可链接打开各种页面。

3.团队协作

支持成员管理，可以通过邮箱邀请成员加入，支持增删改查。精细化权限设置，文件夹和项目都可以单独设置权限，也就是说可以只给成员看他该看的项目，对于大公司来说比较实用。支持多人实时编辑，有编辑权限的话可以多人同时编辑一个项目，适用于开会或者多部门协作。分享原型给他人十分简单，一个链接就可以搞定，也可以设置分享权限。还有各种场景化的模式可以选，真机模式适合展示，PRD模式适合开发或者UI看备注，在预览页可以随意切换，功能比较全面。

Mockplus：

摹客（Mockplus）是成都摹客科技有限公司旗下设计协作品牌，专注于一站式的产品设计和协作平台，为产品开发团队提供全流程协作、高保真设计和设计规范管理支持。摹客可以自产出高保真设计，支持多款主流设计工具（Sketch/PS/XD/Axure等）的设计稿交付，团队成员在产品、设计到开发的各个工作环节，利用多种设计工具，都能使用摹客平台协同工作。摹客助力企业数字化和在线化，可为企业提供私有部署和定制化服务，以“快和简单”的产品特性，帮助企业提升设计效能、降低成本。摹客设计协作平台支持全工序的产品设计，连接从需求到开发，为企业产品团队提供高保真设计、PRD文档撰写管理、全流程协作、自动标注切图、高效评论审阅，支持全部主流设计稿（Sketch/PS/XD/Axure等）交付，助力产品经理、设计师、开发人员高效设计协作。

 

下面是Mockplus的原型设计界面：

 

 

 优缺点：

1.支持素描风格

“原型”天生就只是一个草图，甚至用笔在纸上画出来的图更能体现设计者的灵感，MockPlus支持将原型图素描画，原本数字化很强的原型图变得温和而优雅，仿佛真的就是设计者用笔画出来的一般。

2.PC设计，终端预览

PC设计出的终端原型图不再停留在PC上，扫码即可在终端预览，审阅等。

3.简单易用，3分钟上手

MockPlus的理念是关注设计而非工具，不会因为工具使用而妨碍自己设计的灵感和思路，不需要花时间学习，培训，使用过Word、PPT的人可以无缝对接。

4.终端，PC，Pad都适用

主流互联网产品现在已经从PC端走向移动端，MockPlus目前全面覆盖终端,PC,Pad，并且PC端可以选择多种大屏，中屏的浏览器尺寸，同时每个种类都有丰富并且优雅的原型元素控件来选择，封装了约200个组件，3000个以上的素材。

 

3.原型设计中的高保真和低保真

高保真：

高保真 (Hi-fi) 原型的呈现和功能，尽可能类似于发布的实际产品。 当团队能深入了解产品的预期，需要与真实用户一起测试，或获得利益相关者的最终设计批准时，通常会创建高保真原型。

高保真模型的基本特征：

视觉设计：逼真细致的设计 – 所有界面元素、间距和图形看起来就像一个真正的app或网站。
内容：设计人员使用真实或类似于真实内容。原型包括最终设计中显示的大部分或全部内容。
交互性：原型在交互层面非常逼真。

 优点：

可用性测试期间获取有意义的反馈。对于用户来说，高保真原型通常看起来像真正的产品。这意味着，在可用性测试会话中，测试参与者将更有可能自然地表现——就好像他们正在与真实产品交互一样。
对特定 UI 元素或交互的测试。借助高保真交互性，可以测试平面元素，或特定交互, 比如动画过渡和微交互。
轻松获得客户和利益相关者的认同。这种类型的原型也适合向利益相关者演示。它使客户和潜在投资者清楚地了解产品应该如何工作。一个优秀的高保真原型让人们对你的设计感到兴奋，但低保真的原型则不然。

 缺点：

成本较高。 与低保真原型相比，创建高保真原型意味着更高的时间成本和财务成本

低保真：

低保真（lo-fi）原型设计是将高级设计概念转换为有形的、可测试物的简便快捷方法。它首要的也是最重要的作用是——检查和测试产品功能，而不是产品的视觉外观。

 低保真模型的基本特征：

视觉设计：仅呈现最终产品的一部分视觉属性（例如元素的形状，基本视觉层次等）。
内容：仅包含内容的关键元素。
交互性：原型可以由真人模拟。 在测试期间，熟悉页面流程的设计师就相当于一个“计算机”，实时手动呈现设计页面。此外，也可以给线框图制作交互效果，这种称为“交互线框图”。

 优点：

便宜。 低保真原型制作的明显优势在于其极低的成本。快速。 可以在五到十分钟内创建一个低保真纸原型。 让产品团队可以毫不费力地探索不同的想法。
协作。 这种原型设计刺激了小组协作。它的设计不需要什么特殊技能，因此更多人可以参与到设计过程。 即使是非设计师也可以在创意过程中发挥积极作用。
清晰。 团队成员和利益相关者对将来的项目有了更清晰的期望

 缺点：

测试期间的不确定性。 使用低保真原型，对于测试者来说，容易不清楚到底什么本来是有效的，什么不是。另外，低保真原型需要用户充分的想象力，也限制了用户测试的效果。
有限的交互性。 使用这种类型的原型想要传达复杂的动画或转场效果是不可能的。

4.原型设计工具实践：软件登录程序

登录页：

登录页输入账号密码即可登录，也可点击忘记密码或者新用户注册账号进行注册。

 

 

 注册页：

在此页面进行新帐号的注册，点击返回可返回上个页面及登录页，点击注册转入下个页面

 

 

 忘记密码页：

在登录页面点击忘记密码即可来到此页面，用于用户忘记密码的情况，点击返回即可返回上一页面，输入手机号即可进行身份验证。

 

 

 验证页：

用于当用户在注册页或者忘记密码页面输入手机号进行验证时即可跳转该页面，输入手机短信验证码进行身份验证，点击返回可返回上一页面。

 

 

 

 设置密码页：

1.该图为新用户注册并验证身份后输入新的密码，点击确认注册可返回登录页，点击返回即可返回上一页面。

 

 2.该图为忘记密码并且验证身份后进行用户账号密码的重置，输入新密码后点击确认修改即可返回登录页面进行登录，点击返回即可返回上一页面。