《Design Systems》系列翻译 15 计划性和可操作性 part 1

 

写在前面------

因为工作内容的因素，最近这2年一直在探索如何打造一个高度灵活性的设计规范体系，在能够维持自身设计积累的基础之上，也能够配合项目需要快速的产出高质量的定制化交付件，偶然之间看到了这本书，看过之后感觉很有启发，就利用业余的时间翻译成中文，水平有限，还请大家多多指教。 

***********************************

Chapter 7

Planning And Practicalities

第七章。
计划性和可操作性。

 

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 a shared design language and practices, collaboration is difficult.

一个团队如何开始以更为系统地的方式思考设计？通常，当他们注意到日常工作的问题时。设计师总是很沮丧地解决同样的问题，或者不能提升他们的设计价值。开发人员厌倦了为每个组件定制样式和处理一个混乱的代码库。这两者都很难满足如期完成并满足产品的不断增长的需求。没有一个共享的设计语言和实践，协作是很困难的。

 

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 improvements 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 the senior stakeholders in the business.

有些人开始做改进-标准化按钮，建立一个主sketch文件，将现有的组件组建成一个家看的组件库。其他人注意到这些好处并共同努力。团队可以标准化更多的模式，调整设计词汇表，设置新的工具和流程。经过一些尝试和错误，他们将发现他们的设计系统是如何改进的。这些初步举措包含了宝贵的经验教训。但要真正发挥作用，仅仅把设计系统作为一个辅助项目是不够的。你需要广泛的支持--不仅来自同事，还来自公司中的高级管理层。

 

Getting Support From Senior Stakeholders
获得公司高级管理层的支持。

 

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 compelling 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 chapter. 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. Time Saved on Designing and Building Modules
1.。节省设计和构建模块的时间。

 

Naturally, reusing an existing element, rather than building 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.

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

 

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.

即使像按钮这样看似简单的元素也需要花费时间和精力来设计和构建。为了让高级管理层理解重用组件的价值，设计系统顾问和《模块化Web设计》的作者NathanCurtis使用了一个关于按钮复杂性的故事。在几张幻灯片中，他展示了按钮如何花费数十万美元来设计和构建。

 

“If your enterprise has 25 teams each making buttons, then it costs your enterprise $1,000,000 to have good buttons.”¹
— Nathan Curtis
“如果您的企业有25个团队，每个团队都在制作按钮组件，做出一个合格的按钮将花费您的企业1,000,000美元。”1
-Nathan Curtis。

 

Quantifying and demonstrating the cost of inefficiency is the often the most effective way to get executive buy-in.
量化和证明低效率的成本通常是获得高级管理层支持的最有效方法。

 

2. Time Saved on Making Site-Wide Changes
2.全站调整的时候能够节省的时间。

 

A bloated and inefficient system means that even the smallest changes are time-consuming and fiddly to make. In his article “Designed for Growth,”² 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 Etsy’s Marco Suarez 描述了技术和设遗留问题如何减缓他们的团队。他分享了Jessica Harllee’在etsy.com上更新按钮样式时的diff文件为例子。红色代表删除的代码，绿色代表新增编写的代码。显然，为了进行简单的视觉更改，对代码进行了太多的修改。

 

 

                                              


A diff file for updating the styling of buttons on etsy.com where the code deleted is shown in red and the code written in green.

更新etsy.com上按钮样式的diff文件，红色代表删除的代码，绿色代表新增编写的代码。

 

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 automatically 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 components, 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.

从长远来看，模块应用的越多，效果就会变得越好。不同的团队提出了不同的用例和解决方案来满足他们的需求。通过改进各个组件，整个系统变得更加健壮和易于维护。团队花费更少的时间用于修复bug和清理混乱代码，从而可以拥有更多的时间可以用来为用户和业务带来价值。

 

3. Faster Product Launch
3.加速产品发布

 

If you visit a patisserie and order a selection of ready-made pastries you will get an entirely different quote from ordering 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.

如果你参观了一家糕点店，订购了一批现成的糕点，你会得到与定制蛋糕完全不同的报价。在Futurelearn，产品经理知道基于现有模块实现一个新功能和开发一个全新的模块来实现一个功能花费的工时是不一样的。基于模式库搭建一个页面通常只需要一天左右的时间；而重新的制作这样的页面通常可能需要几周的时间。因此，如果我们需要测试一个概念或尝试一个新特性，使用现有模块可以快速发布一个特性。这可能不是完美的，但它给了团队挤出来用于测试，收集反馈，并制定出更好的解决方案的时间。

 

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

Tobias Ritterbach注意到，使用新模式库的团队交付新特性的速度比不使用新特性的团队快很多倍：

 

“Having a pattern library for sipgate.de allows us to build pages 10–20 times faster than for other product sites which are not connected to the library.”
— Tobias Ritterbach, experience owner, Sipgate

“拥有一个模式库可以让我们比没有引用模式库的其他产品站点快10-20倍的速度构建页面。”
-TobiasRitterbach，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.
这些示例表明，模块化系统能够帮助团队能够更快地进行原型设计和特性发布，从而有助于满足不断增长的产品的需求。

Other Benefits
其他好处

 

