學(xué)之所用方能有成效，只學(xué)不用還會(huì)忘記。

還記得當(dāng)初寫作的初衷是為了分享我的工作思路和經(jīng)驗(yàn)。在創(chuàng)作內(nèi)容的過(guò)程中，我希望能夠?qū)⒚看蔚乃伎歼^(guò)程更系統(tǒng)地呈現(xiàn)出來(lái)。然而，不可否認(rèn)的是，這種方式存在一個(gè)缺點(diǎn)，那就是容易碎片化，我開(kāi)始停下來(lái)思考一個(gè)問(wèn)題：每篇文章雖然針對(duì)一個(gè)具體內(nèi)容進(jìn)行總結(jié)，但是讀者在閱讀完之后，能從中得到多少實(shí)際應(yīng)用的內(nèi)容？或者說(shuō)，花上十幾分鐘閱讀，對(duì)讀者的工作是否有幫助？

實(shí)際上，真正有幫助的還是自己對(duì)業(yè)務(wù)的了解和需求的把握。正是通過(guò)深入了解業(yè)務(wù)并了解需求，我才逐漸形成了對(duì) B 端業(yè)務(wù)設(shè)計(jì)的結(jié)構(gòu)化思路框架。但是，我也意識(shí)到了，在文章與文章之間的結(jié)構(gòu)化聯(lián)系上存在一些斷裂。

這一篇文章希望以一種統(tǒng)籌的思路，將 B 端設(shè)計(jì)組件化的過(guò)程進(jìn)行整合。（文末有思維腦圖）

一、確定組件化的目標(biāo)

B 端組件化的目標(biāo)是指明確為什么要進(jìn)行組件化（業(yè)務(wù)的規(guī)模和廣度），以及期望實(shí)現(xiàn)的目標(biāo)，還有就是支撐建立組件庫(kù)的客觀因素，資源（項(xiàng)目資源、開(kāi)發(fā)資源、設(shè)計(jì)資源），時(shí)間成本。

首先，組件化可以提高開(kāi)發(fā)效率。通過(guò)將常用的功能模塊和組件進(jìn)行抽取和組裝，設(shè)計(jì)可以在不用重復(fù)畫頁(yè)面的情況下快速構(gòu)建場(chǎng)景頁(yè)面，開(kāi)發(fā)人員也可以在不重復(fù)編寫代碼的情況下，快速構(gòu)建具有一致性和穩(wěn)定性的業(yè)務(wù)系統(tǒng)。

其次，組件化可以降低維護(hù)成本。當(dāng)有新需求的時(shí)候，需要修改或優(yōu)化某個(gè)功能時(shí)，只需要修改對(duì)應(yīng)的組件或補(bǔ)充一個(gè)，而不必遍布整個(gè)系統(tǒng)進(jìn)行修改，大大簡(jiǎn)化了維護(hù)工作。

此外，組件化還可以促進(jìn)團(tuán)隊(duì)協(xié)作，設(shè)計(jì)、產(chǎn)品、開(kāi)發(fā)，使不同開(kāi)發(fā)人員之間更容易理解和使用彼此的代碼，提高開(kāi)發(fā)效率和協(xié)作效果。

二、組件化統(tǒng)籌思路

1. 理解實(shí)操用戶和使用場(chǎng)景：分析需求場(chǎng)景和用戶行為習(xí)慣

在參與 B 端組件庫(kù)的設(shè)計(jì)之前，首先需要深入理解項(xiàng)目的目標(biāo)用戶和業(yè)務(wù)方的使用場(chǎng)景。還包括對(duì) B 端用戶（醫(yī)務(wù)工作者）的需求、行為習(xí)慣、工作流程等進(jìn)行研究和分析。通過(guò)用戶研究和調(diào)研，設(shè)計(jì)師可以更好地把握用戶的真實(shí)需求，從而為他們提供符合實(shí)際情況的設(shè)計(jì)模式。

另外也還需要考慮 B 端用戶的專業(yè)背景、技能水平以及對(duì)工具和界面的要求。比如說(shuō)，醫(yī)務(wù)工作者在工作中需要頻繁使用的功能和組件，以及他們可能遇到的問(wèn)題（數(shù)據(jù)頁(yè)面加載、反饋的及時(shí)性）。這樣可以確保設(shè)計(jì)的組件庫(kù)能夠真正滿足用戶的需求，并提供高效、易用的界面。

