2017-1-2 周周
@Akane_Lee :很多项目在开发过程中,会制作原型测试与验证构想。但项目开发会经过许多阶段,也有很多种制原型的方式。该如何配合项目开发进度,制作适合的 原型呢?这篇文章列出了每一个设计阶段对应的原型设计,能解决不少设计师的困惑。
开发者对于产品一定有各式各样的想法,并尽力让用户觉得产品「好用」。但开发者该如何确定目前产品设计走向能让用户觉得好用?可透过「使用者测试」这个方法验证。我们可以透过原型测试用户想透过产品完成某项任务时,需经过哪些页面的流程;观察使用者在操作过程中是否有感到任何不顺或迟疑的地方等等。
有些文献将原型分成低保真、高保真等等。我将原型粗分成:
每一种 原型 用途、制作方法、成本、使用时机都不相同,各有利弊。
最快速的原型制作方式,只需要纸笔即可完成,不需要经过耗时的专业训练即可上手。只要在纸上绘制简单的 Wireframe (线框图)就能进行使用者测试。
要制作纸本 原型,需先考虑用户想操作产品完成某一任务时会经过的所有页面,绘制简易 Wireframe。
使用时机
优点
缺点
这是我最少使用的制作原型方式,虽然只要纸、笔、便利贴…等文具就可以完成,但和最终产品落差太大,主要拿来测试 Wireframe 内容版面配置、检查有没有漏页面。
或者是和 PM 或 RD 讨论过程中各执一词僵持不下时,为了说服他人而制作的简易 原型,开发团队内部讨论使用。但也和实际手机或网站上操作落差太大,效果不佳。
UI Stencils | iPhone Stencil Kit 这间公司提供很炫的金属样板,包含 iOS、Android、Web 等等,可以手绘出漂亮整齐的 Wireframe 。不见得好用,但摆在桌上看起来就很专业。我手上的是第一代,目前样板已经更新很多次版本了。
因为用户操作纸本 原型 和操作电子产品感受和习惯完全不同,保留快速制作 原型 的优点,改善操作落差极大的缺点,延伸出这种制作原型的方式:
使用时机
优点
缺点
真要拿手绘 Wireframe 制作 原型,我会使用 POP – Prototyping on Paper,可以在极短时间内将手绘纸本 Wireframe 制作成可操作的 原型。减少纸本和电子产品在操作上的落差,尽量接近实际使用情境。
我大多拿来测试「单一任务」的操作流程,不会把整个产品都做成 原型,页面太多管理不易,要修改也麻烦。
手绘 Wireframe 等级的原型我都不会当成是正式测试,顶多拿来确定「这样做用户能够顺利完成任务吗」,和最后产品落差实在太大。而且就算是信息公司,主管、老板、甚至开发团队里看不懂 Wireframe 的人也是有,看不懂也没办法拿这个和对方沟通讨论。
早期经验不足时,会依赖这种作法来验证自己的设计,几年下来会发现工具型 App 界面大同小异、操作方式就那几套。除非是游戏类、创新/找不到参考的界面设计,不然我不会制作 Wireframe 等级的原型。
许多使用者看不懂 Wireframe,直到 Mockup 阶段才能理解。若要对外部进行使用者测试,原型尽量拿接近最终发布的产品,得到的结果较精准。
使用时机
优点
缺点
现况我最常做的 原型 是这类型,用 Mockup 制作出来的 原型 不管对内或对外,使用者都看得懂。
目前业界不少人制作 Mockup 等级的 原型 时,会使用 InVision,简易快速易上手,且支持团队协作。可免费试用,对于初次接触 原型 的开发者来说,短短时间就能做出有模有样的 原型。
虽然 Mockup 等级的 原型 没办法确认程序数据面的状况、也没办法测试当使用者操作不是按照规划预期时产品如何反应,但就以视觉设计、内容排版、操作易用性来说,Mockup 等级的 原型 算是不需要动用工程师撰写程序,只需要设计师执行、成本较低的 原型 制作方式了。
介于 Mockup 和程序制作间,静态 HTML,尚未套后台串数据库,使用假数据。能测试动态效果对用户的影响。
使用时机
优点
缺点
几乎只要动用到工程师写程序,制作成本就会提高,Hype3 能让设计师不用写程序代码就产出 HTML、CSS、JS,功能强大、容易上手、支持中文界面。是我爱用的工具软件,尤其在制作动画效果,配合时间轴和场景、对象等,可以在短时间内做出假以乱真的 原型。
如果要测试动态效果,限度的 原型 要做到 Web 这个等级。顺带一提,Hype3 的物理引擎非常有趣,不在意产出的程序代码和效能的话,做简单的小游戏很有意思,单纯拿来做 原型 有点大材小用了。
离上架产品只差一步,已套程序数据库。到这一步再来测「好不好用」已经来不及了,真要修改劳师动众。在这阶段要测的是各种「错误」,比如使用者操作错误;GPS、Wifi 不通时产品怎么响应用户等等,还有程序 Bug。
使用时机
优点
缺点
无论是 Wireframe、Mockup、Web 产出的 原型,都没办法完整检视整个产品。只有到了程序代码阶段、工程师套好程序串数据库,才能测试产品各个面向对使用者操作上的影响。
动用人力多、成本极高,一旦发现问题要修改会烧更多钱,但每个产品上架前最好都要经过这个步骤。
原型 是拿来验证、找出问题的方法,不是有做就能保平安。原型 只能告诉你问题在哪,不会告诉你问题怎么解决。
不管是什么样子的 原型、修改再多次,产品上架后一定会有更多出乎意料的各种状况。公开发布前有先做 原型 测试,起码开发团队知道问题出在哪、有机会改善它。不做 原型 就直接上架,产品的问题在哪就是由使用者透过一星评价或客诉来告诉你了。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务