系统参数
本章介绍了设计系统可以具备的一些素质以及管理风险和不利因素的方法。
This chapter introduces some of the qualities a design systemcan have and the ways in which risks and downsides can be managed.
Sipgate的团队遇到了问题。他们产品网站上的重复和不一致会稀释品牌属性，并给整个团队带来不必要的额外工作。他们决定通过建立范式库来解决此问题。经过数周的研讨会和接口库存，整个产品站点的范式已标准化。几个月后，该团队推出了一个全新的范式库。
The team at Sipgate ran into a problem. Duplications and inconsistencies across their product websites were diluting the brand and creating needless extra work for the whole team. They decided to address the issueby establishing a pattern library. After weeks of workshopsand interface inventories, patterns across the product sites were standardized. A few months later, the team rolled out a brand new pattern library.
在某些公司中，你可能难以激发人们对你的范式库的兴趣。他们看不到它的价值，他们也没有贡献。 Sipgate 并非如此。所有产品团队都勤奋高效地记录了他们的范式。
In some companies you might struggle to excite people about your pattern library. They won’t see its value, they won’t contribute. This was not the case at Sipgate. All the product teams documented their patterns diligently and efficiently.
不乏热情。但是一年之后，模块太多了，以至于很难找到他们想要的模块并弄清楚该使用哪个模块。添加一个新的变得容易了。维护范式库一年后，尽管其文档已被彻底记录，但他们的产品网站仍然充满重复的范式。
There was no shortage of enthusiasm. But a year later, there were so many modules that it became extremely difficult to find the one they were lookingfor, and to understand which one to use. It became easier to just add a new one. After a year of maintaining a pattern library, their product web- sites were still full of duplicated patterns, albeit thoroughly documented ones.
设计系统并非以构建样式库开始或结束。构成系统的因素很多：组织的结构，团队的文化，正在开发的产品类型以及设计方法等等。
A design system doesn’t start or end with building a pattern library. There are many factors that shape a system: the structure of your organization, your team culture, the typeof product you’re working on, and your design approach, among other things.
为了了解这些因素如何发挥作用，我发现使用三个属性来表征设计系统很有用：规则的严格性，零件的模块化和组织的分布。
To see how these factors play out, I find it useful to charac- terize design systems using three attributes: strictness of the rules, modularity of the parts, and distribution of the organization.
这些参数不是二进制的，所有公司都位于每个连续体上的某个位置。在仔细研究它们的过程中，我们将借鉴不同公司的示例，以了解各个方向的利弊。
These parameters are not binary and all companies lie somewhere on each continuum. As we take a closer look at them, we’ll draw on examples from different companies to see the benefits and drawbacks of each direction.
规则：严格或宽松
有些系统很严格，而另一些则可以从更宽松的设置中受益。让我们以两个团队为例：Airbnb和TED。
Some systems are strict, others benefit from being more loosely set up. Let’s take two teams as examples:Airbnb and TED.
爱彼迎
Airbnb 在全球拥有 2,000 多名员工，大约 60 名产品设计师跨多个工作流工作。该系统完全由其设计语言系统（DLS）团队管理，该团队由六位设计师及其 Web，本地移动和 React Native 平台的工程合作伙伴组成。
Airbnb has over 2,000 employees worldwide and around 60 product designers working across multiple work streams. The system is managed entirely by their Design Language System (DLS) team which consists of six designers and their engineering partners for web, native mobile, and React Native platforms.
Airbnb的设计系统非常严格：严格遵循精确的规则和流程。
The design system at Airbnb is strict: there are precise rules and processes in place that are rigorously followed.
标准化规格
为了尽量减少偏差，在 Airbnb 的 DLS 中精确指定了模块。例如，严格定义版式处理方法；有一个用于间隔的八像素网格；互动记录在案；命名约定是一致的。这是在草图主文件中指定名为“字幕”的模块的方式。请注意，每个示例都有两个示例，以显示一些可供设计人员使用的选项。
To minimize deviations, modules in Airbnb’s DLS are specified precisely. For example, typography treatments are strictly defined; there is an eight-pixel grid used for spacing; interactions are documented; naming conventions are con- sistent. Here’s how a module called “Marquee” is specified in the master Sketch file. Notice that there are two examples of each one, to show some options available to the designers.
Airbnb 的主 Sketch 文件中的“字幕”模块
设计与工程完全同步
在 Airbnb 的系统中，设计和工程是完全同步的。具体来说，这意味着三件事：
- 草图主文件中的设计模块在代码中具有完全相同的功能，并且它们是同步的；
- Sketch文件中的名称与代码匹配；
- 所有模块都是跨平台的：Sketch文件中绘制的每个组件都具有一个匹配的组件，该组件在iOS，Android，React Native和响应式Web库中尽可能相似。
In Airbnb’s system, design and engineering are fully syn- chronized. Specifically this means three things:
- Design modules in the master Sketch file have an exact equivalent in the code, and they are in sync.
- Names in the Sketch file and the code match.
- All modules are cross-platform: every component drawn in the Sketch file has a matching component that is as similar as possible in iOS, Android, React Native, and responsive web libraries.
同步被视为优先级。该团队创建了自定义工具（例如Sketch插件）来实现这一目标。
The synchronization is seen as a priority. The team creates custom tools, such as Sketch plug-ins, to achieve that.
所有 DLS 资源的入口
引入新范式的严格流程
DLS团队旨在提供公司产品设计师所需的所有范式。他们的目标是重用约90％的现有模块，因此创建新范式相对较少。引入新组件的过程很严格：
- 设计者使用Sketch模板提交提案，其中包含有关相关行为和规则的说明。他们提出了合适的名称，并提供了如何在上下文中使用建议的组件的示例。
- 然后，提案连同草图文件一起通过JIRA提交给产品支持团队。在许多情况下，支持团队会发现已经存在类似的模块，或者应该更新现有模块。
- 如果有理由需要新的模块，则提案将提交给DLS团队，由DLS团队考虑需求并确定所提议的设计是否可行。有时他们会使用建议的解决方案，有时会对其进行调整或重新设计，以确保它适合系统。
The DLS team aims to provide all the patterns required by the product designers across the company. Their goal is to reuse around 90% of the existing modules, so creation of new patterns is relatively infrequent. There’s a strict process for introducing new components:
- A designer submits a proposal using a Sketch template with instructions about related behavior and rules. They suggest a suitable name and provide an exam- ple of how the proposed component can be used in context.
- The proposal then goes to the product support team via JIRA, along with the Sketch file. In many cases, the support team finds that a similar module exists already, or that an existing module should be updated.
- If a need for a new module is justified, the propos- al goes through to the DLS team, who consider the requirement and decide if the proposed design will work. Sometimes they use the proposed solution, sometimes they adapt or redesign it, to make sure it fits with the system.
全面详细的文档
设计语言记录在内部网站 DLS 指南中，该网站是从主 Sketch 文件生成的。 Airbnb 的工具团队构建了一个自动化流程，该流程生成有关组件的屏幕截图和元数据，并将其发布到准则站点。不用说，文档与 Sketch 文件和代码完全同步。
The design language is documented in the internal web- site, DLS Guidelines, generated from the master Sketch file. Airbnb’s tools team built an automated process that generates screenshots and metadata about the compo- nents, and publishes them to the guidelines site. Needless to say, documentation is fully in sync with the Sketch file and the code.
内部DLS指南网站
这些是使DLS作为严格系统正常运行的一些实践。在严格性标准的另一端，我们的公司结构较为松散。这样的系统针对实验和对上下文的敏感性进行了优化。它们也可能有效。
These are some of the practices that make DLS function well as a strict system. On the opposite end of the strict- ness scale we have companies with looser structures. Such systems are optimized more towards experimentation and sensitivity to context. They can be effective too.
TED
TED的团队很小，只有五个或六个主要人员负责设计系统决策：两名UX从业人员和四名前端开发人员。 TED的系统设置松散。页面的品牌感觉和实用性优先于完美的视觉一致性。
The team at TED is small, with only five or six key peo- ple responsible for the design system decisions: two UX practitioners and four front-end developers. TED’s system is loosely set up. Brand feel and the utility of the page take priority over perfect visual consistency.
例如，引入其他颜色或与标准布局有所区别不是一个主要问题，只要它有助于实现正确的效果即可：
设计什么是正确的，但不是最一致的。页面的最佳利用是一个优先事项。我们将修改页面以使其正常运行。教条的一致性和既定的范式不是驱动设计决策的因素。”
— TED用户体验设计师Michael McWatters。
For example, introducing an additional color or diverging from the standard layout as an exception is not a major con- cern, as long as it helps to achieve the right effect: Designwhat’sright,notwhat’smostconsistent.Thebestutility of the page is a priority. We’ll modify the page to make it work. Dogmatic consistency and established patterns are not what should drive design decisions.”
—Michael McWatters, UX architect, TED.
_
1 TED UX采访UX架构师Michael McWatters
1 Interview with Michael McWatters, UX architect, TED, August 2016
使用这种系统进行创意实验的范围很大。因为每个页面都可以微调，所以它可以适应特定的上下文和用例。这样的系统生成的设计可能是连贯的，但不一定完全一致。与Airbnb相比，TED的流程更加宽松和非正式。
There’s a lot of scope for creative experimentation withthis kind of system. Because each page can be fine-tuned,it can adapt to specific contexts and use cases. The designs such a system generates can be coherent, but they’re not necessarily perfectly consistent. In contrast to Airbnb, TED’s processes are also more relaxed and informal.
详细规格的简单草图
TED 的团队通常可以使用带有基本注释的白板或低保真纸草图来代替详细的规格。然后可以亲自分享或发布到 Dropbox 或 InVision 中，团队交换意见和反馈。然后，设计师和开发人员将它们带入更高的保真度，进行协作。
Instead of detailed specs, TED’s team can often use a white- board or low-fi paper sketch with rudimentary notes. It is then shared in person or posted in Dropbox or InVision, where the team exchanges comments and feedback. Design- ers and developers then work collaboratively as they bring it to a higher fidelity.
 <br />_在TED，通常使用带注释的简单草图代替详细的设计规范_
