构建基于 Web 的互动问答游戏“推翻特朗普”（案例研究）

编者注：在选举方面，我们每个人都可以选择如何表达我们的意见和信念。 一些设计师和开发人员利用他们的技能在一个人身上进一步表达他们的选择。 以下是如何设计和构建交互式响应式问答游戏“推翻特朗普！”的一瞥 - 并结合了沿途学到的一些宝贵经验。 这篇文章是关于技术和策略的，所以请避免评论中的政治火焰。

创建一个易于使用、看起来很棒并且玩起来非常有趣的在线测验是一回事。 基于唐纳德特朗普两极分化的总统竞选是另一回事。

SmashingMag 的进一步阅读：链接

• 游戏化和用户体验：用户赢或输的地方
• 如何在 Swift 3 中构建 SpriteKit 游戏
• 结合用户体验设计和心理学来改变用户行为

Parallax 导演兼开发商 Andy Fitch 的创意，推翻特朗普！ 已继续赢得无数奖项。 但真正让游戏栩栩如生的是团队的努力。 在这里，我们可以一窥究竟是如何发生的，涉及开发过程、设计考虑因素以及沿途吸取的一些宝贵经验教训。

这个怎么运作

在游戏中，玩家被邀请阅读唐纳德·特朗普在总统竞选期间发表的真实言论——但缺少关键词汇。 他们必须从六个可能的答案中选择一个来填空，其中只有一个是正确的。 为了显示他们是否猜对了，玩家会被处理相关的声音片段。

游戏的重点是阻止特朗普获得选票。 每当玩家得到正确的答案——或者换句话说，识别出真正荒谬的陈述——就会给民主党人加分。 如果玩家未能识别出正确的煽动性短语，则投票给共和党。 根据真正的总统选举，达到 270 票（美国所有州可能有 538 票的多数）的政党获胜。 换句话说，如果玩家设法先让民主党人越界，他们就会推翻特朗普。

发展理念

在我们的一次黑客日头脑风暴中，我们想到了将唐纳德特朗普在新闻中所说的所有不愉快的事情，并将它们引导成一股永远的力量。 作为 Fibbage、Quiplash 和 Bomb Corp 等网页游戏的粉丝，我们想知道是否有可能以某种方式将特朗普可笑的言辞变成一个真正的测验。

在研究并汇总了特朗普最近的所有声明后，我们有了一个基础来构建我们的想法。 很多测验逻辑是在最初的几周内编写的，但如果要开发成特别的东西，它需要更广泛的团队的投入。 这不是一个客户项目，所以我们必须尽可能地找到时间和资源。

早期，推翻特朗普！ 正在形成一种反人类卡片的远亲，其中玩家将不同卡片的陈述拼凑在一起。 但为了简单起见，我们将项目简化为更直接的填空式测验。 如果要玩起来很有趣，我们推断，它必须尽可能简单明了。 为此，界面必须直观。

用户界面：设计可玩游戏

为了让事情顺利进行，我们首先构建了一个非常简单的界面，左边是分数和美国地图，右边是一些没有样式的问题。 线框图是用铅笔完成的，很快我们就发现我们都在同一个波长上。 我们模拟了一些最初的设计，最终质量如此之高，以至于我们都开始对结果感到有些兴奋。

我们详细讨论了用户旅程。 在找到最佳位置之前，我们经历了令人惊讶的几次迭代——我们越了解玩家将如何与网站互动，测验就越开始感觉像是真实的东西。 问题和答案取决于我们能找到多少体面的音频报价。 幸运的是，我们并不缺乏材料。 这也许是我们进行过的最令人愉快（如果令人不安）的一些研究。

几周的开发过去了，但用户旅程缺乏令人满意的结局。 游戏的早期版本在结尾有几条基本信息，一条告诉玩家他们赢了，另一条告诉他们输了。 将这些制作成适当的游戏结束屏幕，配合复杂的 SVG 动画，确实为游戏的社交分享方面带来了一些活力——人们经常忽视这一领域，但这对于提高意识至关重要。 共享图形的主题是清楚地表明输赢，显示适当的背景颜色和特朗普的形象，以及球员的得分。

用户体验：设计精美的游戏

网站的每一个元素都经过仔细考虑，文案、音乐、音效和游戏节目主持人的叙述都经过精心挑选或创建，以补充和增强游戏的诙谐语气。 从背景和美国各州的中性色（分别为绿色和黄色，以区别于政治相关的红色和蓝色）到指令的仔细措辞，没有一个细节被忽视。

因为特朗普是游戏的焦点，我们很早就决定用比生命更伟大的方式来说明他。 我们首先检查了他的头发、面部特征和独特的举止等关键元素——所有这些都让他一眼就能认出来。 我们听说他以小手而闻名，所以在最初的草图中考虑到了这一点。

