纸质原型规则

我很幸运能与业内一些最优秀的设计师合作，包括 Zhenya Rynzhuk、Louis Paquet、Maria de la Paz Vargas，当然还有 MediaMonks 的众多优秀设计师。 我们参与的许多项目都需要自定义动画和指南，这些指南使开发人员能够充分发挥创意，突破我们对 CSS 和 JavaScript 能力的认知极限。

然后还有一些缺乏资源的项目。 这些项目最终成为我们作为开发人员在某些 UI 元素如何动画以及我们创建的指南是否能创造出色的用户体验方面发挥主导作用的机会。 通常，这些是简单的技巧可以帮助我们确定是否走上正轨的项目。

我碰巧有一个简单的技巧，它帮助我快速测试我的动画是否达到预期效果。 我现在想与大家分享。 我称之为纸质原型规则。

打印思维

网页设计（也许是无意识地）从印刷设计中继承了许多东西。 如果仔细想想，一些最基本的交互式网页模式，例如手风琴或选项卡，只是过去我们物理存储信息方式的数字化表现。

尽管该行业在过去十年中采取了更加以数字优先的思维方式，并超越了印刷范式，但我们经常难以摆脱这种印刷思维方式。 作为开发人员，我们可能已经习惯了以一种无聊标准的方式为 UI 元素制作动画，这种方式不会超出移动纸片的参考范围。

纸质原型规则

多年来，我从与其他人的合作中学习了一些技巧和最佳实践，并将其发展成为一些用于处理动画的简单规则。 虽然我认为这些规则更像是指南或个人参考，但我最近开始将它们传达给我的团队，从而发现了更多价值。

这要归功于纸质原型规则，该规则指出

如果您可以使用纸质原型来再现动画，那么您可能需要花更多时间在上面。

目的不是过度复杂化动画，而是利用创建数字体验的优势，这种体验超越了印刷概念。 原理很简单。 动画可以用纸张制作原型吗？ 如果是，我们可以做得更好。 如果不是，那么我们就有机会了。

纸质原型规则实践

别误会，纸质原型已被证明是用户测试的绝佳工具。 但我们可以利用其简洁性来确定交互何时过于简单。

让我们试个例子。

几乎每个标准网站都有一些导航。 因此，让我们假设我们继承了一个设计 comp，它为活动和非活动导航状态提供了方向。 当然，我们可以做到。 这并不难。

我们可以用印刷品复制这种体验吗？ 当然可以。 只需将一张纸叠在另一张纸上即可。 我们可以做得更好。

假设我们收到的 comps 缺乏有关打开和关闭菜单状态之间过渡的任何方向，我们可以使用 transform 属性使动画稍微好一些。 这本身就大大改善了体验。

只需将菜单的活动状态从左到右滑动，就可以帮助用户了解过渡，并为他们提供一些有关他们身在何处的上下文信息。 毫无疑问，该菜单是一个覆盖页面内容的叠加层。 在我们添加 transform 之前，这一点并不明显。 我们可以说，通过简单的 CSS 代码行，我们现在已经完成了任务。

因此，让我们问自己这个问题：这种交互可以用纸质原型表示吗？ 我的直接回答是：可以。 这意味着还有很大的改进空间。

我们可以利用我们的数字思维方式来创造一些不仅能完成任务，还能提升体验的东西。 我们可以尝试使用淡入淡出、遮罩、视差、交错或简单地将菜单分成独立动画的不同部分等技术。 这是发挥创造力的机会，利用我们的前端技巧来创造独特数字体验。

本着保持简洁的精神，让我们看看应用一些基本技术后它会是什么样子。

好了！ 我们现在开始摆脱纸质思维方式了。 纸张可以从左到右滑动吗？ 可以。 但是它可以淡入淡出内容并带偏移动画吗？ 我还没见过！

而且，正如我之前所说，我们还有很多可以做的事情。 但是我认为你已经明白我的意思了。 你可以花更多时间调整动画以找到“完美”的交互，但这在很大程度上取决于项目。 这条规则的目的是让我们摆脱印刷设计思维方式，拥抱我们为创造独特数字体验而拥有的可能性。

---

一旦您开始将纸质原型规则作为开发流程的一部分付诸实践，您可能会发现自己努力寻找工具来不断改进您的技艺。 我始终建议您学习基本动画原理，并始终从其他网站寻找新的灵感。

所以，下次您在处理轮播、模态框或任何其他交互式组件时，花点时间检查您的动画方法。 它通过了纸质原型测试了吗？