功能范式

在本章中，我们将讨论功能范式的作用以及为什么应在设计过程的早期定义它们。

In this chapter, we’ll discuss the role of functional patternsand __why they should be defined early in the design process.

功能范式是界面的有形构建块。它们的目的是启用或鼓励某些用户行为。

Functional patterns are the tangible building blocks of the interface. Their purpose is to enable or encourage certain user behaviors.

在十分钟的烹饪现场，其中一些行为包括选择食材，选择食谱以及在分配的时间内执行以下步骤。这些行为将告知我们设计的功能范式。功能范式或模块1在很大程度上取决于产品所属的领域。我们的烹饪应用程序中的范式与财务软件完全不同。代替配方卡，我们将处理任务栏，数据字段，网格，图表和图形。

On the ten-minute cooking site, some of those behaviors included selecting ingredients, choosing a recipe, and following steps within an allocated time. The functional patterns we design will be informed by those behaviors. Functional patterns, or modules,1 are largely shaped by thedomain a product belongs to. The patterns in our cooking app would be quite different from, say, finance software. Instead of recipe cards we’d be dealing with task bars, datafields, grids, charts and graphs.

功能范式可以是简单的，也可以组合起来创建更复杂的范式。食谱卡由膳食标题，图像，成分和操作按钮组成。食谱卡中的每个模块都有自己的目标：标题告诉我们膳食是什么；该图像提供了最终结果的预览；成分图标使我们可以更轻松地扫描卡片。

Functional patterns can be simpleor they can combine to create more complex patterns. A recipecard is made of a meal title, image,ingredients, and an action button.Each module within the recipe card has its own goal: the title tells us what the meal is; the image providesa preview of the finalresult; ingredient icons allow us to scan the cards more easily.

我以一种更为通用的方式看到了功能范式，这是一种柏拉图式的理想，而模块则是功能范式的体现，在不同的界面中可能有所不同。

1 I see functional patterns in a more generic way, as a kind of a Platonic ideal, and modules as the embodiment of functional patterns, which can be different in different interfaces.

这些模块一起有助于实现一个共同的目标：鼓励人们烹饪食谱上显示的餐点。

Together, those modules help to achieve a sharedpurpose: to encourage people to cook the meal shown on the recipe.

随着产品的发展，范式也在发展。我们可能会开始允许我们的用户对食谱进行评分，评分显示将成为食谱卡的一部分。或者我们可能决定可以改善卡的布局，或者应该使成分图标更清晰，或者我们需要引入卡的紧凑版本。我们对范式进行测试和迭代，以使它们更好地工作以实现其目的。也就是说，更有效地鼓励行为。

As the product evolves, so do the patterns. We might start allowing our users to rate the recipes, and the rating display will become part of the recipe card. Or we might decide that the layout of the card can be improved, or that ingredient icons should be made clearer, or that we need to introduce a compact version of the card. We test and iterate the patterns to try to make them work better to achieve their purpose; that is, encouraging the behaviors more effectively.

在设计过程中尽早阐明范式的目的可以帮助防止随着产品的增长而重复。起初，似乎不值得付出努力；毕竟，产品在早期可能会改变得太快而无法固定所有接口部件。但是核心功能范式真的会发生很大变化吗？让我们以 FutureLearn 为例，看看自最初设计以来的三年中界面如何演变。

Articulating the purpose of the patterns early in the design process can help prevent duplication as the product grows. At first, it might not seem to be worth the effort; after all,a product can change too fast in its early days to be able to pin down all the interface parts. But do the core functional patterns really change that much? Let’s take FutureLearn as an example and see how the interface evolved in the three years since the initial design.

范式发展，行为依旧

自开放大学于2013年成立以来，FutureLearn 的愿景一直是“通过讲故事，激发对话和庆祝进步来激励所有人学习。”为了做到这一点，我们至少必须确保人们可以发现并加入在线课程，激励他们继续前进，并使学习经历具有奖励和激励作用。该愿景为FutureLearn提供了最初的功能范式。

