編輯導語：SaaS，是近年來比較火的一個話題，不少企業都在SaaS這條賽道上展開了激烈的角逐，其中不乏有巨頭們的身影。去年，騰訊更是提出要用100億資源，幫助中小企業打造專屬的SaaS產品及解決方案。本文作者圍繞SaaS展開分析，看看SaaS產品中的組件化產品應該如何設計。
SaaS產品的租户可能來自各行各業，不同行業的租户對頁面的要求是不同的，但是SaaS產品無法為每個租户定製不同的產品，這就對要求界面或者功能是要可配置的，租户可以根據自己的需求來選用不同的組件，從而形成不同的展示形式。
一、定製化開發帶來的問題定製化開發是説，根據客户的需求，量身訂製一系列符合客户實際應用的功能。在SaaS產品中遇到定製化開發的需求不可避免，因為SaaS產品的租户來自各行各業，基於不同的業務需求，租户需要製作出不同樣式的頁面展示給C端用户。
若租户每提一個需求，SaaS產品就對應開發一個新功能新頁面，這其實就是定製化開發，但如果這樣做會帶來一些問題。
定製化開發使得頁面沒有複用性，為租户A開發的頁面無法滿足租户B的需求，每一個新頁面都需要重新開發。技術重複開發類似的頁面，會消耗大量的時間，導致工作效率低下。
定製化開發會導致業務低速運轉，從而限制業務擴展。由於每個頁面所必需的開發週期，導致租户的需求不能快速響應，使得整個工作流程的運轉是低速的。
這種低速的流程，給租户帶來了不好的體驗，還影響本身的業務擴展到其他更多的商家。在這樣的背景下，我們提出組件化的產品設計，讓展示給C端用户的頁面是可配置的。
組件的不同，給每個頁面的展示元素和樣式帶來了多樣性，可配置的操作方式提高了效率。
二、組件化產品設計如何解決問題1. 組件化產品設計的介紹-原子設計理論在自然界中，原子結合在一起形成了分子，這些分子還可以進一步結合形成更為複雜的有機體。和宇宙中的物質可以被分解成原子一樣，頁面也是由一些基本的元素組成的。
Brad Frost在《原子設計方法論》中提出了原子設計的概念，列出了5個層級作為原子設計的核心。
- 原子：原子層是單一可工作的原子組件，例如一個按鈕，一個圖標；
- 分子層：分子層是由1-3個不同的原子組成的功能組件，例如下拉菜單，麪包屑導航；
- 有機體：有機體由多個分子組成，例如信息表單；
- 模板：模板由應用於佈局的有機體和分子組成，是頁面的骨骼系統；
- 頁面：頁面是模板的具體實例，把文本、圖像等填充到模板中，以顯示實際的內容。
來看下面這個頁面如何做組件化的產品設計：這是一個個人中心頁面，在這個頁面中，消息圖標就是原子，像“待付款”、“待收貨”這樣的菜單是分子，由“待付款”、“待收貨”、”待評價”、”全部訂單”組成的一個區域，暫且稱作“我的訂單”，就是一個有機體。
組件化產品設計，就是在做頁面的產品設計時，要考慮是否可以將頁面抽象成模板，將模板拆分成原子、分子或者有機體，原子、分子、有機體都是不同顆粒度的組件。
這樣，當需要配置另一個類似的頁面時，就可以通過選取組件形成模板，填充模板內容形成頁面。在上面的案例中，組件化設計時，需要把個人中心這個具體頁面抽象成一個模板頁面，再把這個模板拆分成組件。
若組件的顆粒度為有機體，那麼這裏的組件就是基本信息（包括頭像、用户名、消息圖標、我的已購、優惠券、我的收藏、我的賬户）、我的訂單（包括待付款、待收貨、待評價、全部訂單）、學習中心、學習工具。
假設很多租户都需要一個這樣的個人中心頁面，那麼租户可以根據自己的需求，選用個人中心頁面的模板，再在該模板中配置各個組件，並選擇展示的頁面樣式，圖標風格以及菜單展示。
這樣組件化的設計保證了頁面可配置，也就無需為租户單獨開發新頁面。
2. 組件化設計解決的問題1) 提高複用性
複用性中的複用又叫重用，是重複使用的意思。
SaaS產品需要為多家租户提供服務，而每家對某些類似功能的需求都有可能是有差別的，這種需求的差別就要求要做定製化開發，也就是説每個租户提出的每個頁面需求，都需要單獨為其開發。
為某個租户定製開發的頁面功能無法滿足其他租户的需求，頁面就沒有複用性了。頁面沒有複用性導致後續需求又要定製開發，自此陷入惡性循環。
組件化的產品設計解決了定製化開發導致的頁面無複用性問題：一類頁面只用開發一個模板和多個組件，由於頁面的可配置，儘管不同的租户需求不同，但依然可以通過選用不同的組件來形成滿足個性化需求的頁面，保證了組件及模板的重複利用。
2) 提高效率
每個頁面定製開發的做法會導致效率低下。從開發的角度，技術人員需要重複編寫類似頁面的代碼，導致工作重複；從業務的角度來説，租户每提一個需求，都有等待開發的時間週期，長此以往，就會限制業務的擴展。
組件化的產品設計，讓開發只用去豐富頁面的模板和組件，而每個租户也能通過配置組件來自定義自己的頁面，省去了等待開發才能上線的時間週期，這也方便產品能在短時間內擴展業務。
3) 規範C端展示的樣式
樣式規範是可視化數據化的一些視覺遵守條款，從宏觀的角度看是一種抽象的感受，比如在淘寶打開任何一個頁面，不會有進入京東的錯覺，例如Material Design是一種常見的設計規範。
組件化設計能規範C端展示樣式，因為在設計組件時設計師已規範好了樣式，無論租户選用哪個組件怎麼配置，整個頁面的風格都是統一的。
例如：一個填寫文本的組件，假設沒有組件化設計，租户有可能隨意編輯，導致字色字號等與其他組件中的風格不統一，從而使得頁面視覺效果很差。
公眾號吳曉波頻道，在使用SaaS產品小鵝通之後，配置好的頁面是要向C端用户展示的，以及某些電商小程序是通過使用有讚的服務，將頁面呈現給C端買家顧客。如下圖所示，該個人中心頁面，就是在小鵝通中配置好內容後展示給用户的。
我們看到，“學習工具”、“推廣中心”等雖然是不同的組件菜單，但是都由圖標、文案組成，其中的圖標風格、字體字號等也都統一。這也就是選用的組件的樣式決定了最終頁面的展示樣式，由於組件樣式已規範，就不用擔心租户的隨意配置導致頁面風格不規範。
三、組件化產品設計與使用1. 組件形成模板在建築行業中，模板是讓混凝土結構成形的模具，他保證了各類構件的形狀尺寸準確，裝拆方便能能多次使用。
在SaaS產品中也有模板的概念，模板是讓頁面成形的工具，並且可以多次使用。模板是設計方案的固定格式，他將一個事物的結構予以固定化、標準化的成果。
根據業務場景選擇合適的組件可以組合成對應的模板，將組件形成模板的好處是，不僅讓配置的流程更清晰，還因模板能多次使用而提高了任務配置的效率，並保證了標準化。
如果沒有模板，每次任務配置的流程是選擇組件、配置組件的參數、填充本次任務的內容；如果有了模板，配置的流程就是選用模板、填充內容。形成模板會使得每次配置時，聚焦到內容本身，而非組件的選擇和參數配置。
由於已組合好模板，後續類似任務時用一樣的模板只用填充不同的內容即可，省去了組合組件的工作。另外由於任務類似，模板相同，保證了類似任務的標準化和統一性。
2. 配置過程中所見即所得配置過程中所見即所得是説，在編輯配置頁面時，能實時預覽組件的最終呈現效果。這樣做是為了提高配置過程的直觀性，降低租户的學習配置成本。
常見的設計方式是預覽圖與編輯區結合的方式，例如下圖的小鵝通，在右側的編輯區域編輯的過程，可以實時預覽在H5頁面的呈現效果，提高了頁面配置時的效果和直觀性。
當然為了體現直觀性，並不一定需要讓編輯區域完全和預覽試圖一樣，也可以像下圖這樣在右側放上示意圖，只要讓用户在操作時，知道自己配置的內容在C端展示的位置即可。
定製化開發使得頁面沒有複用性，並導致業務低速運轉，從而限制業務擴展。在這樣的背景下，我們提出組件化的產品設計。組件化設計提高複用性和效率，還能規範C端展示的樣式。
在設計過程中，我們為了保證流程清晰、高效和標準化，常常將組件組合成模板；為了提高配置的直觀性，我們要讓配置過程是所見即所得的。
本文由 @相與 原創發佈於人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基於CC0協議