规划与实践

在本章中，我们将寻求为在您的组织中建立设计系统和计划工作的支持。

In this chapter we’ll look at finding support for establishing a design system in your organization, and planning the work.

团队如何开始更系统地考虑设计？通常，当他们注意到当前工作流程的问题时。设计师总是会解决相同的问题，或者无法正确实现设计而感到沮丧。开发人员对自定义样式的每个组件以及处理混乱的代码库感到厌倦。两者都难以满足不断增长的产品的最后期限和需求。没有共享的设计语言和实践，协作将很困难。

How does a team start thinking about design more systematically? Typically, when they notice issues with their current workflow. Designers become frustrated always solving the same problems, or not being able to implement their designs properly. Developers are tired of custom styling every component and dealing with a messy codebase. Both struggle to meet the deadlines and demands of a growing product. Without shared design language and practices, collaboration is difficult.

有些人开始进行改进-标准化按钮，设置主 Sketch 文件，创建现有组件的简单库。其他人则注意到了好处并共同努力。团队可能会标准化更多的模式，调整设计词汇表，设置新的工具和流程。经过反复试验，他们将看到系统功能的改进。这些最初的举措包含了宝贵的经验教训。但是要真正发挥作用，仅将设计系统作为副项目进行工作是不够的。您需要广泛的支持，不仅需要同行的支持，还需要业务的高级利益相关者的支持。

Some people start making improvements — standardizing buttons, setting up a master Sketch file, creating a simple library of existing components. Others notice the benefits and join their efforts. The team might standardize more patterns, align the design vocabulary, set up new tools and processes. After some trial and error, they will see improve- ments in how their system functions. These first initiatives contain valuable lessons. But to make a real difference, working on a design system as a side project is not enough. You need widespread support — not only from your peers but also the senior stakeholders in the business.

获得高级利益相关者的支持

让人买账不容易，一些团队首先收集产品中视觉上不一致的示例。按钮不一致的图像可能是引人注目的图形，但这并不总是足以使 CEO 或经理看到您提议的更改的价值。要获得企业的支持，您需要证明有效的设计系统将有助于以更低的成本更快地实现业务目标。换句话说，您需要为此提供业务案例，有时在您的推销中使用熟悉的语言会有所帮助。如果“综合设计系统”的概念对您的听众来说太宽泛和抽象，请尝试将其表示为“模块化界面”。模块化具有许多已证明的实际好处，我们在上一章中已经讨论过。只要是您的正确方向，这些好处就可以在您的团队和产品方面得到证明。这里有一些例子。

Getting buy-in is not always easy. Some teams start by collecting examples of the visual inconsistencies across the product. An image of inconsistent buttons might be a com- pelling graphic but it’s not always enough to make a CEO or your manager see the value of the changes you’re proposing.To get support from the business, you need to demonstrate that an effective design system will help to meet business goals faster and at lower cost. In other words, you need to make a business case for it.Sometimes it helps to use familiar language in your pitch. If the idea of a “comprehensive design system” sounds too broad and abstract to your audience, try to present it as “a modular interface” instead. Modularity has many proven practical benefits, which we discussed in the previous chap- ter. As long as it is the right direction for you, those benefits can be demonstrated in relation to your team and your product. Here are a few examples.

1.在设计和建造模块上节省了时间

自然地，重用现有元素比重新构建一个元素更快。您甚至可以大致计算出可以节省多少时间。在FutureLearn中，第一次构建相对简单的自定义组件可能需要大约三个小时。以模块化的方式构建相同的组件（正确构造结构，使其在各种用例中都具有灵活性，想出一个好名字，将其添加到模式库中）可能要花费两倍的时间。但是，再次使用同一组件时，它几乎是免费的。从长远来看，如果您以强调可重复选择的方式工作，则可以节省大量时间。

Naturally, reusing an existing element, rather than build- ing one from scratch, is quicker. You might even be able to work out roughly how much time it can save. At FutureLearn, building a relatively simple custom component for the first time can take about three hours. Building the same component in a modular way (getting the structure right, making it flexible for various use cases, coming up with a good name, adding it to the pattern library) can take twice as long. But when the same component is used again, it’s almost free. In the long run this can save a lot of time, if you work in a way that emphasizes repeatable choices.

