中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

一、定制化開發(fā)帶來的問題

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

若租戶每提一個需求，SaaS產(chǎn)品就對應(yīng)開發(fā)一個新功能新頁面，這其實就是定制化開發(fā)，但如果這樣做會帶來一些問題。

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

定制化開發(fā)會導(dǎo)致業(yè)務(wù)低速運轉(zhuǎn)，從而限制業(yè)務(wù)擴展。由于每個頁面所必需的開發(fā)周期，導(dǎo)致租戶的需求不能快速響應(yīng)，使得整個工作流程的運轉(zhuǎn)是低速的。

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

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

二、組件化產(chǎn)品設(shè)計如何解決問題

1. 組件化產(chǎn)品設(shè)計的介紹-原子設(shè)計理論

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

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

1. 原子：原子層是單一可工作的原子組件，例如一個按鈕，一個圖標(biāo)；
2. 分子層：分子層是由1-3個不同的原子組成的功能組件，例如下拉菜單，面包屑導(dǎo)航；
3. 有機體：有機體由多個分子組成，例如信息表單；
4. 模板：模板由應(yīng)用于布局的有機體和分子組成，是頁面的骨骼系統(tǒng)；
5. 頁面：頁面是模板的具體實例，把文本、圖像等填充到模板中，以顯示實際的內(nèi)容。

來看下面這個頁面如何做組件化的產(chǎn)品設(shè)計：這是一個個人中心頁面，在這個頁面中，消息圖標(biāo)就是原子，像“待付款”、“待收貨”這樣的菜單是分子，由“待付款”、“待收貨”、”待評價”、”全部訂單”組成的一個區(qū)域，暫且稱作“我的訂單”，就是一個有機體。

組件化產(chǎn)品設(shè)計，就是在做頁面的產(chǎn)品設(shè)計時，要考慮是否可以將頁面抽象成模板，將模板拆分成原子、分子或者有機體，原子、分子、有機體都是不同顆粒度的組件。

這樣，當(dāng)需要配置另一個類似的頁面時，就可以通過選取組件形成模板，填充模板內(nèi)容形成頁面。在上面的案例中，組件化設(shè)計時，需要把個人中心這個具體頁面抽象成一個模板頁面，再把這個模板拆分成組件。

若組件的顆粒度為有機體，那么這里的組件就是基本信息（包括頭像、用戶名、消息圖標(biāo)、我的已購、優(yōu)惠券、我的收藏、我的賬戶）、我的訂單（包括待付款、待收貨、待評價、全部訂單）、學(xué)習(xí)中心、學(xué)習(xí)工具。

假設(shè)很多租戶都需要一個這樣的個人中心頁面，那么租戶可以根據(jù)自己的需求，選用個人中心頁面的模板，再在該模板中配置各個組件，并選擇展示的頁面樣式，圖標(biāo)風(fēng)格以及菜單展示。

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

2. 組件化設(shè)計解決的問題

1) 提高復(fù)用性

復(fù)用性中的復(fù)用又叫重用，是重復(fù)使用的意思。

SaaS產(chǎn)品需要為多家租戶提供服務(wù)，而每家對某些類似功能的需求都有可能是有差別的，這種需求的差別就要求要做定制化開發(fā)，也就是說每個租戶提出的每個頁面需求，都需要單獨為其開發(fā)。

為某個租戶定制開發(fā)的頁面功能無法滿足其他租戶的需求，頁面就沒有復(fù)用性了。頁面沒有復(fù)用性導(dǎo)致后續(xù)需求又要定制開發(fā)，自此陷入惡性循環(huán)。

組件化的產(chǎn)品設(shè)計解決了定制化開發(fā)導(dǎo)致的頁面無復(fù)用性問題：一類頁面只用開發(fā)一個模板和多個組件，由于頁面的可配置，盡管不同的租戶需求不同，但依然可以通過選用不同的組件來形成滿足個性化需求的頁面，保證了組件及模板的重復(fù)利用。

2) 提高效率

每個頁面定制開發(fā)的做法會導(dǎo)致效率低下。從開發(fā)的角度，技術(shù)人員需要重復(fù)編寫類似頁面的代碼，導(dǎo)致工作重復(fù)；從業(yè)務(wù)的角度來說，租戶每提一個需求，都有等待開發(fā)的時間周期，長此以往，就會限制業(yè)務(wù)的擴展。

