外賣UI一致性項(xiàng)目是外賣UI設(shè)計(jì)團(tuán)隊(duì)與研發(fā)團(tuán)隊(duì)共建的項(xiàng)目，目的是改善用戶端體驗(yàn)的一致性，提升多技術(shù)方案間組件的通用性和復(fù)用率，降低整體視覺改版帶來的研發(fā)成本。外賣技術(shù)團(tuán)隊(duì)通過在實(shí)踐中不斷總結(jié)經(jīng)驗(yàn)，開發(fā)了一套完整的UI一致性解決方案，目前已經(jīng)取得了一些成果，本文系實(shí)踐經(jīng)驗(yàn)分享。

1. 背景

1.1 行業(yè)現(xiàn)狀與問題

很多技術(shù)同學(xué)都知道，移動端往往比較側(cè)重業(yè)務(wù)開發(fā)，這會導(dǎo)致人員規(guī)模不斷擴(kuò)大，項(xiàng)目復(fù)雜度也會持續(xù)增長。而為了滿足業(yè)務(wù)的快速上線，很難去落實(shí)統(tǒng)一的設(shè)計(jì)規(guī)范，在開發(fā)過程中由于UI缺乏標(biāo)準(zhǔn)導(dǎo)致的問題不斷凸顯，具體體現(xiàn)在以下4個層面：

設(shè)計(jì)層面：由于UI缺乏標(biāo)準(zhǔn)化設(shè)計(jì)規(guī)范，在不同App及不同開發(fā)語言平臺上設(shè)計(jì)風(fēng)格不統(tǒng)一，用戶體驗(yàn)不一致；設(shè)計(jì)資源與代碼均缺乏統(tǒng)一管理手段，無法實(shí)現(xiàn)積累沉淀，無法適應(yīng)新業(yè)務(wù)的開發(fā)需求。
開發(fā)層面：組件代碼實(shí)現(xiàn)碎片化，存在多次開發(fā)的情況，質(zhì)量難以保證；各端代碼API不統(tǒng)一，維護(hù)拓展成本較高，變更主題、適配Dark Mode等需求難以實(shí)現(xiàn)。
測試層面：重復(fù)走查，頻繁回歸，每次發(fā)版均需驗(yàn)證組件質(zhì)量。
產(chǎn)品層面：版本迭代效率低，版本需求吞吐量低，不具備業(yè)務(wù)的快速拓展能力。

1.2 外賣移動端UI一致性情況

近來年，美團(tuán)外賣業(yè)務(wù)開始由發(fā)展期走入成熟期，這更要求對細(xì)分場景的快速迭代。目前，外賣平臺承載了餐飲、商超、閃購、跑腿、藥品等多個業(yè)務(wù)品類，用戶入口則覆蓋了美團(tuán)App外賣頻道、外賣App、大眾點(diǎn)評外賣頻道等多個獨(dú)立應(yīng)用。由于前期側(cè)重需求的快速上線，設(shè)計(jì)層面缺乏標(biāo)準(zhǔn)化的規(guī)范約束，UI設(shè)計(jì)風(fēng)格不統(tǒng)一，也存在多次開發(fā)的情況，目前的維護(hù)成本較高，在開發(fā)過程中逐漸暴露出一些問題，主要體現(xiàn)在以下三個層面。

指標(biāo)一：移動端UI問題統(tǒng)計(jì)

在Ones（美團(tuán)內(nèi)部研發(fā)需求管理工具）中，單個版本的UI適配問題占比超過總Bug數(shù)的11.82%，亟待優(yōu)化；交互適配問題在絕大多數(shù)版本中均有出現(xiàn)，一定程度上反映了其發(fā)生的普遍性。

指標(biāo)二：需求承接率數(shù)據(jù)統(tǒng)計(jì)

用戶側(cè)UI需求吞吐率達(dá)18.3%，目前用戶側(cè)UI需求吞吐率較低，亟待解決。

指標(biāo)三：需求入版情況統(tǒng)計(jì)

目前各版本UI同學(xué)都會提出一定數(shù)量的視覺優(yōu)化需求，但實(shí)際入版量僅為三分之一左右，未上線的原因均為RD開發(fā)時間不足。

從長遠(yuǎn)角度來看，隨著固有業(yè)務(wù)滲透率的不斷飽和，未來一段時間內(nèi)，美團(tuán)外賣還有開拓新業(yè)務(wù)、進(jìn)入新市場的需求，如國際化App、閃購App等，需要移動端能夠高效地組建新業(yè)務(wù)App。在此背景下，移動端具備快速調(diào)整適應(yīng)的UI展現(xiàn)能力是重中之重。為了達(dá)到上述目標(biāo)，需要PM/UI/RD共同維護(hù)一套設(shè)計(jì)規(guī)范，在產(chǎn)品上統(tǒng)一風(fēng)格，在源頭上做到統(tǒng)一設(shè)計(jì)，并在代碼中統(tǒng)一進(jìn)行實(shí)現(xiàn)。

1.3 UI一致性項(xiàng)目

基于上述開發(fā)工作中的切實(shí)痛點(diǎn)，以及未來可預(yù)見的移動端能力需求，迫切需要一套統(tǒng)一的UI設(shè)計(jì)規(guī)范，以此沉淀設(shè)計(jì)風(fēng)格，建立統(tǒng)一的UI設(shè)計(jì)標(biāo)準(zhǔn)。