Since it was founded by the Open University in 2013, FutureLearn’s vision has been to “inspire all to learn through telling stories, provoking conversation, and celebrating progress.” To be able to do that, as a minimum we had to make sure people could discover and join an online course,motivate them to progress through, and make the learning experience rewarding and stimulating. This vision informedthe initial functional patterns on FutureLearn.

课程是按单元排列的，它们之间呈线性流动-一个部分通往另一个。在界面级别，这转化为每周结构。每周分为活动，活动分为步骤。课程进度模块是核心功能范式之一：它允许学习者浏览课程的内容，显示进度以及当前课程的位置。

Courses are arranged in units and there’sa linear flow to them — one part leads to another. On the interface level, this translates into a weekly structure. Each week is broken down into activities, and activities into steps. The course progress module is one of the core functional patterns: it allows learners to navigate the content of the course, shows their progress, and where the course is currently active.

FutureLearn的课程进度模块
_
这些样式在三年前首次设计后经历了一些更改。他们的风格，甚至功能和交互都已经改变。然而，它们的目的从根本上保持不变，因为它与FutureLearn的工作原理有关。

These patterns went through a few changes after they were first designed over three years ago. Their styles, and even functionality and interactions, have changed. Yet their pur- pose fundamentally stayed the same, as it’s connected to thecore idea of how FutureLearn works.

“待办事项”页面在过去的三年中经历了几次修订，但核心模块的目的保持不变

同样，随着参与人数的增加，FutureLearn 的讨论线程也随着时间的推移而发展：线程的布局，交互作用和过滤功能已经发生了演变，但它们的核心目的基本保持不变—使学习者参与交流并让他们互相学习。

Similarly, discussion threads on FutureLearn have evolved over time, as the volume of people participating has increased: the layout of the threads, the interactions and the filtering featureshave evolved, but their core purpose remains largely the same — to engage learners in conversa- tion and allow them to learn from each other.

设计讨论页面后，它们经历了多次迭代，但是核心模块的目的没有改变

显示课程详细信息的核心单元也已经发展了三年，以使用户在向下滚动页面之前可以看到更多的课程列表。但同样，范式的目的仍然相同，允许人们发现并加入他们感兴趣的课程。

The core unit for displaying course details has also evolvedover three years, to allow users to see a larger selection of course listings before needing to scroll down the page. But again, the purpose of the pattern remains the same to allow people to discover and join the courses they’re interested in.

课程列表经过多年发展，使用户可以查看更多的课程列表

由于时间限制和其他优先事项，在起步初期常常会发生这种情况，因此并未定义许多核心功能范式。随着FutureLearn 的界面和教育功能的发展，范式已被复制。我们最终获得了几个课程进度模块，一个注释模块的变体以及整个站点上的一些不同的课程块和课程卡。也许这是不可避免的。还是可以防止某些重复？ _

As often happens in the early start-up days, because of time constraints and other priorities, many core functional pat- terns weren’tdefined. As FutureLearn’s interface and edu- cational functionality grew,patterns were duplicated. We ended up with several course progress modules, variations of a comment module, and a few different course blocks and course cards across the site. Perhaps this was inevitable. Or could some of those duplications have been prevented?

如果未在团队中定义和共享范式，则可以重新创建该范式以实现相似的目标：另一个促销模块，另一个新闻提要，另一组共享链接，另一个下拉菜单。在不知不觉中，您最终获得了30种不同的产品显示和弹出菜单。

When a pattern is not defined and shared in the team, you start recreating it to accomplish similar goals: another promotionalmodule, another news feed, another set of sharing links, another dropdown. Before you know it, you end up with 30 different product displays and pop-over menus.

范式是我们试图通过界面鼓励或实现行为的物理体现。它们的执行方式、内容、交互和样式可以改变。 （实际上，图案甚至不必是视觉的-它们可以通过语音读出，或以其他方式体现）。但是它们的主要目的是鼓励核心行为保持相对稳定，因为它们源于产品的用途和产品的工作原理。了解关键范式的目的可以帮助您了解系统的工作方式并防止其碎片化随着它的发展。

Patternsare the physical embodimentof the behaviors we’re trying to encourageor enable through the interface. Their execution, content, interactionsand presentation can change. (In fact, patterns don’t even have to be visual — they can be read out by a voice, or embodiedin another way). But the core behaviorsthey’re designed to encourageremain relatively stable,as they stem from the purpose of your productand the idea of how it works.Being conscious of the purpose of your key patterns can help you understand how your system works and prevent it from fragmenting as it evolves.

定义功能范式

在设计过程的早期定义范式并不需要花费很多时间。无需费力即可将某些技术集成到您的过程中。以下是一些我认为特别有用的信息。

Defining patterns early in the design process doesn’t have totake a lot of time. There are techniques that can be inte- grated into your process without extra effort. Here are a fewthat I find particularly helpful.

创建范式地图

为了绘制出客户的需求，目标和动机，您可能已经完成了客户体验映射，“要做的工作” 或围绕客户旅程的类似练习。结果通常会馈入早期的设计探索和原型中。在这一点上，通常对我们要鼓励或支持的用户行为有相当清楚的了解：学习课程，参加课程，进行讨论。

To map out your customers’ needs, goals and motivations you might have done customer experience mapping,2 “job to be done,”3 or a similar exercise around customer journeys.The outcomes typically feed into the early design explora- tions and prototypes. At this point,there’s usually a fairly clear understanding of the behaviors we want to encourageor enable in our users: learn about a course, join a course, engage in a discussion.

但是一旦我们专注于界面，有时我们就会迷失在细节上。我们花时间制作最令人印象深刻的页面标题，而忘记了该标题的用途以及它如何影响用户在旅程的不同部分。换句话说，我们失去了用户行为与鼓励或启用这些行为的确切范式之间的联系。

But once we focus on the interface, sometimes we get lost in the details. We spend time making the most impressive page header, forgetting what this header is for and how it affects the user in different parts of their journey. In otherwords, we lose the connection between user behaviors and the exact patterns that encourage or enable those behaviors.

要查看您的范式如何适应更大的情况，请尝试将一些核心模块映射到用户旅程的各个部分。

To see how your patterns fit into a bigger picture, try to map some of your core modules to the sections of a user journey.

2 http://smashed.by/mappingxp
3 “待完成的工作”（JTBD）是一种练习，可以帮助您专注于使用产品或服务背后的潜在动机，而不是专注于产品本身。例如，即使客户说他们买了割草机来“割草”，他们的更高目的可能是“始终使草丛低矮而美丽”，这可能表明割草机并不是从事该工作的正确工具。第一名。

2 http://smashed.by/mappingxp 3 “Job to be done” (JTBD) is an exercise that helps you focus on the underlying motivation behind using a product or service, rather thanon the product itself. For example, even though customers say thatthey buy a lawnmower to “cut grass,” their higher purpose might be to “keep the grass low and beautiful at all times,” which might indicate that a lawnmower is not the right tool for the job in the first place.

考虑一下每个部分的用途以及鼓励哪些行为。此时，您不必担心会捕获每个图标或按钮。着眼于大局：了解系统的各个部分以及它们如何协同工作。对于FutureLearn，它主要集中在三个领域：发现内容，学习课程和实现目标。

Think about what each section is for and what behaviors it’s designed to encourage. You don’t need to worry about cap- turing every icon or button at this point. Focus on the big picture: understand the parts of the system and how they work together. For FutureLearn, it was primarily focused on three areas: discovering content, learning on a course, and achieving a goal.

FutureLearn的某些功能范式映射到用户旅程的三个关键阶段

在我的脑海中牢牢记住这张地图，这有助于我思考具有共同目的的范式系列，而不是单个页面。例如，我没有设计课程列表页面，而是整体上考虑了“发现”区域。

Keeping this map in my mind helped me to think in families of patterns joined by a shared purpose, rather than individual pages. For example, instead of designing a course list page,I’d think of the “Discovery” area as a whole.

在用户旅程的这一阶段，我们需要鼓励哪些行为？有哪些范式可以支持这些行为？它们在网站上还有其他地方，以及它们在那儿如何工作？如果是新范式，它将对整个系统有何贡献？对所有这些问题的思考是系统设计的一部分。

What are the behaviors we need to encourage at this stage of the user journey? What are the patterns that can support those behaviors? Where else on the site do they exist and how do they work there? If it’s a new pattern, how does it contribute to the whole system? Thinking of all these ques- tions is part of designing systematically.

进行界面库存

布拉德·弗罗斯特（Brad Frost）描述的接口清单处理已成为开始对接口进行模块化的一种流行方法。这个想法很简单。您可以在纸上打印出界面的屏幕，或者在 Keynote 或 Power-Point 中收集它们。然后，您可以通过剪裁或粘贴到 Keynote 中来分离出各种组件。

The interface inventory process,4 described by Brad Frost, has become a popular way to start modularizing an inter- face. The idea is simple. You print out the screens of your interface on paper,or collect them in Keynote or Power-Point. You then separate out various components either by cutting them out or pasting them in Keynote.

显示一些交互元素的界面清单
4 http://smashed.by/uiinventory

最后，您可以得到一个零件集合，这些零件可以分为以下几类：导航，表单，选项卡，按钮，列表等。通过此过程，您可以发现重复的范式并确定需要注意的问题区域。这是当您发现有数十个标题或弹出菜单并开始考虑如何对所有这些进行排序时。

You end up with a collection of parts which can be grouped into categories: navigation, forms, tabs, buttons, lists, and so on. Going through this process allows you to see duplicated patterns, and identify problem areas that need attention.This is when you discover that you have dozens of headers or pop-over menus, and start thinking about how to bringsome order to all that.

库存并不一定包含所有内容（尽管您要做的第一件事应该是全面的）。它一次可以专注于一个范式组，例如促销模块，标题或所有产品展示模块。您可以进行专门针对字体，颜色或动画的清单。

An inventory doesn’t have to encompass everything (although the very first one you do should be comprehen-sive). It can focus on one pattern group at a time, such as promotional modules, headers, or all the product display modules. You can do an inventory focused specifically on typography, or color, or animations.

为了让系统有效，应该定期进行接口清单清点。即使您的团队维护了一个范式库，也会出现需要折叠到系统中的新范式。如果您养成每几个月进行一次库存管理的习惯，那么每次的时间不应超过几个小时。而且，每次您这样做时，您都会更好地了解您的系统并可以对其进行改进。

To be most effective, interface inventories should be done regularly. Even if your team maintains a pattern library,new patterns will emerge that need to be folded into the system. If you get into a habit of running inventories every few months, each time shouldn’t take more than a couple of hours. And every time you do it, you understand your system better and can improve it.

5在第7章和第8章中，我们将从系统的目的开始，深入到最小的范式，例如图标和颜色，来深入了解界面清单过程。

5 In chapters 7 and 8, we will look at the interface inventory process in depth, starting from the purpose of the system and going down to the smallest patterns, such as icons and colors.

视范式为行动

要了解范式的目的，请尝试着眼于范式的作用而不是您的想法。换句话说，尝试找到最能描述范式设计行为的动作。用动词而不是名词描述范式可以帮助您拓宽范式的潜在用例并更准确地定义其目的。

To understand the purpose of a pattern, try focusing on what it does rather than what you think it is. In other words, try to find an action that best describes the behavior a pat- tern is designed for. Describing a pattern with a verb rather than a noun can help you to broaden potential use cases for a pattern and define its purpose more accurately.

假设您已经介绍了一个简单的模块来推广在线课程。如果尝试描述它是什么，则可以将其称为“图像标题”或“课程标语”。

