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