2. 分析業(yè)務(wù)模塊和共享組件：參與實(shí)際業(yè)務(wù)

在 B 端組件化的規(guī)劃中，參與需求會(huì)、評(píng)審會(huì)等，與產(chǎn)品、開(kāi)發(fā)保持和諧的協(xié)作關(guān)系。對(duì)業(yè)務(wù)邏輯進(jìn)行深入了解，對(duì)現(xiàn)有的業(yè)務(wù)模塊進(jìn)行拆解分析，確定哪些模塊控件具有一定的復(fù)用性，并可以作為獨(dú)立的組件來(lái)開(kāi)發(fā)和維護(hù)的。羅列出相似或重復(fù)的功能模塊。

另外，還要區(qū)分出共享的基礎(chǔ)組件和工具組件，這些組件具有通用性，可以被多個(gè)模塊共享使用，如基礎(chǔ)樣式、表單輸入/驗(yàn)證組件、權(quán)限管理組件、圖表組件、彈窗組件、抽屜組件等。通過(guò)分析業(yè)務(wù)模塊和共享組件，來(lái)劃分組件模塊的范圍和邊界。

之后因?yàn)闃I(yè)務(wù)擴(kuò)展，考慮組件的可延展性。

3. 制定規(guī)范和標(biāo)準(zhǔn)：將業(yè)務(wù)拆分各個(gè)小模塊

為了確保組件化設(shè)計(jì)與開(kāi)發(fā)的一致性和高效性，需要制定規(guī)范和標(biāo)準(zhǔn)。規(guī)范里包括組件的命名規(guī)則、目錄結(jié)構(gòu)、甚至代碼風(fēng)格（開(kāi)發(fā)人員的重點(diǎn)）等方面的規(guī)范化要求。例如，對(duì)組件的命名也是同業(yè)務(wù)相結(jié)合，將業(yè)務(wù)拆分成各脈絡(luò)，應(yīng)該要簡(jiǎn)明清晰，符合本業(yè)務(wù)需求的命名規(guī)范；目錄結(jié)構(gòu)應(yīng)該清晰明確，便于組件的查找和管理；（開(kāi)發(fā)人員）代碼風(fēng)格應(yīng)該統(tǒng)一，使不同組件之間的代碼風(fēng)格保持一致。制定規(guī)范和標(biāo)準(zhǔn)可以提高團(tuán)隊(duì)開(kāi)發(fā)的效率和減少代碼的冗余。

4. 設(shè)計(jì)組件化架構(gòu)：組件劃分（參考大廠的組件化樣式）

組件化架構(gòu)的設(shè)計(jì)是 B 端組件化的基礎(chǔ)。在設(shè)計(jì)組件化架構(gòu)時(shí)，首先需要考慮組件的劃分和顆粒度。組件的劃分應(yīng)該基于功能獨(dú)立性和考慮復(fù)用性，使得組件之間的耦合度盡量低，便于開(kāi)發(fā)單獨(dú)開(kāi)發(fā)和維護(hù)。

再者，需要考慮組件之間的依賴程度。合理管理組件之間的依賴關(guān)系，可以降低組件之間的耦合度，提高平臺(tái)系統(tǒng)的可維護(hù)性和靈活性。同時(shí)，還要設(shè)計(jì)合適的通信方式，使組件之間可以進(jìn)行有效的數(shù)據(jù)交互和協(xié)作。通過(guò)合理的組件化架構(gòu)設(shè)計(jì)，可以提高系統(tǒng)的擴(kuò)展性和靈活性。

另外也還需要考慮 B 端用戶的專業(yè)背景、技能水平以及對(duì)工具和界面的要求。比如說(shuō)，醫(yī)務(wù)工作者在工作中需要頻繁使用的功能和組件，以及他們可能遇到的問(wèn)題（數(shù)據(jù)頁(yè)面加載、反饋的及時(shí)性）。這樣可以確保設(shè)計(jì)的組件庫(kù)能夠真正滿足用戶的需求，并提供高效、易用的界面。

