从15年第一个项目开始，团队以前端技术参与线下业务的项目开发已经快4年了，过程中尝试了很多，收获了很多，些许成就，些许挫败。最近简单整理了一下自己的想法和理解，希望对大家有一些业务方向和技术发展上的帮助，欢迎指点和探讨。
一、项目的设计
目前接触过的线下项目，除了服务类的需求在前期有明确的规划，我们去做优化和建议外，互动类的需求需要深入参与到项目的设计上。我们可以从项目的目的、流程、承载、构思等几个方面来思考。
开发目的
一般线下的项目分两类，互动体验和会场服务。互动体验更多是用用户即时参与的方式去感受游戏产品想特别突出游戏的某个特点或者能造成话题引起营销传播，而会场服务主要为现场的用户提供相关的指引、签到、信息获取等功能性服务。一个更多的体现趣味性，一个更多的体现实用性。
穿越火线2015七周年摇一摇竞猜
如何结合游戏产品的特点去设计更有趣的互动，以及如何结合会场用户的需求去设计更实用的服务，都是需要详细考虑的问题。当然，这两者的数据可以进一步打通做更多的交互，实现会场体验的数字体系化。
流程选择
对于一个线下项目来说，在技术上最基础的流程无非是，当用户操作产生了一个或多个输入，设备进行输入的识别，然后按照规则进行处理，最后转化为一个或多个输出给到用户。在每个流程点上，我们可以根据关键的设计方向，选择对应的技术去实现。对于输入和识别，可以是内容、位置、状态、控制等等；对于处理，可以是合成、转换、记录、计算等等；对于输出，可以是展示、反馈等等。
针对互动项目，考虑得更多的是整个过程是要有趣味性的，这样会吸引更多的用户去体验，也能造成二次传播。例如，我们想实现一个人脸上妆的线下互动，首先是让摄像头拍摄用户的头像作为输入，然后传入设备进行人脸识别，找出眼睛、眉毛、嘴巴、脸等部位，再基于识别结果，给这些部位设置相应的妆容，最后通过大屏幕输出用户头像的上妆效果。
而针对会场用户提供的线下服务来说，一般是多个流程独立和相互的组合。相对于互动的趣味性来说，判断业务和用户的核心功能需求是更为重要的。例如会场服务小程序可能包含公告、票务、签到、指引等功能。单就会场指引，可以采用iBeacon输入位置信息，让小程序识别和处理，最终以地图标识的方式输出。而现场用户的定位信息又可以提供给会场组织者了解人流走向，成为另一个流程的输入。
TGC2018会场小程序iBeacon位置指引
功能承载
对于每个流程点，我们需要选择对应的承载对象，也就是想要实现这个流程点的功能，需要依赖的对象。因为是线下的项目，我们的选择面可以很广，可以是硬件、页面、小程序、甚至是自建的设备。
例如，我们可以通过手机摄像头、PC摄像头、Kinect等设备去识别用户的肢体动作，可以通过页面、小程序、单片机等去处理相应的互动逻辑，可以通过页面、小程序在大屏幕、手机显示屏、投影等方式去输出处理后的结果。甚至还可以额外设计一些设备去做联动和包装，例如伪全息做输出媒介、自行车助力做输入、模型嵌套做外观等等。
敦煌文博会2018纸模互动
设计构思
基于多个项目的实际经历，我们也总结了一些实现项目设计的思考方法，其中一些可以相对快速的完成项目的设计。
首先可以考虑把一些适合的线上项目通过某些方式转换成线下的项目，特别是很多线上借助各类API实现的互动体验。例如，我们曾经将一个游戏产品的线上拍照合影的H5，转换成游戏线下扫描易拉宝二维码进入体验，并将用户自拍整合到大屏幕展示的方式。
另外，在平时积累大量的优秀案例，在设计时对其进行相应的优化和调整，也能帮助我们快速敲定线下项目的方案。例如，我们体验过TeamLab一个参与度很不错的涂鸦大屏互动，后来在TGC中基于这个玩法进行优化，开发了游戏的涂鸦消除互动。
TGC2017爱消除涂鸦互动
如果时间比较充裕的话，可以考虑完全独立设计。这时候就要考虑，基于产品的核心诉求，选择什么样的关键技术以及配套哪些辅助技术去实现整个项目的设计。例如，我们在VR体验兴起的时候，实现了WebVR的游戏方式，用于龙之谷在ChinaJoy展会的线下互动，造成了比较大的话题性，并且基于此进行了二次传播。
ChinaJoy2016龙之谷WebVR互动
二、技术的储备
作为前端开发，基于线下项目的开发需求，需要学习和沉淀大量的技术和方案，主要包括自己写处理逻辑、利用已有组件框架或硬件设备接口、借助平台的能力等。
自有计算
对于基本的一些功能点，由于选择组件框架可能过于繁重或者缺失，我们可以自己快速开发，例如一些基础的色彩检测、碰撞反馈、现实增强等，这需要我们掌握相应的算法或者技术点。
例如，我们基于爱消除和彩虹糖的异业合作，设计了一套识别摄像头画面里彩虹糖的颜色，生成一局爱消除游戏的互动玩法。其中基于摄像头的实时色彩识别，就是我们独立开发的功能。
组件框架、设备接口、平台能力
为了提升开发的效率，以及补全相应的能力，我们可以基于需要的功能选择合适的组件框架、设备提供的接口、或者平台给与的能力。比如像3D开发一般会选用的ThreeJS，体感互动开发一般会选用KinectJSSDK，会场服务会选择微信小程序等等，这需要我们做充足的技术储备。
TGC2016火影Kinect体感互动
对于互动开发常用的组件框架，需要做好收集和预研。对于平台能力，也是如此，包括微信、手Q、优图、AILab、腾讯云等平台提供了大量服务或者API。因为在很多线上互动需求里也能用得上，这两类提供的能力可以大量在实际项目中应用和沉淀。
对于设备接口，首先需要了解能用于线下场景的各类设备，包括扫描仪、Kinect、LeapMotion、各类VR眼睛、开发板等等。另外还需要了解这些设备本身提供给前端的功能和API，例如W3C设计了许多基于浏览器支持的DeviceAPIs，包括地理定位、陀螺仪、震动、电量等等。
在实际线下项目中，稍微大型一些的，都是对于以上所有技术储备选择和整合应用的结果。
三、可能的问题
在线下项目的设计和开发过程中，会遇到大量的、与线上业务完全不同的问题。我把印象中比较深的一些做一下列举，希望能让大家避免一些坑。
环境因素
由于线下环境造成的问题是比较多见的，有时候设计的项目方案，会因为这个原因导致失败或者效果大打折扣。现场的光线控制、网络情况、人员密度、场地空间等等都可能造成影响，这需要我们在项目设计的时候考虑到这些因素。
TGC2015飞行类游戏伪全息互动
例如，如果想以伪全息的方式做界面的输出呈现，就必须要对现场的灯光环境进行控制。因为一般伪全息的实现原理都是显示设备（显示屏或投影仪）在透明幕布上的折射或投影显示，灯光会减弱幕布的呈现效果。再比如，用于体感互动的Kinect设备，有固定的识别距离和识别角度，这需要在项目设计上，考虑到现场空间的选择。
兼容处理
线下环境因为直接在现实中面对用户，设备复杂程度高，很容易因为意想不到的错误导致用户的情绪反弹，所以需要做好各种兼容处理以及应急方案。
例如在TGC小程序开发的印章集卡功能，我们做了很多的降级方案。首先是默认的盖章方式，逼格很高；如果屏幕出现问题，或者和手机系统功能造成冲突，我们提供选择扫描二维码集卡的方式；如果现场网络问题等其他未知问题，我们提供最基础的实体卡片方式。果真在现场就遇到了在部分Android手机，多点触控的功能被操作系统设定为启动截屏，所以对于这类用户，启动了第二种集卡的方案。
TGC2017会场小程序印章集卡
现场支持
因为涉及现场配置项目环境、实地测试、工作人员指导、处理应急事件等等原因，需要项目的开发同学提前到现场进行支持，这点非常重要。
例如，几乎每次线下的大屏互动，我们都会在前期现场调试的时候发现自己测试遇不到的问题，比如显示屏的刷新率，长时间运行造成的卡顿等等。对于线下的会场服务应用，也需要对现场工作人员做使用培训，让他们了解规则。
效果验证
刚开始应用是创新，持续应用就要考虑效果验证的问题了。对于互动或者服务应用的关键数据上报、生成物的统计等等，都是常用的监控方式。例如会场服务小程序，可以基于小程序自有的一套数据上报规则去做监控。我们发现，数据比较好的项目一般集中在具备实用功能的会场服务，以及创新或能DIY的互动。
Web前端开发因为各种加持，现在能去做的事儿越来越多了，这是10年前我们没法去想象的。基于业务场景去思考技术的应用，可以带给我们无限的发展空间。学习更多的前端技术，进行更多的业务交流，发觉更多的应用场景。天高海阔，技由心生。