在开始之前，先聊聊什么是组件？

组件是为了解决某个场景问题，选择设计元素，按照设计规范进行组合，然后通过开发将设计工程化，最终达到标准规范和可复用场景的基本模块。

组件可以解决什么问题？

了解组件能解决什么问题之前，我们先了解一下一个页面是如何被制作出来：传统的页面设计流程是瀑布式的，从需求到设计，设计到开发，它是以接力赛的形式在工作。

因此，它会存在很多问题，如在设计稿出来之前，没有人知道页面长什么样子，另外，在缺乏约束的情况下，同样的需求和场景，不同的设计师会有不同的解决方案，也导致，无法应对频繁的更新需求、多组合方式等实际场景。

你可以想象一下，在网页上销售一款产品，今天提供“满减”，明天提供赠品，后天提供绑定套餐，信息呈现上必定是不同的，而这个问题需求方和工程师都无法解决，必须要设计师的参与，效率是非常低下。然而，即使设计师参与，不同的设计师和产品组合，也会导致最终呈现有不可估量的设计展现形式。而这些都会为企业增加大量的成本和对品牌造成伤害。

接下来，我来讲下组件设计能如何解决这些问题。首先，一个页面是由多个满足不同场景的组件组合而成。而一个组件从设计到使用，会有四类角色参与，组件设计师接收需求进行设计，组件工程师将其开发成组件给到我们的业务设计师和工程师来使用。而业务设计师和工程在使用过程中发现问题，然后反馈给到组件设计的设计师和工程师这边的生产端，来形成闭环。

这样设计有两大好处，分别是提升效率，降低成本和提高设计品质。

01.

提升效率，降低成本

首先，场景去重。由于所有的场景和需求，都统一收集到生产端进行处理，重复和相似的场景将被合并。

二，页面生产周期变短。抛弃传统接力棒的工作模式，组件设计的页面更像是拼乐高，有非常强的复用性和稳定性。另外，在没有新增场景的情况下，业务设计师和工程师可以不通过生产端，直接用组件创建页面，形成小闭环，快速且灵活。

三，弥合合作差距。设计语言和我们使用的其他语言一样，每个人都有自己的表达方式，随着产品和团队的发展，表达方式的差异会使其变得越来越复杂，创造一致体验难度成倍增加。而组件设计将从源头，生产端，生产组件并提供指导，即将大量的元素选择、状态变化、响应式变化等设计决策从源头基于场景、需求进行规范，并将封装成组件，提供给业务端，让设计规则在组件中“隐形”，可用，而不可见。这样，业务端的设计师以及工程师，在开发新的页面时，对面已有的场景、需求解决方案，可用直接使用组件搭建，减少重新设计开发的时间和人力成本。

以首屏 Banner 组件为例，组件设计师收集业务需求，开始设计组件，根据设计规范挑选满足需求的标题、产品名、卖点展示、按钮、图片等设计元素，然后进行排版组合，在组合过程中，需要充分考虑组件在不同分辨率和状态的变化，最终输出设计说明文档给到工程师将设计规则封装成组件，以及提供设计指导，给业务设计师提供设计指导和建议。

这样，当业务产生需求时，业务设计师只需要根据设计指导提供设计方案，然后，业务工程师将其输入进机器。机器就会按照我们定好的规则，输出对应的设计内容给到我们。

02.

产品运作，提高品质

与时俱进的产品化运作。组件设计本身很好继承了互联化产品化运作，敏捷开发、快速迭代的优点。随着业务的扩张，以及产品国际化的趋势，一次性解决方案将难以满足复杂多变的市场环境。这个过程中，设计师以组件为产品进行设计，可以更好的为用户和企业提供持续性的、创新的改善方案。

设计一致性。就像前面说的，设计语言，一千个人就有一千个哈姆雷特。组件化设计可用减少设计过程中的不确定性，因为一部分的设计规则被“隐藏”在机器中，而给到设计师们的设计指导，因为“隐藏”的规则，将变得更简单和具体，降低规范传播中的信息的分散和损耗，避免了多角色参与导致的信息不对等。所以设计师在面对同一场景和需求时，将会得到统一的解决方案。

“A corporation should be like a painting; everything visible should contribute to the correct total statement.” 

— Eliot Noyes

设计的一致性，将有效降低用户的学习成本，因为我们所以的产品都遵循一致的规则，减少用户出错，提升产品体验的愉悦感。帮助设计师更好的控制产品的信息框架、视觉风格，以及品牌风格，帮助业务团队更好的控制产品品质，达到商业模式的一致性推动。

总结

组件设计让企业和用户变得更好。

用户，由于优秀的设计品控，一致性的体验，使企业生态内的产品使用门槛进一步降低，且有专属的设计团队为此不断的打磨细节，升级体验。

而企业通过组件设计，以生产端为战略基地，为不同的业务提供指导和“弹药”（组件）。前线业务端可根据组件灵活组装以应对多变的市场环境。同时，作为组件的设计者，组件设计让设计师跨越了专业领域与工程师进行更具密切的沟通，并一起创建统一的组件设计体系，让逻辑与设计共存。减少了大家无意义的工作，产生更多的价值和成就感。

感谢你的时间。

原文链接： https://mp.weixin.qq.com/s/W2PWhxi1ywdFChj9ERwtVg

Powered by Froala Editor