为了少改稿,我列出了5种原型的使用阶段和优缺点分析

2017-1-2    周周

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

@Akane_Lee :很多项目在开发过程中,会制作原型测试与验证构想。但项目开发会经过许多阶段,也有很多种制原型的方式。该如何配合项目开发进度,制作适合的 原型呢?这篇文章列出了每一个设计阶段对应的原型设计,能解决不少设计师的困惑。

原型用途

开发者对于产品一定有各式各样的想法,并尽力让用户觉得产品「好用」。但开发者该如何确定目前产品设计走向能让用户觉得好用?可透过「使用者测试」这个方法验证。我们可以透过原型测试用户想透过产品完成某项任务时,需经过哪些页面的流程;观察使用者在操作过程中是否有感到任何不顺或迟疑的地方等等。

有些文献将原型分成低保真、高保真等等。我将原型粗分成:

  1. 纸本 原型
  2. Wireframe
  3. Mockup
  4. Web
  5. Code

每一种 原型 用途、制作方法、成本、使用时机都不相同,各有利弊。

纸本原型

最快速的原型制作方式,只需要纸笔即可完成,不需要经过耗时的专业训练即可上手。只要在纸上绘制简单的 Wireframe (线框图)就能进行使用者测试。

要制作纸本 原型,需先考虑用户想操作产品完成某一任务时会经过的所有页面,绘制简易 Wireframe。

使用时机

  • 项目初期,已确定功能,尚未正式开始绘制 Wireframe 文件时
  • 适合内部讨论。

优点

  • 制作成本低
  • 制作容易、速度快
  • 修改方便
  • 产品开发初期就能确认操作流程,在尚未投入大量人力进行开发前实时修改设计

缺点

  • 失真严重,和最后上架产品落差极大
  • 用户操作纸本原型和操作电子产品感受和习惯完全不同
  • 使用者有可能看不懂 Wireframe

这是我最少使用的制作原型方式,虽然只要纸、笔、便利贴…等文具就可以完成,但和最终产品落差太大,主要拿来测试 Wireframe 内容版面配置、检查有没有漏页面。

或者是和 PM 或 RD 讨论过程中各执一词僵持不下时,为了说服他人而制作的简易 原型,开发团队内部讨论使用。但也和实际手机或网站上操作落差太大,效果不佳。

UI Stencils | iPhone Stencil Kit 这间公司提供很炫的金属样板,包含 iOS、Android、Web 等等,可以手绘出漂亮整齐的 Wireframe 。不见得好用,但摆在桌上看起来就很专业。我手上的是第一代,目前样板已经更新很多次版本了。

Wireframe

因为用户操作纸本 原型 和操作电子产品感受和习惯完全不同,保留快速制作 原型 的优点,改善操作落差极大的缺点,延伸出这种制作原型的方式:

  1. 绘制纸本 Wireframe
  2. 拍照
  3. 在照片上设定触控范围、Link

使用时机

  • 项目初期,已确定功能,尚未正式开始绘制Wireframe文件时。
  • 适合内部讨论,或和有经验的客户沟通。

优点

  • 改善用户操作,纸本原型和操作电子产品感受和习惯完全不同
  • 制作成本低、容易、速度快
  • 修改还算方便
  • 产品开发初期就能确认操作流程,在尚未投入大量人力进行开发前实时修改设计

缺点

  • 失真严重,和最后上架产品落差极大
  • 和真实使用者情境几乎不同
  • 使用者有可能看不懂 Wireframe

真要拿手绘 Wireframe 制作 原型,我会使用 POP – Prototyping on Paper,可以在极短时间内将手绘纸本 Wireframe 制作成可操作的 原型。减少纸本和电子产品在操作上的落差,尽量接近实际使用情境。

我大多拿来测试「单一任务」的操作流程,不会把整个产品都做成 原型,页面太多管理不易,要修改也麻烦。

手绘 Wireframe 等级的原型我都不会当成是正式测试,顶多拿来确定「这样做用户能够顺利完成任务吗」,和最后产品落差实在太大。而且就算是信息公司,主管、老板、甚至开发团队里看不懂 Wireframe 的人也是有,看不懂也没办法拿这个和对方沟通讨论。