简单的文档
该文档也很简单。该团队没有完善的范式库。取而代之的是，它们在网页和Sketch文件中有一个简单的样本集合，其中包含一些核心设计范式，但绝不是全部。
The documentation is also simple. The team doesn’t have a comprehensive pattern library. Instead there’s a simple collection of what they call swatches on a web page and in a Sketch file, which contains some of their core design patterns — but by no means everything.
TED 的一些色板，保存在 Sketch 文件中
_
也许你是在想这是因为TED很小，而且它根本没有时间和资源来建立全面的范式库。但是事实并非如此。到目前为止，还没有必要详细记录所有内容。如果团队开始成长，那可能会改变，但是他们强调，即使有了范式库，范式也不会驱动设计。 “设计敏锐性和对上下文的敏感性始终是第一位的，即使这意味着在某些情况下也会忽略或修改范式，” Michael McWatters说。
Perhaps you’re thinking that this is because TED is small and it simply doesn’t have the time and resources to set up a comprehensive pattern library. But that’s not exactly the case. So far, there just hasn’t been a need to document everything in detail. If the team starts growing, that might change, but they emphasize that even with a pattern library in place, patterns are not going to drive the design. “Design acumen and sensitivity to context will always come first, even if it means that in some cases patterns will be ignored or modified,” says Michael McWatters.
尽管 TED 的界面设计适应了独特的背景，有时会打破既定的范式，但该团队仍然认为他们的系统在生成对用户有用的设计方面是有效的。
Even though TED’s interface designs adapt to unique con- texts, sometimes breaking from established patterns, the team still considers their system to be effective at generat- ing designs that work for their users.
使此类系统起作用的不是严格的规则和流程，而是深深植根于文化中的共享设计知识。团队在产品愿景（“尽可能广泛地传播思想”）和设计方法方面保持同步。范式的设计遵循共同的原则（例如“永恒，而不是最前沿”），并且人们对范式的目的及其用法有着深刻的共识。这种共享的知识是使该系统有效的基础，即使它是松散设置的。
What makes such systems work is not strict rules and processes — it’s the shared design knowledge, deeply rooted in the culture. The team is fully in sync on their product vision (“Spread the ideas as far and as wide as possible”) and their design approach. The design of patterns is guided by the shared principles (such as “Timeless, not cutting edge”), and there’s a deep mutual understanding of the purpose of patterns and their usage. This shared knowledge is the foundation that makes this system effective, even though it is loosely set up.
处理不利因素并选择方向
这是两个截然不同的示例，但是，当然，这些参数不是二进制的：所有团队都处于这种规模。严格程度似乎与公司规模有关–较年轻，较小的系统趋向于（并且可以摆脱）更松散，以允许更多的自由度和实验性。随着系统的发展，它变得越来越严格。但这可能不那么简单。我曾经在一个小团队中工作，有一个出色但独裁的创意总监，他密切监视所有设计输出。这是一个很小但非常严格的系统。另一方面，你可以想象一家规模较大的公司拥有松散设置的系统，以鼓励每个团队进行试验并做出自己的决定。也许与规模无关，但与团队的方法和工作重点有关。通常，更严格的系统可提供精确且可预测的结果和视觉一致性。但是同时，一个严格的系统可能变得僵化，以至于为了一致性起见，你开始进行 UX 折衷。
These were two contrasting examples, but, of course, these parameters are not binary: all teams sit somewhere along this scale. It can seem that strictness is related to company size — younger, smaller systems tend to be (and can get away with) being looser, to allow more freedom and exper- imentation. As a system grows, it becomes stricter. But maybe it’s not as simple as that. I once worked in a small team with a brilliant but authoritarian creative director, who closely monitored all design output. It was a small but very strict system. On the other hand, you can imagine a larger company having a loosely set up system, to encourage each team to experiment and make their own decisions. Perhaps it’s not so much to do with the size, but a team’s approach and their priorities.In general, stricter systems provide precise and predictable outcomes and visual consistency. But at the same time, a strict system can become rigid, to the point that you start making UX compromises for the sake of consistency.
为确保不会发生这种情况，应该在系统范围之外进行一些机会，例如创意实验和附带项目。人们需要理解规则并能够挑战它们。如果没有理解，规则将被忽略或覆盖。这就是为什么清晰，全面且引人注目的文档对于此类系统至关重要的原因。
To make sure this doesn’t happen, there should be opportu- nities outside the boundaries of the system, such as creative experiments and side projects. People need to understand the rules and be able to challenge them. If there’s no under- standing, rules will be ignored or overridden. That’s why clear, comprehensive and compelling documentation is fundamental to this type of system.
松散设置的系统非常适合优先考虑环境和实验的产品。但是，一个松散的系统对TED来说非常有效，但很快就会变得太凌乱，在其他公司中变得支离破碎。
Loosely set up systems are well suited to products that prioritize sensitivity to context and experimentation. But a loose system, which works so well for TED, can quickly become too messy and fragmented in other companies.
为了拥有像 TED 一样的简单，灵活的系统，团队中的每个人都需要完全针对产品的目的和设计方法，这两个方面都必须深深扎根于他们的文化中。即使是松散设置的系统也需要坚实的基础。
To have a simple, flexible system like TED’s, everyone on the team needs to be fully aligned on a product’s purpose and the design approach, which both need to be ingrained deeply into their culture. Even a loosely set up system needs a solid foundation.
零件：模块化或集成
所有系统均由零件组成。但是在设计系统的上下文中，模块化不仅意味着系统是由零件组成的，而且意味着零件是可互换的，并且可以通过各种方式组装在一起以满足不同或不断变化的用户目标。
All systems are made of parts. But in the context of design systems, modularity means not just that a system is made of parts, but that the parts are interchangeable and can be assembled together in various ways to meet different or changing user goals.
模块化设计（例如标志性的Bauhaus Bauspiel建筑套件）可以适应不同的要求
模块化方法具有许多已知的优点：
- 敏捷，因为多个团队可以并行设计和构建模块。
- 由于这些模块可以重复使用，因此具有成本效益。
- 维护相对容易，因为你可以在一个模块中解决问题，而又不影响其他模块。
- 它的适应性强，因为可以按照满足不同用户需求的方式组装模块。
- 它可以具有生成质量，这意味着你可以通过引入新的范式或以新的方式组合它们来创建全新的结果。
A modular approach has many known advantages:
- It’s agile, because multiple teams can design and build modules in parallel.
- It’s cost-effective, because those modules can be reused.
- It’s relatively easy to maintain, since you can fix a prob- lem in one module without affecting the others.
- It’s adaptable, because modules can be assembled in the ways that meet different user needs.
- It can have a generative quality, which means that you can create entirely new outcomes by introducing new patterns or combining them in new ways.
模块化结构的反面是集成设计方法。集成设计也可以由零件组成，但是这些零件不可互换，因为它们之间的连接并未设计为以不同的方式装配。
The opposite of a modular structure is an integrated design approach. An integrated design can also be made of parts, but those parts are not interchangeable because connections between them are not designed to fit in different ways.
集成设计针对特定目标进行了优化
集成设计还具有许多优点：
- 它们可以特定于特定的内容，上下文，故事或艺术指导。
- 它们趋于更加连贯和连接（不同于可能感觉不连贯的模块化结构）。
- 一次性即可构建，因为无需花费时间使零件可重复使用。
- 他们更容易协调，因为团队中的每个人都朝着一个目标努力。
Integrated designs also have a number of benefits:
- They can be specific to a particular content, context, story or art direction.
- They tend to be more coherent and connected (unlike modular structures which can feel disjointed).
- They can be built quicker as one-offs, because there’s no need to spend time on making the parts reusable.
- They are easier to coordinate, since everyone on the team works towards one purpose.
我们在Web上有关设计系统的讨论一直支持组件的模块化和标准化。我们讨论范式应该如何模块化和可重用，一切都应该像Lego一样。但是模块化的程度应取决于你的团队和产品。
Our conversations about design systems on the web have been in favor of modularity and standardization of compo- nents. We talk about how patterns should be modular and reusable, how everything should be just like Lego. But the extent of modularity should depend on your team and your product.
模块化和用户体验
除了提高效率和节省成本外，请考虑模块化方法如何使你的用户受益并增强产品体验。在建筑中，有一些例子，模块化不仅增加了使用体验，而且成为其核心特征。彪马市是一家零售商店，由 24 个可拆卸和重新组装的货柜组成。允许此建筑物在世界范围内传播的是其模块化。这也是其设计的关键：容器的放置方式可以塑造建筑物的个性。以不同的方式移动容器可以创建室外空间，露台以及室内空间。甚至由于移动容器而使徽标不完整的方式也是该组合的一部分，也是该建筑物独特感的一部分。
As well as efficiency and cost savings, consider how a modular approach can benefit your users and enhance the experience of your product. In architecture, there are exam- ples where modularity doesn’t only add to the experience but becomes its core characteristic.Puma City is a retail store made of 24 cargo containers that can be dismantled and reassembled. What allows this build- ing to travel around the world is its modularity. It is also key to its design: the containers are put together in a way that shapes the personality of the building. Shifting the contain- ers in different ways can create outdoor spaces and terraces,as well as the interior. Even the way the logo is fragmented as a result of moving the containers is part of the composi- tion, part of the unique feel of this building.
LOT-EK，彪马市（图片来源：Sibyl Kramer的“盒子”）
现在让我们看一个集成架构的例子。日本高松的 Greendo 公寓大楼建在山的一侧，共有五层。每个单位的屋顶都充当另一个花园。建筑物不仅嵌入景观中，还可以与土地一起生活和呼吸，利用自然绝缘和来自地球的热量保持室内的稳定温度。
Now let’s look an an example of integrated architecture. The Greendo apartment complex in Takamatsu, Japan is built into the side of a mountain and has five levels; each unit’s roof serves as another’s garden. Not only is the building embedded in the landscape, it also lives and breathes with the land, taking advantage of natural insulation and heat from the earth to maintain a stable temperature inside.
永田圭太（Keita Nagata），“ Greendo”（图片来源：http：//www.designboom.com）
有时，模块化在实现级别有意义，而在设计或其他方面则没有意义。这家位于巴黎的学生宿舍看起来像是模块化的，好像是由可旋转角度不同的移动篮子构成的。
Sometimes modularity makes sense at the implementation level but not in the design, or the other way round. This student accommodation in Paris is made to look modular, as though it’s constructed of shifting baskets rotated at different angles.
OFIS建筑师的“篮子公寓”（图片来源：http：//www.archdaily.com和http://www.ofis-a.si/）
但实际上，阳台的位置以及阳台从建筑物中突出的方式赋予了这种感觉。在这种情况下，将建筑物完全模块化是没有意义的，但是模块化美学仍然适合该特定建筑物。情况恰恰相反。
But in fact it’s the placement of the balconies and the way they protrude from the building that gives it this feel. In this case it didn’t make sense to make the building fully mod- ular, but the modular aesthetic still suited that particular building. The opposite could be the case too.
简而言之，更多的模块化并不总是更好。模块化程度应取决于你要实现的目标。
In short, more modular is not always better. The extent of modularity should depend on what you’re trying to achieve.
模块化程度和项目需求
通常，模块化方法适用于以下产品：
- 需要扩展和发展
- 需要适应不同的用户需求
- 需要大量的重复零件
- 有多个团队同时并独立地工作
In general, the modular approach is suited for products that:
- need to scale and evolve
- need to adapt to different user needs
- need a large number of repeating parts
- have multiple teams working on them concurrently and independently
例子包括电子商务，新闻，电子学习，金融，政府等大型站点，这些都需要扩展，发展和应对不同的用户需求。当模块化成为品牌的一部分并且成为产品的经验。例如，在 Flipboard 中，模块化布局是设计和品牌的核心。这就是使该品牌与众不同的原因：“每个杂志页面的版面感觉都是手工制作且精美，就像编辑和设计师专为你创建的一样。”
Examples can include large-scale sites for e-commerce, news, e-learning, finance, government — anything that needs to scale, evolve and cope with different user needs.I find it especially interesting when modularity becomes part of the brand and the experience of the product. In Flip- board, for example, modular layouts are at the heart of the design and the brand. This is what helped make the brand distinct: “Each magazine page layout feels hand-crafted and beautiful—as if editors and designers created it just for you.”
2 应查尔斯·英（Charles Ying）的“自动布局将Flipboard的杂志样式带到Web和Windows上”。 http://smashed.by/flipboard
2 “Automating Layouts Bring Flipboard’s Magazine Style To Web And Windows” by Charles Ying. http://smashed.by/flipboard
Flipboard 的模块化布局是其经验的核心
另一方面，集成系统适用于以下产品：
- 专为特定目的而设计
- 无需缩放或更改
- 要求系统之外的艺术指导
- 共享的重复部分很少
- 是一次性的，不太可能被重用
On the other hand, integrated systems are suited for prod- ucts that:
- are designed for one specific purpose
- don’t need to scale or change
- require art direction outside the boundaries of the system
- have few shared repeating parts
- are one-offs that are unlikely to be reused
集成方法的示例可以包括创意会议网站，一次性营销活动，创意作品集和展示柜。
Examples of an integrated approach can include creative conference websites, one-off marketing campaigns, creative portfolios and showcases.
Circles Conference是面向设计师和其他创意者的会议。他们的站点采用大胆的设计，带有许多独特的模块，这些模块可能不应该完全模块化。 （KIKK.be，2016年）
当宣传特定的音乐活动时，Spotify的广告系列采用完全不同的设计。
Spotify’s campaigns feature entirely different designs when promoting specific music events.
Spotify 音乐活动广告系列的示例
虽然你可以发现一些品牌样式（例如形状，颜色和版式）的重用，但在这些广告系列中看到来自主要消费者产品的较大构建块的情况并不常见。为了获得更大的灵活性和创造性表达，在消费产品的模块化系统之外创建这些设计是更有意义的。
While you can spot some reuse of a few of the brand styles (such as shapes, color and typography), it is less common to see larger building blocks from the main consumer prod- ucts in these campaigns. To allow more flexibility and crea- tive expression, it made more sense to create these designs outside their modular system for consumer products.3
3 Spotify的品牌和创意团队负责管理广告活动，其系统非常简单，可以非常灵活地组合品牌样式。这样，他们便可以创建适用于Spotify品牌的各种广告系列。
3 The brand and creative team at Spotify, which manages the cam- paigns, has a simple system that allows for a very flexible combination of brand styles. This is how they can create a whole range of cam- paigns which all fit within the Spotify brand.
管理沉淀并选择方向
从长远来看，模块化方法具有适应性，可扩展性和成本效益。但是模块化具有一些缺点。
A modular approach is adaptable, scalable and cost-ef- fective in the long run. But modularity comes with some drawbacks.
首先，与创建旨在实现特定目标的一次性解决方案相比，构建可重用模块通常要花费更多时间。你必须考虑不同的用例，并计划它们在整个系统中的工作方式。为了提高成本效益，需要重新使用模块，这可能会花费一些时间。一些团队为了看到模块化系统的投资回报而苦苦挣扎了一段时间，这使得很难首先证明投资的合理性。
First, building reusable modules is typically more time-con- suming than creating a one-off solution designed to accom- plish a specific goal. You have to think through different use cases and plan how they will work across the system. To become cost-effective, modules need to be reused, which can take time. Some teams struggle for a while to see a return on investment in a modular system, which makes it hard to justify the investment in the first place.
其次，模块通常必须相当通用才能适应各种情况。结果可能是可预测的通用设计，在这种设计中，合成和故事的力量因效率而丧失。当团队选择模块化方法时，他们需要寻找其他创新方法-区分内容或服务，强有力的声音或有效使用感知范式。
Second, modules typically have to be fairly generic to accommodate a variety of cases. The result can be predicta- ble generic designs where power of composition and story are lost in favor of efficiency. When teams choose a modular approach they need to find other ways to innovate — dis- tinct content or service, a strong voice, or effective use of perceptual patterns.
第三，为了使模块化具有价值，团队有时会强制模块的重用。在 FutureLearn 中，我们偶尔会牺牲页面对可重用性的潜在影响。为避免这种情况的发生，技术效率应始终与模块化为用户带来的收益保持平衡。
Third, to make modularity worthwhile, teams sometimes force the reuse of the modules. At FutureLearn we ended up occasionally sacrificing the potential impact a page could have for the sake of reusability. To prevent this from hap- pening, technical efficiency should always be balanced with the benefits modularity brings to the user experience.
最后，主要挑战之一是使模块无缝连接。使用模块化设计，期望你可以混合和匹配零件，并且它们应该完美地结合在一起。但是有时人们会以无法整体使用的方式组合模块。矛盾的是，尽管各个模块之间有很多一致性，但总体体验却缺乏连贯性。
Finally, one of the main challenges is making modules connect seamlessly. With modular design the expectation is that you can mix and match the parts, and they should fit perfectly together. But sometimes people combine modules in ways that don’t work as a whole. And paradoxically, even though there is a lot of consistency across the modules, there is little coherence in the overall experience.
为防止这种情况，我们不仅应关注模块，还应关注模块之间的联系：它们之间相互关系的规则，它们的相对重要性（例如视觉响度），它们在整个用户旅程中的作用，整体结构中的层次结构。
To prevent that, we should focus not only on the modules, but also on the connections between them: the rules of how they relate to one another, their relative importance (such as visual loudness), their role in the overall user journey, their hierarchy in the overall composition.
集成设计可以针对特定目的进行优化，因此可以更加具体。它们也往往更连贯，整体上效果更好。但是它们的伸缩性不好。集成设计无法适应或重复使用，而这恰恰正是我们在网络上所需要的。
Integrated designs can be more specific because they’re optimized for one purpose. They also tend to be more coher- ent and work better as a whole. But they don’t scale well. Integrated designs aren’t adaptable or reusable, which is often exactly what we need on the web.
模块化程度可以随时间变化。你的系统可以从一些共享的样式和原则开始。随着它的增长，你可能会注意到越来越多的重复范式，而增加的模块化成为你产品的逻辑上的进步。
The degree of modularization can change over time. Your system can start with a few shared styles and principles. As it grows, you might notice more and more repeating pat- terns, and increased modularity becomes a logical progres- sion for your product.
同样，它可以朝相反的方向发展。在Future-Learn，我们拥有一个很大程度上模块化的系统。但是我们注意到，必须在影响较大的销售页面上使用可重复使用的范式会感到局限。自FutureLearn开始进行更多的品牌营销活动以来，我们将与更多的自定义部门合作，以做出更强大的品牌声明。
Equally, it can develop in the opposite direction. At Future- Learn we have a largely modular system. But we noticed that having to work with reusable patterns on high-impact sales pages can feel limiting. Since FutureLearn started to do more branded marketing campaigns, we work with more custom sections, to make a stronger brand statement.
组织：集中式或分布式
设计系统的另一个重要方面是如何组织。
Another important aspect of a design system is how it is organized.
集中模型
在集中式模型中，规则和范式主要由一组人管理。通常，这意味着：
- 他们定义了范式和规则
- 他们对系统拥有否决权
- 他们管理范式库或其他存储范式的资源
In a centralized model, rules and patterns are managed pri- marily by one group of people. Typically this means that:
- they define the patterns and rules
- they have veto power over the system
- they manage the pattern library or other resources where patterns are stored
- they define the patterns and rules
这种结构最明显的优势是所有权。如果有人对此负责，则很有可能对系统进行管理，维护和发展。由于它来自一个来源，因此也有助于集中精力和独创性。这可能就是为什么有时我们会在设计主导的公司（例如Apple或Airbnb）中找到这种模型的原因。
The most obvious advantage of this structure is owner- ship. If someone is responsible for it, it is more likely that the system will be curated, maintained and evolved. It also helps the creative direction to be focused and opinionated, because it comes from one source. This is probably why sometimes we find this model in design-led companies, such as Apple or Airbnb.
分布式模型
另一种方法是分布式模型，其中每个使用该系统的人还负责维护和发展它。
An alternative approach is a distributed model, where every- one who uses the system is also responsible for maintaining and evolving it.
这种类型的结构为个人提供了自治权，使他们能够做出决定。它往往更加敏捷和有弹性-如果一个团队错过了某些东西，另一团队可以选择它。设计知识和创意方向是分散的，而不是集中在少数人的思想中。
This type of structure provides autonomy for individuals and empowers them to make decisions. It tends to be more agile and resilient — if one team misses something, another one can pick it up. Design knowledge and creative direction are distributed, rather than concentrated in the minds of a few people.
4 正如我们在第5章中讨论的那样，这种方法通过紧密协作和共享知识来起作用。克里斯托弗·亚历山大（Christopher Alexander）在《永恒的建筑方式》中将类似的概念称为“范式语言”方法。
4 As we discussed in chapter 5, this approach works through close collaboration and shared knowledge. Christopher Alexander refers to a similar concept as a “pattern language” approach in The Timeless Way of Building.
这是 TED 使用的方法，也是我们在 FutureLearn 中尝试建立的结构。对于像 FutureLearn 这样的小公司，拥有专门的设计系统团队是不切实际的。所有从事该产品工作的设计师和前端开发人员也都对该系统做出了积极贡献。而且由于每个人都付出了一点，因此以这种方式运行系统并不需要很长时间。这是过去三年来我们维护范式库的唯一方法。
This is the approach used at TED, and it’s also the structure we tried to establish at FutureLearn. For a small company like FutureLearn, it was impractical to have a dedicated design systems team. All the designers and front-end devel- opers who work on the product also actively contribute to the system. And because everyone contributes a little, run- ning a system in this manner doesn’t take that long. That’s the only way we have been able to maintain the pattern library for the last three years.
封装挑战
虽然分布式方法适用于FutureLearn，但并非适用于所有人。与我交谈过的许多公司在尝试时都有不同的经历。刚开始时人们很热情，但没有人负责，工作可能会减慢速度或完全停止。
While a distributed approach works for FutureLearn, it’s not for everyone. Many companies I spoke to had a different experience when trying it. People were enthusiastic at first but without someone in charge, the work could slow down or stop completely.
欧洲之星的团队并不大：它由四个设计师，四个产品经理和十个前端开发人员组成。最初，对于这种规模的团队，分布式方法具有实际意义。但是一年之后，他们仍在努力使每个人平均分配。
The team at Eurostar is not large: it consists of four design- ers, four product managers and ten front-end developers. A distributed approach initially made practical sense to a team of this size. But after a year, they still struggled to make everyone contribute evenly.
“我们希望看到每个人都在做出贡献。但是相反，我们看到几个人做出了很大贡献”。
—欧洲之星解决方案架构师Dan Jackson
“Wewantedtoseeeveryonecontributingalittle.Butinsteadwesaw a couple of people contributing a lot”. —Dan Jackson, Solutions Architect, Eurostar
改用集中式方法后，团队取得了更好的进步。
After switching to a centralized approach, the team made a much better progress.
欧洲之星的图案库，2017年https://style.eurostar.com/
完全分布式的方法似乎需要某种类型的团队文化才能发挥作用。同样，没有文化来支持的严格系统也会失败。在英国广播公司（BBC），集中式方法不适用于GEL。英国广播公司（BBC）的技术负责人本·斯科特（Ben Scott）在一次采访中分享了尽管进行了集中化系统的调查，但这样做却不值得，因为每个产品团队对设计的概念总是有自己的强烈看法。因此，分布式方法效果更好。
A fully distributed approach seems to require a certain type of team culture to work. Equally, a strict system also fails without a culture to back it up. At the BBC, a centralized approach didn’t quite work with GEL. Ben Scott, a technical lead at the BBC, shared in an interview how despite investi- gation into centralizing their system, it was not worthwhile because each product team always had their own strong views on what their design should be. So the distributed approach worked much better.
管理沉淀和选择方向
集中式方法可提供所有权和可靠性。同时，它可以对抗团队。由于责任由一群人承担，因此他们可能成为瓶颈，减慢整个产品的生命周期。对于较小的团队，将某人从产品上移开以让他们将大部分时间用于工作可能也不切实际。专注于系统。
A centralized approach provides ownership and reliability. At the same time, it can work against the team. Because the responsibility falls on one group of people, they can become a bottleneck, slowing down the entire product’s life cycle.6For smaller teams, it may also be impractical taking some- one away from the product to allow them to dedicate most of their time to focusing on the system.
分布式方法可提高自治性，并授权整个团队创建。它更敏捷，更有弹性，因为它不依赖一小群人。但是，以可持续的方式运作并且不淡化创意方向是一项挑战。
A distributed approach promotes more autonomy and empowers the whole team to create. It’s more agile, more resilient, because it doesn’t depend on a small group of people. But it’s challenging to make it work in a way that’s sustainable and that doesn’t dilute creative direction.
就像系统规则的相对严格性及其模块化程度一样，组织系统的方式也不取决于团队的规模。在小公司中，创意方向可以来自单一来源，例如首席执行官或创意总监。在大型公司中，分布式系统也可以工作。
Like the relative strictness of a system’s rules and its degree of modularity, ways of organizing a system don’t depend on the size of the team. In a small company, creative direction can come from a single source, such as CEO or a creative director. In larger companies, a distributed system can work also.
例如，Atlassian 是一个相对大型的组织，拥有 2,000 多名员工。有一个专门的团队负责策划范式，但也有一个开源的贡献模型。公司中的每个人不仅被允许，而且被积极鼓励做出贡献。
For example, Atlassian is a relatively large organization with over 2,000 employees. There’s a dedicated team that curates the patterns, but there is also an open source model for con- tributions. Everyone in the company is not only allowed but also actively encouraged to contribute.
我们希望人们不能只同意设计语言而是拥抱它并向前发展。”
— Atlassian 设计总监 JürgenSpangl_
Wewantpeoplenotjustconsentthedesignlanguagebutembraceit and move it forward.” — Jürgen Spangl, head of design, Atlassian
_Atlassian 的设计指南运行一个开源模型，该模型允许每个人都可以贡献，但是贡献得到管理和策划
在 BBC，GEL 提供了范式的“理想理想”版本，然后每个部门都有自己的实现。
At the BBC, GEL provides “platonic ideal” versions of patterns, and then each department has its own implementation.
5 2017年5月对Ben Scott的非正式采访
6 在Airbnb，添加新模块的过程最多可能需要两个星期。这是团队试图改进的事情之一。
5 Informal interview with Ben Scott, May 2017 6 At Airbnb the process of adding a new module can take up to two weeks. This is one of the things the team is trying to improve.
摘要
在本章中，我们研究了使用不同方法设计系统的几个团队。这就是我将它们放置在前面介绍的三个标尺上的方法。Airbnb 系统是严格的，模块化的和集中组织的。它通过严格遵守的规则和流程来运作。这种系统有很多确定性和一致性。
In this chapter we’ve looked at several teams, with different approaches to design systems. Here’s how I would place them on the three scales introduced earlier.The Airbnb system is strict, modular and centrally organ- ized. It operates through rules and processes which are followed strictly. There’s a lot of certainty and consistency with this kind of system.
<br />
在规模的几乎另一端，我们拥有像TED这样的系统，它们的设置更为宽松，并且整个团队的创作方向都分布在这里。这些系统通常允许更多的实验，微调和对上下文的敏感性。
On almost the opposite end of the scales we have systems like TED’s, which are much more loosely set up and where creative direction is distributed throughout the team. These systems typically allow more experimentation, fine-tuning and sensitivity to context.
在这两者之间的某个中间，我们有诸如FutureLearn之类的团队。作为一家年轻且成长中的公司，FutureLearn 的设计系统已朝着规模发展。它开始于更加集中和集成，逐渐变得更加分散和模块化。一旦我们开始关注一致性，系统规则就会随着时间的推移变得越来越严格。
Somewhere in the middle between the two, we have teams like FutureLearn. As a young and growing company, the design system at FutureLearn has moved along the scales. It started as more centralized and integrated, gradually becoming more distributed and more modular. The rules of the system have also become stricter over time, once we started focusing on consistency.
找到适合你的系统
当然，另一个重要方面是团队文化，这将不可避免地反映在他们将产生的设计系统中。正如康威的法律所述：
Another important aspect is, of course, a team culture, which is inevitably reflected in the design system they will pro- duce. As Conway’s law states:
设计系统受到约束的组织只能生产设计，这些设计是这些组织的通信结构的副本。
Organizationswhichdesignsystems[…]areconstrainedtoproduce designs which are copies of the communication structures of these organizations.”
Sipgate 的团队现在正在重建其范式库。有趣的是，他们不是将模型从分布式转换为集中式，而是为了使集中式模型正常工作，他们必须首先向公司展示完全自治是怎么样的。最初，Sipgate 的自由进取和热情的团队无法想象他们的设计受到其他人的“控制”。但是，在像他们这样的自主文化中，他们意识到这正是保持系统一致和统一所需要的。
The team at Sipgate are now rebuilding their pattern library. What’s interesting is not that they switched their model from distributed to centralized, but that in order to make the centralized model work they had to first demonstrate to the company what full autonomy would look like. At first, the free-spirited and enthusiastic teams at Sipgate couldn’t imagine their designs being “controlled” by someone else. But with an autonomous culture like theirs, they realized that that’s exactly what they needed to keep their system coherent and unified.
为了使其工作，他们必须在设计过程以及如何进行协作方面进行一些更改。现在，团队更加注重共享方法和设计方法，而不是有效地记录范式。对他们来说，这不仅是方向的改变，还是文化的转变。
To make it work, they had to make a few changes in their design process and how they collaborate. The team now put more emphasis on having a shared methodology and the design approach, rather than efficient documentation of the patterns. For them it wasn’t only a change in direction — it was also a cultural shift.
适合你的系统不是别人的系统。对一个团队有效的方法可能对另一个团队无效。有时候，我们认为其他团队也做对了，并渴望建立像Airbnb这样的系统。但是每种方法都有其缺点。最适合你的系统是你可以管理不利因素的系统。
The right system for you is not some else’s system. What- ever works for one team might not work for another. Sometimes we think other teams have got it right and aspire to build a system just like Airbnb. But every approach has its downsides. The right system for you is the one where you’re able to manage the downsides.
每个有效设计系统的核心都不是工具，而是共享的设计知识，即哪些东西可以为你的特定团队和特定产品提供出色的设计和用户体验。如果这些知识很清楚，其他所有内容都会随之而来。
At the heart of every effective design system aren’t the tools, but the shared design knowledge about what makes good design and UX for your particular team and your particular product. If that knowledge is clear, everything else will follow.
7 康韦定律是由计算机科学家兼程序员梅尔文·康韦（Melvin Conway）在1967年所做的一项观察得出的。
7 Conway’s law emerged out of an observation made in 1967 by Melvin Conway, a computer scientist and programmer.
若有收获，就点个赞吧
0 人点赞
