原型设计工具比较及实践

墨刀

优点：

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

2.内置了很多移动端的素材库, 做这类原型的时候会方便很多，易用性也强很多。

3.可自动生成页面流程图；

缺点：

1．交互效果有限。

2．必须在线操作。

3．免费内容有限。

4．图片处理效果有限

适用领域：产品经理、交互设计师、用户体验师、创业团队、在校学生、初学产品设计的在职人员。

Axure

优点：

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

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

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

缺点：

1.正版的Axure售价其高。

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

3.Axure只支持在本地设计。

适用领域：Axure RP的使用者主要包括商业分析师、信息架构师、产品经理、IT咨询师、用户体验设计师、交互设计师、UI设计师，架构师、程序员。

Mockpuls

优点：

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

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

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

缺点：

1.不支持手势交互

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

适用领域：适合软件团队、个人在软件开发的设计阶段使用。

 

低保真：

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

以下是低保真原型的基本特征：

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

优点

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

缺点

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

 

高保真：

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

高保真原型的基本特征包括:

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

优点

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

缺点

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

*原型设计实践

主题：饥荒游戏辅助

功能：登录/退出，资料查询，咨询浏览，食谱模拟，个人资料查看

1.登陆界面

界面设计：仿造饥荒游戏界面设计

界面功能：登陆软件

界面组成：后页背景，logo，登录按钮，游客体验按钮，微信，qq，微博多账户登录选项

前置条件：无

后置操作：成功登录，进入首页

操作步骤：点击“一键登录”

 

2.主界面

界面设计：仿造饥荒游戏界面设计

界面功能：游戏资料查询，关键词搜索，最新资讯，讨论区，好友，个人资料，设置

界面组成：背景，搜索框，资料选项，资讯框，下部快捷栏

前置条件：点击登录按钮

后置操作：跳转“个人资料”页面，跳转“食谱模拟”页面

操作步骤：点击相应图标

 

3.食谱模拟界面

界面设计：仿造饥荒游戏界面设计

界面功能：食谱模拟

界面组成：背景，提示框，材料输入格，成品输出格，食材栏

前置条件：点击“食谱模拟”按钮

后置操作：跳转至主界面

操作步骤：点击右上角“x”按钮

 

4.个人资料界面

界面设计：仿造饥荒游戏界面设计

界面功能：查看个人信息，查看大头像

界面组成：背景，提示框，资料框

前置条件：点击“个人信息”按钮

后置操作：跳转至主界面

操作步骤：点击“√”按钮