編輯導語：SaaS，是近年來比較火的一個話題，不少企業都在SaaS這條賽道上展開了激烈的角逐，其中不乏有巨頭們的身影。去年，騰訊更是提出要用100億資源，幫助中小企業打造專屬的SaaS産品及解決方案。本文作者圍繞SaaS展開分析，看看SaaS産品中的組件化産品應該如何設計。

SaaS産品的租戶可能來自各行各業，不同行業的租戶對頁面的要求是不同的，但是SaaS産品無法為每個租戶定制不同的産品，這就對要求界面或者功能是要可配置的，租戶可以根據自己的需求來選用不同的組件，從而形成不同的展示形式。

一、定制化開發帶來的問題

定制化開發是說，根據客戶的需求，量身訂制一系列符合客戶實際應用的功能。在SaaS産品中遇到定制化開發的需求不可避免，因為SaaS産品的租戶來自各行各業，基于不同的業務需求，租戶需要制作出不同樣式的頁面展示給C端用戶。

若租戶每提一個需求，SaaS産品就對應開發一個新功能新頁面，這其實就是定制化開發，但如果這樣做會帶來一些問題。

定制化開發使得頁面沒有複用性，為租戶A開發的頁面無法滿足租戶B的需求，每一個新頁面都需要重新開發。技術重複開發類似的頁面，會消耗大量的時間，導緻工作效率低下。

定制化開發會導緻業務低速運轉，從而限制業務擴展。由于每個頁面所必需的開發周期，導緻租戶的需求不能快速響應，使得整個工作流程的運轉是低速的。

這種低速的流程，給租戶帶來了不好的體驗，還影響本身的業務擴展到其他更多的商家。在這樣的背景下，我們提出組件化的産品設計，讓展示給C端用戶的頁面是可配置的。

組件的不同，給每個頁面的展示元素和樣式帶來了多樣性，可配置的操作方式提高了效率。

二、組件化産品設計如何解決問題

1. 組件化産品設計的介紹-原子設計理論

在自然界中，原子結合在一起形成了分子，這些分子還可以進一步結合形成更為複雜的有機體。和宇宙中的物質可以被分解成原子一樣，頁面也是由一些基本的元素組成的。

Brad Frost在《原子設計方法論》中提出了原子設計的概念，列出了5個層級作為原子設計的核心。

1. 原子：原子層是單一可工作的原子組件，例如一個按鈕，一個圖标；
2. 分子層：分子層是由1-3個不同的原子組成的功能組件，例如下拉菜單，面包屑導航；
3. 有機體：有機體由多個分子組成，例如信息表單；
4. 模闆：模闆由應用于布局的有機體和分子組成，是頁面的骨骼系統；
5. 頁面：頁面是模闆的具體實例，把文本、圖像等填充到模闆中，以顯示實際的内容。

來看下面這個頁面如何做組件化的産品設計：這是一個個人中心頁面，在這個頁面中，消息圖标就是原子，像“待付款”、“待收貨”這樣的菜單是分子，由“待付款”、“待收貨”、”待評價”、”全部訂單”組成的一個區域，暫且稱作“我的訂單”，就是一個有機體。

組件化産品設計，就是在做頁面的産品設計時，要考慮是否可以将頁面抽象成模闆，将模闆拆分成原子、分子或者有機體，原子、分子、有機體都是不同顆粒度的組件。

這樣，當需要配置另一個類似的頁面時，就可以通過選取組件形成模闆，填充模闆内容形成頁面。在上面的案例中，組件化設計時，需要把個人中心這個具體頁面抽象成一個模闆頁面，再把這個模闆拆分成組件。

若組件的顆粒度為有機體，那麼這裡的組件就是基本信息（包括頭像、用戶名、消息圖标、我的已購、優惠券、我的收藏、我的賬戶）、我的訂單（包括待付款、待收貨、待評價、全部訂單）、學習中心、學習工具。

假設很多租戶都需要一個這樣的個人中心頁面，那麼租戶可以根據自己的需求，選用個人中心頁面的模闆，再在該模闆中配置各個組件，并選擇展示的頁面樣式，圖标風格以及菜單展示。

這樣組件化的設計保證了頁面可配置，也就無需為租戶單獨開發新頁面。

2. 組件化設計解決的問題

1) 提高複用性

複用性中的複用又叫重用，是重複使用的意思。

SaaS産品需要為多家租戶提供服務，而每家對某些類似功能的需求都有可能是有差别的，這種需求的差别就要求要做定制化開發，也就是說每個租戶提出的每個頁面需求，都需要單獨為其開發。

