【美團技術(shù)】移動端UI一致性解決方案

1. 背景

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

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

• 設(shè)計層面：由于UI缺乏標準化設(shè)計規(guī)范，在不同App及不同開發(fā)語言平臺上設(shè)計風格不統(tǒng)一，用戶體驗不一致；設(shè)計資源與代碼均缺乏統(tǒng)一管理手段，無法實現(xiàn)積累沉淀，無法適應(yīng)新業(yè)務(wù)的開發(fā)需求。

• 開發(fā)層面：組件代碼實現(xiàn)碎片化，存在多次開發(fā)的情況，質(zhì)量難以保證；各端代碼API不統(tǒng)一，維護拓展成本較高，變更主題、適配Dark Mode等需求難以實現(xiàn)。

• 測試層面：重復(fù)走查，頻繁回歸，每次發(fā)版均需驗證組件質(zhì)量。

• 產(chǎn)品層面：版本迭代效率低，版本需求吞吐量低，不具備業(yè)務(wù)的快速拓展能力。

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

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

指標一：移動端UI問題統(tǒng)計

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

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

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

指標三：需求入版情況統(tǒng)計

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

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

1.3 UI一致性項目

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

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

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

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

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

2. UI一致性整體方案

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

2.1 方案全景

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

1. 積木工具鏈：通過建立包含相同設(shè)計元素的統(tǒng)一物料市場，PM通過Axure插件拾取物料市場中的組件產(chǎn)出原型稿；UI/UE通過Sketch插件落地物料市場中的設(shè)計規(guī)范，產(chǎn)出符合要求的設(shè)計稿。未來，希望通過高保真原型輸出，可以給中后臺項目、非依賴體驗項目提供更好的服務(wù)體驗，賦予產(chǎn)品同學(xué)直接向技術(shù)側(cè)輸出原型稿的能力。

2. 代碼組件庫（Android、iOS、MRN）：設(shè)計稿中的組件與RD代碼倉庫中組件一一對應(yīng)。

3. 文檔化說明：官網(wǎng)詳細描述了代碼組件庫的集成方式、組件的使用方法，降低開發(fā)上手難度，只需要理解接口和職責即可進行業(yè)務(wù)開發(fā)。

4. 定制化設(shè)計云協(xié)作平臺：與美團內(nèi)部的印跡團隊（云協(xié)作平臺）合作開發(fā)，在RD的設(shè)計稿中標注了哪些是代碼組件庫中已有的元素，避免重復(fù)開發(fā)，同時關(guān)聯(lián)了官網(wǎng)中該組件的使用說明，是代碼組件庫與官網(wǎng)的紐帶。

2.2 接入指南

1. 設(shè)計師逐步將設(shè)計語言沉淀為設(shè)計規(guī)范（包括組件、顏色、字體、圖片等）上傳至官網(wǎng)供整個設(shè)計團隊查閱，同時將其量化并內(nèi)置于積木Sketch插件中；開發(fā)同學(xué)則將其代碼化，針對Android/iOS/MRN三端進行組件庫開發(fā)。

2. 設(shè)計師使用積木Sketch插件繪制設(shè)計稿，可以保證設(shè)計元素均從既定的設(shè)計標準中獲取，產(chǎn)出符合業(yè)務(wù)設(shè)計規(guī)范的設(shè)計稿，而代碼組件庫中也有對應(yīng)的實現(xiàn)。

3. 繪制完成的設(shè)計稿上傳至印跡云協(xié)作平臺，交付開發(fā)同學(xué)進行設(shè)計稿還原。

4. 開發(fā)同學(xué)拿到設(shè)計稿后，就可以知道本次需求哪些組件已內(nèi)置于代碼組件庫中，并可以點擊設(shè)計稿中的鏈接，直接查看組件的使用說明。

2.3 方案落地

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

1. 項目小組不能脫離日常需求開發(fā)工作。這樣可以保證設(shè)計師所沉淀的設(shè)計元素始終來自于最新的業(yè)務(wù)場景，同時項目產(chǎn)出可以快速應(yīng)用到最新的版本中得以驗證。

2. 優(yōu)先選擇受視覺因素影響較大、投入產(chǎn)出比高的模塊場景進行改造，化繁為簡，確定最小驗證閉環(huán) （MVP，Minimum Viable Product），在實踐中不斷優(yōu)化，進而跑通整個流程。

3. 項目推進由UI同學(xué)按版本提出需求，移動端排期并落地實施，由UI統(tǒng)一驗收。

4. 建立階段性目標，并完成最近三期工作的具體規(guī)劃，定期復(fù)盤完成情況，保證項目的持續(xù)推進。

2.4 一致性成果

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

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

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

3.1 外賣DPL

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

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

3.2 組件搭建

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

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

選擇合適粒度

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

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

具備拓展性

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

支持統(tǒng)一管理

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

3.3 資源一致性

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

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

3.3.1 圖片

建立插畫庫

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

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

使用Iconfont

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

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

歸檔圖片文件

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

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

3.3.2 動效

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

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

3.3.3 顏色

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

3.3.4 字體

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

4. 工具鏈建設(shè)

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

4.1 積木Sketch插件

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

4.1.1 插件功能

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

4.1.2 物料市場

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

積木Sketch Plugin 物料管理后臺

4.2 代碼模型建設(shè)

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

4.2.1 代碼庫功能

提高項目可維護性

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

實現(xiàn)文檔化

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

便于單元測試

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

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

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

4.2.2 方案設(shè)計

統(tǒng)一配置文件

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

{
  // 主題顏色
  "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,
      }
  }

搭建全平臺組件庫

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

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

4.2.3 示例應(yīng)用

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

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

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

4.3.1 官網(wǎng)功能

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

設(shè)計語言

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

組件庫

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

插畫庫

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

資源下載

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

4.3.2 方案設(shè)計

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

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

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

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

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

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

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

加入我們

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

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

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

致謝

參考文獻