如何使用 Pattern Lab 2 制作和维护原子设计系统

已发表: 2022-03-10

快速总结↬ UI 设计系统的好处现在众所周知。它们带来更具凝聚力、一致的用户体验。它们加快了您团队的工作流程，让您可以发布更多内容，同时在此过程中节省大量时间和金钱。他们在学科之间建立了共同的词汇表，从而产生了更具协作性和建设性的工作流程。它们使浏览器、设备、性能和可访问性测试更容易。随着时间的推移，它们可以作为坚实的基础，帮助您的组织更轻松地适应不断变化的网络环境。本文提供了使用 Pattern Lab 2 构建和维护原子设计系统的详细指南。

UI 设计系统的好处现在众所周知。它们带来更具凝聚力、一致的用户体验。它们加快了您团队的工作流程，让您可以发布更多内容，同时在此过程中节省大量时间和金钱。他们在学科之间建立了共同的词汇表，从而产生了更具协作性和建设性的工作流程。

它们使浏览器、设备、性能和可访问性测试更容易。随着时间的推移，它们可以作为坚实的基础，帮助您的组织更轻松地适应不断变化的网络环境。

为了创建这些系统，我们必须在 Markdown 中建立一个模式库。我们需要将我们的界面分解成更小的部分，但同时我们需要确保这些部分组合在一起形成一个美观且功能强大的整体。 “原子设计”是一种有用的心智模型，可以帮助我们做到这一点，而 Pattern Lab 是一套工具，可以帮助将这些原子设计系统变为现实。

关于 SmashingMag 的进一步阅读：

将模式库提升到新的水平
智能响应式设计模式
生活方式指南工具的深入概述
满足包容性前端设计模式

跳跃后更多！继续往下看↓

经过两年多的努力，我们很高兴地宣布 Pattern Lab 2！完全重新构想，Pattern Lab 2 是一个开源工具套件，可帮助您和您的团队创建和维护周到的 UI 设计系统。它的核心是一个静态站点生成器，可以将模式拼接在一起并允许您使用动态数据进行设计。

新版本的一些亮点包括：

完全重组的内核，支持更多语言、模板引擎和数据格式
支持 Markdown 用于模式文档
添加 YAML 支持以及用于管理动态数据的 JSON
扩展和增强 Pattern Lab 功能的插件
一个主题化、可扩展、重新设计的前端 UI

但最重要的是，Pattern Lab 2 的设计和构建使您的团队可以在设计系统过程的每个阶段有效地使用它，从一开始一直到长期维护。

原子设计是原子、分子、有机体、模板和页面一起工作以创建有效的界面设计系统。 Pattern Lab 是一套工具，可帮助您的团队实现原子设计系统。（在 Vimeo 上观看视频）

项目开始时的模式实验室

您的团队的任务是制作一个新的应用程序和底层设计系统。曾几何时，您团队的 UX 设计师可能躲在一个房间里，通过单一的、带有大量注释的线框来定义产品。一旦获得批准，它们就会被传递给视觉设计师，然后他们将应用颜色、排版和纹理来使线框栩栩如生。在homepage_v9_final_forReview_jimEdits_05-12__FINAL.psd最终获得批准后，设计被发送给前端开发人员，由于设计包含大量不切实际的布局、不可能的用户内容（每个用户名只有 4 个字符——多么方便！），以及各种字体和不一致的设计模式。

翻墙设计过程已经死去。协作、迭代和快速开发对于应对这种不断变化、多样化的网络环境至关重要。我们需要尽快进入浏览器，并在响应能力、性能、人体工程学和运动等真实变量下测试设计。这就是为什么将前端开发视为设计过程的核心部分至关重要的原因，以及让设计师和前端开发人员紧密合作如此重要的原因。归根结底，我们都在使用相同的 UI。

在项目的第 1 天设置 Pattern Lab 实例可以创建一个共享的工作室——或者实验室，如果你愿意的话——配备设计和开发工具、水冷器、白板和显微镜。它为每个学科提供了一个场所，可以为活生生的设计系统贡献他们的观点。在真正意义上，Pattern Lab 可以作为您的设计系统项目的中心，最大限度地减少创建过于冗长的线框、红线静态组合和其他笨重的静态工件的需要。

听起来不错，对吧？让我们来看看如何在项目的第一天启动 Pattern Lab。

Pattern Lab 2 有 PHP 和 Node 两种风格。 团队，选择你的冒险！ 一些项目产生了明确的技术堆栈选择。其他人则归结为团队技能或环境优先级。无论是哪个平台，Pattern Lab 2 都准备好帮助您和您的团队协作构建您的新应用程序和设计系统。无论您选择何种平台，要知道无论哪种版本，Pattern Lab 都会产生几乎相同的结果——就像不同品牌和型号的汽车都将您带到同一个目的地一样。

