顯示廣告
隱藏 ✕
※ 本文為 dinos 轉寄自 ptt.cc 更新時間: 2014-01-04 08:35:09
看板 Web_Design
作者 evenwu (EvenWu)
標題 [心得] Live Demo 技巧
時間 Sat Jan  4 02:38:38 2014


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
TLC Taiwan Player
[圖]
家庭主夫/主婦的救星,奧利佛15分鐘上菜,讓你成為廚房超人!3月每週三晚間7點,週日中午12點播出。 ...
 

    Jamies 15 minute meals | TLC 亞洲官方網站
    http://www.tlcasia.com/tv-shows/jamies15minutemeals/
Jamie’s 15 Minute Meals | TLC Asia
Brand new episodes from July! Delicious and healthy "fast food" ala Jamie Oliver. ...
 

祝大家 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:此篇文章值 999 顆美江鑽石 給推1F 01/04 04:10

--
※ 看板: dinos 文章推薦值: 0 目前人氣: 0 累積人氣: 231 
分享網址: 複製 已複製
guest
x)推文 r)回覆 e)編輯 d)刪除 M)收藏 ^x)轉錄 同主題: =)首篇 [)上篇 ])下篇