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)