甚至看似简单的元素（如按钮）也需要花费时间和精力进行设计和构建。为了使高级利益相关者了解重用组件的价值，设计系统顾问和Modular Web Design的作者Nathan Curtis使用了一个有关按钮复杂性的故事。在几张幻灯片中，他演示了按钮如何花费数十万美元进行设计和构建。

Even seemingly simple elements like buttons take time and effort to design and build. To get senior stakeholders to understand the value of reusing components, design system consultant and author of Modular Web Design Nathan Curtis uses a story about button complexity. In a few slides he demonstrates how buttons can cost hundreds of thousands of dollars to design and build.

如果您的参赛奖有25个团队搜索按钮，那么拥有一个好的按钮会使您的企业损失100万美元。”
—内森·柯蒂斯（Nathan Curtis）

If your enter prise has 25 team seach making buttons,then it costs your enterprise $1,000,000 to have good buttons.” — Nathan Curtis

1 http://smashed.by/goodbuttons

量化和证明效率低下的成本通常是获得高管认可的最有效方法。

Quantifying and demonstrating the cost of inefficiency is often the most effective way to get executive buy-in.

2.进行站点范围更改所节省的时间

臃肿且效率低下的系统意味着即使最小的更改也很耗时且很麻烦。 Etsy 的 Marco Suarez 在他的文章“为增长而设计”中描述了技术和设计方面的债务如何拖慢他们的团队。他分享了杰西卡·哈勒（Jessica Harllee）在 etsy.com 上更新按钮样式的工作的一些差异示例。删除的代码以红色显示，代码以绿色显示。显然，为了进行简单的视觉更改，触摸了太多代码。

A bloated and inefficient system means that even the smallest changes are time-consuming and fiddly to make. In his article “Designed for Growth”2 Etsy’s Marco Suarez described how technical and design debt slow their team down. He shared an example of a diff of Jessica Harllee’s work for updating the styling of buttons on etsy.com. The deleted code is shown in red, and the code written in green. Evidently, far too much code was touched in order to make a simple visual change.

2 http://smashed.by/designforgrowth

用于更新etsy.com上按钮样式的文件差异，其中删除的代码以红色显示，代码以绿色显示

更改不仅耗时，而且有时必须在不同的地方应用相同的更改。相反，可重复使用的模式将在使用该模式的任何地方自动更新。这样可以更快地进行站点范围的更新。

Not only are changes time-consuming to make, sometimes the same change has to be applied in different places. Conversely, a reusable pattern will be updated automati- cally everywhere that pattern is used. This makes site-wide updates quicker to make.

从长远来看，使用的模块越多越好。不同的团队会提出不同的用例和解决方案来满足他们。通过改进单个组件，整个系统将变得更加强大且易于维护。而且，团队花费在修复错误和混乱代码上的时间越少，他们就必须花费更多的时间来致力于为用户和企业带来价值的事情。

In the long run, modules should get better the more they are used. Different teams come up with different use cases and solutions to meet them. By improving individual compo- nents, the whole system becomes more robust and easier to maintain. And the less time a team spends fixing bugs and untangling messy code, the more time they have to work on things that bring value to their users and the business.

3.更快发布产品

如果您访问法式蛋糕店并订购各种现成的糕点，您将获得与订购定制蛋糕完全不同的报价。在 FutureLearn中，产品经理了解使用现有模块和新模块开发功能的不同时间范围。使用库中的模式构建页面通常需要几天的时间。新设计可能需要数周的时间。因此，如果我们需要测试概念或试用新功能，有时会使用现有模块来快速发布功能。这可能并不完美，但它使团队有时间进行测试，收集反馈并制定出更好的解决方案。

If you visit a patisserie and order a selection of ready-made pastries you will get an entirely different quote from order- ing a custom-made cake. At FutureLearn, product managers understand the different timescales for developing a feature made from existing modules versus new ones. Building a page using the patterns from the library is typically a matter of days; a new design can take weeks. So if we need to test a concept or pilot a new feature, sometimes existing modules are used to release a feature quickly. It might not be perfect, but it gives the team time to test, collect feedback, and work out a better solution.

Tobias Ritterbach指出，在提供新功能时，使用 Sipgate 的团队使用新模式库的速度要比不使用新模式库的团队快许多倍：

Tobias Ritterbach noted how the teams at Sipgate that use their new pattern library are many times faster when deliv- ering new features than the ones that don’t:

