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

为了帮助团队提升产研效率，外卖技术成立了袋鼠UI共建项目组，将门户建设、工具链建设以及组件建设统一管理统一规划，并将工具链的品牌确定为“积木” ，此前我们已经写过两篇文章《积木Sketch Plugin：设计同学的贴心搭档》、《积木Sketch插件进阶开发指南》介绍过积木相关的内容，本文主要介绍UI一致性。
UI一致性是绝大部分研发团队面临的共性问题，大家对落地设计规范，提高UI中台能力，提升产研效率具有强烈的诉求。通过UI一致性的建设，不仅可以在品牌上实现体验升级，更可以全面提高产研效率，为业务的快速迭代提供有力支持和有效保障。
统一的品牌符号、品牌特征，有助于加深产品在用户心目中的印象。统一的用户界面和交互形式，能帮助用户加深对产品的熟悉感和信任感。而一个好的设计语言可以在体验上为产品加分，也能够更好的创造一致性体验。
2. UI一致性整体方案为了帮助更多的业务部门定制符合一致性原则的专属设计风格，外卖技术部在实践中不断总结经验，开发了一套通用的UI一致性解决方案。该方案通过UI一致性工具链落地项目建设，并打造一整套的闭环UI开发流程，目前已经取得了一定的成果，以下系具体方案的介绍。
2.1 方案全景
外卖UI一致性套件由积木工具链、代码组件库、定制化设计云协作平台以及文档化说明（官网）四部分组成。

积木工具链：通过建立包含相同设计元素的统一物料市场， PM通过Axure插件拾取物料市场中的组件产出原型稿；UI/UE通过Sketch插件落地物料市场中的设计规范，产出符合要求的设计稿。未来，希望通过高保真原型输出，可以给中后台项目、非依赖体验项目提供更好的服务体验，赋予产品同学直接向技术侧输出原型稿的能力。
代码组件库（Android、iOS、MRN）：设计稿中的组件与RD代码仓库中组件一一对应。
文档化说明：官网详细描述了代码组件库的集成方式、组件的使用方法，降低开发上手难度，只需要理解接口和职责即可进行业务开发。
定制化设计云协作平台：与美团内部的印迹团队（云协作平台）合作开发，在RD的设计稿中标注了哪些是代码组件库中已有的元素，避免重复开发，同时关联了官网中该组件的使用说明，是代码组件库与官网的纽带。

文章插图
外卖UI一致性解决方案
2.2 接入指南

设计师逐步将设计语言沉淀为设计规范（包括组件、颜色、字体、图片等）上传至官网供整个设计团队查阅，同时将其量化并内置于积木Sketch插件中；开发同学则将其代码化，针对Android/iOS/MRN三端进行组件库开发。
设计师使用积木Sketch插件绘制设计稿，可以保证设计元素均从既定的设计标准中获取，产出符合业务设计规范的设计稿，而代码组件库中也有对应的实现。
绘制完成的设计稿上传至印迹云协作平台，交付开发同学进行设计稿还原。
开发同学拿到设计稿后，就可以知道本次需求哪些组件已内置于代码组件库中，并可以点击设计稿中的链接，直接查看组件的使用说明。

文章插图
UI一致性协作流程闭环
2.3 方案落地
虽然UI一致性在落地上会增加开发同学不少的工作量，推进一致性建设也是一个艰难的工作，由于成本较高，且无法量化评估收益，很多团队最终未达到预期效果，但一旦有效运作起来后，团队将获得丰厚的回报。UI一致性的建设需要设计者对现有状态有足够的认识，对业务有充分理解，以及优秀的设计能力，同时还要不断地进行实践和优化。为了保证一致性项目的成功落地，避免“半途而废” ，我们制定了一系列的推进措施：