Prototype 在设计中的奇妙力量

Prototype，中文叫 “原型”，是设计项目中经常用到的工具。Wikipedia 上对其的定义是：

A prototype is an early sample, model, or release of a product built to test a concept or process or to act as a thing to be replicated or learned from.

也就是说，Prototype 是设计概念或产品的模型，用以表现最核心的功能特征。通过让用户与模型进行互动，来获取真实的反馈，从而更好地探索设计方向。

Prototype 不拘泥于形式，只要能达到它的作用即可。

prototype sample.png

Prototype 在设计项目中的应用

有一种说法是，“Design though research, research through design”。它想表达的是，设计师需要通过调研分析，指导设计方案的探索；同时通过设计出一些东西，从用户那里获得及时的反馈，获得新的洞察，补充调研结果；如此循环，不断迭代设计。在此过程中，Prototype 就是我们投石问路的那颗 “石子”，将可能比较抽象的设计概念具体化、甚至实体化，以便于人们理解，给出真实的反应和意见，帮设计者探到前进的方向。

Prototype 在设计的整个流程中都可以发挥重要作用，可以通过下图概括。

design process.png

下面举栗子来具体说明一下吧。

案例 1：人肉扭蛋机

这是我非常喜欢的一个私人项目，源于我对扭蛋深沉的爱（我是那种在地铁站看到扭蛋机都会忍不住多看几眼的，捂脸）。扭蛋是个很奇妙的仪式，充满了未知的刺激、欢乐与惊喜等情绪特质。那么，是否可以把这些特质移植到其他地方呢？当时的想法是从身边开始，用扭蛋机制来增进同事朋友间的友谊：把自己愿意为他人做的事写下来，放入“扭蛋”，谁扭到了你的蛋（怎么听起来有点怪怪的@~@），你就要向谁兑现那件事。所以，这是“爱的扭蛋机”。

有这个想法的瞬间，已经想到可以做成一个 App 了，甚至脑中已经闪过了一个个页面设计方案。不过等等！大家真的需要这个东西吗？如果只是我自己觉得好玩呢？大家喜欢相互奉献爱心吗？愿意为别人做什么？… 我心中有很多问题是不知道答案的。这时就需要用简单低成本的方式快速验证一下需求。

接下来，我在设计组内开展了一个小活动，集中在午饭时间进行（当时设计组承包一个小房间吃饭，关上门聊各种不可描述的话题，好怀念）。

扭蛋机原型.png

下面是其中几张便签，上面写了愿意为别人做的事。总有人的智慧可以把我亮瞎...

扭蛋机的蛋蛋.png

活动的效果惊人，搞笑有爱惊喜不断。我不但对之前的那些问题有了一定了解，并且通过大家的互动反馈，快速迭代活动的玩法规则，有一些意想不到的收获。

具体的经过和思考就不在这里展开了，之后会单独开一片文章分享。在这个项目中，Prototype 主要在 “分析”、“设计”、“测试” 阶段发挥作用。

案例 2：App 设计

在公司的设计项目中，我会在需要的时候制作 Prototype 来表现设计方案，不但自己可以更好地斟酌细节体验、快速发现问题，还可以用来进行用户测试、获取反馈。

例如，在进行懂你英语（英语流利说核心课程）各类题型的交互设计时，我发现用户在做题时比较费脑，而且有一定的时间压力。怎样让用户轻松理解玩法，为他们在专注答题时减少干扰，让他们享受学习的快感？这需要合理安排题型中各种元素的位置和相互关系、出现时机、动画效果、音效等。

在基本方案出来后，我通常使用 Flinto 或 Keynote 制作 Prototype（下图），在手机上体验，一般这个阶段自己就能发现一些在画图脑补操作时没有发现的问题。进一步优化方案后，再请同事或用户来体验 Prototype，并请他们将使用过程中的任何想法都说出来（Think Aloud）, 结合观察到的操作行为和表情等，就能更好地评估方案、获得改进方向。

cc-prototype_compress-bw.gif

制作 Prototype 的一些 Tips

制作 Prototype 和制作真实产品相比，它的优势是低成本、快速、简单。在制作 Prototype 时需要考虑怎样尽可能地发挥它的这些优势，而不是为了制作而制作。

1. Prototype 是一种思维，是一种在遇到很多问题时会想想“我能用什么方法简单快速地去做实验、去验证或否决我的想法”的精神。

2. 定义清楚做 Prototype 的目标，有针对性地设计原型。点到为止，而不是模拟所有功能细节。Prototype 按精细程度，可分为低保真、中保真、高保真原型。选取什么样的精细度来制作 Prototype，取决于问题的精度。

3. 你的 Prototype 需要获得足够真实的用户反馈，这需要你：

   • 明确测试目的，选择合适的精细度与测试流程；
   • 进行适当引导，让用户有不错的代入感；
   • 快速迭代。根据已测用户的反馈，针对重要问题进行即时优化，以便在之后的用户测试中观察改进效果。

4. 舍得抛弃。记住，制作 Prototype 的作用只是为了学到东西，之后该改进就改进，该推倒重来就推倒重来。千万不要因为花了很多时间精力制作，就不舍得丢掉。

Prototype 与 Demo

在现实工作中，我发现很多人对 Prototype 的理解存在一定误区，且 Prototype 的应用程度不够。大致分享一段和一位设计师朋友的对话。

Conversation.png

从这段对话中，大家是否发现了什么？
X 先森在跟我聊 Prototype，但用的词却是 “Demo”。实际上，我在工作中听到 “Demo” 的次数远比 “Prototype” 多得多。那么这两者有什么区别呢？

Prototype 之前已经提过，是用来做测试、希望从中学到东西的；Demo 是 Demonstration 的缩写，是用来做示范、展示的。前者的目的是更好地改进设计，后者是为了展现设计、沟通方案。Demo 在一些情况下属于 Prototype 的一种分支情况，如果它的意图是通过展示方案在设计评审中获得意见反馈、优化方案的话。

prototype demo.png

好了，要说的就是这些。

愿 Prototype 精神与你同在！