前言 随着行业发展的不断深入，越来越多的企业在面对复杂多变的业务场景时，开始引入设计系统以提高效率和质量。本文旨在探讨如何通过生产、消费和监测三大模块构建一套成熟的设计系统，并结合百度搜索设计系统近期针对【生产和消费】环节的升级改版经验，分享其中的经验总结。 在百度的设计系统中，资产的规范性是其核心问题之一。为了解决这一问题，我们提出了一个明确的项目方案：首先，我们需要明确目标，即构建一个完备的设计资产库，其中包括明确的规范定义和健全的组件变体；其次，我们需要提供高效的消费体验，确保设计师和工程师能够轻松调用组件或阅读规范，实现对设计系统的高效消费；最后，我们需要建立一个良性的迭代模型，使得中台与业务保持同频，从而促进业务组件的优化和资产的沉淀回流。 项目背景 在移动时代初期，百度搜索通过划分垂类团队，深耕垂类特性，以满足不同垂类下用户对内容精细化消费的需求。这一时期的设计资产具有以下特点：
组件资产与业务强绑定，业务独立维护。
业务创新频繁，组件样式新增多、合并少。
设计系统内在逻辑不健全，主要为各业务组件的快速录入封装。 这种建设方式虽然满足了业务高速发展的需要，但随着业务的成熟，横向协作的增加使得组件复用提效和产品体验一致性成为迫切需求。 资产通用性不足，体验难打平： 业务各自维护资产，横向场景兼顾不全面，资产横向复用的标准不明确，体验差异难抹除。 资产冗余且庞大，维护成本高： 设计系统中存在很多样式略有不同，体验又无差异的组件，在业务升级和设计改版时成本高且容易出现遗漏。 资产缺乏逻辑性，约束性不足： 资产与设计意图的映射关系模糊，在相似的用户需求和场景设计中，给设计师的设计指导力度不足。 以上这些最终导致设计系统越来越不规范，易用性大大降低，不匹配业务成熟期的诉求。 因此，在设计系统建设上，需要更高效的建设逻辑，以保证资产的易维护性和可拓展性，满足业务成熟期的需求。 在探讨设计系统的迭代发展时，我们首先认识到实现业务赋能最大化的前提是拥有完备的资产作为基础。因此，我们设计了三个阶段的系统迭代：统一化、工程化和工具化。
统一化阶段
在这一阶段，我们的目标是提升资产的规范性和易用性。为了达到这一目标，我们从“资产生产 → 资产消费”的链路出发，对设计交付过程中遇到的问题进行拆解。
设计动作
面对设计交付链路上的问题，我们首先需要重构底层逻辑，转变视角。例如，当两个设计组件在样式上非常接近时，是否应该将它们归类为同一个组件？或者当两个组件在形态上有明显差异时，又应该如何处理？ 过往的做法是采用“样式归纳”的视角进行分析。这种方法通过对已知的组件资产进行共性和差异性的罗列，然后求同存异，将共性较多的设计稿归纳为某一类组件。然而，这种做法在初期确实可以帮助业务线快速建设出设计系统，实现单一业务内的复用。但当各业务均发展成熟时，这种设计系统却无法满足跨业务复用的情况，且缺乏内在逻辑的归纳思维，也无法对持续发散的业务创新形成有效收拢。这时，我们需要转变视角，探索一种源头相对稳定的设计发起点。
转变：场景化演绎思维
在业务变化快的情况下，归纳性思维的核心缺陷在于资产源头不稳固。因此，我们需要探索一种源头相对稳定的设计发起点。这可以通过追溯用户行为进行解决。 随着人类发展和媒介环境的变化，虽然人类可实施的行为动作没有太多变化，但在日常产出时，我们的设计意图基本是围绕如何让用户在某场景下用某种行为达成目标来开展的。这些产出物又被封装为可复用的组件。由此可以倒推，将组件的本质抽炼为：帮助用户在特定行为场景下，通过某个组件，以某种方式，达成目的。而组件交互与样式的变化，底层所承载的设计意图都是为了在这个特定的场景下，优化用户的行为，提升场景体验。 在设计资产的构建过程中，我们经常需要跳出传统业务场景的束缚，将注意力集中在行为动作上。通过这种方式，我们可以更直接地理解用户的需求，并据此开发出更加贴近用户期望的产品或服务。本文将探讨如何通过“场景演绎”这一思维模式，重新审视和构建设计资产。 首先，我们需要明确理解组件的本质。这不仅仅是对组件功能的描述，更是对其服务于何种用户行为场景的深入理解。例如，一个按钮组件可能被用于触发事件，也可能是用于展示信息。因此，将复杂的组件归类到几个宏观的用户行为场景中，可以帮助我们更好地理解和应用这些组件。 接下来，以某个组件为例，我们可以将其拆解为更小的场景单元，然后根据这些场景单元的特点，衍生出不同的变体。比如，如果一个按钮组件主要用于触发事件，那么我们可以进一步细化其应用场景，如点击、悬停等，并根据这些场景的特点，优化其用户体验。 在构建设计系统时，我们需要考虑如何将这种场景演绎的思维模式融入其中。这包括确定推理变体的原则和方法，以及如何满足不同场景下的设计需求。例如，我们可以采用分层的方式，将设计系统分为基础层、框架层和应用层，每个层级都针对不同的场景进行优化。 此外，我们还可以通过抽象业务场景的特征，为各业务开发者与设计师提供合理的使用建议。这不仅有助于提高设计效率，还能确保设计的通用性和可维护性。 最后，通过这样的场景演绎和设计方法，我们可以构建出一个更加精简、高效的设计资产体系。这不仅有助于降低开发和维护成本，还能提升产品的整体质量和用户体验。 在设计系统的场景拆解中，我们采用了一种层层递进的方法论，从宽泛到具体、从广义到具象，确保了设计的全面性和可执行性。以下是重构和优化设计资产的关键步骤和方法，以及它们在实践中的应用效果和团队协作的影响。
重构方法与实践
第一步：资产层级扁平化
目标：减少组件间跳转的层级，提高用户界面的响应速度和用户体验。
实施步骤：将组件按照行为场景细化，形成更细粒度的分组，并创建目录导览页，实现所有组件的快速导航。
结果：提升了组件触达的效率，降低了用户操作的复杂性。
第二步：文档结构统一化
目标：消除不同设计师之间的理解差异，简化开发者阅读流程。
实施步骤：对组件文档进行标准化处理，包括统一组件分类、变体类型的讲解，以及交互和样式参数的描述。
结果：提高了文档的易读性和开发者的使用效率。
第三步：内容场景化
目标：明确每个组件变体的适用场景，提升开发者的准确率。
实施步骤：在文档的开篇和每个变体下提供明确的应用场景建议。
结果：增强了开发者对设计系统的理解和使用的准确性，减少了不必要的混淆。
项目成果
通过这些措施的实施，设计系统在今年上半年取得了显著的进步：
边界清晰：每类设计资产的边界更加明确，减少了重复和冗余。
逻辑统一：设计系统的内在逻辑得到了统一，易于维护且具备扩展性。
确定性增强：设计系统的可预测性和稳定性得到提升，有助于降低业务变动带来的影响。
体验一致性：保证了服务产品的体验一致性，降低了用户的使用成本。
文档优化：通过优化消费场景和文档结构，提高了文档的整体满意度和规范的合理性。
实用性和可用性提升：配合团队宣贯，建立了共识，确保了后续协作的效率。
结论
通过上述方法和实践，设计系统不仅在功能上得到了加强，还在用户体验和团队协作方面实现了质的飞跃。这些改进为设计系统的未来发展奠定了坚实的基础，也验证了分层、统一化和场景化在提升设计系统整体性能中的有效性。 本文探讨了场景演绎方法的本质，它是一种将抽象的场景特征与设计资产和业务场景进行关联匹配的设计思维。这种方法不仅适用于系统级组件级的推演，也适用于日常业务需求的创新和业务组件的提炼。 对于资产建设者来说，他们通过拆解行为场景来获取场景特征，以便更好地匹配业务场景。而对于资产消费者来说，他们则通过提炼业务场景来匹配行为场景，从而发现资产变体的不足，并完善设计系统。由此可见，这种方法不仅适用于系统级组件级的推演，也可以用于日常业务需求的创新与业务组件的提炼中。 在日常需求中，设计师需要先对用户流程进行梳理。在需求的若干个业务场景中，对每一个业务场景，做最优的行为路径设计。然后通过提炼每个行为路径下涉及的行为场景及其场景特征，去匹配现有设计资产。例如，在改版需求中，可以判断已应用的组件变体是否很好地帮助用户达成了目标；在新的请求中，可以判断现有的场景特征是否可以匹配已有的设计资产，以及已有的设计资产是否可以被进一步优化。 设计系统的后续展望包括如何通过【场景演绎】的方法重构资产，为其建立秩序，提升内在一致性。从整个设计系统的长期建设层面来看，当前对资产的系统化重构与文档结构化的建设只是开始，绝非终点。在真实的协作流程中仍然会面临两大问题：设计中台与业务沉淀如何保持同频；原有资产消费路径不便捷。 为了解决这些问题，需要推动设计系统工程化、提升资产消费链路灵活性。其中的关键措施包括：在上游建立中台与业务之间同源可扩展的Design Token。 2、致力于提供可串联设计与研发的资产消费工具分发平台，并提升协作沟通的效率。 近期，我们已经开始按照这一思路进行“设计系统工程化与工具化”的升级改造，相关内容后续有机会与大家分享。 百度MEUX团队 2024校园招聘提前批次 全面开启 更多精彩作品展示，请关注「百度MEUX小红书账号15527649518」 关于我们： MEUX, 百度移动生态用户体验设计中心，负责百度移动生态体系的用户/商业产品的全链路体验设计。服务的产品包括百度APP、百度搜索、百度百科、百度贴吧、百度商业产品等。MEUX以「简单极致」为设计理念，创造极致用户体验的同时赋能商业，推动设计行业的价值和影响力，让生活因设计而更美好。