UI一致性項(xiàng)目自2019年5月份被提出，是外賣UI設(shè)計(jì)團(tuán)隊(duì)與研發(fā)團(tuán)隊(duì)的共建項(xiàng)目，該項(xiàng)目是為了改善用戶端體驗(yàn)一致性，提升多技術(shù)方案間組件的通用性和復(fù)用率，降低整體視覺改版的研發(fā)成本。通過抽離成熟的業(yè)務(wù)場景，建立可提供高質(zhì)量、可擴(kuò)展、可統(tǒng)一配置的基于Android/IOS/MRN的組件代碼庫，使之具備支持多業(yè)務(wù)高層次的代碼復(fù)用能力，進(jìn)而提高UI業(yè)務(wù)中臺能力，使項(xiàng)目保持高度一致性。

為了幫助團(tuán)隊(duì)提升產(chǎn)研效率，外賣技術(shù)成立了袋鼠UI共建項(xiàng)目組，將門戶建設(shè)、工具鏈建設(shè)以及組件建設(shè)統(tǒng)一管理統(tǒng)一規(guī)劃，并將工具鏈的品牌確定為“積木”，此前我們已經(jīng)寫過兩篇文章《積木Sketch Plugin：設(shè)計(jì)同學(xué)的貼心搭檔》、《積木Sketch插件進(jìn)階開發(fā)指南》介紹過積木相關(guān)的內(nèi)容，本文主要介紹UI一致性。

UI一致性是絕大部分研發(fā)團(tuán)隊(duì)面臨的共性問題，大家對落地設(shè)計(jì)規(guī)范，提高UI中臺能力，提升產(chǎn)研效率具有強(qiáng)烈的訴求。通過UI一致性的建設(shè)，不僅可以在品牌上實(shí)現(xiàn)體驗(yàn)升級，更可以全面提高產(chǎn)研效率，為業(yè)務(wù)的快速迭代提供有力支持和有效保障。

統(tǒng)一的品牌符號、品牌特征，有助于加深產(chǎn)品在用戶心目中的印象。統(tǒng)一的用戶界面和交互形式，能幫助用戶加深對產(chǎn)品的熟悉感和信任感。而一個好的設(shè)計(jì)語言可以在體驗(yàn)上為產(chǎn)品加分，也能夠更好的創(chuàng)造一致性體驗(yàn)。

2. UI一致性整體方案

為了幫助更多的業(yè)務(wù)部門定制符合一致性原則的專屬設(shè)計(jì)風(fēng)格，外賣技術(shù)部在實(shí)踐中不斷總結(jié)經(jīng)驗(yàn)，開發(fā)了一套通用的UI一致性解決方案。該方案通過UI一致性工具鏈落地項(xiàng)目建設(shè)，并打造一整套的閉環(huán)UI開發(fā)流程，目前已經(jīng)取得了一定的成果，以下系具體方案的介紹。

2.1 方案全景

外賣UI一致性套件由積木工具鏈、代碼組件庫、定制化設(shè)計(jì)云協(xié)作平臺以及文檔化說明（官網(wǎng)）四部分組成。

積木工具鏈：通過建立包含相同設(shè)計(jì)元素的統(tǒng)一物料市場，PM通過Axure插件拾取物料市場中的組件產(chǎn)出原型稿；UI/UE通過Sketch插件落地物料市場中的設(shè)計(jì)規(guī)范，產(chǎn)出符合要求的設(shè)計(jì)稿。未來，希望通過高保真原型輸出，可以給中后臺項(xiàng)目、非依賴體驗(yàn)項(xiàng)目提供更好的服務(wù)體驗(yàn)，賦予產(chǎn)品同學(xué)直接向技術(shù)側(cè)輸出原型稿的能力。
代碼組件庫（Android、iOS、MRN）：設(shè)計(jì)稿中的組件與RD代碼倉庫中組件一一對應(yīng)。
文檔化說明：官網(wǎng)詳細(xì)描述了代碼組件庫的集成方式、組件的使用方法，降低開發(fā)上手難度，只需要理解接口和職責(zé)即可進(jìn)行業(yè)務(wù)開發(fā)。
定制化設(shè)計(jì)云協(xié)作平臺：與美團(tuán)內(nèi)部的印跡團(tuán)隊(duì)（云協(xié)作平臺）合作開發(fā)，在RD的設(shè)計(jì)稿中標(biāo)注了哪些是代碼組件庫中已有的元素，避免重復(fù)開發(fā)，同時關(guān)聯(lián)了官網(wǎng)中該組件的使用說明，是代碼組件庫與官網(wǎng)的紐帶。

外賣UI一致性解決方案

2.2 接入指南

設(shè)計(jì)師逐步將設(shè)計(jì)語言沉淀為設(shè)計(jì)規(guī)范（包括組件、顏色、字體、圖片等）上傳至官網(wǎng)供整個設(shè)計(jì)團(tuán)隊(duì)查閱，同時將其量化并內(nèi)置于積木Sketch插件中；開發(fā)同學(xué)則將其代碼化，針對Android/iOS/MRN三端進(jìn)行組件庫開發(fā)。
設(shè)計(jì)師使用積木Sketch插件繪制設(shè)計(jì)稿，可以保證設(shè)計(jì)元素均從既定的設(shè)計(jì)標(biāo)準(zhǔn)中獲取，產(chǎn)出符合業(yè)務(wù)設(shè)計(jì)規(guī)范的設(shè)計(jì)稿，而代碼組件庫中也有對應(yīng)的實(shí)現(xiàn)。
繪制完成的設(shè)計(jì)稿上傳至印跡云協(xié)作平臺，交付開發(fā)同學(xué)進(jìn)行設(shè)計(jì)稿還原。
開發(fā)同學(xué)拿到設(shè)計(jì)稿后，就可以知道本次需求哪些組件已內(nèi)置于代碼組件庫中，并可以點(diǎn)擊設(shè)計(jì)稿中的鏈接，直接查看組件的使用說明。