Say you’ve introduced a simple module to promote an online course. If you try to describe what it is, you might refer to it as “Image header” or “Course banner.”

UI组件，用于推广有关FutureLearn的在线课程
_
但是通过以这种方式描述范式，可能会使它过于局限于其表示形式或内容。您可能最终将它的使用限制为特定的上下文。另一方面，如果您从用户以及您自己的角度根据操作来定义它，则可以发现其目的：“促进课程”和“发现课程”；以及“受到启发加入课程”和“鼓励人们加入课程”。

But by describing a pattern in this way, you could be makingit too specific to its presentation or content. You might end up limiting its use to a particular context. On the other hand, if you define it in terms of actions — from your user’s perspective as well as your own — you can uncover its pur- pose: “Promote a course” and “Discover a course”; and “Getinspired to join a course” and “Encourage people to join.”

通过专注于动作，您可以将范式与行为联系起来，并在各种用例中保持开放状态。这种范式还能促进什么？在线讨论？一个新事件？您给它命名的名称也应反映出这一点。在上面的示例中，我们将模块命名为“广告牌”，以反映其以行动为重点的促销功能。

By focusing on the action, you connect pattern with behav- ior and keep it open for various use cases. What else can this pattern promote? An online discussion? A new event?The name you give it should also reflect this. In the exam- ple above, we named the module “Billboard” to reflect its action-focused, promotional function.

绘制图案的内容结构

要获得对范式工作原理的共识，请画出其结构：模块的核心内容类型必须有效。

To get a shared understanding of how a pattern works, draw its structure: the core types of content a module needs to be effective.

设计人员，开发人员和内容策略师可以在开发新模块或重新设计现有模块时一起完成此任务。首先列出模块有效的核心内容元素。例如，您可能同意在界面中使用诸如“广告牌”之类的促销模块：

• 标题
• 强烈呼吁采取行动
• 引人注目的背景（纯色或图像）

Designers, developers and content strategists can do it together when working on a new module, or when refac- toring an existing one. Start by listing the core content elements a module needs to be effective. For example, you might agree that in your interface a promotional module like “Billboard” needs:

• a heading
• a strong call to action
• an eye-catching background (solid color or image)

接下来，尝试确定元素的层次结构并决定如何将它们分组。例如：图像是内容的一部分吗？是否总是需要标签？这样做时，请绘制一些草图以可视化结构。

Next, try to determine the hierarchy of elements and decide how they should be grouped; for example: is the image partof the content? Is a label always necessary? While doing that, make a few sketches to visualize the structure.

FutureLearn上课程列表项的内容结构示例
_
为了让您了解它的外观，上面是 FutureLearn 课程列表项模块的内容结构示例。此时，您可能会想：“它只是草图或线框。我一直都这样。”但这有点不同。该草图专门针对模块的内容结构以及元素的层次结构和分组。

To give you an idea of what it might look like, above is an example of the content structure for a course list item module on FutureLearn.At this point you might be thinking: “It’s just a sketch or a wireframe. I do that all the timeanyway.” Butit’s a bit different. This is a sketch focused specifically on the content structure of a module, and the hierarchy and grouping of the elements.

一旦对范式的结构有了共同的了解，就可以更轻松地确保模块的设计方式反映在标记中。设计师可以从事视觉探索，而开发人员可以开始构建原型（或者两者都可以原型，这取决于您的工作方式）。设计师了解在范式变得不同之前，他们可以在视觉上推动多少范式。开发人员知道选择设计的原因，因此不会将意想不到的设计扔到墙上。

Once you have a shared understanding of a pattern’s struc- ture, it’s easier to make sure that the way the module is designed is reflected in the markup. A designer can work on the visual explorations, while a developer can start putting together a prototype (or both can prototype, depending on how you work). Designers understand how much they can push a pattern visually before it becomes something differ- ent. Developers know the reasons for the design choices and don’t get unexpected designs thrown to them over the wall.

这是另一个例子。在FutureLearn上，我们曾经在网站的不同区域中提供了四个不同版本的社交供稿–两个版本的“评论”，“答复”和“通知”。

Here’s another example. On FutureLearn we used to have four different versions of a social feed in different areas of the site — two versions of “Comment,” a “Reply” and a “Notification.”

FutureLearn 上的社交供稿模块有四个不同版本
_
乍一看，它们看起来很相似，但风格却不一样。也就是说，如果您更改了其中之一，则这些更改将不适用于其他更改，并且会出现间距和版式存在视觉上的不一致诸如此类的问题。分解它们并绘制它们的结构使我们能够查看是否可以将它们统一为一个范式，并以在所有四个用例中都可以使用的方式设计该范式。

While at first glance they looked similar, they didn’t share the same styles; that is, if you changed one of them, the changes wouldn’t apply to others, there were visual incon-sistencies in spacing and typography, and so on. Breaking them down and drawing their structures allowed us to see if they could be unified into one pattern, and to design that pattern in a way that works in all four use cases.6

6 在第8章中，我们将更详细地讨论何时统一范式，何时拆分范式以及何时创建变体。

6 In chapter 8, we’ll discuss in more detail when to unify patterns, when to split them up, and when to create variants.

FutureLearn上“ Feed item”模块的内容结构
_
如这些示例所示，内容结构与范式的目的紧密相关。知道模块的结构有助于我们了解其工作原理。

Content structure is closely linked to the purpose of a pattern, as these exampleshave shown. Knowing how a module is structured helps us understand how it works.

将图案按比例放置

尝试将类似的图案放到彼此之间的比例尺上。例如，您的系统中可能有一些促销范式，强度不同。类似于我在第1章中提到的视觉响度等级7，可以将促销模块相互比较。

Try placing similar patterns on a scale, in relation to one another. For example, there could be a few promotional patterns in your system, with varying degrees of intensity. Similar to the visual loudness scale I mentionedin chapter 1, promotional modules can be compared with one another.

6 http://smashed.by/visualloudness

促销模块可以放在虚构的视觉响度刻度上

规模化放置凡式有助于确保正确使用它们，并且不会在整个系统中争夺注意力。它还可以帮助防止不必要地重新创建模块，因为您可以看到何时已经具有相同“卷”的模块。

Placing patterns on a scale can help make sure they’re used appropriately and don’t compete for attention across the system. It also helps prevent modules being recreated need- lessly, since you can see when you already have a module at the same “volume.”

考虑它的另一种方法是想象您的界面不是视觉的，而是被语音读出的。什么时候需要变大声音并转变为民族？通过模块中元素之间的关系以及它们在整体设计中的层次结构，思考如何可视化地表达音量和语调。当然，以这种方式进行思考也具有使屏幕阅读器更易于访问的其他优点。

Another way to think about it is to imagine that your interface is not visual, but thatit’s being read out by a voice. When would that voice need to get louder and change into- nation? Think about how that volume and intonation can be expressed visually,through the relationships between the elements within the modules, as well as their hierarchy in the overall design. Thinking of it this way, of course, also has an additional advantage of making it more accessible to screen readers.

假设出需要处理的内容

这是一个悖论。我们希望首先设计内容，但同时我们希望以适合任何内容的方式构建模块。实现此目的的方法不一定从内容开始，而是有目的。然后，我们可以将内容不视为已知资产，而是作为假设。这使我们能够测试是否已经很好地定义了模块的目的，以及设计是否为此目的而工作。假设我们有一个用于显示产品功能的模块。

Here’s a paradox. We’re expected to design content-first, but at the same time we’re expected to build modules in a way that can fit any kind of content. A way to do this is not necessarily by starting with content, but with the purpose. Then we can treat content not as a known asset but as a hypothesis. This allows us to test if we’ve defined the purpose of the module well, and if the design works for that purpose.Suppose we have a module, which was designed for display- ing product features.

设计用于呈现产品功能的模块的示例
_
我们可以将其目的定义为“用易于扫描的附加信息支持主要消息”。 “消息”可能是关键功能，简短建议或快速步骤。我们可以为适合该假设的内容（简洁和可扫描的补充内容而不是页面上的主要内容）构建范式，然后对其进行测试。

We could define its purpose as “Supporting the main mes- sage with additional bits of easily scannable information.” The “bits” could be key features, short pieces of advice, or quick steps. We can build a pattern for content that fits this hypothesis (concise and scannable, supplementary rather than the main content on the page), and then test it.

如果内容始终不适合该范式，则通常是以下三个原因中的一个（或多个）引起的：

• 我们没有正确定义范式的目的。回到尝试了解其设计目的的行为。
• 我们没有以最佳方式实现范式的设计。为此范式尝试不同的设计。
• 我们正在尝试将内容强制设置为不合适的范式。考虑修改内容，或尝试其他范式。当我们不从目的和结构入手时，最终可能会得到与其内容过于紧密相关的模块。例如，我们在FutureLearn中有一个案例，其中副本将重要选项卡推送到可见区域下方。

If content consistently ends up being unsuitable for this pattern, it’s typically caused by one (or more) of these three reasons:

• We didn’t correctly define the purpose of the pattern. Go back to trying to understand the behaviors it’s been designed for.
• We didn’t design the pattern in a way that achieves its purpose best. Try a different design for this pattern.
• We’re trying to force the content into a pattern that’snot quite right for it. Consider revising the content, or try another pattern.When we don’t start with the purpose and the structure, we can end up with modules that are too closely tied to their content. For example, we had a case at FutureLearn where the copy was pushing important tabs below the visible area.

易碎模块的示例，其内容过于具体
_
标签应保持可见。为了解决这个问题，我们几乎引入了一个自定义的较小尺寸的标题，只是将选项卡微调了一点。但是如果这样做了，我们最终会得到一个不够健壮的模块。

The tabs were meant to stay visible. To get around the prob-lem, we almost introduced a custom smaller size heading, simply to nudge the tabs up a bit. But had we done that, we would have ended up with a module thatwasn’t robust.

如果标题变长或添加了额外的行，我们将陷入同样的问题。如果我们从模块的目的及其结构入手，选项卡可能会放在顶部，因为它们是设计中如此重要的元素。

If the title got longer or if we added an extra line, we would have been stuck with the same problem. Had we started with the purpose of the module and its structure, the tabs would probablyhave been placed at the top, since they’re such an important element of design.

这些只是您可以尝试在界面中定义功能范式的一些工具和技术。最重要的是了解范式如何与它们最初设计的行为联系在一起：它们存在的目的。

These are just some of the tools and techniques you can try to define functional patterns in your interface. The most important thing is to understand how patterns link to the behaviors they were originally designed for: their purpose.

目的决定了随后发生的所有其他事情：范式的结构、内容以及表示形式。了解范式的目的（了解其旨在鼓励或启用的行为）可以帮助我们设计和构建更强大的模块。

The purpose determines everything else that follows: the structure of the pattern, its content, its presentation. Know- ing the purpose of the pattern (knowing which behaviors it’s designed to encourage or enable) can help us design and build more robust modules.

它可以帮助我们知道在范式完全不同之前可以对其进行多少修改。通过为整个团队提供共同的参考点，并将它们与原始设计意图联系起来，它可以减少重复。明确目的还可以使测试范式更容易，以查看其实际效果。

It can help us know how much a pattern can be modified before it becomes something entirely different. And it can reduce duplication by giving the whole team a common point of reference, and connecting them with the original design intent. Being clear on the purpose also makes it easier to test the patterns to see how effective they really are.

如果功能范式是界面中的对象，那么感知范式更像是样式-它们描述了它们是什么类型的对象以及它们的感觉。让我们仔细看看它们。

If functional patterns are objects in the interface, then per- ceptual patterns are more like styles — they describe what kind of objects they are and how they feel.Let’s take a closer look at them.