纸张原型规则

包括Zhenya Rynzhuk，Louis Paquet和Maria de La Paz Vargas在内的顶级设计师以及才华横溢的MediaMonks团队都影响了我的动画方法。许多项目需要定制动画，推动CSS和JavaScript边界。但是，资源受限的项目通常要求开发人员领导UI动画设计和UX注意事项。一个简单的技巧有助于衡量动画有效性：纸张原型规则。

摆脱印刷心态

网页设计通常从打印设计继承原理。交互式元素（例如手风琴和选项卡）是物理信息存储的数字版本。尽管该行业采用了数字优先的方法，但印刷思想仍然存在。开发人员可能会默认模仿纸张运动的动画，从而限制创造力。

介绍纸张原型规则

我多年的经验塑造了我的动画准则，我现在与团队分享。纸张原型规则是关键：

如果纸张原型可以重新创建动画，则可能需要改进。

目的不是要过度复杂，而是利用超出印刷限制的数字优势。规则很简单：动画可以用纸复制吗？如果是，则有增强的空间。如果没有，动画可能会更具创新性。

应用纸张原型规则

纸张原型制作对于用户测试很有价值，但其简单性有助于确定过度简单的交互。考虑网站导航：设计可能指定活动状态和非活动状态。这很容易用纸复制（一张在另一片上）。我们可以做得更好。

没有过渡规格，简单的transform属性可显着改善体验。滑动活动菜单状态提供清晰度和上下文，显示为覆盖。功能性，可以用纸做到吗？是的。需要更多改进。

我们可以使用数字技术 - 褪色，掩盖，视差，杂型或独立的菜单部分的动画 - 创建独特的数字体验。让我们用这些技术增强简单的幻灯片：

结果超越了纸张心态。纸可以滑动，但不会随偏移动画而褪色。取决于项目，可以进一步改进。目的是摆脱印刷限制并包含数字可能性。

将纸张原型规则集成到工作流程中，可以持续改进。研究动画原理，并从其他网站寻求灵感。在旋转木马，模态或互动元素上工作时，请询问：它是否通过纸张原型测试？

JJ Ying通过Unsplash by Jj ying的标题图像。

以上是纸张原型规则的详细内容。更多信息请关注PHP中文网其他相关文章！