http://www.woshipm.com/pd/3030168.html

產(chǎn)品：這次需求很簡單，對比上期只有字段和操作項的差異铐维，把上次的稿子直接復(fù)制一下應(yīng)該不用很多時間吧漂坏？

交互：上次你是不是做過高級篩選組合？我這期需求要用到普泡，你把那部分稿子發(fā)給我用用吧域那。

研發(fā)：這個組件我在其他模塊里看到過已有樣式咙边，這次為啥用不一樣的？不然又要重復(fù)開發(fā)呀次员，能不能給統(tǒng)一下败许。

視覺：同一個按鈕在不同的模塊顏色不一樣誒，這次要和哪個模塊一致笆缥怠市殷？

…

通過以上對話不難看出，在整個互聯(lián)網(wǎng)產(chǎn)品設(shè)計到研發(fā)的過程中刹衫，最常出現(xiàn)在需求溝通與研發(fā)過程中由于缺少統(tǒng)一的規(guī)范和標(biāo)準(zhǔn)化體系來指導(dǎo)實踐醋寝，導(dǎo)致實施環(huán)節(jié)各方溝通成本高搞挣，造成設(shè)計成果與實現(xiàn)有一定差距，影響用戶體驗音羞。

通用組件和業(yè)務(wù)組件混用導(dǎo)致設(shè)計模式和代碼復(fù)用率低囱桨，尤其是當(dāng)業(yè)務(wù)發(fā)展到一定體量時，對于復(fù)雜產(chǎn)品的大量重復(fù)且類似的需求場景嗅绰。如果沒有一種高效的工具和規(guī)范來協(xié)同工作舍肠，將大大影響團(tuán)隊的生產(chǎn)及溝通效率。

一办陷、問題

認(rèn)知：產(chǎn)品貌夕、研發(fā)律歼、設(shè)計師對于同一需求都有自己理解的解決方案民镜，缺少統(tǒng)一規(guī)范的約束，難以達(dá)成共識险毁。

效率：設(shè)計效率低制圈，交互原型的維護(hù)成本及上下游團(tuán)隊的溝通成本高，易造成不專業(yè)的印象畔况。

品質(zhì)：認(rèn)知和效率的局限性鲸鹦，最終導(dǎo)致實施落地的產(chǎn)品質(zhì)量和用戶體驗難以得到保障。

二跷跪、解決

大家應(yīng)該都知道樂高（LEGO）積木馋嗜，它是一種可以互相嵌套組合的塑料積木，形狀共有1300多種吵瞻，每種形狀都有12種不同的顏色葛菇，可以拼插出多種造型。其實組件庫的工作方式就很像樂高橡羞，通過小元件的互相嵌套來產(chǎn)生多種組件或模塊眯停，多種組件模塊結(jié)合生成頁面結(jié)構(gòu)。

我們先來梳理一個概念卿泽，組件庫是什么莺债？

組件庫是設(shè)計系統(tǒng)的一部分，是在我們常規(guī)界面設(shè)計過程中可以直接用來制作交互圖例和搭建頁面的組件集合签夭，它可以作為單個組件獨立存在齐邦，也可以通過多個組件組合而成的結(jié)構(gòu)或模式來解決類似場景的設(shè)計問題。組件庫是在約束條件下去構(gòu)建解決方案的過程第租，所以組件的使用也需遵循一定的規(guī)范措拇，按照一套標(biāo)準(zhǔn)化的體系復(fù)用于多個業(yè)務(wù)場景。

一個有效的組件庫煌妈，可以幫助設(shè)計師和研發(fā)提高工作效率儡羔，提升設(shè)計專業(yè)度的同時讓產(chǎn)品本身的體驗更加一致宣羊、可學(xué)，品牌感更強汰蜘，它所具備的基本特征一定是通用的仇冯、靈活的、復(fù)用的族操。

通用性：意味著足夠基礎(chǔ)和常見且不帶業(yè)務(wù)屬性苛坚，參與設(shè)計環(huán)節(jié)的每個人都應(yīng)該知道這個組件的功能及目的，同時具備一定擴(kuò)展性色难。

靈活性：是要求元件的組合需靈活泼舱，可以在不同場景下可以通過互相組合來快速搭建交互框架原型圖，并根據(jù)不同頁面結(jié)構(gòu)的演變來適應(yīng)新的業(yè)務(wù)需求枷莉。

復(fù)用性：指的是適用于多個業(yè)務(wù)或產(chǎn)品娇昙，在設(shè)計過程和研發(fā)過程中都可以高頻復(fù)用。

那么用組件庫這種標(biāo)準(zhǔn)化體系來完成設(shè)計方案時笤妙，到底能帶來怎樣的價值冒掌？

三、組件庫的價值