5. 遵循一致的設(shè)計(jì)原則和風(fēng)格

設(shè)計(jì) B 端組件庫(kù)時(shí)，需要確保組件的一致性和統(tǒng)一性。通過(guò)遵循一致的設(shè)計(jì)原則和風(fēng)格指南來(lái)實(shí)現(xiàn)。

設(shè)計(jì)原則包括基礎(chǔ)規(guī)范，布局間距、顏色、字體大小、圖標(biāo)類型、按鈕等方面的統(tǒng)一規(guī)范。制定一套設(shè)計(jì)規(guī)范和標(biāo)準(zhǔn)，確保組件庫(kù)中的各個(gè)組件在視覺(jué)上保持一致，使用戶能夠輕松理解和使用。

風(fēng)格指南既包含設(shè)計(jì)風(fēng)格、風(fēng)格元素，也包含了交互規(guī)則等方面。比如說(shuō)，按鈕的多重狀態(tài)（默認(rèn)狀態(tài)、點(diǎn)擊狀態(tài)、反饋狀態(tài)），以小見(jiàn)大確定組件庫(kù)的整體風(fēng)格，并定義組件之間的聯(lián)動(dòng)交互規(guī)則，比如說(shuō)，查詢列表里，選中幾條數(shù)據(jù)，喚起「刪除」功能，以確保用戶在使用組件時(shí)具有一致的體驗(yàn)。

6. 考慮可擴(kuò)展性和定制性

隨著業(yè)務(wù)的擴(kuò)展，組件庫(kù)的設(shè)計(jì)需要考慮到不同甲方的需求。需要在原本的基礎(chǔ)上思考如何合理化的擴(kuò)展組件，以便甲方能夠根據(jù)自己的需求進(jìn)行定制和擴(kuò)展。

需要提供可靈活的組件配置選項(xiàng)和組件擴(kuò)展空間，允許甲方提出的具體需求進(jìn)行視覺(jué)樣式上和功能的調(diào)整。這樣可以滿足個(gè)性化需求，并為他們提供更靈活和定制化的體驗(yàn)。

另外，兼顧考慮組件之間的可組合性和可復(fù)用性。通過(guò)將組件拆分再組合為復(fù)合型的模塊，避免重復(fù)開(kāi)發(fā)，最大的可能提高組件共享。

7. 注重用戶體驗(yàn)：用起來(lái)要順手

用戶體驗(yàn)是至關(guān)重要的考慮因素。確保組件庫(kù)的界面和功能對(duì)用戶來(lái)說(shuō)是易于理解和操作的。不需要視覺(jué)、操作的干擾項(xiàng)。

簡(jiǎn)潔明了的布局、層級(jí)分明的操作按鈕、明確的導(dǎo)航路徑、相一致的交互方式等，提高組件庫(kù)的可用性。另外，用戶操作反饋、消息反饋、提示反饋也是提升用戶體驗(yàn)的重要途徑。通過(guò)收集這些反饋信息，進(jìn)而進(jìn)行相應(yīng)的優(yōu)化和改進(jìn)。

8. 跨平臺(tái)應(yīng)用：設(shè)備間的適配

最后一點(diǎn)是考慮跨平臺(tái)和多設(shè)備的適配性。這方面應(yīng)用的不多，但桌面端和手持平板端應(yīng)該要有兼容性的，設(shè)計(jì)師需要考慮這兩者之間的差異。比如說(shuō)，可以采用響應(yīng)式設(shè)計(jì)的原則，使組件能夠自適應(yīng)不同的屏幕尺寸和設(shè)備。

我希望在以后的文章中能夠更好地將不同主題的內(nèi)容進(jìn)行串聯(lián)，形成一個(gè)更為系統(tǒng)和連貫的知識(shí)體系。這樣讀者在閱讀完一篇文章后，能夠更容易地將其中的思路和方法應(yīng)用到實(shí)際工作中。我將更加注重文章之間的銜接，確保讀者在整個(gè)閱讀過(guò)程中能夠感受到一個(gè)更為完整和有價(jià)值的知識(shí)結(jié)構(gòu)。

作者：B端設(shè)計(jì)啊嗚