共用语言

本章介绍如何建立一种共享语言,该语言允许一群人针对特定产品创建和使用内聚模式。

This chapter describes how to establish a shared language, which __allows a group of people to create and use patterns cohesively for a particular product.

_
数字产品由团队构建。每个人都有自己要完成的具体目标和必须满足的截止日期。不可避免地,这意味着将添加草率的模式,或者将重复或滥用模块。

Digital products are built by teams. Everyone will have their own specific goals to accomplish and personal deadlines to meet. Inevitably, this means that sloppy patterns will be added, or that modules will be duplicated or misused.

我们可以确保即使有很多人在使用该产品,但该产品仍具有整体感和凝聚力吗?是的,如果我们在团队中对我们的设计系统及其工作原理有共同的理解。这意味着我们遵循相同的指导原则,对品牌的愿景保持一致,对设计和前端架构采用共同的方法,并且知道最有效的模式以及使它们起作用的方式。换句话说,创建具有凝聚力的设计系统需要共享的语言。

Can we make sure a product still feels cohesive and whole, even when many people work on it? Yes, if we have a shared understanding in the team of what our design system is and how it works. This means that we follow the same guiding principles, that our vision of the brand lines up, that we have a shared approach to design and front-end architec- ture, and that we know our most effective patterns and what makes them work. In other words, creating cohesive design systems requires a shared language.

在《永恒的建筑方式》中,克里斯托弗·亚历山大(Christopher Alexander)提出了一种“模式语言”的思想,以创造一种既活泼又令人愉悦的建筑。他的书的核心是观察到许多伟大的建筑(沙特尔,阿罕布拉,布鲁内莱斯基的圆顶)不是由一位在绘图板上费力地工作的大师级建筑师创建的。它们是由一群人组成的,他们对设计模式具有深刻的共享知识,能够使这些建筑栩栩如生。

In The Timeless Way of Building, Christopher Alexander introduced the idea of a “pattern language” as a way to create buildings that feel alive and a pleasure to be in. At the core of his book is the observation that many great build- ings (Chartres, the Alhambra, Brunelleschi’s Dome) weren’tcreated by one master architect working laboriously at the drawing board. They were built by groups of people who allhad a deep, shared knowledge of the design patterns that were capable of bringing those buildings to life.

……人们可以遵循一种通用模式的语言,在地面上构想自己更大的公共建筑,就像他们只有一个主意。”
— Christopher Alexander,永恒的建筑方式

…groups of people can conceive their larger public buildings, on the ground, by following a commonpattern language, almost as if they __had a single mind.” — Christopher Alexander, The Timeless Way of Building

类似的想法可以应用于构建数字产品。即使有多个贡献者在不同的部分上工作,该语言也可以使人们创造出整体感十足的产品。自然,有些人会比其他人更深入,但是其想法是每个人(设计师,开发人员,研究人员,产品经理,内容制作者)都应具有一定程度的流利度,并且随着时间的流逝,流利度会提高,随着团队不断学习,使用和发展语言。

A similar idea can be applied to building digital products. The language can empower people to create products that feel whole, even when multiple contributors work on differ-ent parts. Naturally, some people will be steeped in it more deeply than others, but the idea is that everyone — design- ers, developers, researchers, product managers, content producers — should have some degree of fluency, and that the fluency improves over time, as the team continues to learn, use and evolve the language.

但是亚历山大在他的书中没有提到的是,模式语言方法要完成多少工作。中世纪的大教堂花了数十年的时间建造,石匠经历了数年的学徒期以学习模式语言。同样,在产品团队中建立共享语言并使之正常工作也需要花费大量精力。

But what Alexander doesn’t mention in his book, is exactlyhow much work the pattern language approach takes to achieve. Medieval cathedrals took decades to build, and stonemasons went through years of apprenticeship to learn the pattern language. Similarly, it can take a lot of effort to establish a shared language in a product team and make it work.

但是,即使在较大的团队中也可以做到。我们可以从关注我们做出的语言决策开始。

But it can be done, even in larger teams.We can start by pay- ing attention to the language decisions we make.

范式命名

