2023年傳統(tǒng)企業(yè)更需要UI一致性工程

傳統(tǒng)企業(yè)，更需要UI一致性工程傳統(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í)起來(lái)卻面臨著行動(dòng)步調(diào)不全都的困難。在工期估算方法不變的狀況下，單純地提高對(duì)一線開(kāi)發(fā)人員的要求，是一件推動(dòng)起來(lái)明顯吃力的事情。UI全都性工程，或許是傳統(tǒng)企業(yè)解決這個(gè)問(wèn)題的一個(gè)方向。

一、UI全都性工程是什么

提起UI全都性工程，許多人可能不太了解，但說(shuō)起組件化，信任許多人都比較熟識(shí)。

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

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

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

UI全都性工程，更為重要的命題是：如何保持UI的全都性。在多業(yè)務(wù)線、多場(chǎng)景、多渠道多終端、多部門多項(xiàng)目團(tuán)隊(duì)之間，想要保持UI上的全都，向公司內(nèi)外部用戶傳達(dá)統(tǒng)一的視覺(jué)風(fēng)格和品牌標(biāo)識(shí)，對(duì)于產(chǎn)品經(jīng)理和設(shè)計(jì)師來(lái)說(shuō)是一件看起來(lái)太過(guò)于奢華的幻想。它的成本極高，以至于好像遙不行及，單從作為視覺(jué)源頭的設(shè)計(jì)師來(lái)說(shuō)，對(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í)，也包括開(kāi)發(fā)團(tuán)隊(duì)的落實(shí)，甚至也可以將產(chǎn)品團(tuán)隊(duì)包括進(jìn)來(lái)。

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

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

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

設(shè)計(jì)組件和開(kāi)發(fā)組件之間的便捷關(guān)聯(lián)，對(duì)于后續(xù)項(xiàng)目上實(shí)際的設(shè)計(jì)開(kāi)發(fā)工作起著舉足輕重的作用。我們完成了設(shè)計(jì)的組件化和資源化，也完成了組件代碼和資源代碼，但若沒(méi)有一種便利的在設(shè)計(jì)稿上找到對(duì)應(yīng)代碼片段的關(guān)聯(lián)方式，就會(huì)面臨功虧一簣的境地，前面實(shí)現(xiàn)的越多，后面查找起來(lái)就越費(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)，開(kāi)發(fā)人員可以在設(shè)計(jì)師輸出的設(shè)計(jì)稿上直接看到哪些使用了已經(jīng)創(chuàng)建好的組件和資源，并且點(diǎn)擊即可直接查看到對(duì)應(yīng)的組件代碼和資源代碼，極大地提高了開(kāi)發(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)期注意功能開(kāi)發(fā)，為了滿意業(yè)務(wù)的快速上線，很難去落實(shí)統(tǒng)一的設(shè)計(jì)規(guī)范，在開(kāi)發(fā)過(guò)程中由于UI缺乏標(biāo)準(zhǔn)導(dǎo)致的問(wèn)題不斷凸顯，主要表現(xiàn)在三個(gè)方面：

由于UI缺乏標(biāo)準(zhǔn)化設(shè)計(jì)規(guī)范或者落實(shí)設(shè)計(jì)規(guī)范不力，在不同產(chǎn)品/系統(tǒng)及不同開(kāi)發(fā)語(yǔ)言平臺(tái)上設(shè)計(jì)風(fēng)格不統(tǒng)一，用戶體驗(yàn)不全都，同時(shí)設(shè)計(jì)資源與代碼均缺乏統(tǒng)一管理手段，無(wú)法實(shí)現(xiàn)積累沉淀，無(wú)法適應(yīng)新的開(kāi)發(fā)需求。組件代碼實(shí)現(xiàn)碎片化，存在多次開(kāi)發(fā)的狀況，質(zhì)量難以保證，各端代碼API不統(tǒng)一，維護(hù)拓展成本較高，變更主題、適配DarkMode等需求難以實(shí)現(xiàn)。重復(fù)走查，頻繁回歸，每次投產(chǎn)上線均需驗(yàn)證開(kāi)發(fā)質(zhì)量與還原度效果，修改后還需要再次確認(rèn)，由于效率比較低，造成為了提升產(chǎn)品體驗(yàn)而做的工作性價(jià)比比較低。產(chǎn)品經(jīng)理進(jìn)入傳統(tǒng)企業(yè)后，首先擔(dān)當(dāng)起的便是產(chǎn)品體驗(yàn)優(yōu)化的重任，但一段時(shí)間以后就會(huì)漸漸發(fā)覺(jué)，肩上的擔(dān)子分解下來(lái)的層層任務(wù)只有自己那部分可控的任務(wù)能順當(dāng)如期地完成，然后就會(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ù)與開(kāi)發(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)問(wèn)題一拖再拖、始終得不到解決的關(guān)鍵所在。UI全都性工程，或許是產(chǎn)品經(jīng)理可以依托的一桿旗幟。

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

拋開(kāi)所處的企業(yè)環(huán)境與人力資源境況之外，單說(shuō)UI設(shè)計(jì)與設(shè)計(jì)規(guī)范落實(shí)，也該提升一下效率了。一個(gè)頁(yè)面一個(gè)頁(yè)面地畫(huà)、一個(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ī)范根據(jù)這個(gè)理論進(jìn)行組件化和資源化了。說(shuō)起這一點(diǎn)，不得不感嘆，開(kāi)發(fā)側(cè)在共享、復(fù)用、協(xié)作這些方面比產(chǎn)品和設(shè)計(jì)側(cè)要走得靠前一點(diǎn)，在時(shí)間上、在廣度和深度上，都是如此。或許，這是由于產(chǎn)品與設(shè)計(jì)側(cè)始終強(qiáng)調(diào)的是創(chuàng)意、創(chuàng)新，開(kāi)發(fā)側(cè)更務(wù)實(shí)，強(qiáng)調(diào)的是效率、工期吧。

說(shuō)了這么多，其實(shí)UI全都性工程歸根究竟解決的是兩個(gè)方面的問(wèn)題，一個(gè)是產(chǎn)品體驗(yàn)的全都性，一個(gè)是研發(fā)效率的提升。我們肯定要在UI全都性紛繁簡(jiǎn)單的大工程里始終糊涂地熟悉到這一點(diǎn)，始終緊緊抓住這兩個(gè)關(guān)鍵作用，不能自己迷失了方向。

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

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

雖然UI全都性工程在落地上會(huì)增加開(kāi)發(fā)同學(xué)不少的工作量，推動(dòng)全都性建設(shè)也是一個(gè)困難的工作，由于成本較高，且無(wú)法量化評(píng)估收益，許多團(tuán)隊(duì)最終未達(dá)到預(yù)期效果，但一旦有效運(yùn)作起