導讀：一個統(tǒng)一构罗、規(guī)范的組件庫，能夠不斷沉淀設計師的思考智玻、降低設計與開發(fā)成本遂唧，保證產(chǎn)品在不斷發(fā)展的過程中，用戶體驗不被打斷尚困。同時蠢箩，熵簡科技作為一家深耕B端的服務商，其前端組件庫還需要快速賦能 2B 場景下的業(yè)務需求事甜。文本針對 2B 場景逝变，談一談熵簡前端團隊在構(gòu)建前端組件庫中的設計理念和實踐遂跟。
作者信息
本文出自熵簡科技大前端團隊，團隊致力于打造世界級的B端產(chǎn)品。主要工作包括搭建先進客峭、統(tǒng)一的前端基礎架構(gòu)，建立嚴格的產(chǎn)品設計規(guī)范眼虱，探索前沿技術(shù)的業(yè)務落地，持續(xù)沉淀優(yōu)秀的前端案例宴卖，不斷提升各個產(chǎn)品線的客戶使用體驗及開發(fā)效率。
1邻悬、背景
前端組件化已經(jīng)成為一種主流症昏，一種共識。一個統(tǒng)一父丰、規(guī)范的組件庫肝谭，能夠不斷沉淀設計師的思考、降低設計與開發(fā)成本蛾扇，同時也可以降低用戶在不同產(chǎn)品模塊之間切換的學習成本攘烛，保證產(chǎn)品在不斷發(fā)展的過程中，用戶體驗不被打斷镀首。
熵簡科技是一家為企業(yè)客戶提供數(shù)據(jù)智能平臺的服務商坟漱，因此我們團隊在構(gòu)建前端組件庫時，除了需要考慮上面的需求以外更哄，同時還要兼容 2B 場景下的業(yè)務特征芋齿。
在2B場景下，很多客戶需要對產(chǎn)品進行私有化部署以及定制化改造成翩，客戶往往會對設計風格提出與自身公司文化背景相統(tǒng)一的定制化需求沟突，這時就需要我們的組件庫能夠在輸出效果穩(wěn)定可預期的同時，具備響應客戶需求變化的強大擴展性捕传。
為了達到上面的要求惠拭，在整個設計和開發(fā)過程中，我們一直遵循兩個原則：
? ? （1）原子化：類比物質(zhì)的分子組成結(jié)構(gòu)(原子構(gòu)成分子庸论，分子構(gòu)成物質(zhì))职辅，原子設計就是將頁面顆粒度分為原子、分子聂示、組織域携、模板、頁面的超細維度鱼喉，進行組件和組件的層層嵌套秀鞭。同樣我們在設計組件時將設計元素的顆粒度進一步精分、組合產(chǎn)生顏色搭配主題扛禽、形態(tài)組合主題等锋边，不同的主題結(jié)合產(chǎn)生最終的組件樣式。
? ?? （2）統(tǒng)一語義化命名：UI和前端統(tǒng)一規(guī)范各原子化"物料"的命名编曼，減少協(xié)作中的溝通成本豆巨。
2、2B場景下的設計原則
2.1 系統(tǒng)一致性原則
實際的項目開發(fā)通常需要在同一環(huán)境下整合多個產(chǎn)品系統(tǒng)掐场，組件庫的開發(fā)能很好地保證各個系統(tǒng)有一致的視覺語言往扔、交互操作規(guī)范贩猎。
2.2 敏捷開發(fā)原則
2B業(yè)務在POC階段需要有快速的視覺Demo輸出，因此原子化的組件設計與模塊化的組件開發(fā)配合顯得尤為重要萍膛。
最終吭服，我們希望能夠搭建起 產(chǎn)品/UI/前端 三方高效的協(xié)作流程，如下所示：
3蝗罗、UI團隊工作：?
3.1 定義并創(chuàng)建原子化變量
在設計的初始階段噪馏，先將“顏色”這個最基礎單位按其之后在項目中的使用意圖進行分組和命名，前端在設定不同組件的顏色屬性時也會以顏色名字的方式進行設定和修改绿饵。
3.2??UI基于Sketch的Symbol功能進行變量創(chuàng)建
sketch的symbol功能很好的為原子化提供了實踐可能性。在sketch文件中將最小顆粒度“原子(如顏色)”按照其使用意圖作為名稱進行命名瓶颠；顆粒度再復雜一級的“分子(如字體)”變量名則由typeface/weight/color/size的組合排列產(chǎn)生拟赊。
當進一步設計有功能屬性的基礎組件(如按鈕、列表等)時粹淋，組件內(nèi)的文字和顏色使用引用預定義好的“原子單位”吸祟，這也為日后樣式修改時確保組件一致性提供了一定的依據(jù)。
3.3?Sketch上傳Zeplin來完成設計與開發(fā)團隊的同步協(xié)作
zeplin作為sketch的“好基友”可以很好的實現(xiàn)將設計語言到開發(fā)語言的翻譯工作桃移。設計好的symbol通過 Sketch/Plugin/Zeplin/Export Selected Board上傳至zeplin的共享平臺屋匕。
在zeplin的styleguide欄目下以樹狀結(jié)構(gòu)來分類組件
zeplin內(nèi)嵌的symbol識別功能使得在產(chǎn)品業(yè)務相關的頁面中對于引用到的組件進行自動識別，方便開發(fā)人員識別原子化變量
4.前端團隊工作：
4.1?前端組件設計和開發(fā)原則
基于Sketch中的symbol功能借杰，前端也需要將組件進行原子化过吻，并根據(jù)symbol的變量命名將常用的大小、顏色創(chuàng)建為變量蔗衡。
前端組件根據(jù)功能以及顆粒度可以分為“基礎組件”和“高階組件”纤虽。基礎組件一般是頁面中顆粒度中最小也是最常用的組件绞惦，例如input逼纸，button等；高階組件通常是由基礎組件進行一定的變形济蝉、組合或兩者兼有而形成的杰刽；而高階組件+基礎組件最終組成了完整的頁面。 為了滿足2B場景下的整體風格替換王滤，所有組件在開發(fā)的時候要將用到的顏色贺嫂、字體等"原子"用變量的方式引入。
在目前前端開發(fā)中雁乡，樣式的變量創(chuàng)建方式主要有兩種：一是基于css原生支持的自定義變量涝婉，二是基于less、scss等css預編譯器蔗怠《胀洌考慮到自定義變量可能存在的瀏覽器兼容性問題吩跋，最終我們組件庫采用了less作為樣式開發(fā)的語言。less 是一門 CSS 預處理語言渔工，除了之前提到的變量功能锌钮，還有嵌套、混合（mixin）引矩、函數(shù)等方便的功能梁丘。
4.2?前端組件開發(fā)實踐
至此，前端開發(fā)可以根據(jù)之前zeplin上的StyleGuide旺韭，將常用的變量進行定義氛谜，并在組件開發(fā)中使用：
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?less變量定義
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 組件庫變量應用
除此之外，我們利用less的mixins特性封裝了文字樣式混合区端，可通過傳參編譯成相應代碼值漫，從而減少重復代碼并且方便開發(fā)使用。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?定義mixin
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? mixin的使用
4.3? Less變量覆蓋與自動注入
當我們按照以上原則完成組件及頁面的開發(fā)织盼，就可以非常方便的解決業(yè)務場景下遇到的“換膚“問題：只需要根據(jù)主題修改相關變量即可完成整個項目的主題更換杨何。那在項目中，在不改變組件庫變量文件的前提下沥邻，如何才能修改樣式變量呢危虱？最終我們采用less變量覆蓋以及變量文件自動注入的方式解決了這個問題。
（1）less變量覆蓋
（2）?less自動注入
less自動注入目前我們有兩種方案：一是通過less-loader提供的modifyVars唐全、二是通過style-resources-loader來實現(xiàn)
less-loader實現(xiàn)如下：
style-resources-loader實現(xiàn)如下：
5埃跷、總結(jié)設計規(guī)范
基于原子化設計理念，針對2B場景下的換膚需求邮利，我們提出并完善了這套在構(gòu)建時即可實現(xiàn)的換膚方案捌蚊。這套理論可以應用于網(wǎng)站的整體開發(fā)中并已經(jīng)過實踐驗證，最終能夠?qū)崿F(xiàn)網(wǎng)站整體換膚的效果近弟。
關于熵簡科技
熵簡科技是一家數(shù)據(jù)智能公司缅糟，熵簡科技圍繞“數(shù)據(jù)采集-數(shù)據(jù)融合-數(shù)據(jù)計算-業(yè)務決策”的各個場景，運用自主研發(fā)的數(shù)據(jù)中臺引擎祷愉，通過端到端的數(shù)據(jù)中臺體系切實解決企業(yè)需求痛點窗宦。
更多技術(shù)干貨文章，請關注熵簡科技的公眾號「熵簡學院」
