组件 样式冲突_移动端通用组件库搭建有感

Hybrid开发模式在很大程度上有效降低了多端开发的成本、保障了跨端体验的统一性。而且由于触屏网页发布无需审核，Hybrid开发模式的应用满足了产品快速迭代上线的需要，因此深受欢迎。另一方面，以Ant Design为代表的设计系统，近年来在业界引发了广泛的关注与应用。设计稿如同代码一般环环相套“局部影响整体，整体影响局部”，同时又与代码库对应统一。组件规则和样式由配置文件统一配置，在设计迭代时充分保障了组件维护的同步联动。无疑，原子设计思想的落地又进一步提升了产品迭代的效能。

在此背景下，以触屏为主的移动端通用设计系统成为了不少产品设计、开发共同的战略选择。尽管前景明朗、方向明确、参考众多，然而，究竟如何做好自家产品的设计系统？还得靠我们自行摸索。

今年上半年我独立完成了公司触屏站的第一期优化改版交互设计工作。借助这次契机，也基本完成了对移动端通用组件库的搭建。目前，移动端通用组件库已经能够覆盖8成以上移动端展示场景，通用于App、触屏、小程序三端，在提升产研效能的同时充分保障了跨端体验的一致性。在此，我分享这次组件库搭建过程中的思考与经验，供大家参考一二。

 01 

站在巨人的肩膀上

▼

学会借力，在成熟设计体系基础上进行本土化改造，能避免掉很多坑也容易更快出成果。时至今日，市面上已经出现了不少设计体系，目前较为流行或具有代表性的设计体系主要有：Material Design、WindosGuidelines、SA