为了保持整体风格轻松愉快，我们保持一切基本。 我们的目标是一个广泛的漫画，而不是一个精确的复制品——通过将他的角色夸大到极致，我们考虑了他将如何定位自己以及他可能站在哪里。 对于登陆页面，我们想到了让特朗普在白宫顶上击飞飞机的想法。 它与推翻特朗普的想法完美契合！ ——毕竟，游戏让玩家有机会将他从高位上击倒。

角色插图完成后，我们讨论了动画的类型。 我们将矢量文件分成它们的组成部分，非常小心地给每个文件一个唯一的名称，以便以后可以在 JavaScript 中选择它。 动画完成后，文件将导出为 SVG。 我们使用 GreenSock 动画库是因为它的高性能、跨浏览器兼容性和易于使用的 API。 网站上的每个动画都是由多个嵌套时间线组成的功能，可以一起暂停和播放。

 // MONEY ANIMATION var timeline = new TimelineMax(); var dollars = $('[data-name="hp-dollar"]'); for(var i = 0; i < dollars.length; ++i) { var rotation = Math.random() * 720; var size = 1.0 + Math.random(); var offset = i * 0.2; TweenMax.set(dollars[i], { scale:0 }); timeline.fromTo(dollars[i], 3.0, { scale: 1.0, repeat: -1 }, { x: offset, y: 700, scale: size, rotation: rotation, repeat: -1 }, i * 0.2); } 

视觉效果很快就融合在一起了，不久之后我们就有了一些异想天开的背景音乐。 但我们仍然觉得好像缺少了什么。 从我们最喜欢的一些游戏中汲取灵感，我们想到了一个游戏节目主持人或叙述者角色的想法——一个和我们一样被特朗普的话迷惑的人。 我们起草了一个脚本并将其上传到 VoiceBunny。

对于那些不知道的人，VoiceBunny 是寻找配音艺术家的绝佳服务。 只需搜索最适合您需求的悦耳音调，将您的脚本发送给他们，并附上交货说明，他们会在几个小时内以 MP3 和 WAV 文件回复您。 这使得编辑文件并将它们放入游戏变得非常容易。

关于构建

该网站建立在 Expose 上——我们自己的内容管理系统 (CMS)——提供了一个可靠和多功能的基础。 它建立在 CakePHP 之上，为管理测验数据提供了一个可靠的框架。 该网站的绝大多数内容是 JavaScript，具有单独的模块（测验、问题、cookie、加载、地图、声音、计时器、动画和画外音）都相互交互。

在此过程中，我们实施了一些非常酷的技术，包括 HTML5 音频朗读的分叉版本，用于在声音片段中及时突出显示答案——我们煞费苦心地将其与整个游戏中每一个单引号中的每个单词结合在一起。 在 Service Worker API 和 Google 出色的 Service Worker Precache 模块的帮助下，我们还确保了网站离线运行，这意味着人们即使在没有 Wi-Fi 的情况下也可以玩。

我们建立了一个自定义数据库来处理测验的所有答案。 每题有一个正确答案和八个错误答案，并且一次显示六个答案，因此每次选择一个问题时，随机选择五个错误答案和正确答案。

该游戏充分利用了 Amazon CloudFront 最近对 HTTP/2 的支持，允许在单个 TCP 连接上交付资源。 这对于移动网络的性能来说是一个巨大的胜利，尤其是在延迟总是很高的情况下。 而且，当然，它反应灵敏，在所有类型的设备上都能很好地工作——但这​​也带来了一系列挑战。

由于在游戏过程中任何特定时刻屏幕上的内容都很复杂，我们必须非常努力地获得所需的响应水平。 例如，左侧得分（或进度）面板与右侧主要游戏区域之间的倾斜分区带来了一些真正的挑战。 我们希望 UI 能够在屏幕上保留尽可能多的信息，而不会限制内容或将字体缩小到难以辨认的大小。

我们迈出的第一步是显而易见的——让事情变得更小。 但是，这样做是有限制的，因此我们还必须删除一些对游戏而言并非绝对必要的元素——花里胡哨。 例如，评分面板包含四个部分——标志、状态图、当前问题的投票表和评分栏。 在大屏幕上，它们被堆叠在一个单独的列中，而对于稍微小一点的屏幕，我们必须缩小分数栏并使其与投票表保持一致。 我们还必须移除派对吉祥物，这被认为是不必要的——我们决定条形的颜色将表明哪个乐谱属于谁。

对于非桌面用户，信息窗格从视图中隐藏，并且“查看进度”按钮出现在页脚中。 我们不能指望用户一直点击这个按钮，所以我们需要一种方法来随时为他们提供当前分数。 为此，我们在屏幕顶部向移动用户展示了一个专门设计的记分牌。

同样，在小屏幕上，我们决定取消多余的装饰； 随着屏幕尺寸的增加，这些元素变得更加明显。 在移动设备上，主问题屏幕、分数和投票固定在屏幕顶部，基本游戏按钮固定在底部。 无论人们使用哪种设备，我们都希望尽我们所能让玩游戏的体验尽可能充实。