具有影响力的英国教育家詹姆斯·布里顿(James Britton)在《语言与学习》 6中解释说,通过在物体上赋予名称,我们开始“使它们成真”,就像孩子们使用语言“摆脱虚无”一样。同样,如果接口对象没有适当的名称(该名称对你的团队中的人员来说是已知的且有意义的名称),那么它在系统中实际上就不存在作为可操作的单元来使用。一旦命名了对象,就可以塑造它的未来。如果给它起一个表述性的名称,则它的未来将受到限制,因为它将受到其样式的限制:“粉红色”按钮只能是粉红色的。

James Britton, an influential British educator, explains in _Language andLearning_6 that by conferring names on objects, we start “bringing them into existence,” just like children use language “to draw out of nothingness” the world around them. Similarly, if an interface object doesn’t have a proper name — a name that is known and makes sense to people in your team — then it doesn’t really exist in your system as an actionable unit to work with. Once you name an object, you shape its future; if you give it a presentational name, its future will be limited because it will be confined by its style: a “pink” button can only be pink.

精心选择的名称可以成为塑造设计系统的强大工具,因为名称会影响图案的使用方式。而且,当然,这不仅涉及他们自己的名字,而且还涉及你团队中的一种命名共享方法。

A well-chosen name can become a powerful tool for shaping your design system, since names affect how patterns will beused. And, of course, it is not only about the names them- selves, but a shared approach to naming within your team.

6 http://smashed.by/languagelearning

我饿团队找到好名字的组成部分

“好名字”对于不同的团队意味着不同的事物。有时需要进行实验才能找到可行的方法。德国电信公司 Sipgate 的团队最初使用的是表述性名称。但是他们发现诸如“突出的瓷砖”或“带有圆点的圆圈”之类的名称无效,并最终导致了系统的碎片化。

A “good name” means different things for different teams. Sometimes it takes experimentation to find an approach that works. The team at Sipgate,7 a German telecommunica- tions company, used presentational names initially. But they found that names such as “Prominent tile” or “Circle with a dot” weren’teffective and ultimately contributed to the fragmentation of their system.


基于演示文稿的命名的主要问题是,当库中的模式数量增加时,你找不到所需的内容。它还没有为你提供有关在何处使用特定模式的指导或启发。人们开始建立越来越多的新模式,而不是重复使用和增强现有模式,这使问题随着时间的流逝越来越严重。”
— Toipias Ritterbach,Sipgate的经验所有者_

The main problem with presentation based naming is that you can’t __find what you are looking for when the number of patterns in your library increases. It also gives you no guidance or inspiration for where to use a specific pattern. People start to build more and more new patterns instead of reusing and enhancing the existing ones, whichmakes the problem worse and worse over time.” —Tobias Ritterbach, experience owner, Sipgate

_
在Atlassian,组件是从用户的角度命名的。例如,“锭剂”和“内联编辑”之所以命名,是因为这表明他们的用户引用了他们。起初,这被认为是有争议的,对开发人员来说是一项开销。但是团队认为,这样命名的模块使工程师能够从用户的角度进行思考,并始终牢记用户的思想。

At Atlassian,components are named from a user’s perspec- tive. For instance, “Lozenges” and “Inline Edit” got their names because that’show their users referred to them.At first it was seen as controversial and an overhead for developers. But the team felt that naming modules this way enabled engineers to think from a user’s perspective and always have users in mind.

7 https://www.sipgate.de
8 Interview with Tobias Ritterbach, exp. owner, Sipgate,Aug. 2016
9 https://www.atlassian.com/

对于工程师来说,这有些负担,但是在一定程度上,我们正在推动用户的同理心。

It’s a bit of an overhead for engineers, but to a certain extentwe’re __driving user empathy.

_
在 FutureLearn,我们同意,好名意味着它专注,令人难忘并体现了它所代表的模块的目的。与其他团队一样,我们也尝试过使用不同的方式来命名事物-从更精确,更具描述性的名称(例如“进度切换按钮”)到有趣的名称(例如“ Whisperbox”)。

At FutureLearn,11 we agreed that a good name means that it is focused, memorable and embodies the purpose of the module it represents. It is the name people relate to and want to use.Like other teams, we tried different ways to name things — from more precise and descriptive such as “Progress toggle button,” to fun ones, such as “Whisperbox.”

