美团移动端UI一致性解决方案，纯干货

　　美团移动端UI一致性解决方案，纯干货

　　1. 背景

　　1.1行业现状及存在问题

　　许多技术专业的学生都知道，移动端往往以业务发展为重点，这将导致员工规模的不断扩大，项目复杂性也会不断增长。然而，为了满足业务的快速上线，很难实现统一的设计规范。在开发过程中，UI标准的缺失所带来的问题不断凸显，主要体现在以下四个方面:

　　设计层面:由于缺乏标准化的UI设计规范，在不同的app和开发语言平台上，设计风格不统一，用户体验不一致;设计资源和代码缺乏统一的管理手段，无法实现积累和沉淀，无法适应新业务发展的需要。

　　开发层面:组件代码碎片化，存在多次开发的情况，质量难以保证;各端API不统一，维护和扩展成本高，难以满足变更主题和适配Dark Mode的需求等。

　　测试级别:重复走查，频繁回归，每次发版本都需要验证组件的质量。

　　在产品层面:版本迭代效率低，版本需求吞吐量低，业务无法快速扩展。

　　1.2外卖移动终端UI一致性

　　近年来，美团外卖业务已经从发展阶段进入成熟阶段，这就需要细分场景的快速迭代。目前，外卖平台承载了餐饮、超市、闪购、跑腿、医药等多个业务类别，用户入口涵盖了美团App外卖频道、外卖App、大众点评外卖频道等多个独立应用。由于早期专注于快速上线需求，设计水平缺乏标准化规范约束，UI设计风格不统一，且有多次开发。目前的维护成本较高，在开发过程中逐渐暴露出一些问题，主要体现在以下三个方面。

　　指标1:移动端UI问题统计

　　在Ones(内部研发需求管理工具)中，单个版本的UI适配问题占bug总数的11.82%以上，需要优化。大多数版本都出现了交互适配的问题，这在一定程度上反映了其普遍性。

　　

　　指标2:需求承接率数据统计

　　用户端UI需求吞吐量为18.3%。目前，用户端UI需求吞吐率较低，亟待解决。

　　

　　指标3:需求入版情况统计

　　目前，所有版本的UI同学都对视觉优化提出了一定数量的需求，但实际入版量只有三分之一左右，不上线的原因是研发开发时间不足。

　　

　　从长远来看，随着固有业务渗透率的不断饱和，美团外卖仍需开发新业务，进入新市场，如国际App、闪购App等，这就需要移动端高效搭建新业务应用。在这种背景下，移动终端具有快速调整和适应UI呈现的能力是至关重要的。为了实现上述目标，PM/UI/RD有必要共同维护一套设计规范，在产品上实现统一风格，在源头上实现统一设计，在代码上统一实现。

　　1.3 UI一致性项目

　　基于上述开发工作中的实际痛点，以及可预见的未来移动终端能力需求，迫切需要统一的UI设计规范，从而沉淀设计风格，建立统一的UI设计标准。

　　UI一致性项目是外卖UI设计团队和研发团队的联合项目。该项目旨在提高用户体验的一致性，提高组件在多技术解决方案之间的通用性和复用率，降低整体视觉改版的研发成本。通过提取成熟的业务场景，建立高质量、可扩展、统一配置的基于Android/iOS/MRN的组件代码库，支持多业务的高级代码复用。从而提高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插件中。开发学生将其代码化，针对Android/iOS/MRN三个终端组件库开发。

　　2.设计人员可以使用积木Sketch插件绘制设计稿，可以确保所有设计元素都是从已建立的设计标准中获得的，并根据业务设计规范生成设计稿，并且在代码组件库中有相应的实现。

　　3.将完成的设计稿上传到印迹云协作平台，交付给开发人员还原设计稿。

　　4.在获得设计稿后，开发人员可以知道该需求的哪些组件已经内置于代码组件库中，并可以点击设计稿中的链接，直接查看组件的使用说明。

　　

　　UI一致性协作流程闭环

　　2.3方案落地

　　尽管UI一致性在落地上将增加开发人员的工作量，促进一致性构建也是一项困难的工作。，由于高昂的成本和无法量化收益，很多团队最终未能达到预期的结果，但一旦有效运作起来之后，团队将获得丰厚的回报。构建UI一致性需要设计者对当前状态有深刻理解，对业务也有深刻理解，以及良好的设计技能，以及持续的实践和优化。为了保证一致性项目的顺利实施，避免“半途而废”，我们制定了一系列的推广措施:

　　1.项目团队不能脱离日常的需求开发。这确保了设计人员制定的设计元素总是来自最新的业务场景，并且可以将项目输出快速应用到要验证的最新版本。

　　2.选择高投入产出比和受视觉因素影响较大的模块场景作为重构的优先内容。化繁为简，确定了最小验证闭环(MVP)。并在实践中对整个工艺进行优化，进而跑通整个流程。

　　3.该项目将由UI同学推广，根据版本要求提出需求，移动端排期并落地实施，由UI统一验收。

　　4.制定阶段性目标，完成最近三个阶段的具体规划，定期复盘完成情况，确保项目持续推进。

　　2.4一致性成果

　　经过一段时间的UI一致性建设，在资源一致性方面，外卖App团队已经完成了近100个Iconfont的替换，有效减少了安装包的体积。在构件组件代码库建设方面，完成构件替换30多处，中等业务需求平均节省3PD人力;在工具链方面，根据UI/UE提供的数据，对于设计资源依赖性强的需求，使用了积木Sketch插件后，提升效率可以达到30%以上，对于对UI资源依赖性不强的流程需求，平均提升效率可以达到50%以上。

　　3.设计体系建设

　　细化来看，整个UI一致性方案主要分为两个部分，一个是设计体系构建，另一个是工具链构建。设计体系的构建是基础，主要是为设计师沉淀设计风格和建立统一的UI设计标准，而工具链的构建是支撑，为开发人员开发一系列工具来封闭开发过程，实现设计系统的落地。

　　3.1外卖DPL

　　DPL(设计模式库)是面向UED设计人员的文档化说明，它描述了设计模式库规范和应用场景。DPL主要包括两个部分:组件构建规范和资源一致性。DPL背后是技术实现，通常体现在Android/iOS/RN代码框架中，如阿里巴巴的FusionDesign库和腾讯的QMUI库。这些封装的代码组件是面向应用程序开发人员的。在没建立DPL模型之前，开发人员需要对视觉恢复的设计稿进行多次修改，才能通过设计人员的验证，这极大地影响了开发效率，降低了需求吞吐量。

　　

　　在建立外卖DPL模型之前的开发流程

　　通过DPL实现设计-开发流程的闭环,UI同学由于设计规范的标准化,可以显著提高出稿效率,走查效率,重复组件甚至不需要去走查;对RD学生而言,如果组件库中的组件是正确配置,几乎没有适应问题，因为它们已经经过了历史版本的测试，所以不需要重复视觉矫正。对于设计团队来说，一个优秀的设计体系是包容的，是充满活力的。一个好的设计模式库可以帮助实现规范化，从而减少界面开发的工作量，提高一致性。对于设计人员来说，建立DPL有助于减少误用、滥用和无效的创新。

　　3.2组件搭建

　　在长期的漫长迭代过程中，新旧风格混在一起，随着功能的增加和UI的不断修改，维护起来变得极其困难。设计师通过对页面走查的结果进行汇总和整理，制定设计规范，从而选择复用度高的组件进行组件库的构建。通过构建组件库可以实现控件的标准化，避免控件的随机组合，减少页面之间的差异;组件库中的组件满足业务特点，并能应对不断变化的环境。具有云端动态调整能力，规范更新时可统一调整。

　　在不影响需求实现和设计效果的前提下，只有在方案设计中尽可能多地使用组件，提高组件设计稿中的覆盖度，才能通过构件组件库真正提高效率。除了在新的需求中使用组件外，还需要尽可能用组件替换现有页面内容，避免页面升级过程中出现重复修改的问题，真正提高产研效率。在构建组件库时，请注意以下几点。

　　选择合适的粒度

　　组件粒度的选择一直是困扰我们的问题。虽然有构建设计系统的核心理论——原子设计理论为指导，页面设计是按照“原子、分子、组织、模板、页面”五个层次进行的。对于从头开发新的应用程序来说，这个理论没有问题。然而，对于进行一致性改造的app，许多设计问题已经暴露出来。成熟的在线页面有数百个，转型非常困难。在制作组件之前，项目同学整理了近百页外卖的的页面，将使用到的组件进行分类，根据组件的使用频率进行排序，制定了逐步更换计划。这样，避免组件库做的很全，花费了大量的人力，但是很多组件实际并没有使用，或者开发的组件太少，场景覆盖不够等问题。