UI一致性協(xié)作流程閉環(huán)

2.3 方案落地

雖然UI一致性在落地上會增加開發(fā)同學(xué)不少的工作量，推進(jìn)一致性建設(shè)也是一個艱難的工作，由于成本較高，且無法量化評估收益，很多團(tuán)隊(duì)最終未達(dá)到預(yù)期效果，但一旦有效運(yùn)作起來后，團(tuán)隊(duì)將獲得豐厚的回報(bào)。UI一致性的建設(shè)需要設(shè)計(jì)者對現(xiàn)有狀態(tài)有足夠的認(rèn)識，對業(yè)務(wù)有充分理解，以及優(yōu)秀的設(shè)計(jì)能力，同時還要不斷地進(jìn)行實(shí)踐和優(yōu)化。為了保證一致性項(xiàng)目的成功落地，避免“半途而廢”，我們制定了一系列的推進(jìn)措施：

項(xiàng)目小組不能脫離日常需求開發(fā)工作。這樣可以保證設(shè)計(jì)師所沉淀的設(shè)計(jì)元素始終來自于最新的業(yè)務(wù)場景，同時項(xiàng)目產(chǎn)出可以快速應(yīng)用到最新的版本中得以驗(yàn)證。
優(yōu)先選擇受視覺因素影響較大、投入產(chǎn)出比高的模塊場景進(jìn)行改造，化繁為簡，確定最小驗(yàn)證閉環(huán) （MVP，Minimum Viable Product），在實(shí)踐中不斷優(yōu)化，進(jìn)而跑通整個流程。
項(xiàng)目推進(jìn)由UI同學(xué)按版本提出需求，移動端排期并落地實(shí)施，由UI統(tǒng)一驗(yàn)收。
建立階段性目標(biāo)，并完成最近三期工作的具體規(guī)劃，定期復(fù)盤完成情況，保證項(xiàng)目的持續(xù)推進(jìn)。

2.4 一致性成果

經(jīng)過一段時間的UI一致性建設(shè)，在資源一致性方面，外賣App團(tuán)隊(duì)已經(jīng)完成了近百個Iconfont的替換工作，有效減小了安裝包的體積。在組件代碼庫建設(shè)方面，完成組件替換三十多處，中等業(yè)務(wù)需求平均節(jié)約3pd人力；在工具鏈方面，根據(jù)UI/UE提供的數(shù)據(jù)，對于強(qiáng)依賴設(shè)計(jì)資源的需求，在使用積木Sketch插件后，提效能夠達(dá)到30%以上，對于UI資源依賴不強(qiáng)的流程需求，平均提效可以達(dá)到50%以上。

3. 設(shè)計(jì)體系建設(shè)

細(xì)化來看，UI一致性整體方案主要分為兩個部分，一個是設(shè)計(jì)體系建設(shè)，另一個則是工具鏈建設(shè)。設(shè)計(jì)體系建設(shè)是基礎(chǔ)，主要是設(shè)計(jì)師沉淀設(shè)計(jì)風(fēng)格，建立統(tǒng)一的UI設(shè)計(jì)標(biāo)準(zhǔn)的工作，而工具鏈建設(shè)則是支撐，是開發(fā)人員通過開發(fā)一系列的工具將開發(fā)過程閉環(huán)，實(shí)現(xiàn)設(shè)計(jì)體系落地。

3.1 外賣DPL

DPL（Design Pattern Library）是一份面向UED設(shè)計(jì)人員的文檔化說明，描述了設(shè)計(jì)模式庫的規(guī)范以及應(yīng)用場景等，外賣DPL主要包括組件搭建規(guī)范以及資源一致性兩部分。DPL的背面是技術(shù)實(shí)現(xiàn)，一般體現(xiàn)在Android/iOS/RN代碼框架中，比如阿里的FusionDesign庫、騰訊的QMUI庫等，這些封裝好的代碼組件面向程序開發(fā)人員。在未建立DPL模型之前，開發(fā)同學(xué)拿到設(shè)計(jì)稿進(jìn)行視覺還原后，需要修改多次，才能最終通過設(shè)計(jì)師的驗(yàn)證，極大影響了開發(fā)效率，還降低了需求吞吐率。

未建立外賣DPL模型之前開發(fā)流程

而通過DPL實(shí)現(xiàn)設(shè)計(jì)-開發(fā)流程的閉環(huán)，UI同學(xué)由于設(shè)計(jì)規(guī)范的標(biāo)準(zhǔn)化，可使出稿效率、走查效率顯著提升，重復(fù)組件甚至無需走查；對于RD同學(xué)來說，組件庫中的組件在配置正確的情況下，由于已經(jīng)經(jīng)過了歷史版本的檢驗(yàn)，適配問題出現(xiàn)較少，無需重復(fù)進(jìn)行視覺的修正；對于設(shè)計(jì)團(tuán)隊(duì)來說，優(yōu)秀的設(shè)計(jì)體系具有包容性且充滿生命力，好的設(shè)計(jì)模式庫能夠幫助實(shí)現(xiàn)規(guī)范化，從而減輕界面開發(fā)的工作量，提高一致性；而對于設(shè)計(jì)師來說，建立DPL有助于減少誤用、濫用以及無效的創(chuàng)新。

3.2 組件搭建

在長期的版本迭代中，隨著功能的不斷增加以及UI的持續(xù)改版，新舊樣式混雜，維護(hù)極為困難。設(shè)計(jì)師通過將頁面走查結(jié)果歸納梳理，制定設(shè)計(jì)規(guī)范，從而選取復(fù)用性高的組件進(jìn)行組件庫搭建。通過搭建組件庫可以進(jìn)行規(guī)范控制，避免控件的隨意組合，減少頁面之間的差異；組件庫中組件滿足業(yè)務(wù)特色，同時可以應(yīng)對不斷變化的環(huán)境，具有云端動態(tài)調(diào)整能力，可以在規(guī)范更新時進(jìn)行統(tǒng)一調(diào)整。

