看似稳定的网文市场格局忽然从2018年开始被一股新的“免费阅读”力量不断冲击，免费阅读是大趋势上的进步还是倒退各说纷纭，但当前已然成为了非常火热的红利战场。

目前已有米读、连尚、七猫等产品在前方狂割“韭菜”，阅文在后推出【飞读】杀进这片红海。如今互联网时代，企业间的斗争是对用户响应力的比拼，为了快速响应用户的需求，提升产品运营效能，飞读借助平台化的力量加速前行，平台化方式不仅体现了更高的设计价值，更是给整个研发团队的工作效率带来了质的改变。

结合飞读项目平台化的实践经验，和大家探讨下关于组件平台化的一些思考。

接下来你将了解

一、什么是组件平台化—视觉组件化的演进

二、飞读书城首页设计沉淀—组件平台化的推动和执行

一、什么是组件平台化—视觉组件化的演进

组件化思维是一个老生常谈的内容了，其指导的规范化、组件化一直是设计师所追崇的提升效率的工作方式。

我们的组件化工作通常止步于视觉组件化阶段，建立设计团队内的一套组件规范库，对内部效率带来了较大的提升。不过，在部门或项目组共同肩负KPI的生存环境下，其作用无可厚非，但的确不足以带动更高的产品运营效能，亦难以体现更高的设计价值。

而组件平台化则是联动全链路中各环节人员，将封装好的组件赋予平台化配置能力，通过可视化的平台工具在线上灵活搭配，用户端则会及时更新页面。

在亟需提升产品运营效能的背景下，建立平台化最重要的意义就是赋予产品更强的响应力，其既可快速响应用户的需求，也得以在个性设计表达和效率之间达到最优的平衡。

在实际推行之后，对项目团队的效率、设计团队的影响力、甚至企业的发展均带来了非常积极的影响。

对项目团队的效率来说

视觉组件化的工作方式虽然提升了设计阶段的一部分效率，但无法从根本上避免设计与开发对每次在前台页面上的任何需求改动、甚至是微小改动的支持。运营周期长、新内容触达不及时、重复性工作流程等问题依然存在着，低价值的琐碎的工作需求日积月累是对精力最大的损耗。

而平台化之后，大量的书城页面调整需求不再经过设计、开发等一系列流程，产品/运营可直接通过配置平台自由构建书城页面，完全解放了重复劳动。当需要新增或升级组件时，再进行组件库的补充工作。

对设计团队的影响力来说

设计团队在整个研发团队中形成了更大的影响范围。

过去视觉组件化工作所辐射的范围有限，尤其如对后台同学而言，与其无任何交集，对效率的提升毫无感知；在推行平台化阶段中，设计牵头理清书城结构，建立了一套合理执行的完全组件化的书城框架，有助于开发同学的代码架构更加清晰，更利于维护，节省开发成本；上线之后，配置及时生效的能力使得产品和设计同学更加专注于如何推荐更优、设计效果更优，运用数据的力量来科学推动迭代。

另外，从个人维度上讲，设计师从低价值的劳动中解放出来，投入到更有价值的工作中去。同时，平台化思维帮助设计师更加全局性地思考。

对企业来说

整个研发团队不仅加强了全链路协同合作能力和效率，还增强了全员对产品体验的关注——过去不关注体验的后台同学开始逆向推动更优的组件数据规则设定，同时提高了设计师的后端意识。

如此，当全员拧成一股绳时，高效的推动力则会愈发之强，更高的质量+更快的响应速度+更低的成本推动着一个企业飞速成长。

二、飞读书城首页设计沉淀—组件平台化的推动和执行

1、产品现状

①书城体验不足

飞读从0到1完成重新架构，V1.0版本呈现了一个非常简易的形态，书城首页基于的是千人千面的推荐策略，但由于结构缺乏扩展性，用户很难概览到丰富的业务场景。我们收到了较多如页面空洞、内容看上去不丰富等不良反馈。