為某個租戶定制開發的頁面功能無法滿足其他租戶的需求，頁面就沒有複用性了。頁面沒有複用性導緻後續需求又要定制開發，自此陷入惡性循環。

組件化的産品設計解決了定制化開發導緻的頁面無複用性問題：一類頁面隻用開發一個模闆和多個組件，由于頁面的可配置，盡管不同的租戶需求不同，但依然可以通過選用不同的組件來形成滿足個性化需求的頁面，保證了組件及模闆的重複利用。

2) 提高效率

每個頁面定制開發的做法會導緻效率低下。從開發的角度，技術人員需要重複編寫類似頁面的代碼，導緻工作重複；從業務的角度來說，租戶每提一個需求，都有等待開發的時間周期，長此以往，就會限制業務的擴展。

組件化的産品設計，讓開發隻用去豐富頁面的模闆和組件，而每個租戶也能通過配置組件來自定義自己的頁面，省去了等待開發才能上線的時間周期，這也方便産品能在短時間内擴展業務。

3) 規範C端展示的樣式

樣式規範是可視化數據化的一些視覺遵守條款，從宏觀的角度看是一種抽象的感受，比如在淘寶打開任何一個頁面，不會有進入京東的錯覺，例如Material Design是一種常見的設計規範。

組件化設計能規範C端展示樣式，因為在設計組件時設計師已規範好了樣式，無論租戶選用哪個組件怎麼配置，整個頁面的風格都是統一的。

例如：一個填寫文本的組件，假設沒有組件化設計，租戶有可能随意編輯，導緻字色字号等與其他組件中的風格不統一，從而使得頁面視覺效果很差。

公衆号吳曉波頻道，在使用SaaS産品小鵝通之後，配置好的頁面是要向C端用戶展示的，以及某些電商小程序是通過使用有贊的服務，将頁面呈現給C端買家顧客。如下圖所示，該個人中心頁面，就是在小鵝通中配置好内容後展示給用戶的。

我們看到，“學習工具”、“推廣中心”等雖然是不同的組件菜單，但是都由圖标、文案組成，其中的圖标風格、字體字号等也都統一。這也就是選用的組件的樣式決定了最終頁面的展示樣式，由于組件樣式已規範，就不用擔心租戶的随意配置導緻頁面風格不規範。

三、組件化産品設計與使用

1. 組件形成模闆

在建築行業中，模闆是讓混凝土結構成形的模具，他保證了各類構件的形狀尺寸準确，裝拆方便能能多次使用。

在SaaS産品中也有模闆的概念，模闆是讓頁面成形的工具，并且可以多次使用。模闆是設計方案的固定格式，他将一個事物的結構予以固定化、标準化的成果。

根據業務場景選擇合适的組件可以組合成對應的模闆，将組件形成模闆的好處是，不僅讓配置的流程更清晰，還因模闆能多次使用而提高了任務配置的效率，并保證了标準化。

如果沒有模闆，每次任務配置的流程是選擇組件、配置組件的參數、填充本次任務的内容；如果有了模闆，配置的流程就是選用模闆、填充内容。形成模闆會使得每次配置時，聚焦到内容本身，而非組件的選擇和參數配置。

由于已組合好模闆，後續類似任務時用一樣的模闆隻用填充不同的内容即可，省去了組合組件的工作。另外由于任務類似，模闆相同，保證了類似任務的标準化和統一性。

2. 配置過程中所見即所得

配置過程中所見即所得是說，在編輯配置頁面時，能實時預覽組件的最終呈現效果。這樣做是為了提高配置過程的直觀性，降低租戶的學習配置成本。

常見的設計方式是預覽圖與編輯區結合的方式，例如下圖的小鵝通，在右側的編輯區域編輯的過程，可以實時預覽在H5頁面的呈現效果，提高了頁面配置時的效果和直觀性。

當然為了體現直觀性，并不一定需要讓編輯區域完全和預覽試圖一樣，也可以像下圖這樣在右側放上示意圖，隻要讓用戶在操作時，知道自己配置的内容在C端展示的位置即可。

四、總結

定制化開發使得頁面沒有複用性，并導緻業務低速運轉，從而限制業務擴展。在這樣的背景下，我們提出組件化的産品設計。組件化設計提高複用性和效率，還能規範C端展示的樣式。

在設計過程中，我們為了保證流程清晰、高效和标準化，常常将組件組合成模闆；為了提高配置的直觀性，我們要讓配置過程是所見即所得的。

本文由 @相與 原創發布于人人都是産品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議

,