在不影響需求實(shí)現(xiàn)以及設(shè)計(jì)效果的前提下，只有在方案設(shè)計(jì)中盡可能使用組件，提升組件設(shè)計(jì)稿中的覆蓋度，才可能真正通過組件庫來提效。而除了在新的需求中使用組件，還需要將已有頁面內(nèi)容盡量替換成組件，才能避免頁面升級時的重復(fù)修改問題，真正提高產(chǎn)研效率。在進(jìn)行組件庫建設(shè)時要注意以下幾點(diǎn)。

選擇合適粒度

組件的粒度選擇曾是困擾我們很久的一個問題，雖然有構(gòu)建設(shè)計(jì)系統(tǒng)的核心理論——原子設(shè)計(jì)理論為指導(dǎo)，即按照“原子、分子、組織、模板、頁面”五個層面進(jìn)行頁面設(shè)計(jì)。這一理論對于從零開發(fā)新應(yīng)用沒有任何問題，但進(jìn)行一致性改造的App，往往已經(jīng)暴露出很多設(shè)計(jì)問題，已經(jīng)存在數(shù)百個成熟的線上頁面，改造存在非常大的困難，必須根據(jù)具體業(yè)務(wù)選擇合適粒度。在進(jìn)行組件制作前，項(xiàng)目同學(xué)對外賣的近百個頁面進(jìn)行了梳理，對使用到的組件進(jìn)行了分類，并根據(jù)組件的使用頻率進(jìn)行排序，制定了逐步替換計(jì)劃。從而避免了組件庫做的很全、花費(fèi)了很多的人力，但實(shí)際很多組件都用不上，或者開發(fā)的組件過少，覆蓋場景不足等問題。

我們將走查結(jié)果與設(shè)計(jì)師反復(fù)交流，發(fā)現(xiàn)復(fù)用性較高的組件大體可以分為兩類：第一類“基礎(chǔ)控件”，也就是類似于標(biāo)簽、按鈕、開關(guān)等具備基礎(chǔ)功能的元素，對應(yīng)原子理論中的原子；第二類“業(yè)務(wù)組件”，類似于商品卡片等，是由“基礎(chǔ)控件”組成（比如商品卡片由“標(biāo)簽控件”與“圖片控件”組成），同時“業(yè)務(wù)組件”還能相互組合，成為更高階的“復(fù)雜組件”，類似于原子理論中的分子。“業(yè)務(wù)組件”的組合又是千變?nèi)f化的，不同樣式的業(yè)務(wù)組件可以組成類似“商家列表”、“菜品列表”等“模板”，而“模板”與“基本控件”組合在一起，就成為了“頁面”。

外賣DPL模型建立

具備拓展性

組件必須具備一定的可配置屬性才能提升適用場景。可配置屬性體現(xiàn)在三個方面：組件支持局部元素展示隱藏，例如商品卡片的標(biāo)題、說明、價格可根據(jù)接口數(shù)據(jù)控制展示邏輯；組件支持多種樣式，例如商品卡片的左圖右文排列、上圖下文排列；組件支持業(yè)務(wù)方配置主題，如調(diào)整高亮色、調(diào)整對齊方式等。

組件應(yīng)具有拓展性

支持統(tǒng)一管理

組件管理功能對外賣UI一致性起著至關(guān)重要的作用，這主要體現(xiàn)在兩方面：首先是設(shè)計(jì)風(fēng)格沉淀，目前袋鼠UI已經(jīng)形成了自己的獨(dú)特風(fēng)格，外賣設(shè)計(jì)團(tuán)隊(duì)根據(jù)設(shè)計(jì)規(guī)范，對符合UI一致性外賣業(yè)務(wù)場景的組件不斷進(jìn)行抽象及建設(shè)，沉淀出越來越多的通用業(yè)務(wù)組件，這些組件需要及時擴(kuò)充到Library中，供團(tuán)隊(duì)成員使用；另外一個作用則是保持團(tuán)隊(duì)使用的均為最新組件。由于各種原因，組件的設(shè)計(jì)元素（色彩、字體、圓角等屬性）可能會發(fā)生變更，需要及時提醒團(tuán)隊(duì)成員更新組件，從而保持所有頁面的一致性。

3.3 資源一致性

UI設(shè)計(jì)語言與自身業(yè)務(wù)關(guān)聯(lián)性很強(qiáng)，美團(tuán)很多業(yè)務(wù)包括外賣、酒旅、團(tuán)購等都有一套自己的設(shè)計(jì)系統(tǒng)。“通用”意味著無法滿足具有業(yè)務(wù)特色的需求，不同業(yè)務(wù)的組件、色彩系統(tǒng)、動效、字體樣式等千差萬別，其中任意一環(huán)的缺失都會導(dǎo)致一致性被破壞。

設(shè)計(jì)語言并不是一個抽象的概念，大家提到美團(tuán)就想起美團(tuán)黃，想到袋鼠，想到菜品卡片列表，想到騎著摩托車穿著印有“美團(tuán)外賣”衣服的騎手，通過設(shè)計(jì)語言可以傳達(dá)品牌主張和設(shè)計(jì)理念。目前，袋鼠UI已經(jīng)形成了一套屬于自己的獨(dú)特風(fēng)格，對于一致性元素處理有了一套自己的標(biāo)準(zhǔn)，對于產(chǎn)品的設(shè)計(jì)者而言，必須將這種風(fēng)格化延續(xù)，才能使我們整個項(xiàng)目具備高度的一致性，才能保持“袋鼠特色“，保證吸引力。

