最近，我完成了一个为期 60 天的冲刺，我 每天发布手写代码的僵尸主题 CSS 动画。我学到了很多，但也让我回想起电影学院，并提醒了我关于讲故事、摄影和艺术的许多知识。
事实证明，我当时学到的很多东西与网站相关，特别是网页动画。Sarah Drasner 阐述了 戏剧与开发之间的联系，我认为我会扩展一些与电影相关的想法。
故事让一切都更具吸引力
人类喜欢故事。我无需引用统计数据来证明人们每年在节目、书籍和游戏中花费的数十亿美元。如果您能在网站中注入故事——尤其是动画——它会对您的受众更有吸引力和趣味性。
有许多方法可以定义“故事”是什么，但对于网页来说，动画可以很快或很微妙，我认为故事只需要两样东西：一个**角色**和一个**触发事件**（这仅仅是将主角（或主要角色）带入故事的故事情节）。
以我在 CodePen 上制作的“神奇的意外”演示为例
并没有太多事情发生，但确实有一个故事。我们有一个角色，科学家，当他用缩小射线射向僵尸时，他引发了一个触发事件。射线并没有缩小僵尸，而是缩小了僵尸的帽子，露出了（最终被戴上的）兔子。你会与这些角色产生共鸣吗？可能不会，至少从个人角度来说。但事实是，他们身上发生了一些事情，这足以成为一个吸引人的钩子，让你参与进来。
当然，我倾向于有趣和愚蠢的故事情节，但故事的基调可以很严肃，也可以是其他任何东西。
我相信你能找到适合你网站的故事。
故事让一切都更具个性
人类会将任何事物拟人化。如果你曾经在皮克斯电影中与角色产生共鸣，比如《玩具总动员》或《头脑特工队》，你就知道这种感觉是什么。你添加的角色不必是真实存在的生物，也不必代表一个生物。嘿，我的故事是关于**不死生物**的。
这与网页有什么关系？假设你的应用程序在用户完成任务时会向他们表示祝贺，就像 Slack 在所有未读线程都被清除时会做的那样。
重点是为你的任何动作添加一些个性和目的性。这也是关于将故事——即用户检查未读消息的任务——带到自然（在本例中，是快乐）的结局。这种反馈不仅提供信息，而且让用户以一种个性化的方式参与到故事中。
如果观看者能理解故事的主题，他们就会明白为什么某些东西会移动或改变。他们会将其视为一个角色——即使主题是用户。这就是让某件事更具个性的地方。（你做到了！给你一匹小马。🐴）
在我的“亡灵驾驶员”笔中，注意人类的冷笑
冷笑引入了一种情感元素，通过让主要角色更具相关性，进一步丰富了故事。
用视觉深度吸引注意力
有史以来最伟大的僵尸电影之一，《公民凯恩》之所以流行，原因很多。这是一部很棒的故事，有很棒的表演，但你今天观看这部电影时可能不会注意到的一点是，它在当时是革命性的：**深焦摄影**。深焦允许前景、背景和中间景深同时处于焦点。在此之前，一次只能使用一个焦点。深焦让电影几乎感觉像是 3D 的。
在网页上，我们不受镜头限制（当然，除了嵌入的媒体之外），但让《公民凯恩》的深焦摄影如此有效的一点是，导演奥逊·威尔斯能够在不同的时间将观众的注意力吸引到不同的平面。他有时甚至会让多个平面发生多个事件，但这始终是一个选择。
在网页上使用深焦已经有一段时间了，即使它没有被这样称呼。想想视差滚动，它如何在背景之间添加深度。还有流行的模态模式，其中一个元素占据前景，而背景要么被调暗，要么被模糊。
这就是我的“嘿，嘿，嘿！”笔的想法，它从一个远处的平面上的角色开始，然后让一个出现在前景的僵尸取代它。
在我的“只有我们人类……”笔中，发生了相反的事情。
试着把网站想象成一个 3D 空间，你会发现以前从未考虑过的可能性。虽然现在你的浏览器中可以使用 3D 变换，但这并不是我说的唯一方法。有很多方法可以使用阴影、投影、相对大小、模糊或其他类型的失真来“伪造” 3D 效果。
例如，我在我的“终于，独自一人与我的三明治……”笔中使用了一个堆叠顺序来模拟一个多维空间。注意人类的头部旋转如何为这种效果带来更大的可信度。
用场景将动画提升到下一个层次
我为之感到自豪的一些作品，是那些超越了愚蠢的角色做愚蠢的事情的作品（尽管我也为那些作品感到自豪）。我脑海中浮现了两个特别的动画。
第一个是我称为“午夜僵尸 2”的动画
这个动画之所以突出，是因为相机突然（可能是出乎意料的故事情节转折）将观看者变成了故事中的角色。当僵尸开枪后，相机翻转过来，本质上揭示了是你被射中了。
第二个想到的动画叫做“午饭（在）午夜”
（我显然从给僵尸摘帽子中获得了中学时代的快乐。*耸肩* 容易被逗笑是一种廉价的娱乐。）
同样，相机将事物置于一种第一人称视角，我们面对着一个僵尸厨师，他的帽子被击落了。转折发生在帽子下面出现了一个类似《料理鼠王》的角色，通过放大他来触发一个新的场景。当焦点转向他时，注意他的眼睛如何眯起来。
使用“相机”是将动画提升到下一个层次的绝佳方式；它强迫观众参与。这并不意味着相机应该在每个转弯和每个动画中都盘旋、飞行和缩放，但从 2D 到 3D 的视角切换——如果做得好，并且是为了加深体验——可以增强用户与它的体验。
所以，事实证明，我的电影学院教育确实物有所值！它有很多内容可以直接应用于网页，我希望你也能看到我发现的相同关联。
如果我不指出这篇文章中一个重要的事情，我会感到失职。虽然我认为借鉴故事和讲故事的概念非常棒，并且可能是好体验和伟大体验之间的区别，但它们并不适用于所有情况。比如，在条款和条件页面上让用户经历一个类似故事的体验有什么意义呢？法律内容通常已经是一段有点紧张的阅读，所以增加更多紧张感可能不是最好的选择。但是，嘿，如果你能引入一个减轻这种背景紧张感的故事，那就尽管尝试吧！而且，我们不要忘记 那些喜欢减少运动的用户。
底线：这些想法不是所有情况下的灵丹妙药。它们是帮助你思考如何将你的网站和动画提升到更高的水平，并以一种令人愉快的方式提升用户体验的工具。
喜欢 Codepen 嵌入！:)