“拥有一个sipgate.deal lowsus模式库，其页面构建速度比未连接到该库的其他产品站点快10–20倍。”
— Sipgate经验所有者Tobias Ritterbach

“Having a pattern library for sipgate.deal lowsus to build pages 10–20 times faster than for other product sites which are not connect- ed to the library.” — Tobias Ritterbach, experience owner, Sipgate

这些示例表明，模块化系统通过使团队能够更快地原型设计和交付功能来帮助满足不断增长的产品的需求。

These examples show that a modular system helps to meet the demands of a growing product by enabling teams to prototype and ship features faster.

其他好处

在为设计系统辩护时，优胜者往往将重点放在证明和量化低效成本上。但是，当然还有其他重要的好处，在某些组织中可能会很有价值。

When making a case for a design system, the winning argu- ments tend to focus on demonstrating and quantifying the cost of inefficiency. But, of course, there are other important benefits, which may be valued in some organizations.

品牌尺寸统一

公司最终会遇到其不同产品（有时甚至是同一产品的某些部分）看上去都属于不同品牌的情况，这种情况并不少见。统一同一品牌下不断增长的产品或产品线需要有效的设计系统。

It’s not uncommon for companies to end up in a situation where their different products (or sometimes even parts of the same product) all look like they belong to different brands. Unifying a growing product or line of products under the same brand requires an effective design system.

视觉一致性

设计是一种语言，通过设计，我们可以交流产品的心理模型。一致的视觉表示可以使人们熟悉和可预测，从而帮助人们更快地学习界面并减轻认知负担。它有助于使界面感觉直观。

Design is a form of language — through design we commu- nicate a mental model of the product. A consistent visual representation helps people learn the interface quicker and reduce cognitive load by making things familiar and pre- dictable. It helps to make an interface feel intuitive.

建立一致性就像在整个界面中做出小的承诺一样（当您看到一个粉红色的按钮时，它始终是一个动作；“取消”按钮始终位于“提交”之前）。当人们对即将发生的事情充满信心时，他们可以依靠产品。一致性有助于建立信任。

Creating consistency is like making small promises through- out the interface (when you see a pink button it is always an action; the “Cancel” button always comes before “Submit”). When people can be confident of what will happen, they can rely on the product. Consistency helps to build trust.

团队合作与协作

共享语言是协作的基础，而这正是有效的设计系统所能提供的，它为人们提供了共同创建事物的工具和流程。他们可以彼此合作，而不是从头开始重建相同的事物。即使只是将零件收集到一个地方，Airbnb 的设计师也开始看到生产率的提高。

A shared language is fundamental to collaboration, and that’s exactly what an effective design system provides.It gives people the tools and processes to create things together. They can build on one another’s work, rather than recreate the same things from scratch. Even after simply collecting components in one place, designers at Airbnb began to see improvements in productivity.

我们从组件到主草图文件进行了收集。一个星期或两个星期之后，我们开始在迭代设计时使用该库，开始看到生产率的巨大飞跃。”
— Airbnb设计总监Karri Saarinen。_

WecollectedcomponentsinamasterSketchfile.Afteraweekortwo we began to see huge leaps in productivity by using the library when iterating on designs.” — Karri Saarinen, design lead, Airbnb.

以具体情况呈现这些案例有助于团队获得所需的支持。正如设计师劳拉·伊丽莎白（Laura Elizabeth）在她的一次演讲中建议的那样：“使用测试项目来展示其好处也可能是有效的。在小型测试项目上尝试设计系统，可以查看其对工作的影响并演示节省了多少时间。”

Presenting these cases in ways specific to their situations has helped teams get the support they needed. Using a test project to demonstrate the benefits can also be effective, as designer Laura Elizabeth advised in one of her talks:
Trying a design system on a small test project allows you to see the effect it can have on your work and to demonstrate how much time you’re saving.”

不是每个人都可以立即建立一个专门的设计系统团队或正式制定其计划，但是即使与几个专门的人一起冲刺也可能是证明可以实现目标的有用起点。这些第一步的成功可以用来证明稍后获得更多支持。

Not everyone can establish a dedicated design system team or formalize their plans right away, but even spending one sprint with a couple of dedicated people could be a helpful starting point to demonstrate what could be achieved.The success of these first steps can be used to get more support later.

