打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
为什么说产品经理必须要会手绘原型?
只用纸和笔,也能让你当一个好的产品设计。

编者按:返璞归真,其实是一种极简主义设计理念。在如今的数字时代,设计师可以利用的设计工具不胜枚举。如果把“返璞归真”这种设计理念运用到设计过程中,那将是什么体验?这篇授权翻译自Nick Babich原创的题为The Magic of Paper Prototyping的文章,与你一起探索用传统的纸和笔来做手绘原型的有趣体验。

在如今的数字设计时代,我们可以借助于各种工具来设计原型。但是对用户体验设计师而言,纸和笔才是最有用的工具。

在早期的构思过程中,因为需要一个个验证构思概念并选择确认最终所选,手绘原型图是非常实用的一种方式。通过手绘,可以快速地将想法转化成实际内容,并快速测试和验证。

这篇文章,将向大家简要介绍手绘原型,并推荐3种实用的测试建议。

手绘原型的利弊

就手绘原型的好处而言,大概有如下5个方面:

  • 趣味性很高。手绘原型应该要快,而且有足够的趣味性。如果手绘过程很痛苦,而且画得很慢的话,那肯定是整个原型设计流程出了问题。一定要快速重复和迭代草稿,一般而言只需要几分钟就可以完成简单的原型设计。

  • 成本低。手绘原型一点也不贵,基本的工具只需要纸和笔。相比之下,数字原型设计工具虽然价格不等,但基本上大多数工具都需要一次性购买或者按期订阅。

  • 精力消耗少。如果通过数字工具花几个小时设计一个原型,放弃这个原型想法的时候多多少少都有点不舍得。但是如果用手绘原型的方式,只需要几分钟就可以画一个草图。

  • 更忠实有效的反馈。手绘原型的另一个好处则是其草图概念。这些草图一看就知道只花了很短时间就完成了。因此,相比于数字工具做出来的精细设计稿,手绘原型图能收到更加忠实有效的批评反馈。

  • 有利于团队建设。因为手绘原型不需要太多特殊技巧,无论什么背景的团队成员都可以参与到这个过程中。所以,很容易将原型设计变成团队活动。

当然,手绘原型也存在弊端,主要有以下3个方面:

  • 获取反馈过程中存在一定难度。对参与测试的对象而言,仅仅对手绘原型进行评论需要有足够的想象力。有时候,要从测试对象身上收集直觉反馈可能并不简单,因为只通过看草图,他们可能很难想象产品最终到底是什么样的。

  • 必须亲自测试或当面测试。如果测试对象来自五湖四海,那要用手绘原型来做可用性测试就比较难。

  • 手绘原型其实是额外的步骤。从最终结果来看,手绘原型还是需要转化成数字原型。

什么时候可以用手绘原型?

手绘原型对以下2个场景非常适用:

  • 头脑风暴。比如,当团队成员需要勾画用户流的步骤时。

  • 概念测试。比如,需要进行游击式测试时。

当然,有些设计师肯定会认为,手绘原型只是在早期的产品设计中有用。但这并不是事实。实际上,在产品设计过程中的每个环节,手绘原型都能发挥作用。即便在做高保真原型时,都可以用手绘原型。

手绘原型的11条实用建议

1. 画原型前一定要有清晰的目标

开始原型设计前,一定要有清晰的目标。多思考你想要解决的痛点是什么,原型的设计一定要以解决痛点为目的。

2. 草图就应该是草图

手绘原型的重点不是你的作图技巧和能力,而是尽可能快速地找到问题解决方案。因此,不需要花大量时间将每个细节都画得很完美,也不用在意原型图上的元素是否对齐等等。

3. 借助有用的工具

就手绘原型而言,只真正需要的只有2个工具:纸和笔。除此之外,以下3种工具对有效的手绘原型过程也有帮助:

  • 桌面文件架。我推荐三层文件架:一层放白纸,一层放草图,另外一层放成品手绘原型图。

木制文件架。图片来源:Promidesign

  • 手绘原型套装。套装包括预制的方格纸,以及让手绘原型更加轻松便利的模板纸。

适用于iPad的手绘原型模板。图片来源:tripwiremagazine

  • 图形模板。图形模版可以让你又快又好地设计按钮及图标。

适用于iOS客户端的图形模版。图片来源:Amazon

注意:好工具并不意味着是贵工具。事实上,我更推荐便宜的纸和笔。因为如果你用Moleskin的话,你可能会陷入不停修改草图的困境中。毕竟,用了好笔,可不希望它画出来的是一副“丑”图。

4. 可以用笔,但不能用铅笔

画原型草图时,很多设计师都会掉入一个陷阱:他们开始画图后,中途就开始怀疑自己的想法是否合理正确。因此,好多很好的设计就这样被扼杀在摇篮中。

