傳統(tǒng)企業(yè)對(duì)產(chǎn)品體驗(yàn)的忽略程度是互聯(lián)網(wǎng)公司難以想象的，以至于粗糙得還像個(gè)demo的版本就可以如期上線了，“功能至上”并不是傳統(tǒng)企業(yè)專屬的理念，互聯(lián)網(wǎng)公司也是功能為先，只是差別在于互聯(lián)網(wǎng)公司是“功能”和“體驗(yàn)”并重，傳統(tǒng)企業(yè)是“功能”一枝獨(dú)秀。

傳統(tǒng)企業(yè)當(dāng)前也存在著優(yōu)化體驗(yàn)的訴求，但落實(shí)起來卻面臨著行動(dòng)步調(diào)不一致的困難。在工期估算方法不變的情況下，單純地提高對(duì)一線開發(fā)人員的要求，是一件推動(dòng)起來明顯吃力的事情。UI一致性工程，或許是傳統(tǒng)企業(yè)解決這個(gè)問題的一個(gè)方向。

一、UI一致性工程是什么

提起UI一致性工程，很多人可能不太了解，但說起組件化，相信很多人都比較熟悉。

以前我們說組件化，常常是指開發(fā)側(cè)，而且一般是指前端，因此組件化常常是指前端代碼的組件化。前端代碼組件化，是把頁(yè)面中重復(fù)率比較高的一些樣式代碼提取出來，做成一個(gè)個(gè)的代碼組件，這樣再遇到需要開發(fā)相同或類似的樣式，就可以直接拿過來使用，而不需要再?gòu)念^開始寫，它在一定程度上提高了前端開發(fā)效率。

那么UI一致性工程又是什么呢？它和前端代碼組件化有哪些差別呢？

前端代碼組件化，通常只涉及開發(fā)側(cè)，不涉及設(shè)計(jì)側(cè)，而且它的主要目的是提高開發(fā)側(cè)的效率。UI一致性工程，可以粗略地認(rèn)為是對(duì)前端組件化的一個(gè)比較大的升級(jí)，它不僅僅關(guān)注開發(fā)側(cè)，也關(guān)注產(chǎn)品設(shè)計(jì)側(cè)，它的視角是整個(gè)研發(fā)過程，自然它的目的也不再是單一的提高開發(fā)側(cè)的效率。

UI一致性工程，更為重要的命題是：如何保持UI的一致性。在多業(yè)務(wù)線、多場(chǎng)景、多渠道多終端、多部門多項(xiàng)目團(tuán)隊(duì)之間，想要保持UI上的一致，向公司內(nèi)外部用戶傳達(dá)統(tǒng)一的視覺風(fēng)格和品牌標(biāo)識(shí)，對(duì)于產(chǎn)品經(jīng)理和設(shè)計(jì)師來說是一件看起來太過于奢華的夢(mèng)想。它的成本極高，以至于似乎遙不可及，單從作為視覺源頭的設(shè)計(jì)師來說，對(duì)于設(shè)計(jì)規(guī)范的管控和遵從就已經(jīng)顯得力不從心了。在這個(gè)背景之下，UI一致性工程應(yīng)運(yùn)而生。

想要保持UI的一致性，UI一致性工程的重要使命便是：設(shè)計(jì)規(guī)范的統(tǒng)一貫徹落實(shí)。這個(gè)落實(shí)，既包括設(shè)計(jì)團(tuán)隊(duì)的落實(shí)，也包括開發(fā)團(tuán)隊(duì)的落實(shí)，甚至也可以將產(chǎn)品團(tuán)隊(duì)包括進(jìn)來。

