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

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

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

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

一、確定組件化的目標

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

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

其次，組件化可以降低維護成本。當有新需求的時候，需要修改或優(yōu)化某個功能時，只需要修改對應(yīng)的組件或補充一個，而不必遍布整個系統(tǒng)進行修改，大大簡化了維護工作。

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

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

1. 理解實操用戶和使用場景：分析需求場景和用戶行為習慣

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

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

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

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

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

之后因為業(yè)務(wù)擴展，考慮組件的可延展性。

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

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

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

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

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

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

5. 遵循一致的設(shè)計原則和風格

設(shè)計 B 端組件庫時，需要確保組件的一致性和統(tǒng)一性。通過遵循一致的設(shè)計原則和風格指南來實現(xiàn)。

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

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

6. 考慮可擴展性和定制性

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

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

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

7. 注重用戶體驗：用起來要順手

用戶體驗是至關(guān)重要的考慮因素。確保組件庫的界面和功能對用戶來說是易于理解和操作的。不需要視覺、操作的干擾項。

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

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

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

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

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