保證產(chǎn)品體驗的一致性：對于一個含有多業(yè)務(wù)系統(tǒng)的大型復(fù)雜產(chǎn)品蹲盘，每個獨立的業(yè)務(wù)系統(tǒng)雖然在功能上有一定區(qū)別股毫，但整體的用戶體驗需要滿足基本的一致性。比如：當(dāng)我使用同一個產(chǎn)品中的業(yè)務(wù)系統(tǒng)A和業(yè)務(wù)系統(tǒng)B時召衔，我能通過類似的頁面結(jié)構(gòu)铃诬、組件及樣式的一致性、操作反饋乃至提示文案結(jié)構(gòu)的一致性苍凛，來感知到我使用的A趣席、B業(yè)務(wù)系統(tǒng)隸屬于同一個產(chǎn)品。

提升設(shè)計師的效率：在需求量巨大且需求來自不同的業(yè)務(wù)線時毫深，需要逐一繪制頁面及組件吩坝，造成大量重復(fù)勞動，并且在評審及需求溝通環(huán)節(jié)還可能存在不斷地細(xì)節(jié)調(diào)優(yōu)哑蔫，所以對于設(shè)計師而言钉寝，組件的高頻復(fù)用能大大提升設(shè)計效率，使設(shè)計師更多的將精力聚焦于理解和解決用戶的實際問題闸迷。

提升產(chǎn)研團(tuán)隊的效率：通用場景及普通需求直接按規(guī)范進(jìn)行設(shè)計和研發(fā)嵌纲，減少上下游對同一頁面及組件使用方式的不同理解而產(chǎn)生的多余溝通成本。

利于沉淀設(shè)計規(guī)范：組件本身的設(shè)計和使用方式就可以直接作為交互和視覺規(guī)范的一部分腥沽，按照統(tǒng)一的設(shè)計規(guī)范來確定需要使用的主題色逮走、組件樣式、組合方式及頁面結(jié)構(gòu)今阳，可以快速搭建出一個或多個產(chǎn)品的交互框架师溅。

那么我們開始介紹如何構(gòu)建一個企業(yè)級UI組件庫茅信。

四、構(gòu)建「FishDesign」企業(yè)級UI組件庫

下文我將用前段時間參與的「FishDesign企業(yè)級UI組件庫」項目為例墓臭，通過在網(wǎng)易七魚產(chǎn)品中的應(yīng)用蘸鲸，來介紹一個企業(yè)級UI組件庫的設(shè)計原則，內(nèi)容構(gòu)成包含哪些類型和元素窿锉，每種組件類型在分類和設(shè)計過程中是如何考量的酌摇。本文側(cè)重講述構(gòu)建一個組件庫所涵蓋的內(nèi)容，而不是某組件類別本身的設(shè)計方法嗡载。

顧名思義，“企業(yè)級”意味著FishDesign所服務(wù)的業(yè)務(wù)都是具備一定體量的，可能是服務(wù)一個包含了多個獨立子業(yè)務(wù)系統(tǒng)的大型復(fù)雜產(chǎn)品耿芹，比如網(wǎng)易七魚迹炼；也可能是同時服務(wù)多款產(chǎn)品，比如網(wǎng)易七魚和網(wǎng)易定位等刻两。

組件庫是幫助設(shè)計者及前端工程師快速構(gòu)建業(yè)務(wù)系統(tǒng)的工具，除了最重要的組件內(nèi)容户誓，還需要設(shè)計原則、配色方案及布局規(guī)范來指導(dǎo)具體業(yè)務(wù)產(chǎn)品的設(shè)計有效落地庇忌。

1. 設(shè)計原則

基于FishDesign目前主要是幫助搭建B端企業(yè)級產(chǎn)品，而B端業(yè)務(wù)的產(chǎn)品目的決定了它所才采取的設(shè)計模式，所以我們將用以下四點作為塑造組件庫的設(shè)計原則：

簡潔：如無必要掖疮，勿增實體恼布，慎重篩選客戶當(dāng)前需要信息內(nèi)容。

直接：提供用戶操作后的直接反饋爽待，保證用戶的操作結(jié)果符合預(yù)期。

優(yōu)雅：設(shè)計方案追求優(yōu)雅，給使用者有質(zhì)感的操作感受处渣。

適應(yīng)性：設(shè)計方案需提供可擴(kuò)展能力及適應(yīng)性，以適應(yīng)不同模式的企業(yè)使用。

2. 顏色

產(chǎn)品會根據(jù)自身的產(chǎn)品目標(biāo)和受眾群體去選定產(chǎn)品的配色方案浅妆。前文提到辩尊，一個有效的組件庫需滿足通用性、靈活性、復(fù)用性按咒，像配色方案就應(yīng)該能被靈活自定義來應(yīng)對多樣化的訴求智袭。以網(wǎng)易七魚為例（下文均以網(wǎng)易七魚為例）剿另，設(shè)置了1種主色氛堕，4種輔助色和6種中性色來搭建一致的外觀感受野蝇。

