SaaS产品中的组件化产品设计

honghu2

SaaS产物中的组件化产物设计

编纂导语：SaaS，是比年来比力火的一个话题，很多企业都在SaaS这条赛道上开展了剧烈的比赛，此中不乏有巨擘们的身影。客岁，腾讯更是提出要用100亿资本，帮忙中小企业打造专属的SaaS产物及解决方案。本文作者环抱SaaS开展阐发，看看SaaS产物中的组件化产物应当若何设计。

SaaS产物的租户可能来自各行各业，分歧行业的租户对页面的请求是分歧的，可是SaaS产物没法为每一个租户定制分歧的产物，这就对请求界面或功效是要可设置装备摆设的，租户可以按照本身的需求来选用分歧的组件，从而构成分歧的展现情势。
1、定制化开辟带来的问题
定制化开辟是说，按照客户的需求，量身订制一系列合适客户现实利用的功效。在SaaS产物中碰到定制化开辟的需求不成防止，由于SaaS产物的租户来自各行各业，基于分歧的营业需求，租户必要建造出分歧样式的页面展现给C端用户。

若租户每提一个需求，SaaS产物就对应开辟一个新功效新页面，这实在就是定制化开辟，但若如许做会带来一些问题。

定制化开辟使得页面没有复用性，为租户A开辟的页面没法知足租户B的需求，每个新页面都必要从新开辟。技能反复开辟雷同的页面，会损耗大量的时候，致使事情效力低下。

定制化开辟会致使营业低速运转，从而限定营业扩大。因为每一个页面所必须的开辟周期，致使租户的需求不克不及快速相应，使得全部事情流程的运转是低速的。

这类低速的流程，给租户带来了欠好的体验，还影响自己的营业扩大到其他更多的商家。在如许的布景下，咱们提出组件化的产物设计，让展现给C端用户的页面是可设置装备摆设的。

组件的分歧，给每一个页面的展现元素和样式带来了多样性，可设置装备摆设的操作方法提高了效力。
2、组件化产物设计若何解决问题1. 组件化产物设计的先容-原子设计理论
在天然界中，原子连系在一块儿形成为了份子，这些份子还可以进一步连系构成更加繁杂的有机体。和宇宙中的物资可以被分化成原子同样，页面也是由一些根基的元素构成的。

Brad Frost在《原子设计法子论》中提出了原子设计的观点，列出了5个层级作为原子设计的焦点。
原子：原子层是单一可事情的原子组件，比方一个按钮，一个图标；份子层：份子层是由1-3个分歧的原子构成的功效组件，比方下拉菜单，面包屑导航；有机体：有机体由多个份子构成，比方信息表单；模板：模板由利用于结构的有机体和份子构成，是页面的骨骼体系；页面：页面是模板的详细实例，把文本、图象等填充到模板中，以显示现实的内容。
来看下面这个页面若何做组件化的产物设计：这是一个小我中间页面，在这个页面中，动静图标就是原子，像“待付款”、“待收货”如许的菜单是份子，由“待付款”、“待收货”、”待评价”、”全数定单”构成的一个区域，暂且称作“我的定单”，就是一个有机体。



组件化产物设计，就是在做页面的产物设计时，要斟酌是不是可以将页面抽象成模板，将模板拆分成原子、份子或有机体，原子、份子、有机体都是分歧颗粒度的组件。

如许，当必要设置装备摆设另外一个雷同的页面时，便可以经由过程拔取组件构成模板，填充模板内容构成页面。在上面的案例中，组件化设计时，必要把小我中间这个详细页面抽象成一个模板页面，再把这个模板拆分成组件。

若组件的颗粒度为有机体，那末这里的组件就是根基信息（包含头像、用户名、动静图标、我的已购、优惠券、我的保藏、我的账户）、我的定单（包含待付款、待收货、待评价、全数定单）、进修中间、进修东西。

假如不少租户都必要一个如许的小我中间页面，那末租户可以按照本身的需求，选用小我中间页面的模板，再在该模板中设置装备摆设各个组件，并选择展现的页面样式，图标气概和菜单展现。

如许组件化的设计包管了页面可设置装备摆设，也就无需为租户零丁开辟新页面。
2. 组件化设计解决的问题
1) 提高复用性

复用性中的复用又叫重用，是反复利用的意思。

SaaS产物必要为多家租户供给办事，而每家对某些雷同功效的需求都有多是有差此外，这类需求的不同就请求要做定制化开辟，也就是说每一个租户提出的每一个页面需求，都必要零快猫视频丁为其开辟。