②配置框架固化

目前，内容配置形式依据的是已设计好的数据填充位，在固定的位置中进行内容换新。反过来，运营的发挥始终会受限于这套固化的框架中。

在强调产品运营效能的背景下，使用传统固化的书城框架无疑受到了太多的限制，因此书城框架的搭建策略亟需变革。

2、确定设计目标

为满足多维度、高灵活度的业务需求，增强产品运营的线上效能，最终确定的设计目标为：

•  扩展性——提升书城结构的扩展性，承载多维度的推荐场景

•  多样性——丰富推荐栏目的样式，满足个性表达

•  开放性——采用更加开放自由的设计框架，将页面元素和内容最大程度地开放给后台

3、执行过程

在开始阶段，我们需要根据需求和现状问题对书城首页进行整体性的思考和设计优化；随后进入视觉组件化阶段，借助组件化思维，从亟需和未来可需的需求场景出发，拆解页面组件，化整为零；之后通过通用性和传达效率等多方面考量，进行提炼和归纳，并最终搭建出一套完全组件化的可执行的书城框架；组件平台化阶段即是将这套框架同步转化为平台工具。

①结合需求和设计目标进行书城首页整体设计

设计目标1：扩展性——提升书城结构的扩展性，承载多维度的推荐场景

解决：将书城结构横向扩展，可随着推荐场景的变化进行Tab的补充或缩减，助于用户快速概览书城丰富的资源。同时梳理出支持不同业务场景的页面形态——Activity常规页面/沉浸式页面、H5常规页面/沉浸式页面、专题集合页，来满足常规与重点运营。

设计目标2：多样性——丰富推荐栏目的样式，满足个性表达

解决：针对每个栏目类别进行了多种样式的填充，充分展现栏目多样性，不仅满足运营的灵活需要，同时也避免了一成不变的页面感受。

每种样式除从视觉角度考虑外，更多从功能意义及其所在位置与整个页面的关系的维度来考量，比如4种榜单样式：

•  通栏图样式最为轻量，不仅满足核心信息的传达，还可在Feed流中充当节奏断点以缓解疲劳感

•  横排3书封样式最为通用，也可充当节奏断点

•  1+4样式承载充分的信息量，转化表现较好，适用于重点榜单推荐栏目，且适合头、中、尾任何位置

•  (独家)横滑5书封样式带有更丰富的视觉细节，将适用于独家频道页，强化独家榜单的精品认知，提升独家页的品质氛围

②从需求场景出发，拆解页面组件，化整为零 

根据开放性目标，该如何设计出开放自由的书城框架呢？

这需要我们从需求出发对页面元素重新理解。根据需求场景和控件类别，首先将页面元素全部拆解，并梳理出导航组件、频道页栏目位/广告位组件及相关基础组件等。

梳理之后，将与产品需求场景紧密结合的元素完全开放给后台，最终书城的“硬装框架”变得极致简化，形成高度开放的书城框架。

③从通用性和效率出发，模板提炼

我们拆解出了大量组件，尤其是已完成大量扩充的栏目样式，在这一阶段需要从通用性和传达效率，以及体现差异表征的角度，进行模板提炼和归纳。

在整个过程中可以总结为4个提炼原则：

•  保证良好的传达效率：考察是否满足可供决策的核心信息的传达

•  保证良好的数据转化：根据以往设计和数据研究经验，去掉数据表现相对较低的样式

•  保持通用性和复用性：避免特殊样式，采用复用性更高的布局

•  体现栏目独有表征：抽取共性，并体现差异性表征

仍以榜单Card来举例： 

•  通过以往数据对比，通栏图样式相比其它在点击转化上的表现仍存在差距，以及其与横排3书封样式均具备节奏断点的作用，最终被pass

•  (独家)横滑5书封的布局相比之前更加通用

•  1+4和横排3书封样式均在通用的布局基础上体现了人们对榜单的心理表征

 