安装模式实验室

一旦安装了适当的先决条件，您就可以安装 Pattern Lab。让我们看看如何安装 Pattern Lab Node，但请记住 PHP 指令也可用并且类似。

在您的终端窗口中，导航到您想要安装 Pattern Lab 的目录。然后键入以下命令：

git clone https://github.com/pattern-lab/edition-node-gulp.git
npm install
完成后， gulp patternlab:serve

运行npm install将下载最新的依赖项， gulp patternlab:serve将生成并自托管 Pattern Lab，在默认浏览器中打开前端。如果您不想直接克隆 git 存储库，您也可以下载最新版本，然后执行步骤 2 和 3。

随着 Pattern Lab 的启动和运行，您的团队现在有了一个中心来设计、开发和审查您即将建立的设计系统。

模式实验室的文件系统

Pattern Lab 将在项目的/source文件夹中找到的所有内容编译为/public文件夹中的静态 HTML 文件。然后可以单独或在样式指南前端内显示或使用此输出。让我们看一下 Pattern Lab 的文件系统以及source/内部的内容：

_annotations/ - 您的团队可以在其中定义实时注释以支持您的 UI 文档
_data/ - 用于呈现模式的全局数据所在的位置。
_meta/ - <head>和 foot（所有模式的书挡）信息所在的位置。
_patterns/ - 您的模式、模式文档和特定于模式的数据所在的位置。
css - 您的样式表可以驻留的地方
图像 - 您的图像可以驻留的位置
js - 你的 javascript 可以驻留的地方

值得强调的是，Pattern Lab 不会将任何前端约定或生产依赖项强加给您。您决定如何构建文件夹以及选择哪种技术完全取决于您。如果你想调用你的文件夹/stylesheets而不是/css那就去吧！想要使用 Sass？好的！喜欢 jQuery？伟大的！讨厌它？那也很好！ Pattern Lab 的存在只是为了将您的模式拼接在一起，并摆脱您做出的任何前端决策。您甚至可以配置资产从source/到public/时的管理方式。

选择你自己的冒险：命名约定和配置

原子设计是一种有助于构建 UI 设计系统的思维模型，但它肯定不是死板的教条。选择一种可以帮助您的团队使用同一种语言并一起完成出色工作的命名法非常重要。

Pattern Lab 的命名约定，就像软件的大多数方面一样，是完全可配置的。虽然 Pattern Lab patterns/文件夹默认为“atoms”、“molecules”、“organisms”、“templates”和“pages”，但您可以随意修改、删除或添加您的心愿。例如，如果我们要重新创建 GE 的 Predix 设计系统的分类——它由原则、基础、组件、模板、特性和应用程序组成——我们将 Pattern Lab 的/source/_patterns/目录结构如下：

 /00-Principles/ /01-Basics/ /02-Components/ /03-Templates/ /04-Features/ /05-Applications/

Pattern Lab 旨在符合您的工作流程，而不是相反。

确立设计方向

即使在项目的最初几天或几个小时内，每个人都可以为您的模式实验室做出贡献。这是一个探索、解决问题和建立一致性的时间。每个角色执行不同的活动，但它们的输出和输入是相互关联的。每个人都在为车辆的一个单独的轮胎充气，这将使您全部到达目的地。

在 Pattern Lab 中定义低保真 IA

早期的用户体验设计工作涉及确定应用程序的信息架构。与其立即使用倾向于过早定义布局和技术功能的高保真线框工具，不如创建低保真草图来确定特定屏幕上的内容和一般顺序。这项工作可以采用餐巾草图、项目符号列表或电子表格的形式。由于 Pattern Lab 支持基本标记，因此可以立即将这些内容参考图快速翻译到浏览器中。对于匹兹堡食品银行的重新设计，我们使用这种方法删除了每个模板。

对于匹兹堡食品银行网站的重新设计，使用一些非常简单的标记和占位符 div 将线框图从纸质草图快速转换为 Pattern Lab。（大预览）

因此，在/source/_patterns/templates/homepage.mustache中找到的主页模板代码如下所示：

 {{> organisms-header }} <div class="fpo">Mission Statement</div> <div class="fpo">Campaign</div> <div class="fpo">Get Help</div> <div class="fpo">Give Help</div> <div class="fpo">Learn</div> {{> organisms-footer }}

我们包含页眉和页脚模式，然后简单地删除我们期望包含在此页面上的内容。

