组件迭代的解剖

At The Washington Post, we help readers understand the rapidly evolving events shaping their world. In order to deliver the news quickly, reliably, and at a high quality, we need tools and processes that accelerate collaboration. So, in 2019, we embarked on an ambitious journey to craft The Washington Post Design System (WPDS).

在《华盛顿邮报》，我们帮助读者了解塑造他们世界的快速发展事件。为了快速、可靠、高质量地传递新闻，我们需要加快协作的工具和流程。因此，在2019年，我们开始了一项雄心勃勃的旅程，打造了《华盛顿邮报设计系统（WPDS）。

Building a rich library of interactive components hasn’t been easy. In the early days of the design system, we shipped new components either through a design-led approach (as in the case of select, radio and checkbox inputs), or a developer-led approach when it involved more technical complexity (as in carousel and input search). Both of these scenarios had their pitfalls, causing delays and unexpected compromises. It became clear that we needed to get the right people in the room early on to offer guidance and close knowledge gaps. After years of refinement, we’ve developed a component sprint that does just that. Led by a designer-developer pair, the component sprint acts as a bridge between teams and ensures meaningful collaboration at every step.

建立一个丰富的交互组件库并不容易。在设计系统的早期阶段，我们通过设计驱动的方式（如选择、单选和复选输入框）或者涉及更多技术复杂性时通过开发者驱动的方式（如轮播图和搜索输入框）来发布新组件。这两种情况都存在问题，导致延迟和意外妥协。很明显，我们需要在早期将合适的人员聚集在一起，提供指导并填补知识差距。经过多年的改进，我们开发了一个组件冲刺，正是这样做到的。由设计师和开发者搭档领导，组件冲刺作为团队之间的桥梁，确保在每个步骤中进行有意义的协作。

The Washington Post’s component sprint starts with pairing a designer and developer who champion the process from start to finish, while also gathering insights from the wider team.

《华盛顿邮报》的组件冲刺从一开始就由一位设计师和一位开发人员搭档，他们负责整个过程，并从整个团队中收集见解。

If you’re reading this, you’re probably familiar with the pains of siloed design and development workflows. Before we instated the component sprint, we suffered mismatched expectations around how a component should look or function. At times, developers were put in the awkward position of pointing out potential technical limitations, or being pressured to focus on nuanced visual details...