原型设计工具比较及实践

Posted on 2021-05-29 17:03  贫穷的团子  阅读(181)  评论(0编辑  收藏  举报

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

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、账号查询界面

  • 此界面由主页面中原神图标点击进入;
  • 可以看到此界面中出现众多与原神游戏有关的账号信息,用户可从众多账号中挑选自己满意的账号进行购买;
  • 同时此界面还提供信息排序功能,点击综合排序,即可转换到如下状态:
  • 此时用户可从众多排序方案中选取自己想要的一种,在本次演示中,选择价格从高到低排序;
  • 点击价格从高到低后,转换到如下状态:

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

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

 

Copyright © 2024 贫穷的团子
Powered by .NET 8.0 on Kubernetes