捕捉视觉设计决策

早期的视觉设计工作涉及探索排版、调色板和视觉品牌的其他方面。从历史上看，设计师可能会跳入创建以桌面为中心的高保真 Photoshop 模型，设计师现在拥有有用的工具，如样式拼贴、Typecast 和元素拼贴来确定视觉设计方向，而无需诉诸过早的高保真合成。

随着围绕调色板和字体配对做出决策，Pattern Lab 可以捕获这些设计决策的结果，确保设计和开发团队不会无意中生成 50 种灰度。

Pattern Lab 记录了调色板和字体系列，以及其他视觉设计元素。在项目早期捕获这些决策可确保设计师和开发人员在整个过程中始终如一地使用颜色和排版。（大预览）

成为 Pattern Lab 的前端准备厨师

然后是前端代码。在项目的这些早期阶段，前端开发人员可能会坐下来等待设计师提出方向，然后再深入研究代码。但是这种类型的思维使设计师和开发人员彼此不同步，并阻止了真正的协作发生。

就像餐厅里的预备厨师一样，开发人员有巨大的机会开始准备最终将成为最终设计系统的模式和代码。在项目的早期，开发人员可以开始提取模式并将资产导入 Pattern Lab，尽早进行设置，以便设计人员和开发人员可以花更多时间实际合作设计和构建 UI。

调色板、真实副本和布局尚未建立，但这不应阻止开发人员搭建支持内容线框的结构。以英雄模式为例：

英雄模式最初可能由块状灰色和 lorem ipsum 组成，在这个阶段这已经足够了。花时间及早进行设置为与设计师的真正合作打开了大门。（大预览）

这种模式包括其他模式，这是一种将较小的界面元素消耗到更大的结构中的强大方法。这是block-hero.mustache的标记：

 <a href="{{ url }}" class="c-block-hero"> {{> atoms-hero-img }} <h2 class="c-block-hero__headline">{{ headline.medium }}</h2> </a><!-- end c-block--hero-->

双花括号代码 ( {{}} ) 是 Mustache 模板代码，它允许我们定义动态内容并在彼此之间包含模式。例如，代码{{> atoms-hero-img }}告诉 Pattern Lab 寻找一个名为“hero-img”的原子并将其包含在模式中。然后可以使用相同的包含约定，使用以下命令将英雄单元本身包含在更复杂的模式中： {{> molecules-hero }} 。

这种包含模式的俄罗斯套娃方法使您的代码库保持良好和干燥，这意味着如果您对任何特定模式进行编辑，包含该模式的任何地方都会自动更新。这使您的设计和代码库保持同步和一致。最重要的是，这种模式的持续构建可以在短时间内产生近乎完整的界面！

卷起袖子

信息架构已初具规模，初步审美方向已确立，新生模式已在 Pattern Lab 中被剔除。现在，团队现在可以共同认真地构建界面设计系统。让我们讨论如何使用 Pattern Lab 将模糊的方向感变成一个美观、实用、周到和完整的设计系统。

使用动态数据进行设计

原子设计的一个重要概念是模板和页面之间的差异。模板定义了 UI 的底层内容结构，而页面是那些模板的特定实例，这些模板用真实的代表性内容替换了该内容结构。两者都是记录内容参数所必需的，同时还显示了实际的设计模式并填充了真实内容。

在左侧，您可以看到公开 UI 底层内容结构的主页模板。在右侧，将真正具有代表性的内容注入该内容结构中，以阐明用户将看到的内容。（大预览）

Pattern Lab 最强大的功能之一是能够将不同的代表性内容交换到您的 UI 模式中，以确保它们能够处理您内容的动态特性。如果您的用户没有上传个人资料图片怎么办？如果用户的购物车中有 13 件商品而不是 2 件商品怎么办？如果其中一种产品有 14 种潜在变化怎么办？如果博客文章标题包含 400 个字符怎么办？返回用户？初次使用者？如果文章没有评论怎么办？或者当它有七层嵌套评论时呢？当他们的帐户被黑时，如果我们需要在仪表板上显示紧急消息怎么办？ Pattern Lab 允许您操作数据来表达任意数量的各种 UI 状态和任何模板的变体。

页面特定数据

Pattern Lab 中的初始数据存储在一个名为/source/_data/data.json的文件中，其中包含模式最初将使用以显示在样式指南和模板视图中的数据。您的默认data.json可能如下所示：

 { "headline" : { "short" : "Lorem ipsum dolor sit (37 characters)", "medium" : "Lorem ipsum dolor sit amet, consectetur adipiscing elit iopa. (76 characters)" }, "url": "#", "imgHero" : { "src": "../../images/fpo_hero-opt.png", "alt": "Hero Image" }, "imgLandscape" : { "src": "../../images/fpo_16x9-opt.png", "alt": "Landscape Image" }, "mediaList": [] }