　　经过与设计人员的反复沟通，我们发现具有高可复用性的组件大致可以分为两类:第一类是“基础控件”，就是类似于标签、按钮、开关等基本功能的元素，对应于原子理论中的原子；第二种类型的“业务组件”，如商品名片，由“基本控件”(如商品卡片由“标签控件”和“图片控件”组成)组成，同时“业务组件”可以组合成更高层次的“复杂组件”，类似于原子理论中的分子。“业务组件”的组合方式也是千变万化的，不同风格的业务组件可以形成类似的“商家列表”、“菜品列表”等“模板”，而“模板”与“基本控件”组合在一起，成为一个“页面”。

　　

　　外卖DPL模型的建立

　　具备扩展性

　　组件必须具有某些可配置属性，以增强场景。可配置属性体现在三个方面:组件支持局部元素显示和隐藏,例如,标题、说明和大宗商品价格卡可以根据控制界面数据来展示逻辑;组件支持各种样式,如产品卡从左到右排列,上下排列;组件支持业务方面配置主题,比如调整亮色和对齐方式等。

　　

　　组件应该是可扩展的

　　支持统一管理

　　组件管理功能对外卖UI的一致性起着至关重要的作用，主要体现在两个方面:一是沉淀设计风格，袋鼠UI现在已经形成了自己独特的风格，外卖设计团队根据设计规范，为满足UI一致性业务场景的组件进行不断的抽象和构建，沉淀出越来越多的通用业务组件，这些组件需要及时扩展到库中，另一个功能是让团队使用的是最新的组件。组件的设计元素(颜色、字体、圆角等)可能由于各种原因而更改，需要提醒团队成员及时更新组件，以保持所有页面的一致性。

　　3.3资源一致性

　　UI设计语言与它自己的业务密切相关。美团的许多业务，包括外卖、酒旅和团购等，都有自己的设计系统。“通用”不能满足业务特征、不同业务组件、色彩体系、动效、字体样式等千差万别，其中任何一个环节的丢失都可能导致一致性的破坏。

　　设计语言不是一个抽象的概念。当人们想到美团时，就会想到美团黄、袋鼠、食品卡单、骑*敏*感*词*的人穿着印有“美团外卖”的衣服。通过设计语言，传达品牌理念和设计理念。目前,袋鼠UI已形成一套自己的独特的风格,为元素的一致性处理也有自己的一套标准,对于产品设计师,必须把这个风格化延续,使我们整个项目高度一致性,为护“袋鼠特色”,确保吸引力。

　　3.3.1图片

　　建立一个插图库

　　插画作为一种视觉语言，是品牌识别的关键核心元素。与简单的文案信息不同，图形不仅在视觉上描述了内在信息，还塑造了情感背景，让用户更加沉浸和感同身受。插图可以在提升产品用户体验的同时，达到商业目标。它在表达效果和生产效率方*敏*感*词*有独特的优势，被广泛应用于追求效率的互联网产品中。

　　由于之前的产品插图没有系统的整合，插图作者的个人风格明显，不同的设计师在平面作品的合作中很难再现这种风格。而且也有一定的风险，只有一个设计师可以完成整个业务的插图建设工作。不同设计师之前绘制的元素不能相互沟通，导致很多风格不同的元素重复设计，缺乏系统的创作和安排，不能最大限度地提高生产效率，影响产品的品质感。因此，插画系统对于保持品牌一致性，提高工作效率，规避风险尤为重要。

　　

　　插图规范示例

　　使用Iconfont

　　Iconfont，顾名思义，是一种使用字体文件而不是图像文件来显示图标、特殊字体和其他元素的方法。简单来说，Iconfont就是把多个图标文件打包为TTF字体文件，在系统中注册后，应用程序可以像使用字体一样使用图标。这个原则可以简单地理解为通过TTF字体文件维护Unicode代码和图形之间的映射。项目使用Iconfont时，不再需要下载多个PNG文件来配置多个icon。只需要维护一组TTF字体文件。Iconfont不仅是矢量的，还可以自由更改大小，并支持任意颜色更改。从项目的角度看,由于不需要建立多个图像来适应不同的手机分辨率,可以减少包的大小在一定程度上,方便同学管理图标一致,为无用的图标和类似的图标检测奠定了基础。

　　

