作者 | 孫偉偉（景莊）
随着雲計算和無線網絡等基礎設施的成熟，移動裝置呈現爆發式增長，越來越多的企業級産品開始擁抱多平台設計，移動化辦公概念已深入人心。華為釋出了基于微核心的全場景分布式 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」
把握阿裡巴巴前端新動向