途牛iPhoneX适配揭秘：组件化系统下的动态设计（5）

值得庆幸的是，在此之前，我们团队就针对页面中的基础模块进行了组件化系统的搭建及推广，而以下的几个特点也为此次iPhoneX适配的过程减少了不少麻烦。

1、自由组合、灵活兼容

以顶部Bar组件为例，在制作顶部bar组件的过程中需要全面的考虑不同场景下各个元素组合的布局、样式、响应状态、交互效果、兼容方案......而多个组件间也需要能灵活地组合来构建不同的产品坑位和功能模块。

当组件开发完成后，还需配置部分可定义元素来满足不同业务线产品的需求，如顶部bar组件就支持背景色调整、显示/隐藏分隔线、动态图片等功能。

2、打通语言，实现统一

长久以来，大部分互联网公司的工作流程是界面设计师产出界面视觉稿，开发工程师根据视觉稿编辑代码，发布上线。介于两者所展示语言的壁垒始终存在，每一次新页面的上线都需要设计与开发分别针对页面元素各自编译一次，对于一些重复性较高的页面，其中人效的耗损可想而知。

而组件化系统最为关键的一点在于打通了与开发之间语言，我们将界面中复用率较高的一些模块按组件而非元素进行开发语言式的搭建，各业务线按需调取组件中的模块进行业务替换，真正实现了全站的统一。而后续任何针对该模块的修改都可以通过组件自动同步到各业务线中，大大减少了反复测试的成本。

3、单线协作，提高人效

途牛现有的设计架构中，每个设计师对应各自的业务线，工作方式更偏向于多线并行，这种形式能让设计师对自身业务更为深入地进行设计，但从整体架构层而言，在应对大型视觉改版或模块升级时，这种多线并行的工作方式需要在每次改版过程中调动所有业务设计师参与，而最终的成果也难以把控。

而依托组件化系统按模块而非页面的搭建方式，使得在应对模块升级/调整的过程中，只需对接组件架构组的设计师及开发即可实现组件视觉&代码的升级，而前期业务调取的入口会自动更新最新的修改，这种单线沟通的工作方式能有效的减少人效在重复性工作中的耗损，也能更有效的把控项目质量。

写在最后

虽然新事物的出现总会引起诸多质疑，但是好的工具和工作方法始终能接受住时间的考验，帮助我们更好地开展设计工作。虽然此次适配过程中仍有一些想法和细节没有完美的落地，留下了些许遗憾，但也正是这些不完美促使我们对每一个下一次始终心潮澎湃，全力以赴！