魔法哥 QCon 2018 覆盤（上）：如何做一場 “有趣 + 實用” 的技術演講
摘要：一場技術演講如何兼具 趣味性 和 實用性 ？它是如何 “從零到一” 打造出來的？這篇文章大概是你所能找到的最真實的心路歷程了。
緣起
大約是今年夏天的某一天，賀老提醒我 QCon 上海站開始籌備了，鼓勵我去做演講。正好當時我在研究區塊鏈和 DApp，感覺這個方向非常適合前端工程師，於是就向前端會場的出品人（螞蟻金服的沉魚前輩）申請了一個主題名額。
我的演講主題定為《為什麼前端工程師更應該掌握區塊鏈 DApp 開發》，與我寫過的 ofollow,noindex" target="_blank">一篇部落格文章 同名。雖然已有同名文章，但作為一場技術大會的演講，表達的方式和內容必然會有很大不同。因此，我不僅重新來過，甚至還在籌劃過程中幾近崩潰。
第一版
做一場演講，首先需要梳理出主線。而這個演講的主線，顯然是要把前端工程師引入 “DApp 開發” 這個新的領域之中。但，問題來了，區塊鏈並不在前端工程師的既有技能範疇之內，如何在這種缺失背景的條件下帶領聽眾走完主線？
在第一版的幻燈片中，我把整個演講劃分成三個部分（區塊鏈、DApp、實戰），並試圖在第一部分裡講解區塊鏈的執行原理和核心概念。這樣做的直接後果是，第一次試講嚴重超時。
要知道 QCon 上每個演講的時間被嚴格控制在 40～45 分鐘，講師無法在這麼短的時間內塞進過多的內容。這時我才意識到，我是在挑戰一項 “不可能完成的任務”。
（第一版幻燈片試圖講解區塊鏈原理）
第一版的幻燈片就是為了快速試錯，採用線上平臺 Slides.com 來完成。幻燈片甚至沒有寫完，後半部分基本是純口述的。
第二版
第二版大改，不得不把 “區塊鏈知識基礎” 的部分大幅削減，假設聽眾已經具備這些知識——事實上這部分也不是我的強項，很難講好，也很容易被質疑；同時聽取小夥伴的建議，要突出對聽眾的吸引力，比如從個人開發者的角度放出一些誘惑點等等。
這一版還是 “三段式”，但以設問的形式來展開，試圖回答以下三個問題：
- (Why) 我為什麼要關注區塊鏈和 DApp？
- (What) DApp 到底是什麼？
- (How) 如何實現我的第一個 DApp？
乍一看這個佈局還挺不錯，但實際效果並不算理想。
第一部分基本上是在講大道理，比如區塊鏈不可替代的特性，以及行業風口，以及一些抓眼球的案例（比如加密貓等）。總的來說比較水，篇幅花了不少，而說服力卻似乎並不強。
（第二版幻燈片中的小故事）
這部分唯一的小亮點是引入了 “預言世界盃” 的小故事，試圖通過例項來揭示區塊鏈 “不可篡改” 的意義。
注：為什麼會想到這個小故事？它實際上來源於魔法哥自己做的第一款 DApp——“我是預言帝”。這是一個可以幫你記錄預言的小應用，讓區塊鏈幫你做公證。
第二部分仍然花了點篇幅講解區塊鏈原理，因為我實在覺得很多概念不提不行，否則主線推不下去。同時還堆砌了很多對智慧合約和 DApp 的特徵描述，比較 “幹”，也比較 “散”。
第三部分的實戰，幻燈片也沒有做完，是對著文字版講的。實戰部分也沒有梳理出一個清晰的思路，只是走一遍流水賬。
這一版幻燈片是用 Keynote 來做的，沒有作任何動效和美化，很粗糙。總體來說，這一版還是一個草稿性質的過渡版本；但到了這個階段，它需要為最終思路打下基礎了。這一輪試講確實起到了一定的效果。小夥伴們表示比上一版有進步，但主線仍然不夠緊湊和連貫，而且超時的問題仍然存在。
在試講之後的討論環節中，賀老提到 “預言世界盃” 那個小故事，說可以把它用為一個應用場景提出來。有需求，再解決需求，這是一種很好的演講框架。這個想法點醒了我，於是第三版的思路大體確定了。
第三版
第三版仍然是大改，不過主線思路基本確定：放棄 “三段式” 結構，採用故事作為貫穿始終的主線，以敘事的方式完成背景鋪墊、理論講解和案例實戰。至此心裡稍稍有底——我應該是逐漸接近 “真相” 了。
但此時還剩一個問題沒有解決：區塊鏈的基礎知識如何鋪墊？經過討論和思考，我決定只照顧那些主線所必需的概念，並在需要用到的時候以類比的方式簡單解釋，以避免佔用過多篇幅喧賓奪主。
為突出故事性，我甚至打算用漫畫的形式來展開劇情。不過準備時間實在有限，最終只保留了漫畫分格和對話氣泡等表現手法，並沒有使用漫畫人物形象。這樣也不錯，整個演講幻燈片會顯得緊湊一些。
（第三版幻燈片中的對話場景）
這一版的試講做了兩次，一次是小範圍徵集反饋，一次是在公司內完成一次較為正式的分享。總體的反饋是主線比較流暢，聽眾的疑問主要集中在一些細節上。在這兩輪試講中得到的反饋又幫助我不斷打磨。
幻燈片
在最後一次試講之前，幻燈片的設計風格就基本確定了：
- 封面和封底採用了 QCon 組委會提供的模板
- 內頁採用我自己慣用的深灰色主題
- 漫畫部分採用白底，用細線外框表示漫畫分格
由於採用了漫畫元素，在講故事的段落，一律採用上滾式的過場動畫，從而營造出一種 “看漫畫” 的體驗。
在單頁內，有時也會用到一些動畫效果，比如對話氣泡的彈出等；在敘事過程中，也會偶爾插入一些特殊元素（比如滿幅圖片），以打破視覺疲勞。
（幻燈片中的滿幅圖片）
在演示程式碼的過程中，我也會配合講解步驟，用動畫的方式逐步揭示相應的程式碼段。因為觀眾對程式碼往往都比較好奇和敏感，如果一次性放出大段程式碼，必然導致觀眾被程式碼吸引、脫離講師的引導，從而出現注意力脫節等問題。
（幻燈片中不會一次性放出完整程式碼）
此外，在講解一些必要的區塊鏈概念時，我也在幻燈片上做了一些設計，避免干擾主線。具體效果大家可以關注 QCon 官方釋出的演講視訊，魔法哥的公眾號 “CSS魔法” 稍後也會放出圖文版幻燈片。
總體來說，來聽技術演講的聽眾並不在意講師的幻燈片是否精美；但恰到好處的設計，可以幫助我們更緊密地引導聽眾、更流暢地完成主線。
講故事
講故事是一種很好的手段，可以增加演講的趣味性和生動性。由一個場景來引出需求和解決方案，往往可以更好地引導聽眾的思路。
我以前曾在演講中點綴一些小故事，但以故事為主線推動整個演講，還是第一次。
整個演講幻燈片大部分都是在講故事，包括實戰的段落，也是作為故事的一部分被講出來。大部分時間是第三人稱的口吻，很多結論藉由故事中的人物說出來，更易接受，不顯生硬——這就是講故事的魅力。
另外，由於故事的主角就是一名前端工程師，聽眾也更容易代入其中。
儘管如此，故事還是有侷限的…………
……
……
完整文章已收錄到 “CSS魔法” 微信公眾號，微信掃碼即可閱讀全文：
