---

webdesign 這個業別常常會在內外演講過程中做 live demo

所以整理了一下心得

Live Demo 技巧

好讀版本（有畫重點）：
http://blog.evendesign.tw/post/72085596434/live-demo



Live demo 通常是指在一段不長的時間內，在演講現場操作一段過程，直到展現成果的
示範。也因為是現場，所以會帶給觀眾「親眼見證」的感受，觀眾聽完這場演講所留下的
印象會比一般的演說來的深刻。

而 demo 的時間通常很短，所以示範者的速度會比較快，快的原因有：時間不多、非常
熟練，以及緊張。但更重要的是：如何能在短時間內讓觀眾理解這段示範的內容。


## 先找清楚 Live demo 目的



    - 展示做之前、之後的變化或效果
    - 或證明一件事的可行
    - 或刻意示範各種排解錯誤的過程
    - 或凸顯這個 demo 很容易，觀眾也可以做到

但要避免以下的問題：

    - 意圖讓「示範者」看起來很厲害
    - 用非常快速的方式操作、視窗切換、捲動
    - 什麼都不解釋完成這個 demo
    - 發生意外、流程不佳讓觀眾跳出思緒流


## 拆解步驟、耐心講解

敢安排 live 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 過程真的很長，必須拆解任務，想像你在做一個稍大的工程一樣，拆成細小

剛剛做的那些結束了，效果就是這樣！ 接下來講的就是另一件事，跟剛剛無關了，呼！」

，這個技巧雖然不是直接的幫助觀眾理解，但卻能因明確區分，提高下一件事的吸收度。


## 突發狀況：遇到錯誤怎麼辦？

誠實面對錯誤是上上策，先跟觀眾到個歉，並說明你預估想花多少時間處理這問題。
不先道歉、預估修復時間的話，觀眾會以為目前的錯誤仍是必經步驟，等你弄完才道歉，
觀眾只覺得被耍了很久。若有先說明「抱歉，這邊好像有點問題，讓我花一分鐘找一


有另一種高手可以把錯誤的原因帶入 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)

--