主色：選擇藍(lán)色系來傳達(dá)智能服務(wù)讼稚、信任可靠、技術(shù)創(chuàng)新的品牌形象绕沈。

輔助色：除了品牌主色調(diào)藍(lán)色锐想，在輔助色中也存在一樣的藍(lán)色，那是因為藍(lán)色是相對泛用性較廣的色系乍狐，用于產(chǎn)品中的主操作按鈕赠摇、文字按鈕或icon等；紅色喚起注意并昭示危險，所以一般用于謹(jǐn)慎操作及錯誤提示藕帜；黃色則常用于警示信息烫罩，提示用戶操作可能帶來的風(fēng)險及后果；綠色能傳遞安全和健康的情緒感受洽故，用于正向反饋提示或成功操作的引導(dǎo)贝攒。

中性色：一般采取黑灰色調(diào)來展示產(chǎn)品的文本信息、背景和邊框色时甚，用來表現(xiàn)層次結(jié)構(gòu)隘弊。

3. 布局規(guī)范

為處理多業(yè)務(wù)中網(wǎng)頁設(shè)計區(qū)域內(nèi)的信息收納問題，我們用規(guī)則的網(wǎng)格陣列來指導(dǎo)和規(guī)范版面布局以及信息分布荒适，即柵格系統(tǒng)和頁面布局长捧。FishDesign在12柵格系統(tǒng)的基礎(chǔ)上，將整個設(shè)計區(qū)域按照24等分的原則進(jìn)行劃分吻贿，來增加頁面的相似度串结，提升用戶體驗。

我們通過基本的配色及布局規(guī)范解決了產(chǎn)品風(fēng)格及信息區(qū)塊框架的設(shè)計舅列，那組件庫中重要的組件部分肌割，是如何作用于產(chǎn)品搭建的？

Brad Frost提出的「原子化設(shè)計理論」可以幫助我們更好的理解帐要，原子化設(shè)計的靈感來自于現(xiàn)實世界當(dāng)中的分子結(jié)構(gòu)把敞，UI中顆粒度最小的元素，即“原子”榨惠，組成了顆粒度較大的元件奋早，即“分子”，而諸多分子又組成了更加復(fù)雜的組件與模塊赠橙，即“有機體”耽装。

組件庫構(gòu)建之初無法一應(yīng)俱全，是需要后續(xù)不斷的維護(hù)與迭代的期揪。如何在最初海量組件中圈定適合的組件范圍呢掉奄？最合適的切入點就是從身邊的業(yè)務(wù)場景出發(fā)，從最基本凤薛、最簡單姓建、最小的元素入手。

4. 組件分類

我們根據(jù)當(dāng)下已有的業(yè)務(wù)場景和對往后一段時期的業(yè)務(wù)發(fā)展方向進(jìn)行規(guī)劃缤苫，將組件庫的組件類型分為通用組件和業(yè)務(wù)組件速兔。一般業(yè)務(wù)組件庫是不對外的（畢竟使用場景特殊也有限，放出來參考意義不大）活玲，所以在FishDesign官網(wǎng)只能看到通用組件部分涣狗。

通用組件：指適用范圍廣谍婉、復(fù)用頻次高，可復(fù)用于多個業(yè)務(wù)且不包含業(yè)務(wù)邏輯屑柔。比如導(dǎo)航欄屡萤、按鈕、toast掸宛、彈窗等死陆。

業(yè)務(wù)組件：這類組件對比通用組件而言最大的特點就是包含了較多業(yè)務(wù)屬性，跟產(chǎn)品功能有較強的關(guān)聯(lián)性唧瘾，所以影響到適用范圍可能僅限于于1~2個業(yè)務(wù)系統(tǒng)或特殊場景措译，且復(fù)用頻次不高。比如網(wǎng)易七魚的在線和呼叫系統(tǒng)中的咨詢分類組件饰序。

一個大型復(fù)雜的業(yè)務(wù)產(chǎn)品通常有不止一位設(shè)計師或前端工程師參與設(shè)計领虹，需要在多種處理方式中選擇合適的設(shè)計模式來解決不同的場景問題，這要求根據(jù)組件屬性的差異求豫，需對通用組件做細(xì)分塌衰，那么如何確定通用組件中的子分類呢？

競品學(xué)習(xí)與研究蝠嘉，窮舉該部分產(chǎn)品類型中的組件類型最疆。

遍歷自己所負(fù)責(zé)產(chǎn)品內(nèi)已有的業(yè)務(wù)場景，提取并整理業(yè)務(wù)場景中所用到的組件蚤告。

