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协议