原型设计工具比较及实践

Posted 2021-05-29 贫穷的团子

本文将对比分析墨刀、Axure、Mockplus等原型设计工具的各自的适用领域及优缺点，介绍原型设计中的低保真和高保真，并利用墨刀进行一款游戏账号交易软件的原型设计。

一、几种原型设计工具的比较

1、墨刀

　　优点：

• 拥有PC端、手机端、网页版，让你随时随地可以进行产品原型设计；
• 其定位是主要用于设计移动APP原型，其控件的拖拉、大小的调整，都会自然去匹配相应的母版大小，非常人性化；
• 提供了强大的共享创建功能，方便用户的手机上预览原型。

　　缺点：

• 对交互效果、控件组合、操作面板的选择都不如Axure灵活；
• 内置交互效果包括点击、滑动、滚动等，做高保真原型的时候不够用；
• 效果切换因为是采用连线的方式，有时会让用户产生错乱的感觉。

2、Axure

　　优点：

• 功能齐全，交互多样，通过动态面板、函数、中继器等几乎可以实现任何常见的交互效果，在制作PC端原型图上非常有优势；
• Axure拥有强大的编辑功能，你可以将常用的交互和组件打包，自行制作素材库。

　　缺点：

• 虽然动态面板、中继器等功能都很强大，但是不容易搞懂，入门难度较高；
• Axure的素材也是让人头疼的问题，一般情况下，用户会去第三方素材库进行寻找，需要花费不少时间。

3、Mockplus

　　优点：

• Mockplus是一款简洁快速的原型图设计工具。适合软件团队、个人在软件开发的设计阶段使用。其低保真、无需学习、快速上手、功能够用；
• 并能够很好地表达自己的设计。设计了组件、图标、收藏、母版的 Tab，切换起来很方便。还筛选了一部分常用的组件固定在组件库上面，实现高频操作不用找；
• 折叠面板很棒，不用纠结展开和关闭的问题。

　　缺点：

• 保真低 ；
• 不支持手势交互。

二、低保真与高保真的介绍

1、“保真度”定义

 

　　原型不一定要看起来像最终产品——它们可以有不同保真度。 原型的保真度指的是它如何传达最终产品的外观（也就是指它的细节和真实感级别）。

　　保真度可以在以下方面有所不同：

 

• 视觉设计

 

 

• 内容

 

 

• 交互性

 

　　原型的类型有很多，基本介于这两种类型之间：

 

• 低保真

 

 

• 高保真

 

　　产品团队根据原型设计的目的、设计完整性和可用资源来选择原型的保真度。

2、低保真（Io-fi）原型

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

　　低保真原型的基本特征：

• 视觉设计：仅呈现最终产品的一部分视觉属性（例如元素的形状，基本视觉层次等）。

• 内容：仅包含内容的关键元素。

• 交互性：原型可以由真人模拟。 在测试期间，熟悉页面流程的设计师就相当于一个“计算机”，实时手动呈现设计页面。此外，也可以给线框图制作交互效果，这种称为“交互线框图”。

　　优点：

• 便宜。 低保真原型制作的明显优势在于其极低的成本。

• 快速。 可以在五到十分钟内创建一个低保真纸原型。 让产品团队可以毫不费力地探索不同的想法。

• 协作。 这种原型设计刺激了小组协作。它的设计不需要什么特殊技能，因此更多人可以参与到设计过程。 即使是非设计师也可以在创意过程中发挥积极作用。

• 清晰。 团队成员和利益相关者对将来的项目有了更清晰的期望

　　缺点：

• 测试期间的不确定性。 使用低保真原型，对于测试者来说，容易不清楚到底什么本来是有效的，什么不是。另外，低保真原型需要用户充分的想象力，也限制了用户测试的效果。

• 有限的交互性。 使用这种类型的原型想要传达复杂的动画或转场效果是不可能的。

3、高保真（Ho-fi）原型

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

　　高保真原型的基本特征：

• 视觉设计：逼真细致的设计 – 所有界面元素、间距和图形看起来就像一个真正的app或网站。

• 内容：设计人员使用真实或类似于真实内容。原型包括最终设计中显示的大部分或全部内容。

• 交互性：原型在交互层面非常逼真。

　　优点：

• 可用性测试期间获取有意义的反馈。对于用户来说，高保真原型通常看起来像真正的产品。这意味着，在可用性测试会话中，测试参与者将更有可能自然地表现——就好像他们正在与真实产品交互一样。

• 对特定 UI 元素或交互的测试。借助高保真交互性，可以测试平面元素，或特定交互, 比如动画过渡和微交互。

• 轻松获得客户和利益相关者的认同。这种类型的原型也适合向利益相关者演示。它使客户和潜在投资者清楚地了解产品应该如何工作。一个优秀的高保真原型让人们对你的设计感到兴奋，但低保真的原型则不然。

　　缺点：

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

三、利用墨刀原型设计工具进行原型设计

　　主题：游戏账号交易

　　功能：对多种游戏提供账号查询功能、提供游戏账号买卖功能。

　　主要设计因素：

• 随着网页游戏的发展，越来越多的玩家想要获得快速且爽快的游戏体验，本设计为了满足用户快餐式的游戏体验，提出了游戏账号交易的功能设计，使得玩家在花费一定代价的基础上，能够在一开始便获得具有一定基础的游戏账号。
• 对于界面的设计，主要考虑到能够使用户感到方便、干净，因此界面设计较为简洁，同时保证较为齐全的功能。

　　页面详细介绍：（本次演示只涉及部分功能）

　　1、主页面：

• 此界面为软件的初始界面；
• 具备账号查询功能。能根据喜欢的游戏进入相应游戏的账号查询，也能从账号、租号、代练、游戏币、道具等接口进入不同的账号查询功能界面；
• 可从界面下边界功能选区中通过首页、我要买、我要卖、我的四个接口分别进入具有相应功能的界面。

　　2、“我要卖”界面

 

• 此界面可由下边界功能选区中的“我要卖”进入；
• 在这个界面中，卖家可以选择或搜选自己想要卖出账号相关的游戏。
• 同时，用户可从下边界功能选区中进入其他的界面。

　　3、“我的”界面

• 此界面可从下边界功能选区中的“我的”选项进入；
• 此界面主要包含用户个人信息管理、系统功能设置等功能，其各种功能清晰明了，令用户一目了然；
• 同时，用户可从下边界功能选区中进入其他的界面。

　　4、账号查询界面

• 此界面由主页面中原神图标点击进入；
• 可以看到此界面中出现众多与原神游戏有关的账号信息，用户可从众多账号中挑选自己满意的账号进行购买；
• 同时此界面还提供信息排序功能，点击综合排序，即可转换到如下状态：

• 此时用户可从众多排序方案中选取自己想要的一种，在本次演示中，选择价格从高到低排序；
• 点击价格从高到低后，转换到如下状态：

• 在此状态中，我们看到商品价格已经按照从大到小排序；
• 当用户浏览完毕后，可点击左上角返回图标，返回到主页面中，进行下一轮操作。

　　以上便是本次设计的全部内容，设计中其他功能将在接下来的设计中，进一步完善。