3 See “Creating the Airbnb Design System” by Karri Saarinen (http://smashed.by/airbnbsystem))
4 See “Selling Design Systems” by Laura Elizabeth (http://smashed.by/sellingsystems))

从何开始

正如我们在上一章中所看到的，每个团队将有不同的要求，并且不同的策略将适用于他们。但是，这里有一些技巧对大多数人都有用，无论他们处于何种情况。

As we saw in the previous chapter, every team will have dif- ferent requirements, and different strategies will work for them. But here are a few tips that have been helpful for most people, regardless of their situation.

认同您的目标和项目

您希望通过这项工作完成的主要结果是什么？有明确的目标会给团队方向和动力。它可以帮助他们安排时间并平衡优先级。目标应包括一些目标-实现该目标的具体可衡量步骤。

What are the main outcomes you’re hoping to accomplish with this work? Having clear goals gives a team direction and motivation. It helps them organize their time and balance priorities. A goal should include a few objectives — specific measurable steps to achieve it.

如果您像我一样，看到有关模式和共享实践的设计系统，那么您的目标可以反映出来。例如，其中一个可以专注于界面，而另一个可以专注于团队的运作方式。

If you, like me, see design systems in relation to patterns and shared practices, your goals can reflect that. For instance, one of them can be focused on the interface, and the other on the way team operates.

1.系统化界面

• 定义指导设计原则
• 定义和标准化可重复使用的设计模式
• 建立模式库
• 设置具有最新模式的主设计文件
• 重构代码和前端架构以支持模块化方法

  • Define guiding design principles
  • Define and standardize reusable design patterns
  • Establish a pattern library
  • Set up master design files with up-to-date patterns
  • Refactor code and front-end architecture to support the modular approach

**

2.建立共享的流程和治理

• 通过对话，协作，配对，培训建立知识共享流程
• 推广模式库并鼓励其在整个公司中使用
• 促进团队和学科之间共享设计语言
• 在入门过程中介绍设计系统

  • Set up knowledge-sharing processes through conversa- tions, collaboration, pairing, training
  • Promote the pattern library and encourage its use across the company
  • Promote shared design language across teams and disciplines
  • Make introduction to the design system part of the induction process

目标可以分解为较小的任务和故事。为了规划随着时间的推移将如何实现目标，在此阶段，为设计系统创建简单的路线图也很有帮助。这可以在Trello之类的软件中完成，甚至可以在带有粘滞便笺的白板上完成。重要的是，该路线图使团队对他们的优先事项以及系统随着时间的推移如何发展有了共同的了解。

Objectives can be broken down into smaller tasks and stories. To plan how your goals will be achieved over time, at this stage it is also helpful to create a simple road map for your design system. This can be done in software such as Trello, or even on a whiteboard with sticky notes. What mat- ters is that the road map gives the team a collective under- standing of their priorities and how the system should evolve over time.

在FutureLearn中，我们还将设计系统的故事集成到主要产品的路线图中。这有助于使团队的其他成员了解我们正在做的工作，并使其与其他优先事项保持平衡。

At FutureLearn we also integrated design system stories into the main product’s road map. This helped to make the rest of the team aware of the work we were doing and bal- ance it with other priorities.

明确目标和里程碑也有助于管理公司其他部门的期望。设计系统是一项长期投资，其价值会随着时间的推移逐渐增加。人们期望看到渐进稳定的进步，而不是迅速而显着的进步，这一点很重要。

Having clear goals and milestones also helps manage expec- tations in the rest of the company. A design system is a long- term investment – its value increases gradually over time. It’s important that people expect to see gradual and steady improvements rather than quick dramatic ones.

5 参考 Nathan Curtis 的“设计系统路线图”（http://smashed.by/systemsroadmap）

5 See “Road maps for Design Systems” by Nathan Curtis (http://smashed.by/systemsroadmap))

过程保持透明

根据我的观察，在设计系统上公开了某些工作的团队比那些将所有内容都保密的团队进步更快。欧洲之星（Eurostar）的丹·杰克逊（Dan Jackson）在一次采访中解释了尽早发布其风格指南的重要性，即使它并不完美。知道别人可能已经从他们的工作中学到了东西，这提供了额外的动力：

In my observations, teams who have made public some of their work on the design systems tend to progress faster than those who kept everything under wraps. Dan Jackson at Eurostar explained in an interview the importance of mak- ing their style guide public early on, even when it wasn’t perfect. Knowing that others might have been learning from their work provided additional motivation:

希望将样式指南用作我们引以为傲的面向公众的产品。其他人可能正在查看它并将其用作资源。这使我们感到必须跟上。”
—欧洲之星解决方案架构师Dan Jackson_

Iwantedthestyleguidetobeapublic-facingproductthatwe’re proud of. Other people may be looking at it and using it as a resource. It makes us feel that we have to keep up.” — Dan Jackson, solutions architect, Eurostar

一些团队撰写有关其系统发展的简短博客文章。如果您不仅要描述自己的成功，而且要描述自己的错误，绊脚石和下次要做的事情，这将特别有用。以开放和诚实的方式记录您的进度是一种强大的方式，可以帮助您的团队学习和保持动力。

Some teams write short blog posts about their system as it evolves. This is especially useful if you describe not only your successes, but also your mistakes, stumbling blocks and things you’d do differently next time. Documenting your progress in an open and honest way is a powerful way to help your team learn and stay motivated.

这样做还可以使幕后工作透明化。在FutureLearn上定期撰写和讨论我们的设计系统，对于让更多的人了解我们正在做的工作的价值而言是无价的。

Doing that also makes transparent the work done behind the scenes. Writing and talking regularly about our design system at FutureLearn was invaluable in getting more peo- ple to understand the value of the work we were doing.

创建知识共享文化

正如我们在上一章的 Sipgate 示例中看到的那样，一个团队可以拥有一个最新的模式库，但是如果没有有效的跨团队协作，它就无法提供最大的价值。使您的团队以更系统的方式进行思考需要强大的知识共享实践。我们在第5章“共享语言”中讨论了其中的一些内容。

• 设置专用的Slack渠道，以协作定义和命名设计模式并讨论与系统相关的问题。
• 创建一个样板墙，以使该过程对公司的其他成员开放和透明，并鼓励更多的人加入。
• 在归纳过程中介绍设计系统。
• 组织定期的追赶，以使每个人都可以随着系统的发展而保持一致。
• 鼓励不仅在单个团队内部而且在团队和学科之间进行协作。特别是，鼓励对设计系统有更多了解的人与每个人一起工作，以便他们有机会与不那么沉迷于系统的人分享他们的知识和热情。
• 组织研讨会和教程，向团队介绍随着系统发展而发生的变化。在Future-Learn，最有效的演示采用“问题-解决方案”格式。首先，我们与人们讨论了当前的问题，然后解释了我们提出的更改将如何帮助解决问题。例如：“当前的排版意味着在大屏幕上文本太小而在小屏幕上文本太大；阅读经验受到影响；目前尚不清楚要使用哪个标题，样式太多，会产生不一致，等等。新版式系统可以解决这些问题。”
• 维塔利·弗里德曼（Friedman）和他的团队一直采用的一种教学方法是每天在界面中专门分配一个组件。他们将有轮播日，灯箱日，手风琴日等。每个人都将收到一份打印输出，突出显示该组件及其变体，包括前端代码和相关样式。

  As we saw in the example of Sipgate in the previous chapter, a team can have an up-to-date pattern library, but it won’t provide as much as value without effective cross-team collaboration. Getting your team to think in a more systematic way requires powerful knowledge-sharing practices. We discussed some of them in chapter 5, “Shared Language:”

  • Set up a dedicated Slack channel to collaborate on defining and naming design patterns and to discuss system-related questions.
  • Create a pattern wall to make the process open and transparent to the rest of the company and encourage more people to join in.
  • Make introduction to the design system part of the induction process.
  • Organize regular catch-ups to keep everyone on the same page as your system evolves.
  • Encourage collaboration not only within individual teams but across teams and disciplines. In particular, encourage people who are more knowledgeable about the design system to work with everyone, so they have an opportunity to share their knowledge and enthusi- asm with people who are less immersed in the system.
  • Organize workshops and tutorials to introduce the team to the changes as the system evolves. At Future- Learn, the most effective presentations had a “problem– solution” format. First, we talked people through cur- rent problems then explained how the changes we were proposing would help to solve the problem. For exam- ple: “Current typography means that text is too small on large screens and too large on small screens; reading experience is affected; it’s not clear which headings to use, and there are too many styles, which creates incon- sistencies, and so on. Here’s how the new typography system solves these problems.”
  • OneoftheguerillatacticsVitalyFriedmanandhisteam have been applying is dedicating each day to a compo- nent in the interface. They’d have a carousel day, a light- box day, an accordion day, and so on. Everybody would receive a printout highlighting the component and its variants, including front-end code and related styles.

一个月后，每个人都记得所有组件的名称，包括清洁人员！”
— Smashing Magazine主编Vitaly Friedman

Weputitnexttothekitchensinkandinthebathroom.Amonth later, everybody remembers the naming of all the components, including the cleaning personnel!” — Vitaly Friedman, editor-in-chief, Smashing Magazine

保持团队士气

在设计系统上工作是一个长期的过程。您的团队在一段时间内可能看不到您所做的事情的回报。

Working on a design system is a long-term process. Your team might not see the rewards of what you’re doing for some time.

您并不总是能立即获得个人满足-当您看到其他人使用您在他们的工作中创建的模块时，或者当有人评论这些信息对他们有多大帮助时，就会得到回报。”
— FutureLearn的前端开发人员Jusna Begum

You don’t always get the personal satisfaction right away — the reward comes when you see other people using the module you cre- ated in their work, or when someone comments on how helpful the information was for them.” — Jusna Begum, front-end developer, FutureLearn

在此过程中，您可以采取一些措施来保持团队士气。

There are a few things you can do to help keep up the team’s morale during the process.

与其花费大量精力完成任务，不如一口气完成大部分工作，然后将其余工作继续作为正在进行的工作的一部分。在 Atlassian，最初的进展是由两到三个人通过设计峰值实现的。负责 Atlassian 设计指南（ADG）初始工作的产品设计师 Matt Bond 在他的博客文章中解释说，采用两阶段方法可以使团队迅速进入初始阶段并保持势头：它的产量很高，在很短的时间内就完成了80％的新模式。然后，我们将在下一周左右的时间里花一些时间来完善模式，并重新获得指南和代码，以将其包括在ADG中。”

Rather than chipping away at an endless list of tasks, aim to complete the bulk of the work in one go, and then con- tinue the rest as part of ongoing work. At Atlassian, initial progress was made through design spikes by two or three people. Matt Bond, a product designer who led the initial work on the Atlassian Design Guidelines (ADG), explained in one of his blog posts that having a two-phase approach allowed the team to get through the initial stages quickly and to then maintain momentum: It was high output,getting many new patterns to 80% completion in a short amount of time. We’d then spend the next week or so dedicat- ing small amounts of time to refine a pattern and get the guidelines and code up to scratch to include in the ADG.> ”

对于某些工作（例如进行界面审核或设置模式库），至少在整个初始阶段，让整个团队（或多个团队的代表）参与进来很有用。这样做可以提供一种共有的主人翁感。如果由于其他优先事项无法解决问题，请让一小部分人进行基础工作，并根据需要让其他人参与。在 FutureLearn 中，我们两个人（一名设计师和一名前端开发人员）花费了全部精力专注于系统上的 sprint，一旦弄清楚了它应该如何工作，便按要求将其他人拉入。

For some of the work, such as conducting an interface audit or setting up a pattern library, it’s useful to get the whole team (or representatives from multiple teams) involved, at least in the initial stages. Doing so provides a shared sense of ownership. If it’s not possible owing to other priorities, let a smaller group do the groundwork and involve others as needed. At FutureLearn, two of us (a designer and a front- end developer) spent a sprint fully focused on the system, roping others in as required once we’d figured out how it should work.

它还有助于以最小的努力获得最大收益的方式来计划任务。在FutureLearn中，我们的目标是使所有组件都栩栩如生。这意味着网站和模式库中模块的代码必须相同。但是要实现这一目标涉及重构每个模块。重构它们时，我们将它们一一添加到模式库中。这是一个痛苦而缓慢的过程，团队开始失去动力。

It also helps to plan the tasks in a way that affords the most benefit for the least effort. At FutureLearn, our goal was to make all the components living. This meant that the code for the modules on the website, and in the pattern library, would need to be the same. But achieving that involved refactoring every module. As we refactored them, we added them to the pattern library, one by one. It was a painfully slow process and the team started to lose motivation.

然后，我们意识到可以通过一次性添加所有模式并将其显示为屏幕截图而不是代码来更快地提供价值。这使团队可以立即开始使用模式库进行参考。在接下来的几个月中，随着我们继续重构它们，我们逐渐将截图替换为活动模块。如果我们不这样做，可能要再过一年才能记录所有模式。

We then realized that we could provide value quicker by adding all the patterns in one go and displaying them as screenshots instead of code. This allowed the team to start using the pattern library for reference right away. In the following months we gradually replaced the screenshots with living modules, as we continued refactoring them. Had we not done that, it would probably have taken another year before all the patterns were documented.

6 See “How we made the Atlassian Design Guidelines” by Matt Bond. (http://smashed.by/makingofatlassian)

在系统中实践思维

我们在 FutureLearn 进行的关于模块化的第一个实验之一就是尝试重新设计主页。一位视觉设计师创建了模块化切片，然后我们在一家车间工作，试图将它们组织成完整的片段。这就是我们认为（也许天真）模块化设计过程的样子。

One of our first experiments with modularity at Future- Learn was an attempt to redesign the home page. A visual designer created modular slices, and we then held a work- shop where we tried to organize them into full comps. That’s what we thought (perhaps naively) a modular design process looked like.

我们的第一个模块化实验。
我们最终得到了三种设计，最终成为了功能齐全的原型。但是，尽管这是一个有用的练习，但结果并不是真正的模块化：

• 模块没有明确的目的。它们之间的差异主要是呈现性的。
• 我们没有定义和命名它们。
• 对于如何重用它们，我们没有考虑太多。
• 他们在整个系统中的作用尚不清楚。

  We ended up with three designs that eventually became fully functioning prototypes. But even though it was a use- ful exercise, the result wasn’t truly modular:

  • Modules didn’t have a clear purpose. The differences between them were mostly presentational.
  • We didn’t define and name them.
  • We didn’t put a lot of thought into how they would be reused.
  • Their role in the overall system was unclear.

原型从未投入生产。但是正是这些类型的实验使我们的设计过程更加系统化。通过尝试不同的事情，我们意识到模块化设计不只是削减接口并将各个部分放回原处。如果您的团队是这种思维方式的新手，那么首先通过在辅助项目或产品的较小区域上进行试验来探索模块化的意义是很有用的。

The prototypes never made it into production. But it’s these type of experiments that helped make our design process more systematic. By trying different things we realized that modular design is much more than cutting up the interface and putting the pieces back together. If your team is new to this way thinking, it’s useful to first explore what modular means by experimenting on a side project or on a small area of your product first.

在尝试了几种不同的方法之后，我们进行了更为结构化的团队练习，以使界面系统化。接下来的两章将详细介绍此练习。简而言之，它将遵循三个步骤：

• 识别关键行为或美学品质
• 审核现有元素
• 定义模式

  After trying out a few different approaches, we arrived at a more structured team exercise for systemizing an interface. The next two chapters describe this exercise in detail. In a nutshell, it will follow three steps:

  • Identify key behaviors or aesthetic qualities
  • Audit existing elements
  • Define patterns

功能和感知模式的步骤略有不同。通过功能模式，重点将放在用户行为，定义单个模块并命名它们上。我们将更多地从整体上看待感知模式，着重于感觉和美学以及它们如何协同工作的一般原则。

The steps are slightly different for functional and percep- tual patterns. With functional patterns, the focus will be on the user behaviors, on defining individual modules and naming them. We will look at perceptual patterns more as a whole, focusing on the feel and aesthetics, and on the general principles of how they work together.

您执行的顺序并不重要。一些团队发现先了解基本样式（如字体）很有帮助。其他的则从核心功能模块开始。也可以同时同时查看两者。

The order you do it is not critical. Some teams find it helpful to look first at the foundational styles, such as typography; others start with core functional modules. It is also possible to look at both simultaneously in parallel.

在这两种情况下，我们都首先考虑全局，然后将接口分解为较小的部分。以这种方式进行处理不仅可以帮助我们考虑各个模块，还可以考虑它们如何协同工作以及如何帮助实现产品的目的。

In both cases, we consider the big picture first, and then deconstruct the interface into smaller parts. Approaching it this way helps us think not only of individual modules but also how they work together, and how they help to achieve the purpose of the product.