分享

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

 昵称kb2t0 2017-01-05

@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 产出的 原型,都没办法完整检视整个产品。只有到了程序代码阶段、工程师套好程序串数据库,才能测试产品各个面向对使用者操作上的影响。

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

结语

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

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

「少改稿的利器,除了原型还有这些方法」

  1. 先搞懂流程丨学会这3招,跟反复改稿SAY NO!
  2. 再确定视觉风格丨如何确定一个产品的主视觉风格?(附实战演示)
  3. 掌握沟通技巧,减少盲目改稿丨10个值得设计师学习的沟通技巧
  4. 版本控制术,改回第一稿也不怕丨设计师最常用的三种版本控制方法(附工具盘点)
  5. 高效操作,改再多也不怕丨四个不为人知的PHOTOSHOP高效操作秘籍

原文地址:blog.

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量180万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.uisdc.com/prototype-design-stage-and-comparison

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多