原型设计工具比较与实践

原型设计

当今快速成长的产品行业中，用户体验(UX)设计变得越来越重要。很明显，以设计为导向的公司相对于其他公司更有竞争力。“原型”对创造成功的用户体验至关重要。但是对许多产品团队来说，原型仍然是UX设计过程中最令人困惑的部分之一。毫无疑问，原型可以是任何东西，从一系列代表app的不同界面或状态的纸质草图，到功能齐全、像素完美的app。

一、什么是“原型”

我们经常在不同的背景里看到“原型”这个词。由此，我们很可能已经混淆它的真正含义。
它最基本的含义：原型是设计想法的表达。原型让设计师们得以展现他们的设计，以及模拟真实的使用场景。在数字化的背景下，原型能够模拟用户与界面之间的最终交互行为。根据产品团队的需求，原型可以模拟整个app或仅单个交互行为。原型可以模拟最终产品的运作方式。它支持产品团队测试其设计的可用性和可行性。也有很多人将原型与草图，线框图和模型混淆，实际上它们不同于原型。“交互性”这个概念是原型的根本，因此这就是为什么草图，线框图和模型不能被视为“原型”的理由。

二、原型设计工具

墨刀优点：

1.操作效率高，易于上手。

2.动效丰富。

3.分享二维码到微信等十分方便。

4.可自动生成页面流程图。

5.专为移动端产品原型设计而生。基本上能满足移动端产品原型的设计要求并且系统控件都是基于APP，以及系统平台IOS和安卓，因此在里面可以首先选择相应的设备布局，减少了不少不必要的工作环节。

缺点：

1.必须在线操作（离线无法保存）。

2.免费版对于项目数量、页面数量有限制。

3.页面流程图不能自由操作。

Axure 优点：

1.有强大的编辑功能, 使得制作素材库会更便捷一点。

2.更快的复制粘贴，素材库和原型库会多一些。

3.可以项目共享，使得同事间可以同步工作，并保留所有工作历史，并可以随时到处历史版本的项目文档。

缺点： 1.正版的Axure售价高，学生等群体可能负担不起。

2.动态面板和中继器较为复杂，要完全弄懂也需要一定的时间成本，学习成本高。

3.Axure只支持在本地设计

MockPlus 优点：

1.基础版免费使用，操作简单，上手快，交互简单(只需拖曳就可以)，功能多样，组件资源丰富，预览方式和导出类型多样，支持团队协作。

2.有原型演示，可以帮助前端设计师、后端程序员更好地理解你的原型产品。

3.mockplus有组件库和图标库，界面设计较为方便。

缺点：

1.不支持鼠标悬停，手机预览不是很清楚，日历表组件是静态的。

2.表格功能还需要完善。

三、原型设计中的低保真和高保真

低保真：当我们明确了产品的业务需及使用场景以后，产品经理和交互设计师们可以使用低保真原型来较快的设计产品的概貌。产品经理和交互设计师们通过项目早期阶段已经明确了产品的功能需求及业务范围，基本上已经知道了产品需要做什么。根据业务会议上确定的产品方案，首先需要梳理清楚产品的功能结构和信息结构，根据业务需求推导出详细的功能点。好了，通过这些工作产品的战略目标、需求范围、功能结构都已经清楚了。线框图又称为低保真原型。

特征：

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

优点:

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

缺点:

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

高保真：高保真原型常用于向高层领导进行产品演示或者向投资人演示产品概念，以寻求项目融资。高保真原型又可以成为产品的Demo，除了没有真实的后台数据进行支撑外，几乎可以模拟前端界面的所有功能，完全是一个高仿产品。对于一些非IT科班出身的高层领导、老板及投资人，如果我们希望他们能够尽可能详细的了解产品的功能及业务需求，这个时候低保真原型并不一定使用，因为他们总是能够从低保真原型中找到一些他们不理解的“问题”。因此在这个时候，他们希望看到的是一个无线接近线上产品的高仿Demo，从视觉显示以及交互动作上都和真实产品大致相同。高保真原型需要在低保真的基础上进行配色，插入真实的图片及icon图标。这样从视觉显示及交互设计来看，就是一个完全高仿的Demo原型。

特征:

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

优点:

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

缺点: