《Design Systems》系列翻译 17 系统化功能模式 part1

写在前面------

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

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

Chapter 8

Systemizing Functional Patterns
系统化功能模式。

 

The exercise in this chapter describes an approach to systemizing functional patterns, starting with a product’s purpose.
本章中的演示从产品的目的开始，将功能模式系统化的方法。

 

In the town where I live there’s a small bookstore. As you walk in, you see a few shelves of book covers. Some have small handwritten notes attached to them: reviews from the people who read them. Even if you don’t know what you’d like to read, there’s a good chance you’ll stumble upon something intriguing. Once you do, there’s a quiet area with sofas to look through the books over coffee. You might decide to buy something or you might not, there’s no pressure. The ethos of the store is discovery and reading; sales appear secondary. Its patterns — the notes, quiet areas, sofas and coffee table — reflect that.
在我住的城镇里有一家小书店。当你走进来的时候，你看到几个上面摆放有图书封面的暑假。有些书上面还附上了手写的小纸条：阅读其他人的书评。即使你不知道你想看些什么，但你可能会从中偶然发现一些有趣的东西。一旦你开始看起来，店中有一块安静的区域，里面有沙发，你可以一边喝咖啡一边翻阅书中的内容。你可以决定买一些什么，也可以什么都不买，一切随缘。书店的理念是发现和阅读；卖书似乎是次要的。它的模式—小纸条、安静的区域、沙发和咖啡桌 —— 体现了这一点。

 

Similarly, digital products encourage or enable certain behaviors. Consider how Slack supports ways of working which are more collaborative compared with email or other chat apps. Or think how Tinder promotes casual, commitment-free relationships with its swiping interaction. Products can be designed around similar user goals and needs, while encouraging entirely different behaviors. That’s why thinking of behaviors can be helpful when connecting patterns with the design intent and ethos of the product.¹

同样，数字产品鼓励或促进某些行为。分析一下Slack如何提供与诸如电子邮件或其他聊天应用程序相比更具协作性的工作方式。或者思索下Tinder如何通过它的滑动交互方式来促进随机匹配的、弱关联的关系。产品以围绕相似的用户目标和需求进行设计，同时鼓励完全不同的行为。这就是为什么在将模式与产品的设计意图和理念想关联时，对行为的思考是有促进作用的。

 

Design intent can be rendered in countless ways — patterns don’t have to be visual. They can be represented in physical objects (like the interior of a book store), or they can be read out by a voice. Articulating the behaviors helps to define patterns in a way that is more futureproof, because behaviors are platform-neutral.

设计意图可以以无数种方式呈现--模式不必是视觉形式。它们可以用真实物体(如书店室内装修)表示，也可以通过阅读文字的声音传达。将行为阐述出来有助于定义模式时与元气的目标更为一致，因为行为是平台中立的。

 

A Purpose-Directed Inventory

有目的导向的清单

 

The interface inventory² is a popular exercise to start systemizing an interface. It involves taking screenshots of various UI elements, and then grouping similar-looking things together.

界面清单2是开始将界面系统化的主流练习方式。它包括对各种UI元素进行截图，然后将相似的元素归集在一起。

 

But while the idea is straightforward, it can be done in a variety of ways. Sometimes inventories focus on the visual consistency of the interface; for example, making sure all buttons look the same, all menus are consistent, and so on.

虽然这个想法很直白，但它可以通过多种方式实现。有时候，界面清单集中在界面的视觉一致性上；例如，确保所有按钮看起来都一样，所有菜单都一致，等等。

 

The main goal of the process described in this chapter is not to account for all the visual inconsistencies; it’s to define the most essential design patterns and get mutual understanding in the team on how they should work across the system. Going through this process will give your team an idea of which areas need more attention. A typical outcome would be a list of elements that need to be standardized, along with some sketches and ideas of how patterns should be defined.

本章描述的过程的主要目标不是述说所有的视觉不一致；而是定义最基本的设计模式，并在团队中就如何基于设计系统开展工作达成相互理解。通过这个过程可以让你的团队知道哪些方面需要更多的关注。通常的结果是会罗列出需要标准化的元素列表，以及一些模式应该如何定义模式的原型和想法。

 

 