您可以在您的模式中引用这些数据（即在模式中包含{{ headline.short }} ）以获得如下结果：

在 Pattern Lab 中呈现的主页模板，并使用 data.json 中定义的默认数据存根。 — 在 Pattern Lab 中呈现的主页模板，并使用`data.json`中定义的默认数据存根。（大预览）

在页面级别，我们希望将那些灰度图像和 lorem ipsum 占位符文本替换为真实内容。为此，我们将在/source/_patterns/pages/homepage.mustache旁边创建一个名为homepage.json的新文件，我们可以在其中覆盖 `data.json 中定义的初始数据。这可能看起来像这样：

 "imgHero" : { "src": "../../images/sample/hero-forest.jpg", "alt": "Forest" }, "headline" : { "medium" : "Track your hikes. Challenge your friends. Get out there and start exploring." }, "toutList" : [ { "url": "link.pages-blog-detail", "headline": { "short" : "Best winter hikes around the world" }, "imgLandscape" : { "src": "../../images/sample/tout-winter-hiker.jpg", "alt": "Hiker with back pack walking in snow" } }, { "url": "link.pages-login", "headline": { "short" : "Sign in to view your dashboard" }, "imgLandscape" : { "src": "../../images/sample/tout-leaves.jpg", "alt": "Green Leaves" } }, { "url" : "link.pages-about", "headline": { "short" : "Learn about our mission" }, "imgLandscape" : { "src": "../../images/sample/tout-mountains.jpg", "alt": "Mountain" } } ]

这会产生如下所示的 UI：

Pattern Lab 获取 homepage.json 中定义的数据 — Pattern Lab 获取`homepage.json`中定义的数据并覆盖`data.json`中定义的默认数据，以呈现类似于用户交互的 UI。这个阶段显然很重要，因为它是最终用户可能会看到的，但它对于测试构成 UI 的底层模式的弹性也很关键。（大预览）

伪模式

我们的设计系统需要灵活并适应我们应用程序中内容的现实。我们需要同时考虑最好的情况、最坏的情况以及介于两者之间的所有情况。

在静态设计工具中表达这些 UI 变化是一种乏味和冗余的练习，这可以解释为什么它们很少被设计。但是 Pattern Lab 的伪模式特性允许我们通过对我们的数据进行一些更改来表达（有时是疯狂的）不同的场景。

假设我们正在制作一个远足跟踪应用程序，其仪表板显示远足统计数据列表：爬升高度、远足路径数量、所走步数等。对于一直在应用程序中输入内容的活跃用户，UI 可能如下所示：

这是一个虚构的徒步旅行跟踪应用程序的假设仪表板。 Pattern Lab 将默认数据替换为特定于页面的数据，以展示用户在登录后可能会看到的内容。（大预览）

在/source/_patterns/pages/dashboard.json中，我们的数据看起来像这样：

 { "blockFeature":{ "number":"4,500", "headline":{ "short":"Feet of Elevation Gain" }, "progress":{ "max":"100", "progressValue":"100", "label":"Progress: 100%" } }, "tileList":[ { "number":"16", "headline":{ "short":"National Parks" }, "progress":{ "max":"100", "progressValue":"20", "label":"Progress: 20%" } }, { "number":"500", "headline":{ "short":"Hikes" }, "progress":{ "max":"100", "progressValue":"40", "label":"Progress: 40%" } }, { "number":"62,500", "headline":{ "short":"Calories Burned" }, "progress":{ "max":"100", "progressValue":"60", "label":"Progress: 60%" } }, { "number":"94,300,843", "headline":{ "short":"Steps" }, "progress":{ "max":"100", "progressValue":"80", "label":"Progress: 80%" } } ], ... }

有了这些数据，Pattern Lab 就能够使用该用户生成的大量内容来填充 UI。

但是，这种情况可能并不常见。对于每个花时间填充每个字段并连接每个可用应用程序的雄心勃勃的用户来说，可能有几十个临时用户不会填写每个空白并利用应用程序的所有功能。就此而言，在每个用户的旅程中，他们对界面都是全新的！让我们使用 Pattern Lab 的伪模式功能来阐明这些重要的变化。

在我们的/source/_patterns/pages/目录中，我们可以创建一个名为dashboard~new-user.json的新伪模式。这将创建另一个从dashboard.json继承所有数据的页面实例，但也允许我们进一步修改或扩展数据。在dashboard~new-user.json的情况下，我们可以覆盖一些数据来展示新的用户体验可能是什么样子：

这是我们添加到文件中以完成此 UI 的数据：

 { "blockFeature":{ "styleModifier":"featured", "number":"0", "headline":{ "short":"Feet of Elevation Gain" }, "progress":{ "max":"100", "progressValue":"0", "label":"Progress: 0%" }, "overlay":{ "overlayMessage":"Let's go on a hike and climb in elevation", "overlayAction":"Find a Hike" } }, "tileList":[ { "number":"0", "headline":{ "short":"National Parks" }, "progress":{ "max":"100", "progressValue":"0", "label":"Progress: 0%" }, "overlay":{ "overlayMessage":"What National Parks have you visited?", "overlayAction":"Find a National Park" } }, { "number":"0", "headline":{ "short":"Hikes" }, "progress":{ "max":"100", "progressValue":"0", "label":"Progress: 0%" }, "overlay":{ "overlayMessage":"Been on a hike recently?", "overlayAction":"Log Your First Hike" } }, { "number":"0", "headline":{ "short":"Calories Burned" }, "progress":{ "max":"100", "progressValue":"0", "label":"Progress: 0%" }, "overlay":{ "overlayMessage":"Trying to stay healthy?", "overlayAction":"Track Calorie Count" } }, { "number":"0", "headline":{ "short":"Steps" }, "progress":{ "max":"100", "progressValue":"0", "label":"Progress: 0%" }, "overlay":{ "overlayMessage":"Counting steps?", "overlayAction":"Connect Your Fitbit" } } ] }

通过覆盖dashboard.json中的一些值，我们能够修改内容并打开/关闭特定模式。

在另一种情况下，我们可能需要演示当用户帐户存在安全问题或其他问题时 UI 的外观。我们可以创建dashboard~hacked.json伪模式来创建以下UI：

来自dashboard.json的大部分数据将保持不变，但我们将添加以下内容来创建错误消息：

 { "alert" : { "alertClass" : "error", "alertText" : "On May 22nd, hackers from a hidden underground tunnel somewhere in Siberia hacked our servers and compromised all of our sensitive data. <a href='#'> Please reset your password immediately!</a>" } }

图案参数

有时使用 Pattern Lab 需要完整的伪模式，如上图所示。但有时您可能只需要调整或覆盖模式中的单个数据值，其余部分由其他动态显示模式处理。对于这些情况，模式参数是您选择的工具。模式参数是一种用于替换包含模式中的变量的简单机制。它们仅限于替换包含模式中的变量，并且仅限于包含模式。考虑一下详细模板的摘录：

 ... <div class="l-sidebar"> {{# latestPosts }} {{> organisms-section-media-list }} {{/ latestPosts}} {{# featuredPeople }} {{> organisms-section-media-list }} {{/ featuredPeople}} </div><!--end .l-sidebar--> ...

其中包括部分媒体列表模式。

 <section class="c-section"> {{# sectionTitle}} <h2 class="c-section__title">{{ sectionTitle }}</h2> {{/ sectionTitle }} {{> organisms-media-list }} {{# textButton }} {{> atoms-text-button }} {{/ textButton }} {{# overlay }} {{> molecules-overlay }} {{/ overlay}} </section><!--end section-->

正如我们所了解的，latestPosts 和 featuresPeople 数据块的{{sectionTitle}}将从任何存在的伴随 .json 填充，其中/source/_data/data.json作为全局后备。但是，我们多次包含单个模式，并且可能希望快速为每个模式提供唯一数据，而无需在 .json 中创建这些键。我们可以将包含的部分媒体列表更改为以下内容：

 ... <div class="l-sidebar"> {{# latestPosts }} {{> organisms-section-media-list(sectionTitle: "The latest from the moleskine") }} {{/ latestPosts}} {{# featuredPeople }} {{> organisms-section-media-list(sectionTitle: "Staff Hikers") }} {{/ featuredPeople}} </div><!--end .l-sidebar--> ...

这两个生物现在将在渲染时使用此处定义的sectionTitle变量。模式参数功能强大，但仅受 PHP 和 Node Mustache PatternEngines 支持。其他模板语言为这个问题提供了更好的解决方案。查看文档以阅读完整的参数参数。

样式修饰符

通常，您会发现自己希望显示相同模式的风格变体，例如彩色社交媒体按钮或组件状态。简写的扩展包括语法， styleModifiers为模式提供额外的类。假设您在类属性中使用{{ styleModifier}}构造模式block-media ：

 <a href="{{ url }}" class="c-block-media c-block-media--{{ styleModifier }}"> <div class="c-block-media__media"> {{> atoms-square:c-block-media__img }} </div> <div class="c-block-media__body"> <h2 class="c-block-media__headline">{{ headline.short }}</h2> <p class="c-block-media__excerpt">{{ excerpt.medium }}</p> </div><!-- end c-block-media__body --> </a><!-- end c-block-media -->

在名称后使用冒号包含此模式会设置 styleModifier：

 {{> molecules-block-media:fullBleed }}

会产生一个像这样的锚标签：

 <a href="path/to/url" class="c-block-media c-block-media--fullBleed">

可以组合styleModifiers以提供多个类，使用竖线 (|) 作为分隔符。

 {{> molecules-block-media:fullBleed|is-lazyLoaded }}

在伪模式、模式参数和styleModifiers ，Pattern Lab 可以更轻松地演示有时截然不同的 UI 变体，同时在过程中保持底层代码库 DRY。

风格迭代

基于模式的工作流程的一个关键要素是接受迭代并认识到模式和设计将继续发展。部分将塑造整体，整体将塑造部分，而相互关联的组件系统将作为这个过程的结果出现。

这个过程的另一个自然结果是，生产点更早地从 UX 和视觉设计师的手中转移到了前端开发人员的手中。设计工作可以从静态文档转移到浏览器中，而不是花费大量宝贵的时间来创建大量高保真合成和详细的线框，您的团队可以更快地解决网络的现实问题。

将 Pattern Lab 作为整个团队的水坑，设计师可以更好地了解一个领域的决策如何影响其他领域。

使用 ish 进行视口测试。

对于我们的组件以及我们的页面来说，在整个分辨率范围内保持灵活性非常重要。烘焙像 ish 这样的视口大小调整工具。到模式库中，确保每个元素在任何屏幕尺寸下看起来和功能都很漂亮。花时间制作完全灵活的模式将更好地为我们为元素查询和 Web 组件完全成熟的未来做好准备（我们等不及了！）。

是的。是一个融入 Pattern Lab 的视口测试工具，允许您以与设备无关的方式查看整个分辨率范围内的模式和页面。（大预览）

通过将这些视口工具直接集成到前端环境中，设计人员和开发人员可以围绕 Pattern Lab 确定在设计中插入断点的位置。此外，客户、QA 和其他同事可以查明 UI 因任何原因而崩溃的特定区域。

准备发射

该项目很好地结合在一起，但在它可以发布到世界之前，需要收紧，跨浏览器/设备测试，并正确记录。让我们讨论一下 Pattern Lab 如何帮助您准备好设计系统代码和文档以备不时之需！

平易近人的模式文档

一些模式可能会以自我记录的形式出现，但模式通常需要一些上下文或附加信息才能使事情变得清晰。定义之类的东西。使用指南、注意事项、资源和示例图像可以而且应该在模式文档中找到它们的方式。 Pattern Lab 2 的文档使用 Markdown 和 YAML 前端来创建此文档。 markdown 文件伴随着模式（例如， media-object.md必须位于media-object.mustache旁边），并且可以像这样格式化：

 --- title: Utility Colors --- The utility color palette defines colors that are used to convey meaning such as success, error, warning, and information to the user. These colors should be used for things like alert messages, form validation, tooltips, and other kinds of messaging.

当文档 Markdown 文件位于模式旁边时，它将显示在 Pattern Lab 的 UI 中。（大预览）

Markdown 文档意味着 IA、视觉设计师、内容策略师、业务人员等可以更轻松地为活文档做出贡献。产品所有者甚至可以在创建新模式之前为新模式添加功能注释。计划进行改进以使模式文档更强大，进一步使模式实验室成为您团队的常青空间。

简化 QA 的血统

在查看库中的各种模式时，缺乏上下文可能会导致难以辨别它们实际使用的位置。定义和描述模式特征是一回事，但有机会提供有关您的 UI 模式的附加上下文信息。

由于 Pattern Lab 的俄罗斯套娃性质，它可以显示任何给定组件的图案构成，并显示该图案在设计系统中的使用位置。

Pattern Lab 的模式信息面板链接到构成任何给定组件的任何模式，并且还链接到使用这些模式的任何地方。在此示例中，“部分媒体列表”模式由“媒体列表”有机体、“文本按钮”原子和“覆盖”分子组成。这种特殊的模式包含在“blog-index”、“dashboard”和“homepage”模板中。（大预览）

借助此功能，设计人员和开发人员可以在进行 QA 和/或更改设计系统时获得方便的上下文信息。如果我们想对特定模式进行更改，例如将图像大小加倍或添加额外的文本元素，我们会立即知道哪些模式和模板需要重新测试并进行 QA 以确保更改不会中断. 沿袭功能还有助于指出未使用或未充分利用的模式，以便团队可以将它们从模式库中剔除。

Showing Progress with Pattern States

Taking the concept of pattern lineage a step further, you and your team can keep track of each pattern's progress and how it affects the whole system. Pattern Lab's pattern state feature can track progress of a pattern from development, through review, to completion. With pattern states, you'll always be able to answer “Are all the patterns that comprise this template complete?”

To give your pattern a state, you add a state to the frontmatter in that pattern's documentation file. 例如：

 --- title: Block Media state: inreview --- The media block consists of...

Applying this status will present the pattern state in a couple places across Pattern Lab.

Patterns with states show up on the navigation to give an at-a-glance look at which patterns still need work and which are completed. （大预览）

It's important to note that the state of a pattern can be influenced by the patterns it contains. Flagging a pattern like {{> molecule-media-block }} as inreview will cause a ripple effect anywhere that pattern is included. This helps identify bottlenecks that need addressed in order to bring your design system home.

Pattern states cause a ripple effect that shows up throughout the interface. If the `media-block` pattern is flagged as incomplete, then any pattern that includes it will also be flagged as incomplete. （大预览）

You can create your own pattern states that match your team's workflow. These methods of understanding the state of your patterns can help larger teams keep track of the airplane as it's being built and flown at the same time.

Maintaining An Effective Design System

"The biggest existential threat to any system is neglect." – Alex Schleifer, Airbnb

There is a very real risk that despite your team's best intentions, your carefully-crafted design system and pattern library will slip into oblivion. “绝不！” you exclaim, but unfortunately design system efforts fall into a state of disrepair for a number of reasons:

The level of effort required to keep pattern code up to speed with applications' code bases is too high
The pattern library is thought of as mere documentation rather than as housing a living, breathing system.
The team fails to make the design system a key part of their workflow, and instead lets their process devolve into a series of hotfixes and ad hoc changes.
One discipline serves as gatekeepers to the pattern library, preventing it from becoming a helpful resource for every discipline
The pattern library isn't visible or attractive
Many other factors (lack of funding, technology mismatches, lack of governance model, and more)

As Nathan Curtis rightly says, making a design system isn't just another project, but rather a product meant to serve your organization's sites and apps. To create a system that serves your organization for years to come, your UI design system needs to be properly maintained, serve as an essential resource for the organization to keep coming back to, and continue to be a core part of your team's design and development workflow.

Pattern Lab has always been an effective tool for creating UI design systems, but has historically lacked in the maintenance department. Thankfully, that's all changed with Pattern Lab 2. The new version has many features that helps you successfully document and maintain your pattern libraries while continuing to serve as a key tool in your pattern-driven design and development process.

Seeking the Holy Grail

It's critical to reduce the amount of effort and friction required to keep both your pattern library and production environments up to date. The Holy Grail of design systems is an environment where changes to patterns in a design system are automatically updated in both the pattern library and production environments.

With a Holy Grail setup, changes to the design system are automatically updated in both production environments and the pattern library. （大预览）

The Holy Grail is often accomplished by using a frontend templating language to serve as the bridge between your pattern library and production environments. Pattern Lab 2's architecture now makes it possible to choose the templating engine that's right for your particular environment. As a result, you're able to get closer to achieving the Holy Grail. For instance, the team at Phase2 Technology have successfully integrated Pattern Lab 2 into their Drupal builds so that their clients' pattern libraries and production builds are always in step with one another.

“By using the same templating engine, along with the help of the Component Libraries Drupal Module, the tool gives Drupal the ability to directly include, extend, and embed the Twig templates that Pattern Lab uses for its components without any template duplication at all!”
– Evan Lovely, Phase2 Technology

Currently Pattern Lab 2 supports the popular Mustache and Twig templating engines, but the decoupled nature of Pattern Lab 2's editions (more on these in a bit) means that you can power Pattern Lab using the templating engine of your choice.

有用的资源

Your pattern library and accompanying style guide should be something that your team comes back to reference again and again. While it may not make sense to immediately surface code snippets and pattern usage information during the initial design and development process, design system users will find themselves reaching for these things as they apply the design system to actual applications. Pattern Lab 2 now has more advanced config options that let you switch on pattern info by default to become a more helpful documentation and reference tool.

You can configure Pattern Lab to display or hide pattern info by default. At the beginning of a project, documentation might make sense to be tucked away, but once the design system is established it may make sense to surface that info. （大预览）

In order for your design system to thrive across your entire organization, it should be approachable and attractive. Pattern Lab 2 allows you to create your own custom front page for the component library, and also skin Pattern Lab's (intentionally bare bones) default UI to better serve your brand.

Doing It All Again

There are some teams that need only to set up and maintain a single design system, but many of us work on multiple projects for multiple clients. Wouldn't it be great to start new design system projects from a setup that's tuned to your workflow and tool choices?

Pattern Lab 2 has been re-architected to achieve just that. No longer is Pattern Lab a standalone tool, but rather it's an ecosystem built atop a core library. These changes will also make it easier for the Pattern Lab team to push out new features.

模式实验室版本

版本让团队和机构可以将所有支持其独特工作流程的东西与 Pattern Lab 捆绑在一起。当团队共享和更新功能时，一个版本可以成为您所有项目的起点。 Pattern Lab 的 Node 版本使用 npm 引入单独的组件，而 PHP 版本使用 Composer 帮助您以简单和标准化的方式启动项目。

Pattern Lab 版本由 Pattern Lab 的核心代码、一个包含您喜欢的模板引擎的 PatternEngine、一个作为 Pattern Lab 前端代码的 StyleguideKit 和一个 StarterKit 组成，其中包含您希望默认包含在 Pattern Lab 中的默认模式和前端代码。 — Pattern Lab Edition 由 Pattern Lab 的核心代码、包含您喜欢的模板引擎的 PatternEngine、作为 Pattern Lab 的前端代码的 StyleguideKit 和一个 StarterKit 组成，其中包含您希望默认包含在 Pattern Lab 中的默认模式和前端代码。（大预览）

模式实验室核心

Core 是 Pattern Lab 的核心，支持所有其他功能。由于 Core 是独立的，因此团队可以更新并保持最新的 Pattern Lab 功能，而不会中断项目的其余部分。

入门套件

有一套值得信赖的样板代码，可以用来启动每个项目吗？也许一组通用的基本模式、Sass 混合组件和 JavaScript 库是您的首选工具？ StarterKit 非常适合将这些资产捆绑到一个样板中，以确保每个项目都以正确的方式开始。

已经有几个 starterkits 可以启动您的项目，无论您是在寻找一个空白的开始，从展示 Pattern Lab 功能的演示开始，还是从 Bootstrap、Foundation 或 Material Design 等流行的框架开始。您也可以自行开发，它可以完全受版本控制，因此您团队的 StarterKit 可以与您的工具一起发展。

安装后只需几次击键即可导入 starterkit。最终，此功能将内置到安装后阶段，就像通过 Composer 用于 Pattern Lab PHP 一样。

风格指南套件

StyleguideKits 是 Pattern Lab 的前端。我们称其为“观看者”。 StyleguideKits 允许机构和组织开发定制的、品牌化的 Pattern Lab UI 来展示他们的模式。

模式引擎

PatternEngines 是负责解析模式并将其转换为 HTML 的模板引擎。 PatternEngines 使 Pattern Lab Core 能够灵活地呈现许多不同类型的模板语言。当前的 PatternEngines 包括 Mustache 和 Twig，其他的如 Handlebars 和 Underscore 正在开发中。并且没有阻止您向 Pattern Lab 添加另一个模板引擎。

插件

插件允许开发人员扩展 Pattern Lab Core 和生态系统的其他部分。例如，Pattern Lab 的 PHP 版本有许多插件，例如 Browser Auto-Reload、Data Inheritance 和 Faker。 Pattern Lab 的架构允许开发人员在不同阶段修改数据，添加自己的命令或模式规则，或者更改前端以修改和扩展 Pattern Lab 的能力

看我的谈话

试一试 Pattern Lab 2，并参与其中

创建模式驱动的用户界面和复杂的设计系统比以往任何时候都更加重要。 Pattern Lab 2 可以很好地创建和维护原子设计系统，并且可以作为您的设计系统的中心，贯穿您团队工作流程的每一步。

如果您的团队决定下载 Pattern Lab 2 并尝试一下，我们很乐意听取您的意见！通过在 Gitter 上提问、在遇到困难时提出问题并帮助提出和讨论新功能来加入对话。

如果您使用 Pattern Lab 2 制作了很酷的东西，请分享您的见解！ Styleguides.io 有超过 150 多个模式库示例，因此请将您的 Pattern Lab 添加到组合中。 Web 和开源项目的美妙之处在于，整个社区都可以从您的经验中学习并以这些知识为基础。

我们很高兴看到您创造了哪些伟大的东西！