缘起

大约是今年夏天的某一天，贺老提醒我 QCon 上海站开始筹备了，鼓励我去做演讲。正好当时我在研究区块链和 DApp，感觉这个方向非常适合前端工程师，于是就向前端会场的出品人（蚂蚁金服的沉鱼前辈）申请了一个主题名额。

我的演讲主题定为《为什么前端工程师更应该掌握区块链 DApp 开发》，与我写过的 一篇博客文章 同名。虽然已有同名文章，但作为一场技术大会的演讲，表达的方式和内容必然会有很大不同。因此，我不仅重新来过，甚至还在筹划过程中几近崩溃。

第一版

做一场演讲，首先需要梳理出主线。而这个演讲的主线，显然是要把前端工程师引入 “DApp 开发” 这个新的领域之中。但，问题来了，区块链并不在前端工程师的既有技能范畴之内，如何在这种缺失背景的条件下带领听众走完主线？

在第一版的幻灯片中，我把整个演讲划分成三个部分（区块链、DApp、实战），并试图在第一部分里讲解区块链的运行原理和核心概念。这样做的直接后果是，第一次试讲严重超时。

要知道 QCon 上每个演讲的时间被严格控制在 40～45 分钟，讲师无法在这么短的时间内塞进过多的内容。这时我才意识到，我是在挑战一项 “不可能完成的任务”。

（第一版幻灯片试图讲解区块链原理）

第一版的幻灯片就是为了快速试错，采用在线平台 Slides.com 来完成。幻灯片甚至没有写完，后半部分基本是纯口述的。

第二版

第二版大改，不得不把 “区块链知识基础” 的部分大幅削减，假设听众已经具备这些知识——事实上这部分也不是我的强项，很难讲好，也很容易被质疑；同时听取小伙伴的建议，要突出对听众的吸引力，比如从个人开发者的角度放出一些诱惑点等等。

这一版还是 “三段式”，但以设问的形式来展开，试图回答以下三个问题：

• (Why) 我为什么要关注区块链和 DApp？
• (What) DApp 到底是什么？
• (How) 如何实现我的第一个 DApp？

乍一看这个布局还挺不错，但实际效果并不算理想。

第一部分基本上是在讲大道理，比如区块链不可替代的特性，以及行业风口，以及一些抓眼球的案例（比如加密猫等）。总的来说比较水，篇幅花了不少，而说服力却似乎并不强。

（第二版幻灯片中的小故事）

这部分唯一的小亮点是引入了 “预言世界杯” 的小故事，试图通过实例来揭示区块链 “不可篡改” 的意义。

注：为什么会想到这个小故事？它实际上来源于魔法哥自己做的第一款 DApp——“我是预言帝”。这是一个可以帮你记录预言的小应用，让区块链帮你做公证。

第二部分仍然花了点篇幅讲解区块链原理，因为我实在觉得很多概念不提不行，否则主线推不下去。同时还堆砌了很多对智能合约和 DApp 的特征描述，比较 “干”，也比较 “散”。

第三部分的实战，幻灯片也没有做完，是对着文字版讲的。实战部分也没有梳理出一个清晰的思路，只是走一遍流水账。

这一版幻灯片是用 Keynote 来做的，没有作任何动效和美化，很粗糙。总体来说，这一版还是一个草稿性质的过渡版本；但到了这个阶段，它需要为最终思路打下基础了。这一轮试讲确实起到了一定的效果。小伙伴们表示比上一版有进步，但主线仍然不够紧凑和连贯，而且超时的问题仍然存在。

在试讲之后的讨论环节中，贺老提到 “预言世界杯” 那个小故事，说可以把它用为一个应用场景提出来。有需求，再解决需求，这是一种很好的演讲框架。这个想法点醒了我，于是第三版的思路大体确定了。

第三版

第三版仍然是大改，不过主线思路基本确定：放弃 “三段式” 结构，采用故事作为贯穿始终的主线，以叙事的方式完成背景铺垫、理论讲解和案例实战。至此心里稍稍有底——我应该是逐渐接近 “真相” 了。

但此时还剩一个问题没有解决：区块链的基础知识如何铺垫？经过讨论和思考，我决定只照顾那些主线所必需的概念，并在需要用到的时候以类比的方式简单解释，以避免占用过多篇幅喧宾夺主。

为突出故事性，我甚至打算用漫画的形式来展开剧情。不过准备时间实在有限，最终只保留了漫画分格和对话气泡等表现手法，并没有使用漫画人物形象。这样也不错，整个演讲幻灯片会显得紧凑一些。

（第三版幻灯片中的对话场景）

这一版的试讲做了两次，一次是小范围征集反馈，一次是在公司内完成一次较为正式的分享。总体的反馈是主线比较流畅，听众的疑问主要集中在一些细节上。在这两轮试讲中得到的反馈又帮助我不断打磨。

幻灯片

在最后一次试讲之前，幻灯片的设计风格就基本确定了：

• 封面和封底采用了 QCon 组委会提供的模板
• 内页采用我自己惯用的深灰色主题
• 漫画部分采用白底，用细线外框表示漫画分格

由于采用了漫画元素，在讲故事的段落，一律采用上滚式的过场动画，从而营造出一种 “看漫画” 的体验。

在单页内，有时也会用到一些动画效果，比如对话气泡的弹出等；在叙事过程中，也会偶尔插入一些特殊元素（比如满幅图片），以打破视觉疲劳。

（幻灯片中的满幅图片）

在演示代码的过程中，我也会配合讲解步骤，用动画的方式逐步揭示相应的代码段。因为观众对代码往往都比较好奇和敏感，如果一次性放出大段代码，必然导致观众被代码吸引、脱离讲师的引导，从而出现注意力脱节等问题。

（幻灯片中不会一次性放出完整代码）

此外，在讲解一些必要的区块链概念时，我也在幻灯片上做了一些设计，避免干扰主线。具体效果大家可以关注 QCon 官方发布的演讲视频，魔法哥的公众号 “CSS魔法” 稍后也会放出图文版幻灯片。

总体来说，来听技术演讲的听众并不在意讲师的幻灯片是否精美；但恰到好处的设计，可以帮助我们更紧密地引导听众、更流畅地完成主线。

讲故事

讲故事是一种很好的手段，可以增加演讲的趣味性和生动性。由一个场景来引出需求和解决方案，往往可以更好地引导听众的思路。

我以前曾在演讲中点缀一些小故事，但以故事为主线推动整个演讲，还是第一次。

整个演讲幻灯片大部分都是在讲故事，包括实战的段落，也是作为故事的一部分被讲出来。大部分时间是第三人称的口吻，很多结论借由故事中的人物说出来，更易接受，不显生硬——这就是讲故事的魅力。

另外，由于故事的主角就是一名前端工程师，听众也更容易代入其中。

尽管如此，故事还是有局限的…………

希望本文能帮助到您！

点赞+转发，让更多的人也能看到这篇内容（收藏不点赞，都是耍流氓-_-）

关注 ｛我｝，享受文章首发体验！

每周重点攻克一个前端技术难点。更多精彩前端内容私信 我 回复“教程”

原文链接：https://github.com/cssmagic/blog/issues/96