While a visual inventory typically groups things by appearance and type (buttons, tab controls, and so on), in the following exercise you might end up with things in the same group that look different, because you’re grouping them by purpose (the behaviors they’re designed to encourage or enable).

虽然视觉清单通常按外观和类型(按钮、选项卡控件等)对事物进行分组，但在下面的练习中，您可能会得到相同组中看起来不同的东西，因为您是按目的对它们进行分组(设计出他们的目的是鼓励或实现的行为)。

 

In a purpose-directed inventory, things in the same category might look different because they’re grouped by purpose rather than visually.
在目标导向的清单中，同一类别中的事物可能看起来不同，因为它们是按目的而不是视觉分类的。

 

This means rather than focusing on making all buttons look consistent, we will first try to understand when to use a certain type of button, when to use a link instead of a button, when not to use a button at all and instead click directly on the object. Of course, in the process of doing that we will improve visual consistency, but it won’t be the focus.
这意味着，与其专注于使所有按钮看起来一致，我们将首先尝试理解何时使用某种类型的按钮，何时使用链接而不是按钮，何时根本不使用按钮，而是直接单击对象。当然，在这样做的过程中，我们将提高视觉一致性，但它不会是重点。

 

Preparation

准备

Timing

时机

To be most effective, this process should be run after the foundational UX work — user research, content strategy, information architecture, design direction — has been worked out. If the design has fundamental flaws and usability issues, they would be distracting and counterproductive to deal with. For similar reasons, if your interface is about to go through a major redesign, it’s best to get clarity on the new design direction first.

为了达到最有效的效果，这个过程应该在基本的用户体验工作--用户研究、内容策略、信息架构、设计方向--完成之后才能运行。如果设计方案有根本的缺陷和可用性问题，它们将分散注意力，并产生适得其反的效果。出于类似的原因，如果您的界面即将经历重大的重新设计，最好先弄清楚新的设计方向。

 

People

参与人员

 

Having different perspectives can help you to be more objective and account for more use cases. It’s important that designers and front-end developers take part, but ideally involve a back-end developer, someone with a content background, and a product manager. The ideal group size is around 4–8 people. If a larger group needs to be involved, consider running the initial exercise with a few representatives from different disciplines, and then hold follow-up sessions to debrief more people.

拥有不同的观察角度可以帮助您更加客观和周全的考虑更多的使用场景。设计人员和前端开发人员参与其中是很重要的，但理想的情况是包括后端开发人员、具有业务背景的人员和产品经理。理想的群体规模约为4-8人。如果需要更多的人参与，考虑与来自不同学科的几位代表一起进行初步练习，然后举行后续会议，听取更多人的情况介绍。

 

Interface Printouts

界面展示

Identify the key screens and user flows that are absolutely fundamental for your product, those without which the product couldn’t exist. Typically, about 10–12 screens is enough, sometimes fewer. They can be design mock-ups, or screenshots of an existing interface.

找出关键的页面和用户流程，这些对你的产品来说绝对是最基本的，没有这些，产品就不可能存在。通常，大约10-12个页面就足够了，有时更少。它们可以是高保真设计稿，或现有界面的截图.。

 

Let’s say you’re working on a public library website. The purpose of the website is to extend the experience of the physical library, perhaps by making sure that readers can reserve books in advance and so avoid queueing up and waiting for materials once they are at the library. The key screens help to achieve that purpose by allowing you to find specific books, discover new books, reserve materials for collection, and download the materials. Of course, there’s a lot more to a library website: events and exhibitions, memberships, online collections. While we should take note of the other areas, usually every single view is not needed to get started.

假设你在做一个公共图书馆网站。该网站的目的是线下图书馆的体验拓展，比如通过预留读者提前预订的图书，从而可以让读者进了图书馆就可以阅读，从而避免了在图书馆排队等待资料的情况发生。通过允许您查找特定书籍、发现新书、收集材料和下载资料，关键页面有助于帮助你理解这些目标。当然，图书馆网站还有很多场景：举办活动和展览，会员体系，在线收藏。虽然我们应该注意到其他方面，但通常不需要面面俱到才可以开始。

 

Print out two copies of each screen. Put the first set on the wall, in the order of a typical user journey. The second set will be used for cutting out patterns and grouping them. You will be constantly shifting from the system as whole to individual patterns throughout the exercise. Having two sets of printouts will help you focus on both the details and the bigger picture, without losing the context of where the patterns come from once you’ve cut them out.

