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

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

2017/01/04 5666评论区

prototype-design-stage-and-comparison-1

@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.akanelee.me

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

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

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

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 界面设计 版式设计 排版布局 职场 优设专访 设计师干货 优设大课堂 设计达人 配色 web前端开发 视觉设计 素材下载 AI教程 设计理论 设计流程 神器下载 字体下载 设计师专访 psd下载 设计规范 海报设计 设计趋势 用户体验设计 动效设计 平面设计 logo设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里