　　使用iconfont替换项目中的图片

　　归档图片文件

　　当App发展到一定阶段，必然会面临包体积越来越大的问题，会出现越来越多无用的图片和类似的图片。与此同时，由于新业务的发展不断涌现新的场景，并不可避免地添加了大量的图片。综上所述，图片文件一致性项目需要解决两个问题，即库存图片的处理和新图片的管理。

　　对于存量图片,必须确定其合理性,项目大量相似的图片,这些图片可能仅padding不同,颜色或尺寸微小的差异,可以通过脚本扫描相似图片,根据图片的特征Hash判断图片的相似性,根据UI建议，图像相似性高的，可以保留一张。那么，如何防止新增图片重蹈覆辙呢?通过建立图片管理后台，根据场景对图片进行分类。从组件代码库中选择标准图片，新增图片由相关负责人通过公关策略进行审核，可以有效防止类似图片的积累。

　　

　　一致性项目实施之前的类似图像

　　3.3.2 动效

　　动效是指赋予产品生命的动态界面元素和视觉效果。这些交互效果通常与特定的反应行为有关，即使不是直接相关的临时状态。精细合适的*敏*感*词*可以传达状态，增强用户对直接操作的感知，并将结果直观地呈现给用户。

　　随着外卖业务的不断增加，动效所占比例不断增加，其重要性日益突出。这也是提升用户体验和竞争产品之间差距的重要因素。因此，对动效的统一、规范使用显得尤为重要。通过动效库的构建，UI层可以承载品牌，传递情感，加深用户对App的印象，让用户轻松愉快。在研发层面，同一组件可以在多个场景中直接复用，降低研发成本。

　　

　　动效

　　3.3.3颜色

　　颜色可以起到传递品牌信息的作用，区分信息的从属关系，标明控件的选中状态以及内容信息的分层显示等功能。重要的信息需要在页面上突出显示。系统级颜色体系主要定义*敏*感*词*，而RD同学只能从代码组件库中选择颜色，以确保颜色值的准确性，便于主题定制。

　　

　　定义颜色使用场景

　　3.3.4字体

　　字体是体系化界面设计中最基本的组成部分之一。用户可以通过文字理解内容，完成工作。科学的字体系统将大大提高用户的阅读体验和工作效率。设计师在字体设计过程中需要注意很多方面，如字体family、字距、行高、段落等。如何让文字看起来更自然，是设计师团队一直在寻找的答案。根据文字的层级关系，UI同学定义了Headline、Subtitle、Body、Button以及Caption的使用规范，并根据文本在设计稿中的位置确定了文本的具体样式。

　　

　　定义字体使用规范

　　4. 工具链建设

　　为了保持UI的一致性，规则就不能被打破。交付UI一致性套件由四部分组成:积木工具链、代码组件库、定制化设计云协作平台和官网。通过将这四个部分连接起来，形成一个闭环，将整个工作流程限制在标准操作范围内。

　　4.1积木Sketch插件

　　这里只是简要概述积木sketch插件在一致性项目中的角色。从设计阶段选择的颜色,字体的规范,控件的样式,到RD开发阶段代码的实现统一管理,制定API,多端的实现方式必须遵守一套规则,通过积木sketch插件落地设计规范,可以确保设计元素都是从既定的设计标准中获得，设计语言输出符合业务的设计稿，而每个平台的UI代码库中也都有对应实现，使积木插件成为UI一致性的抓手。

　　

　　积木sketch模块草图插件平台图

　　4.1.1插件功能

　　经过一段时间的建设，积木Sketch插件已经具备Iconfont、标准调色板、组件库、数据填充、文本模板等功能。Iconfont允许你从公司图标库中提取设计团队上传的SVG图标，并直接应用于设计稿。标准调色板可以限制设计师使用的颜色范围，以确保设计稿中的颜色符合设计规范;组件库包含从外卖业务中抽离的基本控件和通用组件，它们是可复用的和标准化的，并对应不同开发语言的组件库中的代码。数据填充库使设计师能够使用真实的数据填充设计稿，更接近于在线环境。文字模板内置了字体样式的使用规范。根据文字在设计稿中的位置，单击文字图层直接应用它。