每张页面打印出两份拷贝。把第一组贴到在墙上，按照典型的用户旅程的顺序。第二组将用于模式剪切出来并对它们进行分组。在整个练习过程中，您将不断地从完整的系统切换到独立的模式。打印两套页面将帮助您将注意力同事放在在细节和完整的页面上，而不会出现把模式剪切出来之后就忘了来源于哪里。

 

You will also need scissors, markers, sticky notes, and plenty of wall and desk space to work on.

你还需要剪刀，记号笔，便签，以及大量的墙壁和办公桌空间来工作。

 

1. Identify Key Behaviors
1.。识别关键行为。

 

Start by identifying the key user needs and behaviors you want to support at each segment of the user journey. For a small app with only a few screens, you’ll be looking at the individual screens or different states on the same screen. For larger products it helps to group pages into segments of the user journey.

首先，确定您希望在用户旅程的每个部分支持的关键用户需求和行为。对于一个只有几个界面的小应用程序，您将看到单个屏幕或同一屏幕上的不同状态。对于较大型的产品，它有助于将页面分组到用户旅程的各个部分。

 

To return to the public library website example, you might group some of your pages based on these behaviors:
要返回公共图书馆网站案例，您可以根据以下行为对某些页面进行分组：

 

•Discovery. Encourage people to discover books they might be interested in. To draw an analogy with a bookstore, this area is like the staff picks or new books showcase shelves. If someone doesn’t know what they’re looking for, they might be inspired by the selection on display.

·发现。鼓励人们去发现他们可能感兴趣的书。拿书店做个类比，这个地方就像店长推荐或新书展架。如果有人不知道他们在寻找什么，他们可能会被展示的内容所吸引。

 

•Catalog. Find specific books. Searching through a catalog is like approaching a member of staff and making a request.

·目录。找出具体的书。在目录中搜索就像咨询店员并提出请求。

 

•Wish list. Allow people to view and manage their shortlisted books. In a physical store, you would put some of the books aside so you can decide later which ones to keep.³

·愿望清单。允许人们查看和管理他们的待定书籍。在实体店里，你可以把一些书放在一边，这样以后你就可以晚一些决定要保留哪些书了。

 

Some of the core screens grouped by the behaviors they support throughout the user journey.⁴
一些核心页面按照它们在整个用户过程中需要支持的行为进行分组。

 

Take note of the pages with conflicting behaviors: situations where we encourage people to look at new books, download something, sign up for a newsletter, and check the latest events all at the same time. Even if a screen supports several behaviors, the most important actions should be clear and not in conflict with one another. When dealing with multiple behaviors, focus on the core user journeys and most important behaviors first. In this example: discovering, finding and reserving books.
注意那些有冲突行为的页面：在一个页面中同时鼓励人们看新书，下载一些东西，注册并订阅和查看最新的事件。即使一个页面支持多个行为，最重要的行为也应该是容易识别，并且不与其他事件相冲突。在处理多个行为时，首先要关注核心用户旅程和最重要的行为。在这个例子中：发现，寻找和保留书籍。

 

Wording Is Fundamental

文案是基础

 

The words we choose matter. They influence how we think. For a few months the team I worked in at FutureLearn had “retention” as our metric. It focused on getting more people to continue learning on a course after it began. Designing for retention was hard. It also wasn’t clear how exactly retention benefited our users. Had the metric been called “engagement,” it might have led to different design outcomes. And perhaps even more, had the metric been centered on quality and satisfaction of learning, rather than the time spent on the site. (Someone could have spent half an hour at FutureLearn and learned what they needed, but it wouldn’t have counted as success).

我们选择的词很重要。它们影响着我们的思维方式。几个月来，我在FutureLearn工作的团队把“用户存留”作为我们的衡量标准。这个标准聚焦于当课程开始之后让更多的用户保持持续性的学习。为存留而设计是很困难的。因为不清楚存留究竟如何对我们的用户有什么好处。如果该指标被称为“参与”，可能会导致不同的设计结果。或许更重要的是，衡量标准是以学习的质量和满意度为中心，而不是花在网站上的时间。(有人可以在FutureLearn上花半个小时去学习他需要的知识，但这不能称之为成功)。

 