3.3.1 圖片

建立插畫庫

插圖作為一種視覺語言，是品牌識別度的關(guān)鍵核心元素，與單純的文案信息不同，圖形化在直觀描述固有信息的同時，也在塑造情感背景，使用戶更具沉浸感和共情性。插畫在提升產(chǎn)品用戶體驗(yàn)的同時完成商業(yè)目標(biāo)，在表達(dá)效果及生產(chǎn)效率上有獨(dú)特的優(yōu)勢，在追求效率的互聯(lián)網(wǎng)產(chǎn)品中被大量地運(yùn)用。

由于之前產(chǎn)品中的插圖未經(jīng)系統(tǒng)整合，而插畫師的個人風(fēng)格明顯，不同的設(shè)計(jì)師在圖形化的工作協(xié)同中，風(fēng)格很難復(fù)現(xiàn)，而單純由一名設(shè)計(jì)師去完成整體業(yè)務(wù)的插畫建設(shè)工作也存在一定風(fēng)險(xiǎn)。不同設(shè)計(jì)師之前畫過的元素?zé)o法互通，造成很多元素重復(fù)設(shè)計(jì)、風(fēng)格不統(tǒng)一，缺乏系統(tǒng)性地創(chuàng)作和整理，無法最大化地提升生產(chǎn)效率，并且影響產(chǎn)品的品質(zhì)感。所以插圖體系在保持品牌一致性、提升工作效率以及規(guī)避風(fēng)險(xiǎn)上尤為重要。

插畫規(guī)范示例

使用Iconfont

Iconfont可譯為圖標(biāo)字體，顧名思義就是用字體文件取代圖片文件來展示圖標(biāo)、特殊字體等元素的一種方法。簡單來說，Iconfont就是把多個圖標(biāo)文件打包為ttf字體文件，注冊到系統(tǒng)中，App可以像使用字體一樣使用圖標(biāo)。其原理可以簡單理解為通過ttf字體文件維護(hù)一個Unicode碼與圖形的映射關(guān)系。當(dāng)使用Iconfont為項(xiàng)目助力的時候，配置多個圖標(biāo)不再需要去下載數(shù)個PNG文件，僅需要維護(hù)一套ttf字體文件即可。

Iconfont不僅具有矢量性、可自由變化大小的特點(diǎn)，而且支持任意改變顏色。從項(xiàng)目角度來看，由于無需針對不同手機(jī)分辨率內(nèi)置多張圖片，可以一定程度減小包體積，而且方便UI同學(xué)對圖標(biāo)進(jìn)行統(tǒng)一管理，為無用icon和相似icon檢測做基礎(chǔ)。

使用iconfont替換項(xiàng)目中的圖片

歸檔圖片文件

當(dāng)App發(fā)展到一定階段，必然面臨著包體積會越來越大，無用圖片與相似圖片也會越來越多的問題。同時，由于開拓新業(yè)務(wù)而不斷涌現(xiàn)的新場景，又不可避免地新增大量的圖片。總結(jié)來看，圖片文件在一致性項(xiàng)目中需要解決兩個問題，即存量圖片的處理以及新增圖片的管理。

對于存量圖片，必須判斷其合理性，項(xiàng)目中存在大量相似圖片，這些圖片可能僅是padding不同，或者顏色尺寸存在微小差異，可以通過腳本掃描相似圖片，根據(jù)圖片的特征Hash判斷圖片的相似度，相似度高的圖片根據(jù)UI建議，保留一張即可。那如何防止新增圖片“重蹈覆轍”呢？通過建立圖片管理后臺，將圖片按場景分類，標(biāo)準(zhǔn)圖片需從組件代碼庫中選取，新增圖片執(zhí)行PR策略，需相關(guān)負(fù)責(zé)人審核，可有效防止相似圖片的堆積問題。

一致性項(xiàng)目實(shí)施前項(xiàng)目中的相似圖片

3.3.2 動效

動效是指那些那些能夠?yàn)楫a(chǎn)品賦予生機(jī)的動態(tài)界面元素及視覺效果，這些交互效果通常與特定的響應(yīng)行為相關(guān)，甚至包括那些與交互行為沒有直接關(guān)聯(lián)的臨時狀態(tài)。精細(xì)而恰當(dāng)?shù)膭赢嬓Ч梢詡鬟_(dá)狀態(tài)，增強(qiáng)用戶對于直接操縱的感知，通過視覺化的方式向用戶呈現(xiàn)操作結(jié)果。

隨著外賣業(yè)務(wù)的不斷增加，動效的使用比重在不斷增加，重要性日漸凸顯，也是增強(qiáng)用戶體驗(yàn)與競品拉開差距的重要因素，因此，統(tǒng)一規(guī)范的使用動效尤為重要。通過動效庫建設(shè)，UI層面可以承載品牌、傳遞情感，加深用戶對App的印象，讓用戶放松、愉悅；RD層面同一組件可在多場景直接復(fù)用，還降低了研發(fā)成本。

動效

3.3.3 顏色

顏色可以起到傳遞品牌信息、區(qū)分信息的所屬關(guān)系、標(biāo)明控件的選中狀態(tài)以及對內(nèi)容的信息進(jìn)行分層級展示等功能。重要的信息需要在頁面中被突出展示。系統(tǒng)級色彩體系主要定義了外賣的主要顏色、文字顏色、輔助顏色以及標(biāo)準(zhǔn)漸變色，顏色在一定時期內(nèi)不再支持新增。通過將標(biāo)準(zhǔn)色板內(nèi)置于積木Sketch插件中，限制UI繪制設(shè)計(jì)稿時的使用范圍，而RD同學(xué)僅可通過代碼組件庫中選取顏色，保證色值的準(zhǔn)確性，也便于進(jìn)行主題定制。