早期经验不足时,会依赖这种作法来验证自己的设计,几年下来会发现工具型 App 界面大同小异、操作方式就那几套。除非是游戏类、创新/找不到参考的界面设计,不然我不会制作 Wireframe 等级的原型。

Mockup

许多使用者看不懂 Wireframe,直到 Mockup 阶段才能理解。若要对外部进行使用者测试,原型尽量拿接近最终发布的产品,得到的结果较精准。

使用时机

  • 已确定 Wireframe,需要测试视觉设计对用户的影响时。
  • 外部测试最基本的 原型 样式。

优点

  • 拟真度高,接近最终发表产品。
  • 使用者容易理解
  • 可测试视觉设计对用户的影响。

缺点

  • 修改较麻烦
  • 只能验证预期内的操作任务
  • 和最终产品仍有落差
  • 当使用者有预料外的操作时无法反应

现况我最常做的 原型 是这类型,用 Mockup 制作出来的 原型 不管对内或对外,使用者都看得懂。

目前业界不少人制作 Mockup 等级的 原型 时,会使用 InVision,简易快速易上手,且支持团队协作。可免费试用,对于初次接触 原型 的开发者来说,短短时间就能做出有模有样的 原型。

虽然 Mockup 等级的 原型 没办法确认程序数据面的状况、也没办法测试当使用者操作不是按照规划预期时产品如何反应,但就以视觉设计、内容排版、操作易用性来说,Mockup 等级的 原型 算是不需要动用工程师撰写程序,只需要设计师执行、成本较低的 原型 制作方式了。

Web

介于 Mockup 和程序制作间,静态 HTML,尚未套后台串数据库,使用假数据。能测试动态效果对用户的影响。

使用时机

  • 已确认 Mockup
  • 需确认动态效果对用户的影响

优点

  • 有数值的动态效果,供开发者参考
  • 比 Mockup 更精准的 原型
  • 可挂 GA 让外部使用者进行封测、收集数据

缺点

  • 开发时间较长
  • 专业技术需求较高
  • 修改不易

几乎只要动用到工程师写程序,制作成本就会提高,Hype3 能让设计师不用写程序代码就产出 HTML、CSS、JS,功能强大、容易上手、支持中文界面。是我爱用的工具软件,尤其在制作动画效果,配合时间轴和场景、对象等,可以在短时间内做出假以乱真的 原型。

如果要测试动态效果,限度的 原型 要做到 Web 这个等级。顺带一提,Hype3 的物理引擎非常有趣,不在意产出的程序代码和效能的话,做简单的小游戏很有意思,单纯拿来做 原型 有点大材小用了。

  1. 《无代码做动效神器Hype3入门教程》
  2. 《教你用HYPE3做APP原型的基础过场(附神器)》
  3. 《教你用HYPE无代码制作PATH扇形菜单动画》

Code

离上架产品只差一步,已套程序数据库。到这一步再来测「好不好用」已经来不及了,真要修改劳师动众。在这阶段要测的是各种「错误」,比如使用者操作错误;GPS、Wifi 不通时产品怎么响应用户等等,还有程序 Bug。

使用时机

  • 产品上架前的最后测试

优点

  • 几近于最终产品,测试结果最贴近上架后的使用者反应

缺点

  • 开发时间最长,成本高
  • 专业技术需求较高
  • 修改不易

无论是 Wireframe、Mockup、Web 产出的 原型,都没办法完整检视整个产品。只有到了程序代码阶段、工程师套好程序串数据库,才能测试产品各个面向对使用者操作上的影响。

动用人力多、成本极高,一旦发现问题要修改会烧更多钱,但每个产品上架前最好都要经过这个步骤。

结语

原型 是拿来验证、找出问题的方法,不是有做就能保平安。原型 只能告诉你问题在哪,不会告诉你问题怎么解决。

不管是什么样子的 原型、修改再多次,产品上架后一定会有更多出乎意料的各种状况。公开发布前有先做 原型 测试,起码开发团队知道问题出在哪、有机会改善它。不做 原型 就直接上架,产品的问题在哪就是由使用者透过一星评价或客诉来告诉你了。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

 

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档