　　积木Sketch插件功能演示

　　4.1.2物料市场

　　通过Sketch管理后台，设计师可以将配色规范、文字规范、话术、Iconfont和组件库上传到云端，与整个设计团队成员共享，实现设计资产的版本管理。通过将Sketch Library存储在后台物料市场，设计师可以与他们的团队成员共享组件。Library可以做到“一处更改，处处生效”，即使与远程组件关联的设计稿历史库检测到一个更新，也会收到Sketch通知。确保工作中使用的是最新的组件。

　　

　　积木sketch物料管理后台

　　4.2代码模型建设

　　为了满足中小企业的需求，越来越多的开源组件库应运而生，但是开源代表着“通用”，不能满足业务特点的需求，所以很多企业也开始制作自己的组件库。通过建立代码组件库，可以帮助开发者快速构建App页面，降低设计开发的沟通成本，统一体验规范。

　　

　　代码组件库模型

　　4.2.1代码库功能

　　提高项目的可维护性

　　因为组件库中的组件只有单一的职责，降低了系统的耦合度，开发人员可以很容易地理解该组件所提供的功能。组件可以自由替换和组合成高阶组件，在组件更新过程中只需要进行一次更改。每个项目成员都维护一定数量的组件，以最大化团队的开发效率。

　　实现文档化

　　组件接口的统一规范降低了新手入门的难度。新成员只需要了解开发组件代码的接口和职责。由于代码的影响范围仅限于内部组件，对项目风险控制也很有帮助。通过组件统一管理，实现代码积累和有效复用，全面提高新业务需求开发效率。

　　便于单元测试

　　因为组件职责单一并且清晰，只向外界暴露接口，概念上可以把组件当成一个函数，输入与输出对应，使自动化测试更加容易。

　　实现无障碍等定制化功能

　　无障碍功能可以改善残疾人的用户体验。组件库中的组件资源是高度内聚的，完全由自身控制加载，对全局或其他组件没有影响。组件的加载和渲染路径清晰可控。方便定制组件功能，实现无障碍功能。

　　4.2.2方案设计

　　统一配置文件

　　外卖业务入口包括外卖独立App、美团外卖频道、大众点评外卖频道等。外卖组件需要适应主机App在不同移动终端上的UI风格和交互体验，这就需要组件库支持主题配置功能。因为主题涵盖多个Android/iOS/MRN终端，所以需要一组通用的主题配置文件。经过开发人员和设计人员几轮的讨论，最终确定了主题描述文件的格式，包括主题颜色、文字外观和组件风格等。您可以交付一个配置文件来全局替换主题。

　　{

　　// 主题颜色 "rooBrandColors": { "rooBrandPrimary": "#FFCC33"

　　},

　　// 文本外观 "rooTextAppearance": { "rooTextAppearanceHeadline1": { "fontFamily": "sans-serif-medium", // 字体 "textStyle": "normal", // 风格（normal/bold/italic） "textSize": 44, // 字号

　　}

　　},

　　// 组件风格 "rooStyle":{ "rooButtonStyle": { "textAppearance": "?attr/rooTextAppearanceButton", "backgroundColor": "?attr/rooBrandPrimary", "cornerRadius": 0,

　　}

　　}

　　搭建全平台组件库

　　目前市场上知名的组件库有阿里的Antd Design、Fusion Design、美团的Roo Design等，基本上都是用于Web开发的组件库。通过这些组件库，可以快速构建一些中后台系统。为什么没有一个知名的Native开源组件库?因为每个应用的主题、风格和交互体验都是不同的，而这些差异恰恰是传达品牌主张和设计理念的灵魂，所以有必要结合业务，开发Android、iOS和MRN的组件库。通过构建一个全平台的代码组件库，可以保证相同的UI组件在所有终端都能一致执行，并且可以减少UI升级过程中出现错误或遗漏的风险。此外，可以降低测试压力，提高需求的吞吐率。

　　4.2.3应用示例