在查看了团队如何使用模块后,我们注意到系统中最有效的名称具有以下一种或多种特征:它们是隐喻的,具有个性,并且传达了模式的目的。

Having looked how the team used the modules, we noticedthat the most effective names in our system had one or more of these qualities: they were metaphorical, they had a personality, and they communicated the purpose of the pattern.


好名称基于隐喻

来自其他行业(例如建筑或出版业)的隐喻可以激发良好的声誉。这也可以使团队更容易记住该名称,因为当他们想到该模块时,他们会联想到某些东西。

A metaphor from other industries, such as architecture or publishing, can inspire a good name. It can also make the name more memorable for the team, as they’ll have an association — something to imagine — when they think of that module.

7 Interview with Jurgen Spangl, head of design, Atlassian, Nov. 2016
8 https://www.futurelearn.com

建筑中的支架是支撑和加强结构的要素。例如,帮助支撑屋顶。同样,在FutureLearn的界面中,“托架”还通过显示少量附加信息来支持主要内容。

Brackets in architecture are elements that support and strengthen a structure; for example, helping to hold up a roof. Similarly, in FutureLearn’s interface “Brackets” also support the main content by presenting small chunks of additional information.

image.png
“括号”通过提供其他信息来支持页面的主要内容

另一个例子是“ Spotlight”:一种促销元素,旨在引起人们对特定内容的关注。
_

Another example is “Spotlight”: a promotional element designed to draw attention to a specific piece of content.

image.png
“Spotlight” is a promotional element designed to draw attention to a specific piece of content.

“ Bracket”和“ Spotlight”是有效名称的示例-团队中的人知道并使用它们。相反,没有视觉隐喻的名称效果不佳。

“Bracket” and “Spotlight” are examples of effective names — people on the team know and use them. Conversely, names that don’t have a visual metaphor associated with them turned out to be less effective.

例如,几乎没有人会记住“进度切换按钮”是什么,或者“二进制单选按钮”是什么样子。

For example, hardlyanyone can remember what a “Progress toggle button” is, or what a “Binary radio button” looks like.

image.png
进度切换按钮

image.png
二进制单选按钮

问题在于,“进度切换按钮”或“二进制单选按钮”都不会在你的脑海中创建图像,从而使你更容易记住这些模式。即使有人喜欢使用更精确和更具描述性的名称(例如“二进制单选按钮”),也没有人记住它。而且,如果没人记得它,人们很有可能会重新创建模式而不是重复使用它。

The problem is that neither “Progress toggle button” nor “Binary radio button” creates an image in your mind that makes it easier to remember those patterns. Even if somepeople preferred a more precise and descriptive name like “Binary radio button,” the fact is no one remembered it. And if no one remembers it, there’s a high chance that people will recreate the pattern instead of reusing it.


好名字有个性

按钮的某些名称效果更好。在整个FutureLearn的界面上都有一些小的辅助功能按钮。他们被称为“奴才”。

Some names for buttons worked much better. There are small, secondary function buttons that are used all overFutureLearn’s interface. They are called“Minions.”

image.png
Minion buttons.12
_
而且,当然,在有奴才的地方,还应该有一个老板。 FutureLearn的“老板”是一个大按钮,通常是页面上主要的号召性用语。

And, of course, where there are minions there should also bea boss. FutureLearn’s “Boss” is a large button, typically the main call to action on a page.

12 版权奴才和格鲁:卑鄙的我,©Universal Pictures。

12 Copyright Minions and Gru: Despicable Me, ©Universal Pictures.

image.png
老板按钮

看看CSS.13中使用的.minion和.boss类名也很有趣

It’s also fun to see .minion and .boss class names used in CSS.13

image.png
CSS中的.minion和.boss类名称
_
13 在FutureLearn界面中,有更多的按钮样式。这里显示的示例是一些最有效的示例。

13 In the FutureLearn interface there are more button styles; the examples shown here are some of the most effective ones.