Behaviors should be meaningful and work from the user’s perspective, as well as the business’s.⁵ “Promotion” of the books benefits only the library, but “Discovering” new books also has value for the reader. This makes it a better language choice and can influence the selection of the books being displayed, as well as how they’re displayed.

无论是从用户角度来还是企业的角度来看，行为应该对用户是有意义和有帮助的。5.图书的“推广”只对图书馆有利，但“发现”新书对读者和图书馆都有价值。这说明了选择一个梗恰当的用词不仅会影响选择展示那些书，同时也会影响到以什么样的方式展示书。

 

Break Down Behaviors into Actions
将用户行为分解为具体操作。

 

After you define the high-level behaviors, break them down into more specific actions that feed into those behaviors. Write them down next to each screen. For instance, the actions that support “Book discovery” are:
在定义了高优先级行为之后，将它们分解为更具体的操作，这些操作将反映到行为中。把它们写在每个页面的旁边。例如，支持“图书发现”的操作有：

 

•Scan for any inspiring or interesting books.
·浏览任何吸引人或有趣的书。

 

•Refine list of recommended books.
·完善推荐书单。

 

•Control how list is presented.
·调整书单的展示方式。

 

•View and learn about a book.
·阅读和了解一本书。

 

•Make a selection of books you might like.
·选一本你可能喜欢的书。

 

•Shortlist and reserve books.
·加入清单和预订书籍。

 




Actions feed into higher-level behaviors.
操作反馈到更高层次的行为中。

 

You might notice that some of the actions are repeated throughout the interface. But the elements that represent them aren’t always the same. On some occasions we refine a list of books by clicking through tabs; on others, by selecting an item from a menu. To reveal these inconsistencies, we can audit the existing elements.

您可能会注意到，有些操作在整个界面中重复进行。但是与之相对应的元素并不总是相同的。在某些情况下，我们通过单击选项卡来完善图书列表；在其他情况下，我们通过从菜单中选择一个项目来细化图书列表。为了揭示这些不一致之处，我们可以审计现有的元素。

2. Group Existing Elements By Purpose
2.。将现有元素按照目的分组

 

Taking one behavior at a time, look across all the pages to find the elements that support it. For example, to “View a book” we might be using different items on the promo pages, in the catalog search results, and in the wish list.

每次选择一个行为，查看所有包体现这个行为的页面。例如，我们可能在促销页面、目录搜索结果和愿望列表中使用不同的方式来实现“查看一本书”。

 

Cut the related elements out using the second set of printouts. Arrange them into groups and label each group: “View a book,” “Refine a list,” and so on. They are the candidates to be defined as patterns. The elements should be grouped at the same level of granularity, so you won’t have a “Book list” module and a “Reserve” button in the same group.

将第二组打印件剪切出相关元素。将它们分组排列，并标记每个组：“查看书籍”、“修改列表”等等。它们是被定义为模式的候选对象。元素应该在相同的粒度级别进行分组，这样就不会在同一组中有“Book List”模块和“Reserve”按钮。

 




Groups of items: candidates to define as patterns.
元素归组：要定义为模式的候选项。

 

3. Define Patterns
3.。定义模式。

 

Now that you have groups of elements, decide how to deal with the items in each group. Should they be merged into one pattern or kept separate? Typically, this is worked out on a case-by-case basis. But there are two techniques I find particularly helpful: placing a pattern on a specificity scale, and mapping out its content structure.

现在您已经有了一组元素，决定好了如何处理每个组中的项目。它们应该合并成一个模式还是保持独立？通常，这是经过几个案例的基础上确定的。但我发现有两种方法特别有用：将一个模式放在性质度量尺上，以及绘制出模式的内容结构。

 

Specificity Scale

性质度量尺。

 

The same pattern can be defined as more specific or more generic. Say we need to display events and exhibitions on the library site. If we define them as two separate patterns we can make each one more specific. On the other hand, unifying them into something like a “content block” would make the pattern more generic.
可以将相同的模式定义为更独特或更通用。比如说，我们需要在图书馆网站上展示活动和展览。如果我们将它们定义为两个不同的模式，我们就可以使每个模式更加独特。另一方面，将它们统一成类似于“内容块”使模式更加通用。

 

 




Specificity scale.

性质度量尺。

 

 

