最近在阅读《佐藤可士和的超整理术》，书里讲述的是作者通过对空间、信息和思考的整理，来解决复杂问题，让工作变得高效。生活和工作离不开「整理」，好的设计也要从「整理」开始，组件化设计思维，也可以看做一种「整理术」。本篇文章以滴滴表单项目为例，与大家探讨如何运用组件化设计思维去「整理」项目，让其发挥更高的价值。
文章分为两个部分：
1. 组件化设计思维
2. 滴滴表单优化项目的沉淀总结：组件化思维的推动和执行
组件化设计思维
一. 什么是组件化设计思维
我们知道“分子是由原子组成的，分子分成原子，原子也可以重新组合成新的分子”。一个界面是由独立的分子组件搭建而成，分子组件由原子元件构成，这些原子可通过不同的组合方式，组成新分子组件，继而重组构成新的界面。
组件化设计思维是通过对功能及视觉表达中元素的拆解、归纳、重组，并基于可被复用的目的，形成规范化的组件，通过多维度组合来构建整个设计方案，从而提升设计效能。
二. 滴滴运用组件化带来的收益
随着滴滴业务的飞速增长，组件化为滴滴带来了一致的设计语言和工作效率上的提升，因此滴滴在组件化道路上的决心愈发坚定。选择以组件化展开设计实践，带来的变化与收益主要体现在公司、项目和个人三个维度：
1. 公司维度
一款产品的更新迭代是依附于产品、设计、开发、测试等多个团队协作进行的，随着产品功能的完善，背后支撑的团队也在不断壮大。以运用组件化推动的产品设计与迭代，可以使团队增效，降低成本。设计师可以只用几个小时设计出几十个页面，开发人员也可以通过查看prd文档，直接调取组件代码完成需求，使得我们的生产力产生质的飞跃。在保证数量和质量的前提下，原本200人的团队，可以缩减为100人，为公司节省了人力成本。组件化能让公司以更快的速度和更低的成本开发产品，也能对产品想法快速验证。
2. 项目维度
- 从设计方案上：对于一些适用组件化的产品形态，我们可以运用组件化思维将其「化整为零」，对需求有更规范的统筹，理清框架，建立一个可复用的组件结构并持续优化，以保证交互和视觉的一致性。
- 从工作流程上：传统的设计流程大多是同属性多角色并行的，从需求到设计，从设计到前端的工作流程会涉及到不同的设计师及不同的前端工程师。相同角色间无交集、缺乏沟通会导致大量重复性工作，增加项目周期和管理难度。
而将组件化思维贯穿其中的设计流程，带来了工作流程上的创新。我们建立了一套设计组件库来提高协同效率，大量需求均通过需求评估来判断是否需要新增或复用组件，对于组件库里已有的组件，设计师可直接调取，组合构建出新页面。对于新增组件则经过常规设计流程后，归纳沉淀并由组件委员会审核通过后方可入库，以提升后续组件扩展能力，助力产品快速更新迭代。
3. 个人维度
利用组件化，设计师可以从低价值的机械式工作中解放出来，参与到设计创新中去，发挥更高的设计价值。
另外，在工作中运用组件化设计思维有助于设计师更完整的思考，培养全局思维的能力；也有助于我们专注于细节，提供个性化的创新方法，产出适应不同场景的最优方案。
滴滴表单优化项目沉淀
一. 项目背景
1. 为什么要优化表单
滴滴出行5.0版本从2016年11月上线至今，随着用户体验痛点不断增加，业务的需求逐渐多元化，我们希望对表单进行一次统一的整合梳理和升级。为未来更多业务发展提供快速支撑和拓展，同时也注重用户体验的提升。
滴滴出行作为出行服务类应用，精准的发单表达是触达用户进入服务流程的关键。每个业务在确认呼叫的节点上拥有独立的入口并满足不同的需求（如下图），确认呼叫页表单（以下简称表单）作为最重要的多功能、多信息载体，需要高效、精准的表达和流畅的体验。
2. 跨业务共建
滴滴出行是涵盖出租车、专车、快车等多项业务在内的一站式出行平台，我们希望在保证全平台统一化的基础上，与业务寻求一种相辅相成的关系，并且在保证规范化输出的同时，展现出业务特色。在需求阶段，确定各业务接口人，收集需求，沟通评审促成各方达成一致目标。在方案执行阶段，平台设计师产出方案，与各业务线沟通并优化，1～2次循环后方案评审到最终确立。开发和测试阶段，各方验收通过后发版上线，上线后平台沉淀设计规范，完善组件库，跟踪反馈，推动体验优化形成工作流程闭环。
二. 确立设计目标
项目初始，平台设计师需从业务诉求及用户诉求两方面着手，在收集到两方需求后，对其进行归类整理并定义优先级，从而确立设计目标，制定出具体的设计策略，提炼交互框架，再深入到细节的设计。
在表单项目中，基于满足业务未来多元化及提升用户体验的需求，输出目标为：
- 兼容各业务需求，建立具有可承载多种业务共性及特性的组件能力框架。
- 主要信息及次要信息的合理化分布。
- 传递真实感及专业感，拉近用户体验共鸣。
三. 以组件化设计思维展开设计探索
有了明确的目标后，根据目标制定相应的方向策略，也便于我们在后续的设计工作中寻找发力点。和业务沟通后，明确整体方案的设计基调聚焦在「扩展性」「统一性」「逻辑性」「个性」四个方向上：
- 扩展性——组件化视觉表达，能够随着滴滴多场景、多业务需求的变化进行延展和扩充。
- 统一性——各业务信息归类统一、简化。
- 逻辑性——信息层级清晰，增强主焦点认知，次要信息弱化。
- 个性——设计个性化表达。
1. 以组件化思维进行框架探索
在方案构思阶段，我们是以组件化设计的思维方式先去全面的思考并分析问题，再进行拆解分类，最后归纳重组。
全面多维度分析问题：
框架层：针对快、专、豪的确认呼叫表单的关键场景进行框架分析。
因为业务不同，场景不同，确认呼叫这个流程触点在各业务中是具有共性和差异性的。我们重新梳理了确认呼叫页表单各业务的功能点（如下图），可见各业务表单虽有一致模块，但信息内容十分繁杂，层级区分无规律可循；操作区位置不统一，样式各异；框架的兼容性及扩展性不高。
表现层：在视觉表现层面上，也暴露了很多问题，如：不同业务的车型选择分别有各自的展示方式；价格区选中项的感知较弱且各业务的样式不统一；价格小数点展示位数不一致等等。
新增业务特性诉求：新的框架还需满足业务特性的诉求（如下图）。
拆解并简化：
如何让新的框架既能满足越来越多的业务类型，保证体验的统一，又能体现出业务特性，平衡取舍促进产品更新迭代呢？
我们回归到本质，从以下四个方面对框架进行重新构思：
- 删除——去掉无用的功能点。
- 组织——根据类别将这些功能点分解后重新划分成组。
- 隐藏——突出主焦点的认知并隐藏次要信息。
- 抽取——抽取共性，对比差异性。
综上，即对框架进行简化，保证框架可灵活适配具有业务共性与特性的组件。
重组：
简化后的框架几乎可以覆盖所有必要功能点，有很强的适应能力和扩充能力，可以轻松应对未来多元化的出行服务及场景。
在共性中寻找差异性：全局操作、车型与价格、发单按钮是业务共性部分，除车型／价格区和发单按钮外，其余均可显示或隐藏，可根据业务特点灵活配置。
在差异中寻找共性：车型与价格区所包含的服务选择与附属操作是业务差异部分，快车需要在一个卡片中呈现三个车型比价、需要有附属操作，专豪则需要强调车型图片的露出和服务配置。我们要找一个平衡去把这些差异点串联起来，确保用户拥有同样的感受，不仅是