定義顏色使用場景

3.3.4 字體

字體是體系化界面設(shè)計(jì)中最基本的構(gòu)成之一。用戶通過文本來理解內(nèi)容和完成工作，科學(xué)的字體系統(tǒng)將大大提升用戶的閱讀體驗(yàn)及工作效率。設(shè)計(jì)師在字體設(shè)計(jì)過程中需要關(guān)注非常多的方面，比如字體family、字距、行高、段落等等。如何讓文字看起來更自然，是設(shè)計(jì)師團(tuán)隊(duì)一直探尋的答案，UI同學(xué)根據(jù)文字的層級關(guān)系，規(guī)定了Headline、Subtitle、Body、Button以及Caption的文字使用規(guī)范，根據(jù)設(shè)計(jì)稿中文字的位置，就可確定文字的具體樣式。

定義字體使用規(guī)范

4. 工具鏈建設(shè)

要想保持UI一致性，就不能打破規(guī)則。外賣UI一致性套件由積木工具鏈、代碼組件庫、定制化設(shè)計(jì)云協(xié)作平臺以及官網(wǎng)四部分組成，通過將這四部分連接起來，形成一個閉環(huán)，把整個工作流限制在標(biāo)準(zhǔn)操作以內(nèi)。

4.1 積木Sketch插件

在之前的文章中，我們已經(jīng)對積木插件進(jìn)行了詳細(xì)介紹，這里只作簡要概述，介紹其在一致性項(xiàng)目中發(fā)揮的作用。從設(shè)計(jì)階段顏色的選擇、字體的規(guī)范、控件的樣式，到RD開發(fā)階段代碼的統(tǒng)一管理、API的制定、多端的實(shí)現(xiàn)方式都必須遵守一套規(guī)則，通過積木Sketch插件落地設(shè)計(jì)規(guī)范，可以保證設(shè)計(jì)元素均從既定設(shè)計(jì)標(biāo)準(zhǔn)中獲取，產(chǎn)出符合業(yè)務(wù)設(shè)計(jì)語言的設(shè)計(jì)稿，而各平臺UI代碼庫中也有對應(yīng)實(shí)現(xiàn)，從而使積木插件成為UI一致性的抓手。

積木Sketch Plugin平臺化示意

4.1.1 插件功能

積木Sketch插件經(jīng)過一段時間的建設(shè)，目前已具備Iconfont、標(biāo)準(zhǔn)色板、組件庫、數(shù)據(jù)填充、文字模板等功能。通過Iconfont可以從公司圖標(biāo)庫中拉取設(shè)計(jì)團(tuán)隊(duì)上傳的SVG圖標(biāo)，并直接應(yīng)用于設(shè)計(jì)稿；標(biāo)準(zhǔn)色板可以限定設(shè)計(jì)師的顏色使用范圍，確保設(shè)計(jì)稿中的顏色均符合設(shè)計(jì)規(guī)范；組件庫中包含從外賣業(yè)務(wù)抽離的基本控件與通用組件，具有可復(fù)用和標(biāo)準(zhǔn)化的特點(diǎn)，并與不同開發(fā)語言組件庫中的代碼一一對應(yīng)；數(shù)據(jù)填充庫可以使設(shè)計(jì)師采用真實(shí)數(shù)據(jù)進(jìn)行填充，使設(shè)計(jì)稿更貼近線上環(huán)境；文字模板中內(nèi)置了字體樣式的使用規(guī)范，根據(jù)設(shè)計(jì)稿中文字的位置，點(diǎn)擊文字圖層即可直接應(yīng)用。

積木Sketch Plugin功能演示

4.1.2 物料市場

通過Sketch管理后臺，設(shè)計(jì)師可以將配色規(guī)范、文字規(guī)范、話術(shù)、Iconfont、組件庫上傳至云端并與整個設(shè)計(jì)團(tuán)隊(duì)中成員共享，并可實(shí)現(xiàn)設(shè)計(jì)資產(chǎn)的版本管理。通過將Sketch Library存儲在后臺物料市場，設(shè)計(jì)師可以與團(tuán)隊(duì)成員共享組件（Symbol），Library可以實(shí)現(xiàn)“一處更改，處處生效”，即使是關(guān)聯(lián)了遠(yuǎn)程組件庫歷史的設(shè)計(jì)稿檢測到更新時，也會收到Sketch通知，確保工作中使用的是最新組件。

積木Sketch Plugin 物料管理后臺

4.2 代碼模型建設(shè)

為了滿足中小企業(yè)的需求，越來越多的開源組件庫誕生，但開源代表著“通用”，無法滿足業(yè)務(wù)特色的需求，于是很多企業(yè)也開始做起了自己的組件庫。通過建立代碼組件庫，能幫助開發(fā)同學(xué)快速搭建App頁面，減少設(shè)計(jì)與開發(fā)溝通成本，統(tǒng)一體驗(yàn)規(guī)范等。

代碼組件庫模型

4.2.1 代碼庫功能

提高項(xiàng)目可維護(hù)性

由于組件庫中的組件職責(zé)單一，降低了系統(tǒng)的耦合度，開發(fā)人員可以很容易地了解該組件提供的能力。組件可以自由替換、組合為高階組件，在進(jìn)行組件更新時僅需修改一處。每個項(xiàng)目成員維護(hù)一定數(shù)量的組件，讓團(tuán)隊(duì)中每個人都能發(fā)揮所長，可以最大化團(tuán)隊(duì)的開發(fā)效率。

