把 How It Works 做成一座工地

约 7 分钟另有英文版

一个产品在现场怎样工作,能不能让没参与制作的人看懂?这篇回顾九个演示事件怎样放进同一座示意工地,以及观看的节奏为什么要重新安排。

目录
  1. 为什么要一个连续的画面
  2. 一座工地里的九个事件
  3. 播放的节奏在催人
  4. 把提醒放进人的动作里
  5. 倒车的货车
  6. 机械作业
  7. 防护装备和眼部那段
  8. 两种不同的滑倒
  9. 保留每件事结局的报告
  10. 把镜头还给看的人
  11. 还待确认的事

随文的九事件体验是之后按原型重新搭建的公开改编版:场地、人物、编号和数据均为虚构,事件只在网页里模拟。

打开九事件体验(公开改编版,虚构场地,界面为英文)

公开改编版的九事件全景:一座虚构的示意工地,九个编号地点分布在高架平台、作业棚、吊装区、卸货车道、油漆墙和挖掘区周围,北侧是一排房屋,东侧是道路。
公开改编版全景:场地、人物和事件均为虚构,只在网页里模拟

公开改编版全景:场地、人物和事件均为虚构,只在网页里模拟

为什么要一个连续的画面

从开始做这个网站,我就一直在想,How It Works 这一块该怎么展示。文字能把步骤写全,流程图也能把箭头连起来,可读的人真的理解了吗?我也去看了同类产品的网站,坦白说,自己并没有很好地理解它们的产品怎么工作。我正在想怎样向别人解释一个产品,自己读别人的说明却是这样。轮到自己的页面,这个问题就很难绕开。

类似的问题,第一周调研里已经碰到过。看演示材料时,调研记录里留下的疑问是:画面里的对象和状态,怎样变成一件需要处理的事?它有多重要,信息交给谁,接下来怎么做?当时的建议是选一个具体场景,把原画面、风险事件、接收提醒的人和处理记录依次连起来。后来做 How It Works,要讲的也是这一串。

后来碰巧看到了 Halter 的网站。它的 Dairy 页面中段有一块 How it works,用一段清晰的动画,把戴项圈的牛、通信塔和手机 App 依次接起来。说明讲到哪一部分,画面里就出现哪一部分,几样东西之间的关系也跟着展开。我想借这种讲法试试自己的方案。把现场、设备、人和最后的记录放进连续的画面里,能不能少留一点需要看的人自己拼起来的部分?

一座工地里的九个事件

这次的 3D 原型是一座示意工地。工地上的事情很依赖位置,人从哪里走,车从哪个方向来,旁边还有什么作业,都影响一件事怎样发生。我开始尝试 3D,就是想让这些关系放在同一个空间里。原型用 Three.js 把工地放进浏览器,可以转动、拉近,从不同方向看同一处。这是一个概念原型,里面的识别、提醒、通知和报告都是模拟的。我提出情境、看预览,再决定哪里要改、留下什么。

几个事件最初分开做,中间也有过切换着看的演示页。后来我提出,把前面做过的事件全部放进同一个场景,再补齐之前讨论过的情境。最终整合的九个事件,涉及防护装备的补正、危险区域内的退出、人车交会、环境整改,以及发生后的响应。我希望没点选的区域也继续作业,人可以自己转动、找位置,再展开其中一件事。

播放的节奏在催人

不过,九个合在一起以后,我自己觉得不好用,就问为什么不好用,如果把它当成一个游戏里的 3D 场景,还差什么。复查出来的毛病很具体。点一个区域,事件马上自动播放;拖动镜头想换个角度,事件还在往前走;播完又把画面拉回全场,刚找到的角度没了。场景已经能让人自己看,播放的节奏却还在催着人往下走。

回头看,早期做 3D 时就试过这两种方式。先有预设的故事和镜头,按顺序带着人看,后来撤掉,换成一座可以自由旋转、缩放的完整工地,再补进施工活动、人物和车辆。故事能安排先看什么、后看什么,自由观察能让人自己找位置。做到后来,我想把两样都留下。

把提醒放进人的动作里

倒车的货车

有些过程确实需要带着人看。人车交会的一版里,我提出把发生地点调整到实际作业区,用倒车时的避让来展开。地方一换,工人从哪里走、货车往哪里退、谁来示停,都要重新安排。演示里,现场人员和负责人同步收到提醒后,指挥员示停、司机刹车,工人退进避让区,指挥员确认车道安全,司机才继续倒车。一个提醒要放进这些动作里,才能讲到人为什么停、什么时候可以继续。

同一机位下公开改编版卸货车道的三张截图。1:指挥员举起红色示停牌,货车停住,避让区外的人员 F 在看手环。2:人员 F 站在斜线标出的避让区里,指挥员仍举着红牌查看车道。3:示停牌变成绿色,货车又往后倒了一段。
公开改编版里的倒车故事,停在三个步骤:示停、避让、放行。截图为英文界面;场地和人物均为虚构,事件为模拟。

公开改编版里的倒车故事,停在三个步骤:示停、避让、放行。截图为英文界面;场地和人物均为虚构,事件为模拟。

机械作业