用户测试和反馈

在启动之前，我们将网站放在 UserTesting 上，以获取真实用户的一些反馈。 很多最初的评论都是积极的，尤其是关于游戏的外观和感觉，即使是那些不太热衷于政治的人也觉得玩起来很有趣。 但也标记了一些问题。

首先，人们正在努力及时完成问题。 我们添加了一个相当晚的计时器，以提供紧迫感； 它最初是在叙述者开始讲话时开始的，只持续了 20 秒。 很快就很明显，当叙述者说话时，人们正在努力阅读这个问题，消化九个可能的答案并做出选择。 为了解决这个问题，我们将计时器增加到 30 秒，将可能的答案数量减少到六个，并确保在叙述者完成他们的台词之前计时器不会启动。

结尾屏幕上的混音还有另一个问题。 嘈杂的音乐淹没了叙述者。 快速重新编辑对此进行了排序。 我们在某些屏幕尺寸上的显示也存在很大问题。 尽管游戏是为完全响应而设计的，但在低分辨率屏幕上，玩家必须向下滚动才能找到“下一个问题”按钮，这远非理想。 我们对此的回答是将按钮放置在屏幕底部的固定位置，紧挨在包含游戏控件和共享按钮的页脚栏上方，从而增加原生移动体验的感觉并确保 UI对游戏至关重要的元素不仅在首屏可见，而且准确地放置在您期望的位置。

收尾工作

任何游戏要想真正闪耀——无论多么诙谐——都需要润色。 在发布前的最后几天，我们花了很多时间确保一切都尽可能精致。 这包括团队中每个人的严格测试、发现错误和修复错误，例如评分数学问题以及网站在市场份额较小的设备上的显示方式。 我们还改进和简化了“如何玩”说明，并更新了“好结局”的动画，包括特朗普哭泣和踢腿。

当玩家单击答案图块并进入下一个问题时，我们添加了额外的音效和新颜色。 该游戏的早期版本包括嵌入的 YouTube 视频，显示真正的特朗普发表声明； 凭借游戏的说明性风格，这些都像拇指酸痛一样脱颖而出。 通过将卡通特朗普带入答案屏幕，我们能够始终保持他的存在，并将游戏真正联系在一起。

我们发现了什么

基于如此热门的事物制作游戏非常有趣和有益。 对于我们通常建立的网站类型，我们很少能尝试玩游戏（尽管我们已经知道），所以这是一种令人耳目一新的体验，需要我们从一个全新的角度看待事物。

即使这不是客户项目，我们也给自己一个非常严格的截止日期。 最终，游戏必须在 11 月的总统选举之前完成，但我们希望它在夏季结束之前完成，在主要辩论之前完成。 我们还担心特朗普可能会说或做一些会让他被取消竞选资格的事情，这会使整个努力变成浪费大量时间。

由于时间很短，我们允许相当多的员工参与构建——这可能是 Hack Day 项目中最多的一次。 我们确实必须通过分支工作流程来提高我们的游戏水平，并且比以往任何时候都更加小心不要踩到彼此的脚趾——换句话说，我们必须不断检查每个人是否都在朝着同一个目标努力。

像这样的项目确实是测试团队极限并确定需要改进的地方的好方法。 在整个过程中，我们学到了很多关于 Service Worker 和 HTTP/2 的知识，而我们在这方面并没有太多经验。

发布、认可和奖项

我们在计划发布方面付出了很多努力。 我们建立了一个特设的 Twitter 帐户来推广游戏并处理任何传入的查询——这使我们的主帐户可以免费用于我们的常规消息传递。 我们为现场辩论或新的争议展开时设计了一系列自定义社交媒体资产和预定帖子。

在整个营销阶段，一致性很重要。 例如，游戏结束时的分享功能生成了标签#ToppleTrump，我们尽可能使用它。 我们还确保继续使用这句话，“这是你会喜欢讨厌的游戏！” - 登陆页面加载后叙述者说出的一句话。

我们在自己的博客上写了关于这款游戏的文章，并将故事发布到了 Medium。 我们汇集了大量媒体联系人，研究了最合适的奖项，并针对设计、开发和政治领域的相关企业和个人。 除此之外，我们只需要希望人们觉得这款游戏玩起来很有趣！

自推出以来，该游戏收到了一些令人难以置信的反馈。 它已被 150 多个国家/地区的人们玩过，该网站的点击量已超过 100 万次。 我们在 Twitter 上收到了一些可爱的回应，以及来自 The Creators Project、Prolific North 和 AV Club 的一些精彩文章。 我们还成功地从 CSS 设计奖中获得了“每日网站”，更不用说来自无与伦比的 Awwwards 的“每日网站”（加上一个荣誉奖）。 最近，该游戏被提名为本月网站，并与 Spotify 和谷歌等公司竞争。