axureux中后台管理信息系统通用原型方案 v2_这套美团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业务中台能力，使项目保持高度一致性。

为了帮助团队提升产研效率，外卖技术成立了袋鼠UI共建项目组，将门户建设、工具链建设以及组件建设统一管理统一规划，并将工具链的品牌确定为“积木”，此前我们已经写过两篇文章《积木Sketch Plugin：设计同学的贴心搭档》、《积木Sketch插件进阶开发指南》介绍过积木相关的内容，本文主要介绍UI一致性。

UI一致性是绝大部分研发团队面临的共性问题，大家对落地设计规范，提高UI中台能力，提升产研效率具有强烈的诉求。通过UI一致性的建设，不仅可以在品牌上实现体验升级，更可以全面提高产研效率，为业务的快速迭代提供有力支持和有效保障。

统一的品牌符号、品牌特征，有助于加深产品在用户心目中的印象。统一的用户界面和交互形式，能帮助用户加深对产品的熟悉感和信任感。而一个好的设计语言可以在体验上为产品加分，也能够更好的创造一致性体验。

2. UI一致性整体方案

为了帮助更多的业务部门定制符合一致性原则的专属设计风格，外卖技术部在实践中不断总结经验，开发了一套通用的UI一致性解决方案。该方案通过UI一致性工具链落地项目建设，并打造一整套的闭环UI开发流程，目前已经取得了一定的成果，以下系具体方案的介绍。

2.1 方案全景

外卖UI一致性套件由积木工具链、代码组件库、定制化设计云协作平台以及文档化说明(官网)四部分组成。

1. 积木工具链：通过建立包含相同设计元素的统一物料市场，PM通过Axure插件拾取物料市场中的组件产出原型稿；UI/UE通过Sketch插件落地物料市场中的设计规范，产出符合要求的设计稿。未来，希望通过高保真原型输出，可以给中后台项目、非依赖体验项目提供更好的服务体验，赋予产品同学直接向技术侧输出原型稿的能力。

2. 代码组件库(Android、iOS、MRN)：设计稿中的组件与RD代码仓库中组件一一对应。

3. 文档化说明：官网详细描述了代码组件库的集成方式、组件的使用方法，降低开发上手难度，只需要理解接口和职责即可进行业务开发。

4. 定制化设计云协作平台：与美团内部的印迹团队(云协作平台)合作开发，在RD的设计稿中标注了哪些是代码组件库中已有的元素，避免重复开发，同时关联了官网中该组件的使用说明，是代码组件库与官网的纽带。

外卖UI一致性解决方案

2.2 接入指南

1. 设计师逐步将设计语言沉淀为设计规范(包括组件、颜色、字体、图片等)上传至官网供整个设计团队查阅，同时将其量化并内置于积木Sketch插件中；开发同学则将其代