設(shè)計(jì)團(tuán)隊(duì)通過UI一致性工程保障設(shè)計(jì)規(guī)范能夠很好地貫徹落實(shí)的手段在于：設(shè)計(jì)的組件化和設(shè)計(jì)資源的管理與限定。UI一致性工程首先的任務(wù)便是將設(shè)計(jì)規(guī)范進(jìn)行設(shè)計(jì)組件化和設(shè)計(jì)資源化。通過創(chuàng)建設(shè)計(jì)側(cè)組件，并在設(shè)計(jì)團(tuán)隊(duì)內(nèi)分享復(fù)用，既提高了設(shè)計(jì)效率又避免了無效創(chuàng)新，以達(dá)到設(shè)計(jì)上的統(tǒng)一。通過設(shè)計(jì)資源化，使整個(gè)設(shè)計(jì)團(tuán)隊(duì)保持統(tǒng)一的設(shè)計(jì)風(fēng)格，減少誤用、濫用，以保持體驗(yàn)的一致。

開發(fā)團(tuán)隊(duì)通過UI一致性工程，不僅僅將之前沉淀的前端代碼組件更加規(guī)范，還包括了設(shè)計(jì)資源的規(guī)范代碼。通過對(duì)組件代碼和資源代碼的復(fù)用，使UI設(shè)計(jì)更加有效地落地，提升開發(fā)還原度，無需再重復(fù)走查、頻繁回歸，形成設(shè)計(jì)-開發(fā)流程的閉環(huán)，提升復(fù)用性與開發(fā)效率。

UI一致性工程通過全局變量和組件關(guān)聯(lián)變量的提取，并在設(shè)計(jì)側(cè)和開發(fā)側(cè)的定義，使快速實(shí)現(xiàn)視覺優(yōu)化、設(shè)計(jì)升級(jí)和更新的成本大大降低，使一鍵變更主題、適配Dark Mode等難以實(shí)現(xiàn)的需求變得非常easy。

設(shè)計(jì)組件和開發(fā)組件之間的便捷關(guān)聯(lián)，對(duì)于后續(xù)項(xiàng)目上實(shí)際的設(shè)計(jì)開發(fā)工作起著舉足輕重的作用。我們完成了設(shè)計(jì)的組件化和資源化，也完成了組件代碼和資源代碼，但若沒有一種便利的在設(shè)計(jì)稿上找到對(duì)應(yīng)代碼片段的關(guān)聯(lián)方式，就會(huì)面臨功虧一簣的境地，前面實(shí)現(xiàn)的越多，后面查找起來就越費(fèi)勁。一個(gè)能在設(shè)計(jì)稿中對(duì)設(shè)計(jì)組件和設(shè)計(jì)資源中的元素進(jìn)行自動(dòng)標(biāo)識(shí)和代碼關(guān)聯(lián)的協(xié)作平臺(tái)必不可少，是UI一致性工程中至關(guān)重要的一環(huán)。有了這個(gè)平臺(tái)，開發(fā)人員可以在設(shè)計(jì)師輸出的設(shè)計(jì)稿上直接看到哪些使用了已經(jīng)創(chuàng)建好的組件和資源，并且點(diǎn)擊即可直接查看到對(duì)應(yīng)的組件代碼和資源代碼，極大地提高了開發(fā)對(duì)于組件代碼和資源代碼的復(fù)用效率。

二、UI一致性工程對(duì)傳統(tǒng)企業(yè)的意義

傳統(tǒng)企業(yè)對(duì)產(chǎn)品體驗(yàn)的重視程度不足，又缺乏產(chǎn)品和設(shè)計(jì)方面的專業(yè)人才，在這個(gè)大背景之下，現(xiàn)有的產(chǎn)品體驗(yàn)不盡人意。長(zhǎng)期注重功能開發(fā)，為了滿足業(yè)務(wù)的快速上線，很難去落實(shí)統(tǒng)一的設(shè)計(jì)規(guī)范，在開發(fā)過程中由于UI缺乏標(biāo)準(zhǔn)導(dǎo)致的問題不斷凸顯，主要表現(xiàn)在三個(gè)方面：

