作者 | 孙伟伟（景庄）
随着云计算和无线网络等基础设施的成熟，移动设备呈现爆发式增长，越来越多的企业级产品开始拥抱多平台设计，移动化办公概念已深入人心。华为发布了基于微内核的全场景分布式 OS -- 鸿蒙，期望打造以人为核心，万物互联的流畅体验，让用户在不同的场景设备中自如切换。苹果早在 iOS 8 上便发布了 Hand-Off 功能，支持用户在任意的苹果设备间实现跨设备的任务协同和无缝体验。SaaS 软件巨头 SAP 也早已在其全线的 SaaS 产品中提供了跨平台和移动办公的支持，用户不再受限于传统的办公室场景，而是可以实现任意时间和任意地点的便捷工作。
盒马中后台体验边界的延展
同样，在实体零售数字化的大背景下，盒马尝试对人货场进行全新的数字化重构。在消费者端，为用户提供精准的人货匹配与全新的消费体验；在作业者端，通过构建全新的数字化流程，为用户提供简单高效一致的作业体验。在这种新型的数字化关系下，作业形态和作业场景更加多元化，不再受制于特定的时间与地点，作业者可以借助多类型的智能设备来完成作业任务。因此，对于盒马体验技术团队而言，我们需要重新思考和定义中后台的体验边界。
图：盒马门店智能设备网络
在盒马，不同于传统的中后台场景，场的载体更加多样化，不只是传统的办公室场景，还包括门店，仓库，配送站，甚至是移动中的卡车与电瓶车；这其中的作业者角色也更为多元化，例如总部管理职能部门，门店经营职能部门，仓储作业部门，配送作业部门等等；场与人的多样性下，是多样化的作业设备来达成各类的作业意图。
图：盒马多元化中后台场景与多端工作台
盒马的各类职能人员通过盒马的多端工作台来完成各项工作，因此整个盒马工作台就是一个庞大的新零售操作系统，面向不同的角色提供不同的能力，例如仓储管理，物流管理，CRM，财务，ERP，EHR等等。在各类作业场景下，不同的作业人员可以借助不同的作业设备访问到特定的能力，例如在门店经营作业中，小二可以通过 PC 查看经营报表，使用手机获取消息，使用平板电脑管理餐饮档口，使用扫码枪进行拣货作业，并且各项作业任务通常还会联动各类的打印设备，IOT 设备等等。
围绕盒马的多端工作台，体验技术团队需要做的就是让各类作业角色在合适的设备中，以合适的方式，简单高效一致的完成合适的任务。
盒马中后台场景下的跨端体验挑战
大致梳理下盒马中后台的研发现状。总部管理、门店营运、仓储作业等角色需要通过盒马工作台完成各类作业任务；用户通过PC、Pad、Phone 等多种类型的设备访问到工作台的能力来完成特定的任务，例如通过桌面电脑访问各类报表和专项任务，通过手机查看消息和执行审批，通过掌中宝 Pad 进行门店的营运管理，通过扫码枪 RF 执行拣货作业；同时，作业任务的跨端协同需求也较为常见，同一个任务通常需要依赖多个设备协同完成。
图：盒马中后台研发现状概览
针对多端研发场景，一方面我们需要面向不同的设备提供跨端内容交付，另一方面，还需要构建面向不同角色和场景的多端体验基础设施，从而去改善和提升不同作业者在不同场景下使用不同设备的作业效率与体验问题。
盒马中后台跨端体验解决方案
面向盒马的中后台多端体验场景，我们构建了一套完整的跨端体验解决方案。该产品涵盖了从设计系统，跨端组件，跨端应用，到多端容器，工程基建，多端体验大脑，消息中心，状态同步中心等一系列的工具和服务，是一套服务盒马中后台研发场景的全场景解决方案。
图：盒马中后台跨端体验解决方案构成大图
下文将将会具体介绍我们在该产品构建过程中对于跨端设计系统，跨端组件，跨端应用方面的思考和方案。具体包括：
- 如何通过统一的设计系统来支持差异化的作业场景和作业设备
- 如何通过一套组件架构支持不同作业端的跨端复用
- 如何通过一套应用架构支持不同作业端的跨端使用和跨端联动
全场景跨端设计系统
针对多类型的设备，传统的做法是面向单一的设备提供设计系统并构建对应的交付能力，例如 PC 有独立的设计规范和组件体系，Phone 有独立的设计规范和组件体系。这种做法虽然有效，但随着设备类型的增加，面向单一设备提供交付能力的方案会带来设计体系的分裂与开发投入的大幅增高，并且用户在跨设备的作业任务中会产生较大的体验割裂感。为此，建立多端统一的设计体系有助于设计和开发团队快速响应端的变化，为作业者提供一致的作业体验。
构建设计系统的过程本身并不复杂，但在复杂的 B 类作业场景，如果要提供一套多端可用的设计系统，就需要更进一步的考虑到具体的作业环境和作业类型的差异，例如在办公室中和门店档口中，环境的光线和湿度会对屏幕内容产生影响，另一方面用户的交互姿势不同也会对屏幕内容产生影响；再比如在盒马的配送站中，配送员需要通过悬挂的叫号屏获取任务信息，但不同的空间布局和光线环境会导致不同配送站的信息获取效率的差异，此时屏幕内容展示就需要响应这种空间布局和光线导致的内容展示差异。
图：盒马的多样化作业场景与多样化作业类型
我们认为跨端设计系统需要考虑到作业场景下影响作业者体验的具体环境因素。对其中可能会影响到用户体验的环境因素我们大体可以分类为：
- 设备类型差异：屏幕尺寸、使用视距、屏幕比例、交互方式、硬件能力等。
- 作业类型差异：风格传达、情感传达、反馈模式、色彩模式等。
- 作业环境差异：光照、声音、湿度等。
- 系统类型差异：信息密度、产品风格、操作风格、横竖屏等。
图：盒马全场景多端设计系统
如果能够建立环境因子和设计系统之前的关联，那么我们就可以利用这些环境因子来计算设计系统中的各个子系统在具体环境下的取值，而不再仅仅依赖设计师的经验。在此基础上，我们就可以去构建整个多端设计系统中的各个子系统，例如色彩系统、字体系统、间距系统、尺寸系统、阴影层级等等。
图：基于环境变量计算 Design Token 的过程
为了能够更进一步的去验证和调整多端设计系统的 UI 逻辑，我们开发了一个基于环境因子的基础设计规则配置系统，用户可以基于给定的配置变量来生成 Design Token，例如设备类型、屏幕尺寸、使用视距、信息密度、动静状态、操作频率等等。
一套代码多端可用的跨端组件
与移动端跨端场景相比，中后台跨端场景需要面对的是更加复杂的设备类型，更大范围的屏幕尺寸范围，以及多种类型的操作系统，在设备能力上往往也相差甚远。为此，在构建了多端统一的设计系统的基础上，我们就需要面向多端场景提供统一的 UI 层解决方案。考虑到多类型的容器环境，我们采用了统一的 Web 方案提供一套代码，多端可用的解决方案。
针对盒马的中后台跨端场景，我们构建了一套全新的面向跨端场景的组件方案，主要包括：
- 灵活响应式的跨端视图层方案，提供响应式支持，Design Token 支持，原子化 CSS 支持
- 可复用的跨端行为层 Hooks 方案，提供跨端行为的 Hooks 封装
- 可复用的组件状态层 Hooks 方案，提供可跨组件复用的状态管理封装
我们以 Switch 组件为例，来看一个组件当需要解决跨端复用时该如何去拆分与实现。按照上述思路，我们认为一个组件整体上可以被拆分为三层，分别包括：
- 视图结构与样式层，用来定义组件的基本视图结构，并响应跨端的尺寸变化，色彩模式变化；
- 行为逻辑层，响应用户的交互行为，例如鼠标点击，键盘操作，手势操作等；
- 状态逻辑层，管理组件内部的状态，通常是多端一致的，不涉及到跨端的适配问题。
图：Switch 组件构成拆解
组件实现复杂度的根源在于我们通常会在同一份代码里耦合了这三层逻辑。尤其在中后台的跨端场景下，如果组件要同时支持多设备下视图和交互的变化，就有必要去深入的解耦这三层逻辑，并在此基础上去构建可复用可拼装的原子化跨端能力集。
图：新版跨端 Switch 组件的实现说明
可多端复用与跨端联动的应用架构
在应用层，我们通常会通过拼装组件来构建符合一定业务意图的用户界面，跨端场景下的应用，通常需要面临两种典型模式，应用的跨端运行，和应用状态的跨端联动。例如对于一个巡检任务单而言，通常需要既可以在 PC 端打开，也可以在 Phone 端打开，当执行具体的巡检任务时，拍照上传类的任务更适合在 Phone 端完成，而大表单填写则适合在 PC 上完成。此时，我们就需要应用层能够低成本的支持这种跨端联动的多设备协同能力。在这样的业务背景下，我们重新思考了跨端应用方案的设计。
一个业务如果有多端诉求，其差异往往是在视图层上，而其底层的业务数据模型基本是相同的。因此，整个应用就被拆分为 应用容器层、数据模型层、跨端视图层 三层。应用容器层借助统一容器 SDK 提供统一的 API；数据模型层包括统一的数据服务和数据模型，和 UI 层方案无关，并可以借助独立的云端持久化服务来实现应用状态的跨端持久化；跨端视图层则用来面向不同端提供差异化视图，得益于组件层的跨端能力，应用层默认可以做到多端可用，但也可以针对某些特定的业务诉求来实现差异化视图。
图：盒马跨端应用 App 架构概览（以门店巡检应用为例）
对门店巡检应用而言，借助于多端视图，巡检应用可以实现低成本的跨端视图适配，无需开发者进行任何是额外适配。对于跨设备的状态协同，得益于独立的可序列化的数据模型层，可以借助状态远程持久化服务实现应用层状态的跨端联动。
在这种分层架构下，模型层可以做到与具体的框架层方案无关，借助于应用状态的远程持久化服务，我们便可以建立同一应用在不同设备间保持状态的异地唤起与同步，从而在端与端之前建立桥梁，支持用户在不同设备间实现跨端联动。
小结
最后，总结下盒马中后台跨端场景解决方案的探索过程。为了解决盒马在中后台场景的多端作业需求，并改善不同作业场景下的各类作业者的跨端作业体验和跨端联动体验，我们尝试在设计系统中融入环境变量，并构建统一的面向多类型的设备的统一的设计系统，来统一支持不同端的设计与开发。在组件层，我们通过全新的跨端组件架构，通过构建全新的视图层方案和原子化的组件行为和组件状态管理能力来实现原子化能力的复用，并解耦组件层的复杂度。在应用层，我们建立了统一的应用层分层范式，构建标准的数据模型层来实现跨端应用的基础数据模型和数据服务复用。
D2 分享预告
关于盒马中后台跨端方案的更进一步内容将会在 2020年12月19日举行的 D2 前端技术论坛中进行深入分享，欢迎大家关注第十五届 D2 前端技术论坛跨端技术专场，一起来交流。
关注「Alibaba F2E」
把握阿里巴巴前端新动向