實(shí)現(xiàn)文檔化

組件接口有統(tǒng)一的規(guī)范，降低新人的上手難度，新成員只需要理解接口和職責(zé)即可開發(fā)組件代碼，由于代碼的影響范圍僅限于組件內(nèi)部，對項(xiàng)目的風(fēng)險(xiǎn)控制也非常有幫助。通過對組件統(tǒng)一管理，實(shí)現(xiàn)代碼的積累沉淀與有效復(fù)用，全面提升了新業(yè)務(wù)的需求開發(fā)效率。

便于單元測試

由于組件職責(zé)單一而清晰，對外僅暴露接口，概念上可以把組件當(dāng)成一個函數(shù)，輸入對應(yīng)著輸出，這讓自動化測試變得更加簡單。

實(shí)現(xiàn)無障礙等定制化功能

無障礙功能可以改善殘障人士的用戶體驗(yàn)，組件庫中的組件資源高內(nèi)聚，完全由自身控制加載，不與全局或其他組件產(chǎn)生影響。組件的加載、渲染路徑清晰可控，對于組件功能定制，實(shí)現(xiàn)類似于無障礙等功能較為方便。

4.2.2 方案設(shè)計(jì)

統(tǒng)一配置文件

前文也提到，外賣業(yè)務(wù)入口覆蓋外賣獨(dú)立App、美團(tuán)外賣頻道以及大眾點(diǎn)評外賣頻道等，外賣組件需要在不同的移動端上適配宿主App的UI風(fēng)格及交互體驗(yàn)，這就需要組件庫支持主題配置功能。由于主題涉及Android/iOS/MRN多端，需要一套通用的主題配置文件。經(jīng)過了各端開發(fā)同學(xué)與設(shè)計(jì)師的多輪討論，最終確定了包含主題顏色、文字外觀、組件風(fēng)格等內(nèi)容的主題描述文件格式。配置文件通過下發(fā)，就可以實(shí)現(xiàn)全局替換主題的功能。

{
  // 主題顏色
  "rooBrandColors": {
    "rooBrandPrimary": "#FFCC33"
  },
  // 文本外觀
  "rooTextAppearance": {
    "rooTextAppearanceHeadline1": {
      "fontFamily": "sans-serif-medium",    // 字體
      "textStyle": "normal",                // 風(fēng)格（normal/bold/italic）
      "textSize": 44,                       // 字號
    }
  },
  // 組件風(fēng)格
  "rooStyle":{
      "rooButtonStyle": {
        "textAppearance": "?attr/rooTextAppearanceButton",
        "backgroundColor": "?attr/rooBrandPrimary",
        "cornerRadius": 0,
      }
  }

搭建全平臺組件庫

目前，市面上耳熟能詳?shù)慕M件庫包括阿里的Antd Desigin、Fusion Design以及美團(tuán)的Roo Design等，基本都是服務(wù)于Web開發(fā)的組件庫，通過這些組件庫可以快速搭建一些中后臺系統(tǒng)。

為什么沒有知名的Native開源組件庫呢？因?yàn)槊總€應(yīng)用的主題、風(fēng)格以及交互體驗(yàn)都是不同的，而這些不同恰恰是傳達(dá)品牌主張和設(shè)計(jì)理念的靈魂，因此必須結(jié)合業(yè)務(wù)，針對Android/iOS/MRN三端進(jìn)行組件庫開發(fā)。通過搭建全平臺代碼組件庫，可以保證同一個UI組件在各端表現(xiàn)一致，進(jìn)行UI升級時降低改錯或遺漏的風(fēng)險(xiǎn)，除此之外，還能降低測試壓力，提高需求的吞吐率。

4.2.3 示例應(yīng)用

我們針對Android/iOS/MRN三端代碼開發(fā)了示例工程，通過示例工程，不僅可以幫助UI同學(xué)完成組件驗(yàn)收，還能幫助開發(fā)同學(xué)快速查閱可以應(yīng)用的所有組件，了解其使用方式以及進(jìn)行代碼調(diào)試。

組件庫demo示例

4.3 官網(wǎng)門戶建設(shè)

官網(wǎng)相當(dāng)于項(xiàng)目的門面，一個好的門面才能吸引更多的用戶，才能更好地對項(xiàng)目進(jìn)行推廣。官網(wǎng)作為設(shè)計(jì)師與開發(fā)同學(xué)溝通的媒介，需要兩者共同維護(hù)。通過官網(wǎng)可以幫助團(tuán)隊(duì)內(nèi)設(shè)計(jì)師沉淀設(shè)計(jì)風(fēng)格，建立統(tǒng)一的UI設(shè)計(jì)規(guī)范，幫助RD同學(xué)進(jìn)行組件文檔管理與查閱。

4.3.1 官網(wǎng)功能

當(dāng)前的官網(wǎng)主要由四部分組成，分別是設(shè)計(jì)語言、組件庫、插畫庫以及資源下載，分別服務(wù)于UI和RD同學(xué)。

外賣平臺化官網(wǎng)導(dǎo)航欄

設(shè)計(jì)語言

UI一致性項(xiàng)目中采取了“原子理論”的構(gòu)成原理，即從最小的元素開始定義，進(jìn)而將這些元素按照規(guī)則進(jìn)行組裝，拼接成組件，最后通過這些組件拼接成最終的頁面，這是一個由點(diǎn)到面的過程。設(shè)計(jì)語言章節(jié)主要服務(wù)于UI/UE同學(xué)，該章節(jié)通過視覺、設(shè)計(jì)模式、動效等三個子章節(jié)使得讀者能夠快速了解項(xiàng)目的設(shè)計(jì)規(guī)范，從而快速上手。

