[心得] Live Demo 技巧

看板Web_Design作者evenwu (EvenWu)時間10年前 (2014/01/04 02:38)推噓5(5推 0噓 0→)

留言5則, 5人參與討論串1/1

webdesign 這個業別常常會在內外演講過程中做 live demo 所以整理了一下心得 Live Demo 技巧好讀版本（有畫重點）： http://blog.evendesign.tw/post/72085596434/live-demo Live demo 通常是指在一段不長的時間內，在演講現場操作一段過程，直到展現成果的示範。也因為是現場，所以會帶給觀眾「親眼見證」的感受，觀眾聽完這場演講所留下的印象會比一般的演說來的深刻。而 demo 的時間通常很短，所以示範者的速度會比較快，快的原因有：時間不多、非常熟練，以及緊張。但更重要的是：如何能在短時間內讓觀眾理解這段示範的內容。 ## 先找清楚 Live demo 目的如果要設計 live demo 在演講過程中，就得好好想這段 live demo 的用途是為了什麼？有時不一定要做、有時錄影會更好？這都不一定。通常 live demo 的目的有可能是： - 展示做之前、之後的變化或效果 - 或證明一件事的可行 - 或刻意示範各種排解錯誤的過程 - 或凸顯這個 demo 很容易，觀眾也可以做到但要避免以下的問題： - 意圖讓「示範者」看起來很厲害 - 用非常快速的方式操作、視窗切換、捲動 - 什麼都不解釋完成這個 demo - 發生意外、流程不佳讓觀眾跳出思緒流 ## 拆解步驟、耐心講解敢安排 live demo 的講者，八九成都是相當熟練的高手，面對熟悉的任務，做起來都是一瞬間，很酷！但是對觀眾而言其實是一些閃爍、畫面的移動、文字圖形的變化，意義不大。雖然，有一些「高級觀眾」也跟的上，但懂的觀眾也不需要你 demo 了。事實上，人在執行每件事，拆解開來還是有三個步驟： - 尋找目標 - 決定動作方法 - 出手這三個步驟在我們每個人的腦裡，以極高速去判斷、決定、動手。然而觀眾看到的，往往只有「直接動手」而不知道原因。demo 的途中也沒機會提問，更不好意思打斷你說：「等等，為什麼要做這一步？」，因此講者應盡力主動訓練自己講出思考的過程。以下是個例子：我現在想把螢幕上半部的文字顏色換掉！看來我必須打開 color.scss 我現在捲動想找到第 32 行，阿，找到了！這裡我把它燒毀改掉。我就再跑回去看！（瀏覽器）顏色果然改了！ ## 自己清楚目標，也要順手幫觀眾找到目標目標有幾種講法，如果是沒辦法視覺化的東西，盡量在演講之前轉為視覺。 - 大致座標螢幕上方、下方、中間、靠左、靠右、… - 形狀看到那個三角形了嗎？ - 顏色那段紅色的文字 - 行數這段 css 的第 6 行 ## 口述每個動作，即使「移動滑鼠」這件事也要被講解觀眾的反應速度遠遠低於示範者的思緒，螢幕又大，眼睛追蹤滑鼠游標就跟打蚊子一樣困難，觀眾唯一較能跟上的是找到游標定位後，眼睛跟隨著打字的過程，所以只有打字不太需要口述。以下舉例需要口述的範圍： - 移動滑鼠到某物件我現在要把滑鼠移到那個按鈕上 - 準備切換視窗、軟體好，切換到 chrome 來看看 - 開始等待、結束等待、進度現在裝這個 gem 大概要20秒吧 - 預備行為注意！等等那邊會氣到彈出來喔… 喔喔，果然彈出來了 - 準備找東西我現在要找一顆「鑽石.png」 - 解釋捲動視窗用途我現在在找剛剛那個元素跑到哪了 - 第幾行程式碼、第幾個字 - 打錯字抱歉，剛少打一個 v 我現在補回去 - 做錯步驟說聲抱歉，並講解做錯的範圍，倒退到剛剛哪一個步驟如果場地非常大，甚至可以把打字的過程也念出來，這麼做對看不清楚的觀眾也有幫助。 ## 安排 demo 步驟流程每次在進行 demo 的過程，如能參考以下基本原則，能讓 live demo 更容易被觀眾看懂： 1 我現在要開始做「什麼」建立起始思緒流，開啟觀眾記憶流程 2 我現在正在「做什麼動作」講完再動手 3 好了，接下來我要「做什麼」可補上原因，提醒觀眾轉折 4 我現在正在「做什麼動作」講完再動手 5 好了，所以你現在可以看到「什麼」總結思緒流，關閉觀眾的記憶負擔這個過程可以是 1–2–5 ，也可以是 1–2–3–4–5 ，更長的話也可能是 1–2–3–4–3–4–3–4–5。不過我建議可以縮短這個過程，因為坐在台下的觀眾通常座位不是很舒適、觀賞角度距離不一、光線不佳、視覺對焦疲勞、環境吵雜、肚子餓… 等影響，導致短期記憶比平常更短，無法負擔過多步驟。若 demo 過程真的很長，必須拆解任務，想像你在做一個稍大的工程一樣，拆成細小的 commit 較為清楚，是一樣的道理。觀眾若含有初學者，沒有太多的背景知識，很難判斷目前的事件跟下一個事件情是否相關。因此每個任務結束後，也務必耐心解釋效果、成果在哪裡，清楚的指示出來，作個小結尾，讓觀眾知道「喔喔，原來剛剛做的那些結束了，效果就是這樣！接下來講的就是另一件事，跟剛剛無關了，呼！」，這個技巧雖然不是直接的幫助觀眾理解，但卻能因明確區分，提高下一件事的吸收度。 ## 突發狀況：遇到錯誤怎麼辦？誠實面對錯誤是上上策，先跟觀眾到個歉，並說明你預估想花多少時間處理這問題。不先道歉、預估修復時間的話，觀眾會以為目前的錯誤仍是必經步驟，等你弄完才道歉，觀眾只覺得被耍了很久。若有先說明「抱歉，這邊好像有點問題，讓我花一分鐘找一下問題。」觀眾就不必聚精會神跟著你一起找錯誤，休息一下等你搞定了，更好吸收！而向觀眾承諾修復時間，就有了能花多少時間的底線依據，如不幸超過時間，則可直接放棄、跳過示範，繼續後面的演講，也不會有人怪你的。有另一種高手可以把錯誤的原因帶入 demo 過程，轉化為「原本的 live demo + 除錯教學」。不過即使是高手應對得當，仍然會提高理解的難度。所以還是建議要先演練過，確保理解的順序、提高正確度。做菜節目是絕佳參考案例最後，我建議大家可以參考「做菜」的節目，任何一個都可以，但我推薦可以看傑米．奧利佛15分鐘上菜這個做菜節目。因為做菜是重流程、速度更快、且味覺效果無法透過螢幕傳達、還必須考慮到一般大眾沒有專業技能… 等，所作出的節目，情境上非常相似，所以我覺得很值得參考。台灣 TLC 廣告 http://bcove.me/i0bx7mv6 Jamies 15 minute meals | TLC 亞洲官方網站 http://www.tlcasia.com/tv-shows/jamies15minutemeals/ 祝大家 Live demo 順利！好讀版本（有畫重點）： http://blog.evendesign.tw/post/72085596434/live-demo -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 218.161.6.148 ※ 編輯: evenwu 來自: 218.161.6.148 (01/04 02:41)

推

s25g5d4

01/04 04:10, , 1^F

01/04 04:10, 1^F

推

VCLee

01/04 18:32, , 2^F

01/04 18:32, 2^F

推

GLaDOS1105

01/04 23:43, , 3^F

01/04 23:43, 3^F