具有个性的名字更容易记住。他们不仅会留下来,还会激发其他名字,甚至可以建立一个姓氏家族。 FutureLearn上的“ Whisperbox”模块旨在进行促销,而不会太分心。当另一个团队需要更突出的东西时,他们创建了一个“ Boombox”。 “ Whisperbox”和“ Boombox”是一对,有助于使词汇表更加紧密联系和令人难忘。

Names with personality are easier to remember. Not only do they stick around, they also inspire other names, and can even establish a family of names. A “Whisperbox” module on FutureLearn was designed to be promotional without being too distracting. When another team needed some- thing more prominent, they created a “Boombox.” “Whis- perbox” and “Boombox” are a pair, which helps to make thevocabulary more connected and memorable.


好名字传达目的

最好的名字为在哪里使用特定模式提供了指导或启发。很容易记住,一个页面上可以有很多小兵,但只有一个上司。人们喜欢使用它们,我们无需执行准则,因为它们带有名称。甚至像这样的几个名字都可以使你的词汇更引人注目,并且团队将更有可能使用它并为它做出贡献。

The best names offer guidance or inspiration for where to use a specific pattern. It’s easy to remember there can be many minions (on a page) but only one boss. People enjoy using them and we don’t need to enforce guidelines because they come with the name. Even a few names like this can help make your vocabulary more compelling, and the team will be more likely to use it and contribute to it.

通过名称,我们不仅可以识别和区分模式,还可以描述它们的用途。如果我们还没有完全了解样式的目的,那么命名样式就特别困难。如果你发现自己在努力想出一个名字,那么可能不太正确。某个模块的用途可能不清楚,或者与另一个模块重叠。无论哪种方式,你都应该注意这是一个危险信号。

Names let us not only identify and distinguish between patterns, but also describe what they’refor. Naming pat- terns is especially hard when we haven’t fully understood their purpose. If you find yourself struggling to come up with a name, chances are something isn’t quite right. Maybe amodule’s purpose is unclear, or it overlaps with another’s; either way, it’s a red flag you should notice.

欧洲之星新界面中的一个模块专门用于改善 SEO。在模式库研讨会中,团队努力为它起一个名字:“这是一个 SEO 模块!它没有功能。它的存在没有意义!”

One of the modules in Eurostar’s new interface was intro-duced specifically to improve SEO. During a pattern library workshop, the team struggled to come up with a name for it: “It’s an SEO module! It doesn’t have a function. There’s no meaning to its existence!”

image.png
引入Eurostar界面的模块专门用于改善SEO

他们最终给它起的名字是“ le blurb”。le blurb 的用途大致如下:提供潜在的有趣信息,旨在改善SEO。

The name they gave it in the end was “le blurb.”And the purpose of le blurb was something along the lines of: to providepotentially interesting information aiming to improve SEO.

幽默地解决困难的命名决策会有所帮助。但是,几乎没有原因就从来没有困难。在某个时候,我们必须自问:这是怎么了?我们为什么不能拿出一个名字?

Approaching difficult naming decisions with humor can help. And yet it’s almost never difficult for no reason. At some point we have to ask ourselves: what’s wrong here? Why can’t we come up with a name?


协同命名

如果我们团队中的命名过程是协同进行的,我们可以更好地理解模式的目的。这并不意味着要让整个公司参与进来:这不关乎人数,而是涉及多种观点。命名模块的责任通常落在开发人员编写CSS时,但是如果命名过程扩大到包含更多团队成员的话,命名模块就可以变得更加容易。

We can understand the purpose of a pattern better if the naming process in our team is collaborative. That doesn’t mean involving the whole company: it is not about the num-ber of people, but a diversity of perspectives. Too often the responsibility of naming modules falls on developers when they write CSS, but it can be made easier if the naming pro- cess is broadened to include more people from the team.

不同学科的人对模块的看法略有不同。来自同一背景的人可能会以一种通用的方式看到它,因为他们需要它具有灵活性。开发人员可能会了解技术细节,因为他们知道模块的构建方式,即使他们看起来不像单选按钮,他们也会知道单选按钮。设计师和用户研究人员可能更熟悉模式旨在支持的原始行为。让具有不同观点的人参与进来可以帮助就模块的目的做出更明智和客观的决定。一旦你知道目的,想出一个名字就容易了。