將整理好的兩部分組件進(jìn)行篩選去重努酸，保留高頻通用的部分。比如：同樣是下拉篩選組件杜恰，由于缺少統(tǒng)一規(guī)范和組件获诈，可能導(dǎo)致的后果就是在同一產(chǎn)品不同業(yè)務(wù)系統(tǒng)的相同場景下，使用的組件從樣式到交互方式都不一致心褐。我們要做的就是對這部分在類似業(yè)務(wù)場景中舔涎，使用了多種表達(dá)形式的組件做合并去重，然后通過設(shè)計組內(nèi)審來圈定最后通用組件的范圍檬寂。

基于組件的屬性和使用場景终抽，對圈定的組件范圍進(jìn)行歸類。

由上述步驟桶至，我們將通用組件繼續(xù)細(xì)分為五個子類別：基礎(chǔ)組件、導(dǎo)航匾旭、數(shù)據(jù)錄入镣屹、數(shù)據(jù)展示、操作反饋价涝。

基礎(chǔ)組件：即按鈕女蜈、圖標(biāo)等，相較于其他組件的使用場景更通用，或其他組件在實現(xiàn)時依賴了這些組件來實現(xiàn)的組件類別伪窖。

導(dǎo)航：即導(dǎo)航菜單逸寓、標(biāo)簽、面包屑等覆山，可以幫助用戶產(chǎn)品系統(tǒng)內(nèi)快速找到所在頁面層級或位置的組件類別竹伸。

數(shù)據(jù)錄入：即輸入框、選擇器簇宽、表單等勋篓，支持用戶將數(shù)據(jù)信息錄入到系統(tǒng)的組件類別。

數(shù)據(jù)展示：即圖表魏割、表格譬嚣、氣泡卡片等，將錄入到系統(tǒng)的數(shù)據(jù)信息多樣化展示出來的組件類別钞它。

操作反饋：即對話框拜银、警告提示(Alert)、全局提示(Toast)等遭垛，在用戶操作前后尼桶，使系統(tǒng)狀態(tài)得以合理反饋的組件類別。

五耻卡、用組件庫設(shè)計「網(wǎng)易七魚」示例

以網(wǎng)易七魚為例看下有組件庫參與搭建的設(shè)計示例疯汁，以下頁面中所用組件均出自FishDesign組件庫。

「導(dǎo)航組件」使用示例：

「表格組件」使用示例：

「彈窗組件」使用示例：

「步驟組件」使用示例：

寫在最后

組件庫最大的價值在于提升整個團(tuán)隊的產(chǎn)研效率卵酪，使設(shè)計質(zhì)量得以保障的同時提升產(chǎn)品整體的用戶體驗幌蚊。

我們對構(gòu)建企業(yè)級UI組件庫的步驟及要素做個簡單回顧：

首先，明確組件庫所需解決的問題及存在的價值溃卡，這決定組件庫的體量和服務(wù)范圍是什么溢豆，以及構(gòu)建的時機是否合適。

其次瘸羡，通過競品分析并結(jié)合身邊最熟悉或深耕的業(yè)務(wù)入手漩仙，通過產(chǎn)品目的來選擇設(shè)計模式，從最小元素開始逐步整理犹赖，包括產(chǎn)品配色方案和柵格系統(tǒng)等布局規(guī)范队他。

再者，需要對組件庫的重要組成部分“組件”峻村，進(jìn)行圈定及合理分類麸折。這里需要注意的是，組件范圍的圈定粘昨，尤其在組件庫搭建的初級階段并不是越多越好垢啼，而是需要有效的覆蓋那些經(jīng)過規(guī)劃的業(yè)務(wù)場景即可窜锯。

最后，組件庫并不是構(gòu)建完就結(jié)束了芭析，是需要在后續(xù)項目中逐步維護(hù)與更新的長期積累過程锚扎。

任何組件庫的構(gòu)建都離不開一個優(yōu)秀的團(tuán)隊在整個設(shè)計過程中的高效協(xié)同，十分感謝參與的設(shè)計師與前端工程師們馁启。上文僅是個人參與過程中的一些經(jīng)驗總結(jié)驾孔，還不夠全面，同時篇幅有限进统，關(guān)于組件的具體設(shè)計考量無法一次詳盡助币，歡迎一起討論組件庫及標(biāo)準(zhǔn)化設(shè)計體系相關(guān)的更多內(nèi)容。

作者：劉瑩瑩螟碎，網(wǎng)易uedc交互設(shè)計師眉菱，主要負(fù)責(zé)企業(yè)級B端SaaS產(chǎn)品的交互設(shè)計，對組件庫等標(biāo)準(zhǔn)化設(shè)計體系及產(chǎn)品信息架構(gòu)設(shè)計均有實戰(zhàn)經(jīng)驗掉分，注重商業(yè)價值與用戶價值的平衡俭缓。

微信公眾號：網(wǎng)易UEDC