• 由于UI缺乏標(biāo)準(zhǔn)化設(shè)計(jì)規(guī)范或者落實(shí)設(shè)計(jì)規(guī)范不力，在不同產(chǎn)品/系統(tǒng)及不同開發(fā)語(yǔ)言平臺(tái)上設(shè)計(jì)風(fēng)格不統(tǒng)一，用戶體驗(yàn)不一致，同時(shí)設(shè)計(jì)資源與代碼均缺乏統(tǒng)一管理手段，無法實(shí)現(xiàn)積累沉淀，無法適應(yīng)新的開發(fā)需求。
• 組件代碼實(shí)現(xiàn)碎片化，存在多次開發(fā)的情況，質(zhì)量難以保證，各端代碼API不統(tǒng)一，維護(hù)拓展成本較高，變更主題、適配Dark Mode等需求難以實(shí)現(xiàn)。
• 重復(fù)走查，頻繁回歸，每次投產(chǎn)上線均需驗(yàn)證開發(fā)質(zhì)量與還原度效果，修改后還需要再次確認(rèn)，由于效率比較低，造成為了提升產(chǎn)品體驗(yàn)而做的工作性價(jià)比比較低。

產(chǎn)品經(jīng)理進(jìn)入傳統(tǒng)企業(yè)后，首先承擔(dān)起的便是產(chǎn)品體驗(yàn)優(yōu)化的重任，但一段時(shí)間以后就會(huì)逐漸發(fā)現(xiàn)，肩上的擔(dān)子分解下來的層層任務(wù)只有自己那部分可控的任務(wù)能順利如期地完成，然后就會(huì)遇到難以推動(dòng)的困境。提出的產(chǎn)品體驗(yàn)優(yōu)化相關(guān)的需求總是被功能性的項(xiàng)目需求一拖再拖。即便是領(lǐng)導(dǎo)親自下發(fā)了體驗(yàn)優(yōu)化的任務(wù)，也難以抵抗現(xiàn)有的KPI評(píng)價(jià)體系和業(yè)務(wù)與開發(fā)團(tuán)隊(duì)的慣性思維和習(xí)慣性動(dòng)作。

結(jié)合傳統(tǒng)企業(yè)業(yè)務(wù)經(jīng)營(yíng)場(chǎng)景與實(shí)際需要，缺乏有效提升產(chǎn)品體驗(yàn)的體系化工具，可能是導(dǎo)致產(chǎn)品體驗(yàn)問題一拖再拖、一直得不到解決的關(guān)鍵所在。UI一致性工程，或許是產(chǎn)品經(jīng)理可以依托的一桿旗幟。

產(chǎn)品經(jīng)理借助UI一致性工程，不僅可以解決自己所負(fù)責(zé)產(chǎn)品/系統(tǒng)的產(chǎn)品體驗(yàn)問題，還可以將其平臺(tái)化，供其他項(xiàng)目團(tuán)隊(duì)使用，這對(duì)于有比較多中后臺(tái)系統(tǒng)的傳統(tǒng)企業(yè)來說，更是一個(gè)整體性的UI解決方案。傳統(tǒng)企業(yè)直接面向客戶的科技產(chǎn)品，尚且可以通過人力的單獨(dú)密集配置、產(chǎn)品體驗(yàn)的重視程度、敏感度與開發(fā)還原度的提升等方式使之達(dá)到一個(gè)尚且不錯(cuò)的水平，但對(duì)于中后臺(tái)產(chǎn)品/系統(tǒng)的體驗(yàn)問題基本上沒有辦法來集中解決、整體提升，更多依靠的是每個(gè)團(tuán)隊(duì)自己，除非依靠UI一致性這樣的整體性工程。

拋開所處的企業(yè)環(huán)境與人力資源境況之外，單說UI設(shè)計(jì)與設(shè)計(jì)規(guī)范落實(shí)，也該提升一下效率了。一個(gè)頁(yè)面一個(gè)頁(yè)面地畫、一個(gè)元素一個(gè)元素地設(shè)計(jì)，雖然每個(gè)設(shè)計(jì)師也會(huì)有一套自己的設(shè)計(jì)庫(kù)，但這遠(yuǎn)遠(yuǎn)不足，依然存在很多環(huán)節(jié)可以改進(jìn)和提升的地方。設(shè)計(jì)專業(yè)基礎(chǔ)的原子、分子、組織、模板、頁(yè)面的原子理論，也該將設(shè)計(jì)規(guī)范按照這個(gè)理論進(jìn)行組件化和資源化了。說起這一點(diǎn)，不得不感嘆，開發(fā)側(cè)在分享、復(fù)用、協(xié)作這些方面比產(chǎn)品和設(shè)計(jì)側(cè)要走得靠前一點(diǎn)，在時(shí)間上、在廣度和深度上，都是如此?；蛟S，這是因?yàn)楫a(chǎn)品與設(shè)計(jì)側(cè)一直強(qiáng)調(diào)的是創(chuàng)意、創(chuàng)新，開發(fā)側(cè)更務(wù)實(shí)，強(qiáng)調(diào)的是效率、工期吧。