但是如果是手绘原型的话,设计师能完成设计图的可能性更大。因为手上握着笔会让人有一种使命感——而且只要不是铅笔的话,也无法擦掉重来,只得继续坚持画下去。

5. 一张纸,一个草图

可能你会觉得,为了节约空间,在一张纸上多画几张图更好。但最好不要有这种想法。因为在后期原型测试过程中会出现很多麻烦。比如,假如原型草图上有过多的内容,就会显得杂乱无章,测试参与者可能不了解哪些元素属于哪部分草图。

6. 手绘原型,从最小的屏幕开始

如果你的产品有移动客户端和桌面客户端的话,建议从移动客户端的原型开始。因为在小屏幕的场景下,你会更加关注重要的内容。将大部分时间都花在这些重要内容的优化后,在其它客户端的设计体验过程就会变得易如反掌。

7. 故意使用色彩

画原型草图可以用黑白色,但对于后续的重要部分元素(比如按钮),就可以故意使用其它颜色来高亮。

此外,选定色彩后,要尽量保持整副手绘原型图的一致性。比如,所有的交互元素尽量用一种颜色标注,这样也可以在可用性测试过程中帮你降低认知负载。

8. 除了手绘原型,还要有页面文案

在敏捷(Agile)环境中,设计师和开发者可能都没有足够时间来写页面文案。如果手绘原型的话,就可能解决这个问题。因为纸是看得见摸得着的,设计师在设计过程中就可以很好地进行再利用。

小提示:可以在不同页面或者不同交互过程的草图上添加笔记。附注笔记可以帮助他人理解你的设计想法。另外,在回顾的过程中,也可以利用文字帮你回忆当初这样设计的初衷。

图片来源:jasonrobb

9. 手绘原型完成后,别忘了做好数字备份

做好数字备份最重要的好处,就在于可以避免到处拿着一沓设计稿走来走去。最简单的数字备份,直接用手机拍照即可。

小提示:你也可以通过特定的用户流来做一个动态GIF图。只需要先将特定流中的草图拍照,然后把这些照片用来做成GIF图即可。

10. 除了数字备份,还要创建数字原型

对于低保真的数字原型来说,手绘原型是可以解决问题的。如果你知道Marvel开发的POP工具,你还可以把草图或者图片转化成交互原型。

图片来源:Marvel

11. 手动创建复杂效果

手绘原型还有一个重要作用,即设计师可以通过多种创意方式来模拟视觉效果或交互过程。比如,如果你想得到的话,直接可以模拟出在移动客户端滑动屏幕的效果。

图片来源:Csaba Házi

除此之外,还可以模拟出阴影等效果。有了阴影效果,设计图会显得更加逼真,在向用户或者客户呈现设计方案的过程中也会更有帮助。

图片来源:Google

手绘原型测试的3个实用建议

如果回到最初的问题:我们为什么要做产品原型?这背后的主要原因,是因为可以用原型来进行测试,从真实用户口中得到反馈,并且在产品设计初期就能知道设计想法和理念是否可行。

对于手绘原型的测试,这是一个较大的课题,可能需要详细地介绍。这里,我只跟大家分享3个在测试过程中需要考虑的内容:

1. 协调人以及“人机”角色

如果你用手绘原型来进行可用性测试的话,在每次测试过程中你都需要以下两种角色的人物:

  • 协调人(讲述人)。这是专门向测试参与者讲述相关信息,并与其互动的角色。

  • “人机”。这个角色,即参与测试过程但全程不用说话,并且负责切换页面或页面状态的人。这个角色非常重要,测试效果通常也都取决于这个人操作“计算机”本领的高低,特别是针对测试者的反馈意见或提问后的操作。

千万不要让一个人来承担这两个角色的任务。否则,作为“人机”的协调人很有可能会错过测试者反馈的信息。

2. 测试过程中要设定场景

向测试参与者展示手绘原型时,需要让他们明白设计的场景。因此,要清晰地让他们解释测试场景,并展示手绘原型的设计原理。

在开始测试之前,你需要明白以下3个基本问题:

  • 你为什么设计这个原型?

  • 通过这次测试,你想达到什么目的?

  • 通过这次测试,你希望测试参与者反馈哪些信息?

3. 至少找5个不同的用户参与测试

测试要遵循常规可用性测试的最佳实践,即至少找5个不同的用户参与测试,并做好相关测试记录,以备后续分析之需。

写在最后

手绘原型是一种快速创建并测试设计方案的有效方法。运用合理的话,手绘原型可以达到事半功倍的效果。谢谢!

编译组出品。编辑:郝鹏程

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
【译】UX是什么?概述,工具和资源 | 互联网的那点事
产品经理常用的那些图
干货丨十分钟读懂原型设计
第三章 设计过程、原则及评价第一节 设计的一般过程
4000字干货,看完就懂什么叫产品设计与产品设计流程_Lemonliyi的博客-CSDN博客
精益设计:“纸上谈兵”的说服力
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服