組件化的產(chǎn)品設(shè)計，讓開發(fā)只用去豐富頁面的模板和組件，而每個租戶也能通過配置組件來自定義自己的頁面，省去了等待開發(fā)才能上線的時間周期，這也方便產(chǎn)品能在短時間內(nèi)擴展業(yè)務(wù)。

3) 規(guī)范C端展示的樣式

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

組件化設(shè)計能規(guī)范C端展示樣式，因為在設(shè)計組件時設(shè)計師已規(guī)范好了樣式，無論租戶選用哪個組件怎么配置，整個頁面的風(fēng)格都是統(tǒng)一的。

例如：一個填寫文本的組件，假設(shè)沒有組件化設(shè)計，租戶有可能隨意編輯，導(dǎo)致字色字號等與其他組件中的風(fēng)格不統(tǒng)一，從而使得頁面視覺效果很差。

公眾號吳曉波頻道，在使用SaaS產(chǎn)品小鵝通之后，配置好的頁面是要向C端用戶展示的，以及某些電商小程序是通過使用有贊的服務(wù)，將頁面呈現(xiàn)給C端買家顧客。如下圖所示，該個人中心頁面，就是在小鵝通中配置好內(nèi)容后展示給用戶的。

我們看到，“學(xué)習(xí)工具”、“推廣中心”等雖然是不同的組件菜單，但是都由圖標(biāo)、文案組成，其中的圖標(biāo)風(fēng)格、字體字號等也都統(tǒng)一。這也就是選用的組件的樣式?jīng)Q定了最終頁面的展示樣式，由于組件樣式已規(guī)范，就不用擔(dān)心租戶的隨意配置導(dǎo)致頁面風(fēng)格不規(guī)范。

三、組件化產(chǎn)品設(shè)計與使用

1. 組件形成模板

在建筑行業(yè)中，模板是讓混凝土結(jié)構(gòu)成形的模具，他保證了各類構(gòu)件的形狀尺寸準(zhǔn)確，裝拆方便能能多次使用。

在SaaS產(chǎn)品中也有模板的概念，模板是讓頁面成形的工具，并且可以多次使用。模板是設(shè)計方案的固定格式，他將一個事物的結(jié)構(gòu)予以固定化、標(biāo)準(zhǔn)化的成果。

根據(jù)業(yè)務(wù)場景選擇合適的組件可以組合成對應(yīng)的模板，將組件形成模板的好處是，不僅讓配置的流程更清晰，還因模板能多次使用而提高了任務(wù)配置的效率，并保證了標(biāo)準(zhǔn)化。

如果沒有模板，每次任務(wù)配置的流程是選擇組件、配置組件的參數(shù)、填充本次任務(wù)的內(nèi)容；如果有了模板，配置的流程就是選用模板、填充內(nèi)容。形成模板會使得每次配置時，聚焦到內(nèi)容本身，而非組件的選擇和參數(shù)配置。

由于已組合好模板，后續(xù)類似任務(wù)時用一樣的模板只用填充不同的內(nèi)容即可，省去了組合組件的工作。另外由于任務(wù)類似，模板相同，保證了類似任務(wù)的標(biāo)準(zhǔn)化和統(tǒng)一性。

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

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

常見的設(shè)計方式是預(yù)覽圖與編輯區(qū)結(jié)合的方式，例如下圖的小鵝通，在右側(cè)的編輯區(qū)域編輯的過程，可以實時預(yù)覽在H5頁面的呈現(xiàn)效果，提高了頁面配置時的效果和直觀性。

當(dāng)然為了體現(xiàn)直觀性，并不一定需要讓編輯區(qū)域完全和預(yù)覽試圖一樣，也可以像下圖這樣在右側(cè)放上示意圖，只要讓用戶在操作時，知道自己配置的內(nèi)容在C端展示的位置即可。

四、總結(jié)

定制化開發(fā)使得頁面沒有復(fù)用性，并導(dǎo)致業(yè)務(wù)低速運轉(zhuǎn)，從而限制業(yè)務(wù)擴展。在這樣的背景下，我們提出組件化的產(chǎn)品設(shè)計。組件化設(shè)計提高復(fù)用性和效率，還能規(guī)范C端展示的樣式。

在設(shè)計過程中，我們?yōu)榱吮ＷC流程清晰、高效和標(biāo)準(zhǔn)化，常常將組件組合成模板；為了提高配置的直觀性，我們要讓配置過程是所見即所得的。

本文由 @相與 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議