People from different disciplines will each view a module slightly differently. Someone from a content background might see it in a generic way because they’d need it to be flexible. Developers might see technical specifics, because they’re aware of how the module is built — they’ll know that something is a radio button even though it might not look like a radio button. Designers and user researchers might be more familiar with the original behavior a pattern is meant to support. Involving people with different points of view can help make a more informed and objective decision about the purpose of a module. And once you know the purpose, coming up with a name is easier.

协同命名还可以帮助未设计或构建模式的团队成员理解其用法。例如,让内容团队参与进来,可以帮助他们作为参与者参与此过程,而不是简单地交出一堆内容填写。

Collaborative naming will also help team members who did not design or build the patterns understand their use. Involving the content team, for example, can help engage them as participants in this process, rather than simply being handed a stack of boxes to fill in.

设置专用频道

进行命名协作的最简单方法之一是在你喜欢的日常通讯应用程序(例如“设计系统” Slack频道)上设置专用空间。与团队共享设计样机或现有模块,并简要描述其用途和区别所在。你可能会说:“这通常表示将附加信息或支持信息分成小块。”这有助于分享你到目前为止提出的名称。

One of the easiest ways to collaborate on naming is to set upa dedicated space on your favorite everyday communicationapp (like a “Design system” Slack channel). Share a designmock-up or an existing module with the team, and describe briefly whatit’s for and what distinguishes it.You might say: “This typically represents additional or supporting information portioned into smaller chunks.” It can help to share the namesyou’ve come up with so far.

image.png
“快乐块”可能是模块的好名字,但在这种情况下,我们决定选择“托架”

一些人将参加讨论,提出问题并提出他们的想法。有些建议可能不太正确,有些建议可能很幽默或出乎意料。没关系-重点是引起讨论。讨论设计决策和模式的目的有助于增强和发展共享的语言。如果你想出一个好名字,请记住给别人荣誉并加以赞扬。正是这些时刻有助于团队团结和协作-习惯性地命名文化的一部分。

A few people will join the discussion, ask questions, and suggest their ideas. Some suggestions won’tbe quite right, others will be humorous or unexpected. That’s OK — the point is to generate discussion. Talking through design deci- sions and the purpose of patterns helps to strengthen and evolve the shared language.14 If you come up with a good name, remember to give people kudos and celebrate it.It’s those moments that help unite the team and make collabo- rative naming part of your culture.


与用户一起测试你的语言

你可能想走得更远,让你的用户参与语言决策。尝试测试纸卡上的模块。在卡上进行测试与其他用户研究技术不同,后者使用线性任务和方案供用户操作。在这里,参与者可以拿起卡片,四处走动,讨论和涂鸦,积极地成为设计过程的一部分。这可以让你有机会测试你的语言选择,并确保你定义的模块与用户的潜在行为和心理模型保持一致。在某些情况下,你可能会发现“突出标签”被完全忽略,或者“向导控件”被解释为一组可选标签。

You might want to go even further and involveyour users in the language decisions. Try testing modules on paper cards. Testing on cards differs from other user research techniques, which use linear tasks and scenarios for users to work through. Here, participants can pick up the cards, move them around, discuss and scribble on them, actively becoming part of the design process. This can give you a chance to test your language choices and make sure that the modules you’ve defined are aligned with your users’ poten- tial behaviors and mental models. On some occasions you might discover that your “Prominent tabs” are completely ignored, or that your “Wizard control” is interpreted as a set of optional tabs.

14 而且,在共享新设计时,可能会发现有人已经存在类似的模块,因此可以防止重复。

14 What’s more, when sharing a new design, someone might spot thata similar module already exists and you can prevent a duplication.

image.png
用户研究与剪切模块

使团队成员和用户参与命名过程非常有用,但要保持专注并避免陷入无休止的讨论循环,这一点很重要。有时,过多的输入会导致名称变淡或令人困惑。为避免这种情况,在FutureLearn中,我们会采纳建议,但最终的决定权应由负责模块的设计人员和开发人员共同决定。