为某个租户定制开辟的页面功效没法知足其他租户的需求，页面就没有复用性了。页面没有复用性致使后续需求又要定制开辟，自此堕入恶性轮回。

组件化的产物设计解决了定制化开辟致使的页面无复用性问题：一类页面只用开辟一个模板和多个组件，因为页面的可设置装备摆设，虽然分歧的租户需求分歧，但仍然可以经由过程选用分歧的组件来构成知足个性化需求的页面，包管了组件及模板的反复操纵。

2) 提高效力

每一个页面定制开辟的做法会致使效力低下。从开辟的角度，技能职员必要反复编写雷同页面的代码，致使事情反复；从营业的角度来讲，租户每提一个需求，都有期待开辟的时候周期，久而久之，就会限定营业的扩大。

组件化的产物设计，让开辟只用去丰硕页面的模板和组件，而每一个租户也能经由过程设置装备摆设组件来自界说本身的页面，省去了期待开辟才能上线的时候周期，这也便利产物能在短期内扩大营业。

3) 规范C端展现的样式

样式规小蓝视频范是可视化数据化的一些视觉遵照条目，从宏观的角度看是一种抽象的感觉，好比在淘宝打开任何一个页面，不会有进入京东的错觉，比方Material Design是一种常见的设计规范。

组件化设计能规范C端展现样式，由于在设计组件时设计师已规范好了样式，不管租户选用哪一个组件怎样设置装备摆设，全部页面的气概都是同一的。

比方：一个填写文本的组件，假如没有组件化设计，租户有可能随便编纂，致使字色字号等与其他组件中的气概不同一，从而使得页面视觉结果很差。

公家号吴晓波频道，在利用SaaS产物小鹅通以后，设置装备摆设好的页面是要向C端用户展现的，和某些电商小步伐是经由过程利用有赞的办事，将页面显现给C端买家主顾。以下图所示，该小我中间页面，就是在小鹅通中设置装备摆设好内容后展现给用户的。



咱们看到，“进修东西”、“推行中间”等固然是分歧的组件菜单，可是都由图标、案牍构成，此中的图标气概、字体字号等也都同一。这也就是选用的组件的样式决议了终极页面的展现样式，因为组件样式已规范，就不消担忧租户的随便设置装备摆设致使页面气概不规范。
3、组件化产物设计与利用1. 组件构成模板
在修建行业中，模板是让混凝土布局成形的模具，他包管了各种构件的外形尺寸正确，装拆便利能能屡次利用。

在SaaS产物中也有模板的观点，模板是让页面成形的东西，而且可以屡次利用。模板是设计方案的固定格局，他将一个事物的布局予以固定化、尺度化的功效。

按照营业场景选择符合的组件可以组合成对应的模板，将组件构成模板的益处是，不但让设置装备摆设的流程更清楚，还因模板能屡次利用而提高了使命设置装备摆设的效力，并包管了尺度化。

若是没有模板，每次使命设置装备摆设的流程是选择组件、设置装备摆设组件的参数、填充本次使命的内容；若是有了模板，设置装备摆设的流程就是选用模板、填充内容。构成模板会使得每次设置装备摆设时，聚焦到内容自己，而非组件的选择和参数设置装备摆设。

因为已组合好模板，后续雷同使命时用同样的模板只用填充分歧的内容便可，省去了组合组件的事情。此外因为使命雷同，模板不异，包管了雷同使命的尺度化和同一性。
2. 设置装备摆设进程中所见即所得
设置装备摆设进程中所见即所得是说，在编纂设置装备摆设页面时，能及时预览组件的终极显现结果。如许做是为了提高设置装备摆设进程的直观性，低落租户的进修设置装备摆设本钱。

常见的设计方法是预览图与编纂区连系的方法，比方下图的小鹅通，在右边的编纂区域编纂的进程，可以及时预览在H5页面的显现结果，提高了页面设置装备摆设时的结果和直观性。



固然为了表现直观性，其实不必定必要让编纂区域彻底和预览试图同样，也能够像下图如许在右边放上示用意，只要让用户在操作时，晓得本身设置装备摆设的内容在C端展现的位置便可。


4、总结
定制化开辟使得页面没有复用性，并致使营业低速运转，从而限定营业扩大。在如许的布景下，咱们提出组件化的产物设计。组件化设计提高复用性和效力，还能规范C端展现的样式。

在设计进程中，咱们为了包管流程清楚、高效和尺度化，经常将组件组合成模板；为了提高设置装备摆设的直观性，咱们要让设置装备摆设进程是所见即所得的。

本文由 @相与 原创公布于人人都是产物司理。未经允许，制止转载

题图来自Unsplash，基于CC0协定