While it seems like a simple concept, deciding the level of specificity is one of the trickiest things about modular design. The more specific something is, the less reusable it is. And conversely, to make something more reusable, you also need to make it more generic. With more specific parts, the system becomes harder to maintain and to keep consistent. But too many generic modules lead to generic designs. Like with many things, there’s no right way to define patterns and it all depends on what we’re trying to achieve.

虽然这看起来是一个简单的概念，但决定独特程度是模块化设计中最棘手的事情之一。独特的东西越多，它的可复用性性就越低。相反，为了使一些东西更可复用，您还需要使它更通用。包含有过多的独特元素的模块，系统变得更难维护和保持一致。但是太多的通用模块会导致很普通的设计。就像很多事情一样，没有正确的方式来定义模式，这完全取决于我们想要实现什么。

 

Do we want visitors of the site to perceive exhibitions differently to events? Is there anything about events that might be in conflict with the design of exhibitions? If so, we should consider splitting them up. For example:

我们想让网站的访问者对展览和活动有不同的看法吗？活动页面是否有与展览的设计相冲突？如果是这样的话，我们应该考虑把他们分开。例如：

 

 

•The design of an exhibition module can be centered around an image of the art. Since exhibitions are unique, they can feature custom titles that complement the art to give it a poster-like feel. The date could be set in smaller type and positioned in the corner, so that it doesn’t distract from the poster.

·展览模块的设计可以围绕艺术图片。由于展览是独特的，他们可以特色的定制字体的标题，给艺术营造出海报一样的感觉。日期可以设置在较小的类型和定位在角落，使它不会从海报中分散注意力。

 

•Events are simpler. We could center design around a prominent date and an icon of the event.
·活动模块则相对简单。我们可以围绕一个突出的日期和事件的图标来设计。

 

If there’s no reason to differentiate between the two types, we should unify them into one pattern: things to do in the library. Doing that will make the pattern more generic because it would have to work for both cases. But it would also mean that every change we make to events will apply to exhibitions. Consistency will be easier to achieve but at the expense of flexibility.

如果没有理由区分这两种类型，我们应该将它们统一为一个模式：这些可以在组件库中完成。这样做将使模式更加通用，因为它必须同时适用于这两种情况。但这也意味着，我们对活动模块所做的每一项改变都将适用于展览模块。以牺牲灵活性为代价的情况下可以更容易的实现一致性。

 

Content Structure
内容结构。

 

Another tool that I find helpful is mapping out a pattern’s content structure. We covered it briefly in chapter 4 on functional patterns. Here’s a reminder of what it involves:
另一个我认为有帮助的工具是梳理出模式的内部结构。我们在第4章的功能模式中简要介绍了它。这里有一个提醒，模式与涉及到什么：

 

1. List the core content slots a module needs to be effective. Can this module function without the image or is the image essential to its purpose? Is a label always necessary? Mark optional elements.
1.。列出使得模块有效所需的核心内容构成。这个模块可以在没有图片的情况下还可以工作吗？或者图像对于其模块的目的是必不可少的吗？标签总是必要的吗？标记出可有可无的元素。

 

 

2. Determine the hierarchy of elements and decide how they should be grouped: is the icon part of the key info or is it part of the image?
2.。确定元素的层次结构并决定如何对它们进行分组：图标是关键信息的一部分，还是图像的一部分？

 

3. Make sketches to visualize the structure. The same pattern can be presented in countless ways and sketching helps find the optimal design.
3.。画个草图使结构形象化。同样的模式可以以无数种方式呈现，草图可以帮助找到最优设计。

 

Typically, elements that can be merged into one pattern share the same underlying structure. On the other hand, if you struggle to unify the structures of multiple elements without compromising their purpose, it’s an indication that they shouldn’t be merged.
通常，可以合并到一个模式中的元素有着相同的底层结构。另一方面，如果您很难在不损害其目的的情况下统一多个元素的结构，这表明它们不应该合并。

 

Sometimes elements have a similar structure, but owing to context or our design intent, they need to look or behave differently. In this case we can create variants. A variant is a modified version of the same pattern.

有时元素具有类似的结构，但与我们的设计意图没有关联性，它们需要看起来不同或行为不同。在这种情况下，我们可以创建变体。变体是同一模式的修改版本。