④统一多方口径，搭建一套完全组件化的可执行的书城框架

统一口径是整个过程中非常关键的一步，数十个组件如何划分类别、哪些组件受制于人工配置、哪些受制于自动算法、哪些仅封装于客户端、每个组件的名称如何定义、如何设置可映射的编码均将直接影响能否顺利地开发，且一经投入开发则难以修改，需要提前组织各环节的人员来一起完成确认。

经过多次对框架及组件细节的补充和确认，最终完成一套完全组件化且可执行的书城框架。

在视觉阶段，视觉设计师将做好最后的把控，为保证每个栏目在自由拼接下即是完美的，大到页面布局，小到一个间距，不断打磨、调优，同时也要感谢开发小哥哥的积极配合，肩并肩一起摩擦出❤️的火花~

⑤组件框架转化为平台化配置能力

每个组件附带着框架ID+视觉样式+规则数据，通过打通全链路的服务通道，将组件平台化，并最终完成配置能力的建设。

通过平台工具，线上书城可以做到多样化、多维度、高灵活度、及时生效的效果。

总结：

组件平台化是一个将页面框架打散到重组再到平台服务打通的过程，将各控件模块与产品需求场景紧密结合，形成高度开放的平台框架。落地执行的过程并不容易，在这个全链路协同参与的项目中，设计师需要做到从细节到全局的把控，科学规范的工作流程同样非常重要。

在这个过程中需要大家注意几个关键点：

•  在组件整理的过程中，要与视觉、产品、运营、客户端开发和后台等各环节同学反复沟通，确保是否满足需求以及可行性。

•  在时间允许的情况下，前期的栏目设计宁多勿少，挖掘更多推荐维度，可能后期因为复用性问题被否掉，但样式的扩充是有意义的。

•  注意在样式的类别、名称和编码上与各环节同学统一口径，这一点非常重要。在这个过程中，采用思维导图的方式就显得非常有意义，不仅使每个人对分类结构快速直观的了解，也能引导大家聚焦在框架问题上。

数据表现

新版本（安卓端）上线之后，我们及时关注上线数据：

•  日活用户数提升   ↑900%（截取上线后23天数据）

•  书城书籍点击转化率较上一版提升   ↑18%，阅读转化率有小幅度提升（截取上线后9天数据，阅读转化率增幅不多更多源于书籍本身的品质因素）

当然更具价值的是深入的实验数据探索，组件平台化不仅可以实现快速迭代，更重要的是监控每个组件的数据表现，让每次迭代更有意义。

目前的问题  

•  由于是产品或运营人工搭配页面，难免会出现重复样式堆砌，因个人喜好使得某些样式常常被“落灰”等问题，导致实际配置的页面未达到设计期望的丰富效果，欲解决此类问题是一个设计和需求方长期沟通并达成一致认知的过程，短时内较难避免。

•  新运营平台未建立实时、可视化的数据统计及分析功能，在提取数据时较为复杂，在快节奏迭代的情况下，便捷获取直观的分析数据将带来极大的效率提升，这也是未来完善平台工具能力，提升产品运营效能的重要方面。

最后

平台化辐射 

新平台不是为一个产品而做的，而是可以辐射到多条业务线，提升整体的研发效率。同时也建立起了多业务线共性的组件平台化设计方法，提升全体设计师的组件化和平台化思维能力，共同步入设计研发工作的新阶段。

平台化之路

在平台化的道路上，各家公司均面临着各种阻碍。我们的后台系统陈旧复杂，充斥着大量的业务逻辑，重复且臃肿的状况渐渐拖累了前台的“响应⼒”，再加上较高的后台整顿成本和⻛险，最终不得不建设出能更好地服务前台、更快响应用户需求的新平台。

近年经常被谈论的中台化战略即是在解决后台与前台的匹配问题，平台化还是中台化，概念并不重要，如何想方设法持续提高企业对于用户的响应⼒才是最重要的，我们只是恰巧走在了这条正确的道路上。