在 Google，设计师被称为“奢侈资源”。
Google 同时推进着数不清的项目，但并不是每个项目都有设计师参与，因此才有了这个称呼。许多项目要么主要解决技术挑战，要么由开发者仅依赖内部设计规范与设计库来推进。因此，设计师往往需要同时参与多个项目。曾经，Google 一则设计师岗位招聘信息的职位描述中甚至写着“具备多线并行处理能力”。
我在 Google 期间也曾同时参与两个以上的项目，甚至一度（虽然是短期）同时处理五个项目。不言而喻，原型在向项目经理或工程师解释设计想法时非常有效。虽然我具备修改他人代码或自行编写代码来制作原型的能力，但工作时间总是紧张，很难专门腾出时间编码。POP（Prototyping on Paper）一度颇受欢迎，但这类通过拍摄手绘草图快照制作的点击式原型，除了检查流程外几乎难以用于其他用途。那时，并没有设计师可以轻松上手、并创建具备丰富视觉效果原型的工具。与一位关系密切的工程师交流后，我萌生了做这样一款工具的想法。几个月后，我做出了一款面向移动设备的原型工具 App.eal，并在过去一年半中为 ProtoPie 的诞生发挥了关键作用。App.eal 允许设计师导入存放在 Google Drive、由图形工具制作的图片并创建高保真原型。这款工具是同类中首个*支持在设置固定头部和固定底部后，根据导入图片高度自动滚动的产品。不过更重要的是，我由此确认：世界各地有很多设计师都在面对与我相同的障碍。
由以下团队介绍的 ProtoPie 前身 App.eal
我离开 Google 去做原型工具时，市场上的原型工具正开始涌现。那时，Framer 的 CoffeeScript 因“几乎什么都能做”而闻名，Origami 则因“无需代码”而有吸引力。但我认为，这两者要么以代码为基础，要么属于可视化编程工具，大多数设计师若想高效使用，都必须从完全不同的角度切入。我开始思考一种设计师能够轻松理解、自然上手的模型。
对易于使用的交互与运动的探索并非新趋势。
Jesse James Garrett 在 2005 年为 Rich Interaction Application 定义了 Ajax，Bill Scott 则推动了它的传播。那时，我研究的是如何在二维线框图上实现可视化：把用户输入，以及该输入如何触发屏幕元素（与时间相关）表达出来。（有效丰富交互设计的设计流程改进，IASDR 2007）我认为，在线框图上进行可视化虽然不需要特殊工具，但需要大量训练，而且通用元素并不能覆盖所有情形，因此需要一种更系统、更精细的方法。
儿童钢琴谱
答案其实近在眼前。某个周末傍晚，我看到 6 岁的儿子在练钢琴时在谱子上做标记。我意识到：如果能把乐谱中“按哪个键、什么音高、音符保持多久”这类符号替换为交互含义，就有可能在一个系统化框架里表达交互。我进一步查阅了机器人领域关于动作表达的论文，也研究了动画工具中如何定义关键帧并放置在时间线上以表示元素运动。最终我发现，早在机器人采用类似概念之前的 1680 年代，Pierre Beauchamp 就已研究过在纸上记录舞蹈动作的方法。
乐谱与 Beauchamp 的舞谱都旨在按时间线性呈现动作，因此其序列无法反向。设备上的交互则会因用户输入、输入时机和条件不同而朝相反方向发展，这使得在单向时间线上表达交互变得困难。我因此得出结论：如果交互需要支持多方向流动，那么像 Adobe After Effects 或 Flash 那样基于单向时间线来创作交互将不可行。
由 EWMN Center 现代化的舞谱，或动作谱中的关键帧，都要求在使用前先对动作进行分类。就像舞谱把人体拆分为不同部位，并按时间表达各部位动作一样，我借用了 Dan Saffer 的 Microinteraction 概念模型，把交互进行了细粒度拆解。即便是最复杂的交互，只要能找到触发点（trigger），就可以依据触发点的位置把微交互拆分为多个纳米交互。接着，我把那些“不是触发”的部分收集起来，并将其命名为“Responses”，以便与用户反馈区分。对由 Responses 构成的动作进行分析后，我发现其中有许多要素在反复出现。
灵光一现！原来交互也有“元素”！
世界上的物质看似无限多，但都由大约 70 种天然元素构成。只要知道一种物质中元素的结合方式（至少在理论上），就可以重建这种物质。比如，钻石和煤都由碳构成，但由于原子结构不同，二者截然不同。
同样的类比也适用于运动。即使某个对象移动固定距离，其速度（或移动持续时间）和加速度不同，运动表现也会不同。换句话说，若去除速度和加速度，剩下的就是运动的基础元素。运动可由最常见的 Move、Scale 和 Rotate 来表达。
构成 Response 的元素
为验证交互元素模型，我分析了 Dribbble.com 上分享的移动应用设计中的各类交互。与运动相关的部分——Response——除 Morph 外，都可以拆解为交互元素。但在移动应用中，Trigger 具有更具体的条件：不同于网页浏览中的点击，Trigger 可接受更丰富的用户输入（如轻点、双击、长按），并可将经过时间和系统状态纳入考虑。因此，有必要进一步拆解并分析 Trigger。元素周期表 提供了一个极佳的类比：最左侧第 1A 族元素（除氢外）主要呈碱性，而第 17 列的 7A 族元素多呈酸性。以此类推，Responses 可类比为 7A 族元素，而 Triggers 类比为 1A 族元素。我把所有 Trigger 元素放在左侧、所有 Response 元素放在右侧，并按复杂度将元素组织成表格。最终得到的表与元素周期表高度相似。由于这些交互元素不仅仅是“元素”，更是可重组的材料，我将其命名为“interaction piece（交互片段）”。
Interaction Piece Table v.2.1
我和伙伴们在 CHI 2015 的 Work-in-Progress 上以“SNAP”之名进行了展示，到场者都带着一种“不太自在却又兴奋”的反应。随后，ProtoPie 的概念模型在 2015 年春完成。因此，我并不认为是我们团队“发明”或“创造”了 ProtoPie。就像伽利略在 17 世纪是“发现”而非“发明”地心理论一样，ProtoPie 也是我们团队从自然规律中“发现”的。一年后，我们发布了ProtoPie 的公开测试版。那种心情就像我第一个儿子出生时一样：幸福与担忧交替出现。
“ProtoPie”这个名字由“prototype”和“a piece of pie”组合而成。
ProtoPie 承载着我们的信念：做原型应该像做派一样美味、一样简单。ProtoPie 仍有很多尚未展现的能力，远超它目前所能呈现的。当然，还有许多 bug 需要解决。但我们之所以有信心展示一个尚未完成的产品，是因为我们希望为这款从设计师思维出发打造的设计工具，获得真实设计师的反馈。我很喜欢一句中国谚语：“细节决定成败。” 这句话的意思是，细节决定成功与失败。直到今天，我们仍在不断打磨原型，只为完善 ProtoPie 的细节——一款能够真正帮你创造你自己细节的工具。
*尽管 App.eal 曾提交专利申请，但后来出现了许多功能集相似的工具。我们没有通过专利去阻止“复制者”，而是撤回了专利申请，以此表达我们对设计社区的回馈。