涉及机械作业的故事,也需要把几个人的动作接起来。有的要由主管拦下进入区域的人,信号员示意操作人员暂停,确认区域清空后再放行;有的则要让操作人员先停住转动,工人退到隔离线外,操作人员确认后才恢复作业。演示里的机器由操作人员停下和恢复,不能让一个警报图标代替这些人的决定。

防护装备和眼部那段

防护装备的补正看上去简单,过程也不能只停在提醒。演示里要接上取装备、戴好、手动确认,留下的是纠正和确认的记录。靠近危险边缘的情境,则要让人停下、看到提醒后退回安全位置。

眼部那段,我要求先有正常打磨的对照:护目镜戴着,火花飞溅,作业继续,不提醒,也不计作一起事件。随后才转到另一项需要防护却没有落实的作业,接上暂停、补好防护和继续。正常作业和需要处理的情况放在同一条故事里,火花本身不该被讲成报警的理由。

这条故事演到的是需要防护时没有戴的情况。第一周报告后续修订中的眼伤分析,比“戴没戴”复杂。报告引用的一起公开事故里,员工戴着安全眼镜,飞出的碎片仍然穿透了眼镜,企业事后改了工具和作业方法。报告分开讨论了两种问题:方法或防护没有覆盖实际危害,以及需要时没有落实防护。演示里的补戴动作能把后一种纠正过程讲出来,至于防护是否足够,识别和提醒本身还回答不了。

两种不同的滑倒

滑倒又分成了两条。其中一段,当时有预警后工人稳住的处理方式,我选择保留预警后仍失去平衡的可能,再展示跌倒后的响应。人还是坐倒在地,通知要跟着更新,同事到场查看,后面的情况继续留待复核。

另一条是我提出的环境风险处理:摄像头发现危险环境,上报给负责人,再开会、处理。第一周报告的后续修订,把滑绊跌追到了通道、清理和责任衔接。报告引用的一起绊倒案例里,事故后区域清理了,原报告却指出根本问题没有处理。对应到演示,只标出湿滑地面,仍然没交代谁接手、通道怎样恢复可走。我选了工地现场短会,演示里要接上分工、临时隔离、绕行、清理积水,以及负责人复核后才恢复通行。这里没有人跌倒。两条故事要回答的问题不同,放在同一座工地里也得分清。

保留每件事结局的报告

报告是这轮演示里我很早就提出的部分:先形成一份报告,再变化成手机上的摘要。九个事件放在一起以后,报告里还要保留各自的经过和结局。更早整理事件脚本时,我们就把提醒已发出、现场风险已解除、事件待复核分开。工人补戴了装备、人员退出了危险区、积水清理了,不能都用弹出一条通知来代替;现场采取过什么动作、有没有经过人工确认,都要跟着事件留下来。

整合时也有一些看全景不容易注意到的事。以前各版都有自己的人员和设备编号,合进来要重新整理对应关系,不能把这个人的提醒记到另一个事件里。每条故事还有自己的播放进度,报告要指向对应事件实际走到的那一步。正常作业也不该计作一次事件。纸面报告变成手机摘要时,排法可以变,里面得是同一批记录。

同一批记录的两种排法。左边是给负责人的纸面观察记录:第 2 条“未戴安全帽作业”标着现场已纠正、手动确认、待复核,列出七个带时间的步骤;第 5 条“倒车货车后方的步行人员”标着进行中,只列出五个步骤,并注明之后的情况不作假设。右边是手机摘要:同样两条记录缩成卡片,一条待复核,一条进行中。
虚构示例班次里的两条记录:一条已完成的安全帽补正,一条中途停下的倒车故事。纸面报告和手机摘要是同一批记录,未结束的那条只保留实际走到的步骤。截图为英文界面。

虚构示例班次里的两条记录:一条已完成的安全帽补正,一条中途停下的倒车故事。纸面报告和手机摘要是同一批记录,未结束的那条只保留实际走到的步骤。截图为英文界面。

把镜头还给看的人

要把自由观察也保留下来,事件进度和镜头控制还得专门配合。人转动镜头时,正在播放的事要不要等一等,其他地方的施工要不要跟着停,事件结束后视角留在哪里,都需要明确。把九个事件放进同一场地以后,这些操作影响的是看的人能不能跟上每一件事。

复查后,我安排把九事件这版先存档,再制作一个操控样机。原有事件和报告保留,这一轮集中调整观看的控制。点区域先查看,自己按播放才开始;手动转动镜头时,只暂停当前正在播放的事件,其他区域照常作业;结束后保留视角,需要时再主动回到全场。还没触发的事件不进报告,已经触发但没结束的,保留实际推进到的部分。

观看节奏的前后对比图。之前,复查时:点一个区域;事件马上自动播放;拖动镜头换角度,事件还在往前走;播完把画面拉回全场,刚找到的角度没了。后三步标为播放的节奏催着人往下走。之后,操控样机:点区域先查看;自己按播放,事件才开始;手动转动镜头,只暂停播放中的事件,其他区域照常作业;结束后保留视角。
复查前后的观看节奏,按本文的描述绘制

复查前后的观看节奏,按本文的描述绘制

还待确认的事

这轮讨论结束时,新样机还等我体验确认。现在方案做到自己手上,我仍想知道,一个没参与制作的人看过以后,能不能说清产品在现场做了什么。

打开九事件体验(公开改编版,界面为英文)