# 投影片製作與上台表演 > Published: 2011-11-14 URL: https://kaochenlong.com/how-do-i-make-my-slide-and-presentation --- > 請注意，本文有許多個人自以為是的內容，不一定適合每個人，所以請謹慎服用。 我之前工作的某個老闆跟我說過「**每次的上台簡報就是一場表演**」，這句話我一直記在心裡。既然是表演，表演內容固然很重要，但"說故事"的方法也很重要，不然內容也許真的很棒，但台下卻睡成一團。 不久前看了我的偶像之一[Lindsay Fallow(a.k.a Stray)](http://www.xxcoder.net/)的一份簡報[Robotlegs 2 and your brain](http://www.slideshare.net/stray_and_ruby/robotlegs-2-and-your-brain)，真的感覺會做投影片的人就是不一樣，即使人不在現場聽演講，簡報裡也沒有太多的文字說明，光看簡報就能大概知道作者想要表達的意思，這很酷! 所以這回在第一屆的 [PHPConf Taiwan](http://phpconf.tw/2011)上用的投影片，我也想來試一下不同的簡報風格。 <!-- more --> ## 投影片準備 ### 設定方向 因為我的場次只有 20 分鐘，要講很詳細是不可能的，而且我猜聽眾們對這個主題應該有些陌生，所以我把投影片設定在入門簡介等級的，目的是讓大家知道或認識這個主題就好。 ### 軟體選擇 其實軟體不是重點，沒有什麼「用 XX 軟體來做簡報才是王道」這回事，只要選擇自己順手的工具來做就行了。前面幾場我選擇用 HTML5 + [Deck.js](http://imakewebthings.github.com/deck.js/)來做，我覺得效果滿 ok 的。基於自以為自己是個閃客，本來想用 Flash 來做，但時間有點趕，而且我想做的內容可能會需要更精準的控制元素的位置，所以最後我選擇了 Keynote。 ### 製作概念 用圖片來取代我想講的話，讓聽眾看到圖片之後能自行腦補我想表達的意思，這是我這回想要試驗的目標。 例如我想表達 CoffeeScript 因為是最近才出來的，會不會被大家認為"嫩"、"年輕"、"不成熟"的感覺，本來想找嗷嗷待哺的幼鳥，但因為幼鳥的皮膚顏色並不好看，所以最後找了小鴨： ![](/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaGtDIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--6a56bf0ba4b0b0932e91a4b033246aa73a4888fd/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJYW5CbkJqb0dSVlE2RkhKbGMybDZaVjkwYjE5c2FXMXBkRnNIYVFJQUJXa0NBQVE9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--c7384179b79b360ce488e92f67a9c0795f833455/coffeescript-slide-076.jpg) 再來例如我想表達的是「**JavaScript 看起來很容易學、很容易寫，但要寫到夠好卻很不容易**」。閃過腦袋的「簡單」是「a piece of cake」： ![](/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaG9DIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--b206fbc532fdf805a7bd43ed60cf8ade54149ea6/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJYW5CbkJqb0dSVlE2RkhKbGMybDZaVjkwYjE5c2FXMXBkRnNIYVFJQUJXa0NBQVE9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--c7384179b79b360ce488e92f67a9c0795f833455/coffeescript-slide-009.jpg) 但即使是一片蛋糕，也是有人可以吃的很難看，滿嘴都是： ![](/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaHNDIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--f903a377636f93ea15d803541f62edf86ed467f6/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJYW5CbkJqb0dSVlE2RkhKbGMybDZaVjkwYjE5c2FXMXBkRnNIYVFJQUJXa0NBQVE9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--c7384179b79b360ce488e92f67a9c0795f833455/coffeescript-slide-010.jpg) 圖片真的有達到我想表達的意思嗎? 不確定，如果沒有，表示我還有很大的努力空間。 整體而言，我準備投影片的內容大概只佔了 **30%** 的時間，**60%** 的時間在找圖，剩下的 **10%** 在順投影片。值得嗎? 我覺得這是不同的嘗試，並沒有值不值得的問題。 ### 自我介紹 上台表演是個讓大家認識你的好機會，所以在投影片裡放個自我介紹是很重要的。這是我本來的自我介紹頁： ![](/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaHdDIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--b2e3216056a8c9846cc1c554e9ffc5e885cc3767/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RkhKbGMybDZaVjkwYjE5c2FXMXBkRnNIYVFJQUJXa0NBQVE9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--578d6799c87a604ca574298502ba874c9075e929/coffeescript-slide-intro-original.png) 整個都是字，密密麻麻的感覺好像感覺很強大、有幾百年功力的樣子。但我其實並不想在個人頁停留太久，而且寫了一堆，別人也不見得想看，還可能被覺得是在吹噓當年有多勇。真正厲害的角色只要一句： > I'm CEO, Bitch 輕描淡寫的一句話，大家就知道他的趴數了。 為了讓自己更快讓別人知道我的比較熟悉的技能，所以我做了這張，跟大家說我是寫 Flash 的： ![](/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDBDIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--dcd0bb9dfccf11e7f194fa232082219f8a1cc827/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJYW5CbkJqb0dSVlE2RkhKbGMybDZaVjkwYjE5c2FXMXBkRnNIYVFJQUJXa0NBQVE9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--c7384179b79b360ce488e92f67a9c0795f833455/coffeescript-slide-005.jpg) 然後把前面那個都是字的內容縮減成這樣： ![](/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDRDIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--5a251da188ece2a619569ceb45f7ec3004f972ad/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJYW5CbkJqb0dSVlE2RkhKbGMybDZaVjkwYjE5c2FXMXBkRnNIYVFJQUJXa0NBQVE9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--c7384179b79b360ce488e92f67a9c0795f833455/coffeescript-slide-006.jpg) 其實字還是滿多的，所以我不會全部照著唸，在這頁我大概只會停留 10 秒鐘以內就會離開。至於網站或是聯絡資訊，反正也不會有人想看，所以我在放在最後一張。我把它放在最後一張並不表示不讓它登場。我大概計算過，在我跟大家說謝謝準備下台之後，從我原本站的位置走到我的電腦、關掉投影片，大概有 5 秒左右的時間，這個時間我預計大家都在拍手，然後我會在這個時候從倒數第二張的 QA 畫面，切換到最後一張投影片： ![](/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaDhDIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--49fd7a1cb9db55afec43f4e6a91d9ba02520117b/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJYW5CbkJqb0dSVlE2RkhKbGMybDZaVjkwYjE5c2FXMXBkRnNIYVFJQUJXa0NBQVE9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--c7384179b79b360ce488e92f67a9c0795f833455/coffeescript-slide-081.jpg) ### 字型 全英文投影片? 英文是很厲害是嗎? 當然不是! 不得不說，中文字型的筆畫多，如果想走精緻路線很吃虧，所以除了我的名字是中文的之外，其它的我選用英文來寫。 為了不讓字型搶了圖片的風采，所以我想找細一點的字型，但如果太細到時候播放出來又擔心看不清楚，所以字型的樣式跟粗細在用的時候是要很注意的。系統裡的字型沒有我看喜歡的，所以我上網找找看有沒有漂亮的字型，後來找到[Rawengulk](http://www.fontspace.com/glukfonty/rawengulk)這套字型，樣子看起來像這樣： ![](/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaUFDIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--f25d7c75c26be9bc9d0a442fdc530a691919feb0/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RkhKbGMybDZaVjkwYjE5c2FXMXBkRnNIYVFJQUJXa0NBQVE9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--578d6799c87a604ca574298502ba874c9075e929/rawengulk-fonts.png) 免費而且可商業使用。雖然它不是等寬字，不過這套字型從最細到最粗看起來都滿舒服的，在視覺上跟圖片應該會滿搭的(個人感覺)。 ### 圖片來源 一開始我是使用 Google 的圖片搜尋功能，但圖片的尺寸、品質好壞很難控制，而且授權也不見得都有標示清楚。後來才發現[Flickr](http://www.flickr.com/)是個很棒的圖片來源，照片多，而且有很多 CC(Creative Commons)授權的圖片，只要搜尋的時候加勾選就行了。 ![](/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaUVDIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--c2f4ca635459c3fc62467b15bc04607f30c2ddf6/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RkhKbGMybDZaVjkwYjE5c2FXMXBkRnNIYVFJQUJXa0NBQVE9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--578d6799c87a604ca574298502ba874c9075e929/flickr-cc.png) CC 授權的作品大多只要在使用的時候標記作者姓名、出處，而且不做為商業用途的話，幾乎可以無限制的使用，感謝這些人無私的奉獻。 然後因為我還沒辦法做到完全只靠圖片就說故事給大家聽，還是需要一些簡單的字比較容易說明，所以在選擇照片的時候我會特別選擇有適當的留白區塊可以讓我填字的照片。 ## 上台表演 ### 上台前準備 我大概花了 10% 的時間在練習講自己的投影片，我儘量要求自己記得所有投影片的順序，這樣我才能不用回頭看一下投影片就可以繼續講下去，腦袋裡本來預計要講的故事不會因為這樣中斷，在講的過程中因為自己知道下一頁要講什麼，也比較不會緊張。 ### 站的位置 我不喜歡選擇站在講桌後面講話，除非是要操作電腦。 雖然不是第一次來中研院的這個會議廳，但以前都是當聽眾，不知道前面的舞台有多長多寬、視野如何，所以我一早到會場，試了一下投影機沒問題之後就先去試一下舞台，看看哪個位置是我可以看得到我目前簡報播到哪一頁，還可以看到全部的聽眾，也可以讓大家都看得到我。 ![](/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaUlDIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--0597086bc5e0b53acfe980f6fc0d30b996da66a1/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJYW5CbkJqb0dSVlE2RkhKbGMybDZaVjkwYjE5c2FXMXBkRnNIYVFJQUJXa0NBQVE9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--c7384179b79b360ce488e92f67a9c0795f833455/phpconf-standing-point.jpg) photo by [othree](http://www.flickr.com/photos/othree/) @PHPConf Taiwan 2011 ### 簡報器 Wii 手把真的是個很不錯的簡報器。 Apple 雖然有出一隻長得像 ipod 的遙控器，但它是紅外線的，缺點就是距離短，而且有指向性，只要站太遠或指的角度不對，就沒辦法用。而 Wii 是使用藍芽跟電腦連結的，不僅距離長，而且不用太刻意指向電腦就可以操作簡報。 有些手機的 App 可以做到類似的事，但因為手機是平的，不像 Wii 手把的十字鍵是凸起來的，所以我如果我對這個 App 不熟的話，可能得先低頭看一下手機的畫面才能操作，而且可能還得一手拿著、另一手來操作，但 Wii 手把的話則是只要一隻大姆指就可以輕鬆操作了。 除此之外，Wii 手把在"視覺上"還有某種程度的娛樂效果 :) ![](/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaU1DIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--68ed2c7c21e91ed602dd7bd6b35fe7c966407b00/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJYW5CbkJqb0dSVlE2RkhKbGMybDZaVjkwYjE5c2FXMXBkRnNIYVFJQUJXa0NBQVE9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--c7384179b79b360ce488e92f67a9c0795f833455/phpconf-wii-remote.jpg) photo by [othree](http://www.flickr.com/photos/othree/) @PHPConf Taiwan 2011 ### 麥克風 因為拿一般的無線麥克風的話，會讓我兩隻手都被佔用，沒辦法有其它手勢，所以我最後跟會場借了小蜜蜂來用。 其實我本來想去找像豬哥亮那種可以把麥克風吊在脖子上的東西，然後把自己搞得像夜市叫賣的，我很愛這種不協調的感覺，只是不知道要去哪邊買就是了。 ### 與台下聽眾互動 有些人喜歡在演講過程透過問台下聽眾問題來增加與聽眾的互動，但就我觀察，台灣的聽眾普遍都比較害羞，很容易在問問題的時候會遇到沒人要鳥你的情況。所以問問題就要有用一點小技巧，例如「請問台下有沒有人平常的工作是寫 JavaScript 呢？」這個問題，我用了反面的問法：「請問台下有沒有人平常的工作是"不用"寫 JavaScript 呢？」，即使大家不捧場，也滿容易再接下去講，場面比較不會僵掉或是中斷原本的流程。 ### 眼睛看哪裡？ 當然要看正妹啊！！(誤) 上台表演難免會抖，而我自己消除緊張的方法，是在講的過程中，快速掃瞄台下對我講的內容有反應的聽眾，反應包括微笑、點頭等表示聽得懂或認同的，然後把比較多的視線停留在這些人身上來增加自己的一些自信，當自信增加到一定程度之後就比較不會抖了。 ## 結論 記得要預先盤算你要做的每個動作的目的以及台下聽眾可能會有的反應（也許是笑、也許是問問題，或是丟雞蛋）。每次的表演結束後，如果有錄影的話，請再花點時間看看自己的表演，看看哪邊是有問題的。不要覺得不好意思，別人眼中的你才是真正的你，鏡子裡的那個自己並不是。看看自己的動作、語調，然後利用每次的演講就改掉一些缺點，才會越來越進步。 我一直相信，只要用心的準備每次的表演，台下的聽眾也會用心的回應你的，即使不是當面跟你說，也會在社群網路上看到正面的回應。 一些個人的想法，與大家分享。 自己要檢討的地方： - 講話依舊有些抖 - 無謂的手勢太多 - 時間的掌控不足