組件庫

組件庫是設(shè)計(jì)模式中各種元素的具體實(shí)現(xiàn)，在這個頁面描述了組件的使用方式。

插畫庫

插畫庫中則介紹了插畫的使用場景，插畫的繪制規(guī)范以及插畫案例展示。

資源下載

提供積木工具鏈產(chǎn)品下載功能。

外賣平臺化官網(wǎng)

4.3.2 方案設(shè)計(jì)

由于官網(wǎng)以純粹的圖文展示為主，且迭代頻率較快，因而選擇了當(dāng)下較為普遍的文檔-網(wǎng)站生成系統(tǒng)，即只需按照一定規(guī)范將書寫的Markdown文檔放至相應(yīng)目錄，前端自動解析后生成導(dǎo)航，并且支持多語種、圖片、文件、視頻等素材。這種方式極大地縮短了官網(wǎng)的開發(fā)周期，即便是沒有前端經(jīng)驗(yàn)的同學(xué)也能快速上手。

為了方便UI同學(xué)對官網(wǎng)文檔的修改，我們基于文檔網(wǎng)站生成系統(tǒng)搭建了在線編輯平臺。通過該平臺，相關(guān)人員可以直接做到在線編輯、發(fā)布，節(jié)約了UI同學(xué)與RD同學(xué)的溝通成本以及發(fā)布成本。填充期間，使用者可以實(shí)時預(yù)覽編輯的內(nèi)容，修改后只需點(diǎn)擊保存即可立即更新到網(wǎng)站中。

官網(wǎng)支持平臺化功能，不同業(yè)務(wù)方可以創(chuàng)建屬于自己的文檔站點(diǎn)，一個好的文檔站點(diǎn)對于設(shè)計(jì)組的方案推廣、外部接入都大有裨益。

外賣平臺化官網(wǎng)錄入后臺

4.4 工具鏈的閉環(huán)

當(dāng)我們信心滿滿的把UI一致性解決方案推廣到日常開發(fā)中時，除了聽到可以提升效率的褒獎外，開發(fā)同學(xué)對項(xiàng)目的吐槽聲也常常傳入我們的耳邊，“怎么才能知道設(shè)計(jì)稿中的哪個組件已經(jīng)開發(fā)完成了？”，“查詢這個組件的使用方法好麻煩，每次都要去官網(wǎng)檢索”，“規(guī)范顏色、圖標(biāo)的名稱是什么？怎么才能引用到？”

我們無法限制別人的選擇，所以只能讓這套體系變得更好用，如果不去優(yōu)化整個流程，將其串聯(lián)起來形成閉環(huán)，后面整個項(xiàng)目可能都會慢慢崩塌，所以我們對項(xiàng)目進(jìn)行了重新復(fù)盤，經(jīng)過大家集思廣益，終于找到了能將工具鏈體系打通的解決方案：設(shè)計(jì)稿作為銜接RD與UI的紐帶，可以把官網(wǎng)與代碼倉庫打通。

我們與美團(tuán)內(nèi)部的印跡團(tuán)隊(duì)合作開發(fā)，然后定制了一個設(shè)計(jì)云協(xié)作平臺，在給RD的設(shè)計(jì)稿中標(biāo)注了哪些是代碼組件庫中已有的元素，避免了重復(fù)開發(fā)，同時關(guān)聯(lián)了官網(wǎng)上該組件的使用說明，RD同學(xué)在開發(fā)過程中遇到組件使用問題無需檢索，點(diǎn)擊即可跳轉(zhuǎn)至使用文檔。后期我們還將顏色、iconfont以及插畫庫中圖片也進(jìn)行了關(guān)聯(lián)，真正做到了一致性元素的全覆蓋。

與印跡合作支持組件展示的云協(xié)作平臺

加入我們

UI一致性項(xiàng)目原本只是外賣技術(shù)團(tuán)隊(duì)提升UI/RD協(xié)作效率的一次嘗試，現(xiàn)在已經(jīng)作為全面提升產(chǎn)研效率的媒介，承載了越來越多的功能。圍繞設(shè)計(jì)日常工作，提供高效的設(shè)計(jì)元素獲取方式，讓工作變得更輕松，是我們的核心目標(biāo)。如何推動設(shè)計(jì)規(guī)范落地，并且輸出到各個業(yè)務(wù)系統(tǒng)靈活使用，是我們持續(xù)追尋的答案。探尋研發(fā)和設(shè)計(jì)更為高效的協(xié)作模式，是我們一直努力的方向。

如你所見，通過UI一致性建設(shè)可以幫助設(shè)計(jì)團(tuán)隊(duì)提升設(shè)計(jì)效率、沉淀設(shè)計(jì)語言以及減少走查負(fù)擔(dān)；讓RD同學(xué)面對新項(xiàng)目時可以專注于業(yè)務(wù)需求，而無需把時間耗費(fèi)在組件的編寫上；減少Q(mào)A工作量，保證控件質(zhì)量無需頻繁的回歸測試；幫助PM提高版本迭代效率及版本需求吞吐量，提供業(yè)務(wù)的快速拓展能力。當(dāng)然，我們除了希望制作一流的產(chǎn)品，也希望可以讓大家在繁忙的工作中得以喘息。我們會繼續(xù)以設(shè)計(jì)語言為依托，以工具鏈建設(shè)為抓手持續(xù)進(jìn)行UI一致性建設(shè)，不斷提高移動端UI業(yè)務(wù)中臺能力。

如果你也想?yún)⑴c我們的UI一致性項(xiàng)目建設(shè)，歡迎加入我們！