When making a case for a design system, the winning arguments 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.

在为设计系统辩护时，获胜结论往往集中在证明和量化低效率的代价上。但是，当然，还有其他一些对于组织来说有价值的重大好处。

 

Brand Unity at Scale

品牌统一性。

 

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.

公司的不同产品(有时甚至是同一产品的一部分)看起来都属于不同的品牌，这种情况并不少见。让一个发展中的产品或同一品牌下的产品线保持一致需要一个有效的设计系统。

 

Visual Consistency
视觉一致性。

 

Design is a form of language — through design we communicate 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 predictable. It helps to make an interface feel intuitive.

设计是语言一种形式，通过设计，我们传达了产品的心理模型。一致的视觉表现有助于人们更快地学习操作界面，并通过熟悉的事物和可预测结果来减少认知负荷。这有助于使界面感觉简单易用。

 

 

 

 

Creating consistency is like making small promises throughout 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.

创建一致性就像在贯穿在界面中做出一些列的小承诺(当您看到一个粉红色按钮时，它总是一个动作；“Cancel”按钮总是在“Submit”之前)。当人们对将要发生的事情有信心时，他们就可以依赖产品。一致性有助于建立信任。

 

Teamwork and Collaboration
团队协作。

 

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的设计师们开始观察到生产力的提高。

 

“We collected components in a master Sketch file. After a week or two we began to see huge leaps in productivity by using the library when iterating on designs.”³
— Karri Saarinen, Design Lead, Airbnb

“我们将收集到的组件当道一个主sketch文件中。一到两周后，我们开始观察到通过使用该库迭代设计在生产力上的巨大飞跃。“3
-KarriSaarinen，设计主管，Airbnb。

 

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.

并不是每个人都能立即组织一个专门的设计系统团队或将计划立项，但是即使是几个有奉献精神的人在一起迭代一次，也可以作为展示可以预期的结果的起点。这些最初步骤的成功可用于以后获得更多支持。

 

Where To Start
从哪里开始。

 

As we saw in the previous chapter, every team will have different 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.
正如我们在前一章中所看到的，每个团队都会有不同的需求，需要不一样的策略才会为他们有效果。但这里有一些对大多数人有帮助的小贴士，不管他们的处境如何。

 

Agree on Your Goals and Objectives
达成一致的结果和目标。

 

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.     Systematize the Interface(s)

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. Establish Shared Processes and Governance
2.。建立共享的流程和管理方式。

•Set up knowledge-sharing processes (through conversations, collaboration, pairing, training, and so on).
·建立知识共享流程(通过对话、协作、配对、培训等方式)。

 

•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.
·将设计系统的介绍作为归纳过程的一部分。

 

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 roadmap for your design system. This can be done in software such as Trello, or even on a whiteboard with sticky notes. What matters is that the roadmap gives the team a collective understanding of their priorities and how the system should evolve over time.⁵ At FutureLearn we also integrated design system stories into the main product’s roadmap. This helped to make the rest of the team aware of the work we were doing and balance it with other priorities.

目标可以分解成更小的任务和故事。用户计划如何随着时间的推移实现您的目标，在这个阶段为您的设计系统创建一个简单的路线图也是很有帮助的。这可以在像Trello这样的软件中完成，甚至可以在白板上用便笺完成。重要的是，路线图让团队对优先事项达成共识，以及系统在更长期时期应该如何发展。在FutureLearn，我们还将设计系统的故事集成到主产品的路线图中。这有助于让团队其他成员了解我们正在做的工作，并使其与其他优先事项保持平衡。

 

Having clear goals and milestones also helps manage expectations 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.

有清晰的目标和里程碑也有助于管理公司其他部门的期望。设计系统是一项长期投资--它的价值随着时间的推移而逐渐增加。重要的是，人们希望看到渐进和稳步的改善，而不是迅速戏剧性的改善。

 

 

Make your Progress Transparent
公开你的进展

 

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 making 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:

根据我的观察中，那些公开了他们在设计系统上进展的团队往往比那些把一切进展都隐藏起来的团队进展得更快。欧洲之星(Eurostar)的丹·杰克逊(Dan Jackson)在一次采访中讲解了尽早公开他们的风格指南的重要性，即使它并不完美。掌握其他人从工作中学习到的知识有助于给自己额外的动力：

 

“I wanted the style guide to be a public-facing product that we’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

“我想让样式指南成为我们引以为豪的面向公众的产品。其他人可能会把它看作是一种可利用起来资源。这让我们觉得我们必须跟上进度。“
-欧洲之星，解决方案设计师，Dan Jackson。

 

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.
随着系统的发展，一些团队会写一些关于他们的系统的博客文章。这有助于你不仅可以记录获得了哪些成绩，还可以记录犯下了哪些错误、哪里跌了跟头以及下次你尝试其他的方法，这一点特别有用。以开放和坦诚的方式记录你的进步是帮助你的团队学习和保持动力的有力方法。

 

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 people to understand the value of the work we were doing.
这样做也让大家了解其中的幕后工作。我们通过定期以书面文章和交流会的形式分享futurelearn的设计系统的方式，在获取更多的人理解我们正在做的工作的价值这件事上创造了难以估量的价值。