說了這么多，其實(shí)UI一致性工程歸根到底解決的是兩個(gè)方面的問題，一個(gè)是產(chǎn)品體驗(yàn)的一致性，一個(gè)是研發(fā)效率的提升。我們一定要在UI一致性紛繁復(fù)雜的大工程里始終清醒地認(rèn)識(shí)到這一點(diǎn)，始終緊緊抓住這兩個(gè)關(guān)鍵作用，不能自己迷失了方向。

這里的研發(fā)效率既包括開發(fā)側(cè)的效率，也包括設(shè)計(jì)側(cè)的效率，也可以包括產(chǎn)品側(cè)的一點(diǎn)效率。這里的效率，更多的是體現(xiàn)在UI設(shè)計(jì)師和前端開發(fā)的工作效率，以及兩者需要相互配合完成的協(xié)作效率上，如開發(fā)還原度與UI走查。由于產(chǎn)品經(jīng)理最主要的工作瓶頸不在于產(chǎn)品原型的產(chǎn)出，所以說是能提升一點(diǎn)效率。除此之外，產(chǎn)品體驗(yàn)的一致性和研發(fā)效率的提升也存在一點(diǎn)內(nèi)部邏輯關(guān)系，這個(gè)邏輯關(guān)系便是：UI一致性工程首先要達(dá)成研發(fā)效率的提升，才能進(jìn)一步促使完成產(chǎn)品體驗(yàn)的一致性。這一點(diǎn)，在傳統(tǒng)企業(yè)里是非常重要的，任何脫離開發(fā)只談產(chǎn)品及體驗(yàn)的改善都不具有足夠的吸引力。

UI一致性工程的建設(shè)，可以幫助設(shè)計(jì)團(tuán)隊(duì)提升設(shè)計(jì)效率、沉淀設(shè)計(jì)語(yǔ)言以及減少走查負(fù)擔(dān)；讓開發(fā)同學(xué)面對(duì)新項(xiàng)目時(shí)可以專注于業(yè)務(wù)需求，而無需把時(shí)間耗費(fèi)在組件的編寫上；減少測(cè)試同學(xué)工作量，保證控件質(zhì)量無需頻繁的回歸測(cè)試；幫助業(yè)務(wù)同學(xué)和產(chǎn)品經(jīng)理提高版本迭代效率及版本需求吞吐量，提升業(yè)務(wù)的快速拓展能力。

雖然UI一致性工程在落地上會(huì)增加開發(fā)同學(xué)不少的工作量，推進(jìn)一致性建設(shè)也是一個(gè)艱難的工作，由于成本較高，且無法量化評(píng)估收益，很多團(tuán)隊(duì)最終未達(dá)到預(yù)期效果，但一旦有效運(yùn)作起來后，團(tuán)隊(duì)將獲得豐厚的回報(bào)。

三、UI一致性工程之外

有了UI一致性工程以后，是不是單純依靠它就能解決所有問題了呢？當(dāng)然不是。

組件化與資源化雖是提效和統(tǒng)一體驗(yàn)的好方式，但在設(shè)計(jì)過程中我們也不能過度強(qiáng)化組件和資源的使用，喪失了設(shè)計(jì)創(chuàng)新的可能性，而是通過對(duì)產(chǎn)品價(jià)值的深入認(rèn)知、對(duì)設(shè)計(jì)方案的全局審視來進(jìn)行決策，以實(shí)現(xiàn)兩者間的平衡和價(jià)值最大化。