As useful as it is to involveteam members and users in the naming process, it’s important to stay focused and not get stuck in a loop of endless discussion. Sometimes too much input can lead to diluted or confusing names.To avoid this, at FutureLearn we would take on board the suggestions, but always leave the final decision up to the designer-developerpair who worked on a module.


让你的团队沉浸在设计语言中

但是,将事物仅一起命名不足以建立共享语言。整个团队都应该沉浸其中。使它无所不在。如果你创造了合适的条件,那么即使是最初并不感兴趣的人也可以通过接触而被动地学习。这里是创建此类条件的一些技巧。

Naming things together, however, is not enough to establish a shared language. The entire team should be immersed in it. Make it omnipresent. If you create the right conditions, even people who aren’t initially interested will learn pas- sively, through exposure. Here are some tips for creating such conditions.

使设计模式可见

在墙上设置专用空间,以可视方式表示你的设计系统:图案墙。

Set up a dedicated space on a wall to represent your designsystem visually: a pattern wall.

image.png
FutureLearn 办公室中的图案墙
_
图案墙让你可以鸟瞰整个设计系统。这样就为命名对话提供了一个很大的空间,因为你可以参考面前的事物,而无需在整个站点中搜索或记住它们的外观。拥有专用的空间还可以使你的系统更加开放:人们感到欢迎他们加入,提出问题并做出贡献。

A pattern wall gives you a bird’s-eye view of your system. This makes it a great space for naming conversations to happen, as you can refer to things right there in front of you— no need to search all over the site or remember what theylook like. Having a dedicated space also makes your system more open: people feel like they are welcome to join in, ask questions and contribute.

你不需要太多空间来创建图案墙,并且并非必须将产品的所有屏幕都显示在这里。

You don’t need a lot of space to create a pattern wall, and not all the screens of your product have to appear there.

从最关键或最常用的那些开始。将它们打印在A3纸上,放在墙上,并贴上最突出的图案。按照你最常见的用户旅程的顺序放置打印输出会很有帮助;例如:发现屏幕,登录过程,比较产品,进行购买。

Start with the ones that are the most crucial or used most frequently. Print them out on A3 sheets, put them up on the wall, and label the most prominent patterns. It can be helpful to position the printouts in the order that follows your most common user journeys; for example: discovery screens, sign-in journey, comparingproducts, making a purchase.

使设计模式可见时,你可以发挥创造力。数字印刷和设计公司MOO的团队将其样式指南中的某些页面打印为MOO明信片,以方便员工抓取以供参考。

You can be creative when making your design patterns visible. The team at MOO, a digital print and design com- pany, printed some of the pages from their style guide onto MOO postcards as handy sheets the employees can grab for reference.

image.png
一些MOO的风格指南明信片

自动提醒也可能会有所帮助。只需几分钟即可设置一个Slack僵尸程序,它偶尔会提醒你的团队所谓的不同元素。

Automated reminders can also be helpful. It only takes a few minutes to set up a Slack bot that will occasionally remind your team what different elements are called.

image.png
一个 Slack 机器人提醒团队“ Signpost”是什么样的

参照对象的名称

像使用任何语言一样,你需要使用它来使其保持生命力。它必须是日常对话的一部分。这就是为什么要有意地努力以你同意的名称不断提及模式的原因,无论这事儿听起来有多奇怪。

Like with any language, you need to use it to keep it alive. It needs to be part of day-to-day conversations. That’swhy it’s important to make a conscious effort to keep referring to the patterns by the names you agreed on — no matter how bizarre this might sound.

