移动端UI一致性解决方案 _UI

外卖UI一致性项目是外卖UI设计团队与研发团队共建的项目，目的是改善用户端体验的一致性，提升多技术方案间组件的通用性和复用率，降低整体视觉改版带来的研发成本。外卖技术团队通过在实践中不断总结经验，开发了一套完整的UI一致性解决方案，目前已经取得了一些成果，本文系实践经验分享。

文章插图

1. 背景1.1 行业现状与问题
很多技术同学都知道，移动端往往比较侧重业务开发，这会导致人员规模不断扩大，项目复杂度也会持续增长。而为了满足业务的快速上线，很难去落实统一的设计规范，在开发过程中由于UI缺乏标准导致的问题不断凸显，具体体现在以下4个层面：

设计层面：由于UI缺乏标准化设计规范，在不同App及不同开发语言平台上设计风格不统一，用户体验不一致；设计资源与代码均缺乏统一管理手段，无法实现积累沉淀，无法适应新业务的开发需求。
开发层面：组件代码实现碎片化，存在多次开发的情况，质量难以保证；各端代码API不统一，维护拓展成本较高，变更主题、适配Dark Mode等需求难以实现。
测试层面：重复走查，频繁回归，每次发版均需验证组件质量。
产品层面：版本迭代效率低，版本需求吞吐量低，不具备业务的快速拓展能力。

1.2 外卖移动端UI一致性情况
近来年，美团外卖业务开始由发展期走入成熟期，这更要求对细分场景的快速迭代。目前，外卖平台承载了餐饮、商超、闪购、跑腿、药品等多个业务品类，用户入口则覆盖了美团App外卖频道、外卖App、大众点评外卖频道等多个独立应用。由于前期侧重需求的快速上线，设计层面缺乏标准化的规范约束， UI设计风格不统一，也存在多次开发的情况，目前的维护成本较高，在开发过程中逐渐暴露出一些问题，主要体现在以下三个层面。
指标一：移动端UI问题统计
在Ones（美团内部研发需求管理工具）中，单个版本的UI适配问题占比超过总Bug数的11.82% ，亟待优化；交互适配问题在绝大多数版本中均有出现，一定程度上反映了其发生的普遍性。

文章插图

指标二：需求承接率数据统计
用户侧UI需求吞吐率达18.3% ，目前用户侧UI需求吞吐率较低，亟待解决。

文章插图

指标三：需求入版情况统计
目前各版本UI同学都会提出一定数量的视觉优化需求，但实际入版量仅为三分之一左右，未上线的原因均为RD开发时间不足。

文章插图

从长远角度来看，随着固有业务渗透率的不断饱和，未来一段时间内，美团外卖还有开拓新业务、进入新市场的需求，如国际化App、闪购App等，需要移动端能够高效地组建新业务App 。在此背景下，移动端具备快速调整适应的UI展现能力是重中之重。为了达到上述目标，需要PM/UI/RD共同维护一套设计规范，在产品上统一风格，在源头上做到统一设计，并在代码中统一进行实现。
1.3 UI一致性项目
基于上述开发工作中的切实痛点，以及未来可预见的移动端能力需求，迫切需要一套统一的UI设计规范，以此沉淀设计风格，建立统一的UI设计标准。
UI一致性项目自2019年5月份被提出，是外卖UI设计团队与研发团队的共建项目，该项目是为了改善用户端体验一致性，提升多技术方案间组件的通用性和复用率，降低整体视觉改版的研发成本。通过抽离成熟的业务场景，建立可提供高质量、可扩展、可统一配置的基于Android/IOS/MRN的组件代码库，使之具备支持多业务高层次的代码复用能力，进而提高UI业务中台能力，使项目保持高度一致性。