第一次接触到组件化的案例，是在去年的IXDC上滴滴其中的一个分享keynote中，他们的出发点如下
滴滴要解决的问题：
效率低下、感知混乱、成本浪费、责权不明、品质不齐...
组件化的核心价值：
通过工具模板体系化，设计效率提升，审核修改率降低，
输出品质拉齐，解决内宣延续性的问题，
从基础工作上解放更多脑力设计师。
（以上是他们的结论，案例因版权问题不便展示）
现在阁主在项目中也遇到了一些需要解决的事情，所遇到的问题与滴滴的不尽相同，但同样，组件化也能帮助解决了不少难题。
如下，阁主遇到的问题是，一个结果页面，如下图。
来分析一下，该页面有很多不同种类的信息，每种信息的状态又有很多种。如果单独把页面去进行铺开则会有很多种排列组合。
如果直接将所有排列组合的页面呈现出来，需要画会有二三十多个。真这样做的话，一方面容易漏状态，另一方面在表述上不够简洁，使得其它看文档的人也会觉得头晕目眩，显得文档不够专业。
针对以上的分析，于是，采用组件化的思维，将每一块有不同状态的信息单独分成块，罗列出来，再针对每块的内容进行详细说明。
页面的划分块如下
部分内容的分块呈现如下
最后将页面和所有的组件化内容一起罗列出来，并标示好对应关系进行展示，如下图。
从总体效果来看是不是整洁清晰了很多。
来总结一下：
1. 什么样的页面需要组件化？
信息的排列组合方式有很多种，并且信息模块彼此独立，组件化的方式呈现能将信息分类做的更清晰。
2. 怎样组织组件化的页面？
将页面独立的、有不同状态信息块分离成不同的模块，并以模块为单位分别进行标注呈现。
以上只是组件化的其中一个案例，仅供参考，组件化灵活性很高，大家伙可以在此基础上进行更多场景应用的尝试。
网友评论