15 一些工具(例如Brand.ai和https://frontify.com)也与Slack集成在一起,以便在更新模式库时ping通道。有关工具的更多信息,请参见第10章。

15 Some tools, such as Brand.ai and https://frontify.com, also have integrations with Slack to ping channels when a pattern library is updated. More about tools in chapter 10.

“Whisperbox”是FutureLearn上的促销模块。顾名思义,它的意思是微妙的,不会引起太多关注。

“Whisperbox” is a promotional module on FutureLearn. As the name suggests, it is meant to be subtle and not draw too much attention to itself.

image.png
“Whisperbox”:FutureLearn上一个微妙的促销模块
_
在给它起一个适当的名称之前,我们一直将其称为“中间带有线条和图标的东西”。称呼它很容易。花了更多的努力才开始将其称为“ Whisperbox”。但是,直到你开始使用其实际名称调用模式之前,该模式在你的系统中都不是可操作的可靠块。每次使用该名称时,你都会增强调用的元素,并改进你的设计语言。

Until we gave it a proper name, we kept referring to it as “that thing with the lines and an icon in the middle.” It was easy to call it that. It took more effort to start calling it “Whisperbox.” But until you start calling a pattern by its actual name, it doesn’t exist in your system as a solid action- able block to work with. And every time you do use the name, you strengthen the element you call on, and evolve your design language.

这样做需要团队中有一定的自律性。这可能很难,尤其是如果你不习惯的话(想象你加入了一个团队,每个人都在谈论奴才,老板和窃窃私语!)。但是很快,这些名字就成为了普通对话的一部分,人们开始习惯了。目的是使每个人都可以通过叫一个名字确切地知道你在说什么。

Doing so requires a certain self-discipline in the team. It can be hard, especially if you’re not used to it (imagine you joined a team where everyone is talking about minions, bosses and whisperboxes!). But very soon those names become part of a normal conversation and people get used to it. The goal is to get to the point where everyone knows exactly what you’re talking about just by calling a name.

每个人都知道序列导航的目的,并将其称为“序列导航”,而不是“花哨的气泡”或“向导控制”。自然,这还意味着设计文件中的名称与代码匹配。

Everyone knows the purpose of sequence navigation and refers to it as “Sequence navigation”, and not “Fancy bub- bles” or “Wizard control.” Naturally, it also means that names in the design file and code match.


使其成为感应过程的一部分

如果这是入职流程的一部分,则将新员工介绍到你的设计系统中会更容易。 Atlassian 的新团队成员通读了如何创建准则的故事,以便他们可以理解为什么以及如何做出决定。在 FutureLearn 中,我们创建了一个内部归纳在线课程,其中包括有关模式库的专门章节,其中包括测验和小技巧课程。

It’s easier to introduce new employees to your design system if it’s part of your induction process. New team members at Atlassian are taken through the story of how the guidelines were created so they can understand why and how the decisions had been made. At FutureLearn, we created an internal induction online course, which includes a dedicated chapter about the pattern library, with quizzes and bite-size lessons.

image.png
FutureLearn 的在线入门课程中有关模式库的一章

组织常规的设计系统

每个人都不喜欢开会。但是,如果你希望在开发系统时将所有人保持在同一页面上,那么赶上设计系统是值得的。这是所有设计人员和开发人员可以一起全神贯注于系统的时候。

Everyone hates meetings. But design system catch-ups are worthwhile if you want to keep everyone on the same page when evolving your system.It’s the time when all designers and developers can fully focus on the system together.

追赶者可以与大约16至20个人一起工作,对于较大的团体,人们可以轮流参加。他们不必花很长时间-如果你的议程结构合理,半小时通常就足够了。最初,你可以每周运行一次,然后在团队确定节奏时每两个星期运行一次。团队可以利用这段时间来达成一致的总体模式,例如产品上的图标或字体。这也是分享新模块并讨论其目的,用途以及人们可能遇到的任何问题的良机。

The catch-ups can work with a group of around 16–20 peo- ple, and for larger groups people can take turns to attend. They don’t have to take long — half an hour is usually enough, if you have a well-structured agenda. Initially, you can run them weekly, and then fortnightlywhen the teamfinds its rhythm. Teams can use this time to agree on the overarching patterns, such as icons or typography across the product. It is also a good opportunity to sharenew modules and discuss their purpose, usage, and any problems and questions people might have.

鼓励多元化合作

尝试尽可能在设计和构建模式上进行配对。前两章中描述的所有练习都可以帮助协作并建立学科之间的共享语言:

  • 创建图案图
  • 进行针对特定模式的界面清单
  • 图纸图案结构
  • 商定模式的目的并提出名称
  • 阐明使你的产品有特定感觉的模式
  • 使用新模式进行小规模实验

    Try pairing on designing and building patterns as much as possible. All the exercises described in the previous two chapters can help collaboration and establish shared lan- guage between disciplines:

    • Creating a pattern map
    • Conducting an interface inventory focused on a specific pattern
    • Drawing pattern structure
    • Agreeing on the purpose of a pattern and coming upwith a name
    • Articulating the patterns that make your product feel acertain way
    • Running small scale experiments with new patterns

在任何团队中,都会有一些使用你的模式语言更流利,更热衷于在系统上工作的人,他们自然会倾向于彼此合作。但是尝试鼓励他们与每个人一起工作,以便他们有机会与不那么沉浸在系统中的人分享知识和热情。通过在整个组织中传播知识,设计系统变得更有弹性。

In any team there will be people who are more fluent in your pattern language and more enthusiastic to work on the system, and they might naturally gravitate towards working with each other. But try to encourage them to work with everyone, so that they have an opportunity to share their knowledge and enthusiasm with people who are less immersed in the system.By spreading out the knowledge across an organization, a design system becomes more resilient.


保持词汇表

共享和发展设计语言的最有效方法之一是保留你使用的术语的词汇表。创建和保留词汇表可以使你自觉地知道所使用的单词,因为你必须精通将这些单词写下来。例如,在客户消息传递平台Intercom上,团队保留术语表以确保他们使用“从代码到客户的相同语言”。

One of the most effective practices for sharing and evolvinga design language is to keep a glossary of the terms you use. Creating and keeping a glossary allows you to be con- sciously aware of the words you use, as you have to articu- late things to write them down. For example, at Intercom, a customer messaging platform, the team keep a glossary of terms to make sure they use “the same language from code to customer.”

image.png
对讲机词汇表
_
最新且易于访问的模式库也可以作为可靠的设计模式词汇表和整个团队的参考点(以及作为设计和构建接口的模式的实际工具包)。

And, of course, an up-to-date, easily accessible pattern library can also be a reliable glossary of design patterns and a reference point for the entire team (as well as being the actual toolkit of patterns for designing and building an interface).

16 http://smashed.by/intercom
17 We’ll discuss pattern libraries in detail in chapter 10.

词汇表的价值不仅在于它提供的工具,还在于它培养的语言实践。通过建立和保留词汇表,你可以养成对团队语言小组进行语言决策的审查,讨论和表达的习惯,即你承认单词很重要。

The value of a glossary is not only in the tool it provides: it is also in the language practices it cultivates. By establishing and keeping a glossary, you get into a habit of vetting, dis- cussing and articulating your language decisions as a team— you acknowledge that words matter.

并非所有团队每天都平等地协作和开放讨论设计原则和模式。建立一种共享的语言需要某种团队文化。但是它也可以以相反的方式起作用—集成以语言为中心的流程可以带来更好的结果合作。三年前,在 FutureLearn 中,我们没有一种工作共享的设计语言,而且合作程度还不如今天。设计人员正在用PDF品牌文档记录模式,而开发人员则建立了前端样式指南。尽管两个文档对每个学科都有用,但它们并没有提供共同的语言基础。但是通过实践和流程,我们逐渐改变了工作方式。

Not all teams are equally collaborative and open to discuss- ing design principles and patterns every day.Establishing a shared language requires a certain kind of team culture.But it can also work the other way around — integrating language-focused processes can lead to better collaboration. Three years ago at FutureLearn we didn’t have a workingshared design language and we didn’t collaborate nearly as much as today.Designers were documenting patterns in a PDF brand document and developers built their front-end style guide. Although both documents were useful for eachof the disciplines, they didn’tprovide a shared language foundation to work with. But by putting practices and pro- cesses in place, we gradually transformed how we work.

建立共享语言始终是一个循序渐进的过程。有时会很杂乱且缓慢,但是如果您继续前进,就会发现自己的语言在不断发展和壮大。最终,随着他们开始了解您正在努力实现的目标并加入您的团队,这种影响将在您的团队,其他团队以及利益相关者中蔓延开来。

Establishing a shared language is always a gradual, piece- meal process. Sometimes it will be messy and slow, but if you just keep going, you’ll see your language evolving and strengthening. Eventually, the effects will ripple out within your team, with other teams, and with stakeholders, as they start to understand what you’retrying to achieve and join you in this process.