　　我们开发了一个针对Android/iOS/MRN三端代码的示例项目。通过示例项目，UI同学不仅可以完成组件验收，还可以帮助开发人员快速查阅所有可以应用的组件，了解如何使用，并进行代码调试。

　　

　　组件库demo示例

　　4.3官网门户建设

　　官方网站相当于项目的门面。只有好的门面才能吸引更多的用户，更好的推广项目。官网作为设计师和开发者之间的沟通媒介，官方网站需要由两者共同维护。官方网站可以帮助团队中的设计师沉淀设计风格，建立统一的UI设计规范，帮助RD同学管理和查阅组件文档。

　　4.3.1官方网站功能

　　目前的官方网站主要由设计语言、组件库、插图库和资源下载四部分组成，分别服务于UI和RD同学。

　　

　　外卖平台化官网导航栏

　　设计语言

　　UI一致性项目采用了“原子理论”的原理，即从最小的元素开始，按照规则将这些元素组装起来，将它们拼接成组件，然后再将它们拼接成最终的页面。这是一个点到面的过程。设计语言这一章主要服务于UI/UE同学。本章通过视觉、设计模式、动效三个分章，让读者快速了解项目的设计规范，快速上手。

　　组件库

　　组件库是设计模式中各种元素的具体实现，本页面描述如何使用组件。

　　插画库

　　插画库介绍了插画场景的使用、插画绘制规范和插画案例。

　　资源下载

　　提供积木工具链产品下载功能。

　　

　　外卖平台化官网

　　4.3.2方案设计

　　由于官网主要是基于纯图文展示，迭代频率快，所以我们选择了目前比较常见的文档-网站生成系统，也就是说，我们只需要将写好的Markdown文档按照一定的规范放到相应的目录中，前端会自动解析生成导航，支持多语言、图片、文件、视频等素材。这样大大缩短了官网的开发周期，即使是没有前端经验的同学也可以快速上手。

　　为了方便UI同学对官网文档进行修改，我们构建了一个基于文档网站生成系统的在线编辑平台。通过这个平台，相关人员可以直接进行在线编辑和发布，节省了UI同学和RD同学之间的交流成本和发布成本。在填写过程中，使用者可以实时预览已编辑的内容，只需点击即可保存修改就可以更新到网站中。

　　官方网站支持平台化功能，不同的业务方可以创建自己的文档站点。一个好的文档站点对于设计组方案的推广和外部接入都有很大的好处。

　　

　　外卖平台化官网录入后台

　　4.4刀链闭环

　　当我们满怀信心地将我们的UI一致性解决方案推广到日常开发中时，我们经常听到，除了对生产力的赞扬之外，我们的开发伙伴对这个项目的吐槽也常常传入我们的耳边:“我怎么知道设计稿的哪个组件已经开发完成了?”、“查询这个组件的使用方法很麻烦，每次都要去官网查询”、“标准颜色和图标名称是什么?”我怎么引用它呢?“我们无法限制别人的选择，所以只能让系统更好，如果不去优化整个流程，把它串联起来形成一个闭环，后面整个项目很可能会慢慢崩溃，所以我们重新安排了项目复盘，大家集思广益，最后发现工具链系统打通的解决方案:设计稿作为RD和UI之间的纽带，可以把官方网站和代码库打通。

　　我们与美团内部的印记团队合作开发，设计并定制了一个云协作平台，在设计稿中为RD指明了代码中组件库中已经存在的元素，避免了重复开发，同时将组件的使用与网站相关联说明，RD同学在开发过程中遇到组件使用问题时无需检索，点击即可跳转到使用文档。之后，我们还将颜色、iconfont和插画库中图片也关联起来，真正实现了一致性元素的全覆盖。

　　

　　与印迹合作支持组件展示的云协作平台

　　如你所见，构建UI一致性可以帮助设计团队提高设计效率，沉淀设计语言，并减少走查的负担。研发同学在面对新项目时，可以专注于业务需求，而不是花时间写组件;减少QA工作量，确保质量控制，无需频繁回滚测试;帮助PM提高版本迭代效率和版本需求吞吐量，提供快速的业务扩展能力。当然，我们除了希望生产出一流的产品外，也希望能让大家在忙碌的工作中喘口气。我们将以设计语言和工具链建设为抓手，持续构建UI一致性，不断提升移动终端UI业务中台能力。