我们完成一个设计体系并提供样式指南，从此就过上幸福快乐的生活。你是这样想的吗？

现实却并非如此。

我们还将面临一个非常现实的风险，即样式指南最终会与所有PSD，PDF文件和设计过程中的其它静态文件一起被扔进垃圾桶。尽管每个人都抱有美好的幻想，但花在设计体系和样式指南上的所有时间和精力都可能被浪费。为什么会这样？

样式指南是设计过程的产物。> 设计体系则是有路标和计划的动态且需要不断维护的产品，为整个生态系统服务。> ——Nathan Curtis>

设计体系是动态的，可呼吸的实体。样式指南可以提供文档并作为有用的资源，但样式指南的存在并不能保证基础设计体系的长期成功。设计体系需要不断的维护、支持和精心照顾，才能真正蓬勃发展。

再一次转变思想

我们已经讨论了改变每个人的期望以建立更协作、样式驱动的工作流的重要性。为了将样式指南从垃圾桶里拯救出来，我们必须再次从根本上转换思维。

该怎么做？

通常，我们会认为自己只是设计和构建网站和应用，而大多数情况下也确实如此。毕竟，这就是客户付款给我们的原因，我们创造的产品是为组织赚钱和并使组织成功。专注于最终结果而不是基础系统似乎是很自然的。最终产品仍是每个人关注的主要焦点，而样式库只是作为产品的分支存在，仅提供有用的文档。

这种心态的问题在于样式库会突然崩溃并被抛弃。样式库一旦停止反映它所服务产品的当前状态就会过时。当设计体系的样式库不再准确时，网站维护过程将变成少量修补和临时更改，从而破坏了创建原始设计体系的所有思想。

为了使自己获得长期成功，必须从根本上改变“我们最终创造的是什么”的观念。必须认识到设计体系和样式库才是最终产品，而不是最终的应用程序。

这种“设计体系优先”的心态在过程中引起了一些摩擦，但这种摩擦是有益的。它迫使我们后退一步，考虑所有改进、客户要求、功能添加和迭代如何影响整个体系，而不仅仅是整个生态系统的一小部分。

假设你在电商网站上进行测试，发现产品详情页上的自定义下拉菜单性能不如浏览器的默认下拉菜单。一种措施是简单地从该页面删除自定义样式的下拉菜单，然后结束工作。但是，考虑整个设计体系而不是仅考虑产品详情页，可能会使你后退一步，并想到：“如果自定义下拉菜单在此处效果不佳，也许在其他地方效果也不佳。”进一步，你发现最佳的操作方法是全局修改设计体系中的下拉样式并删除自定义样式。现在，这些修改在出现下拉样式的任何地方都会反映出来，并且可能会看到类似的性能改进。

这只是设计体系思维如何导致更广泛、更慎重变化的一个示例。破坏行为和增加样式的机会通常会在应用级别上出现，但是这些更改通常应该在系统级别上执行。在工作流程中添加一些有益的摩擦，可以确保在整个生态体系中共享这些改进，并防止系统因众多一次性更改而受到侵蚀。

对完成的定义

我们必须重新审视的另一个期望是对完成的定义。设计印刷品和其他物理媒介需要制作永久的有形物体，而在数字世界中根本就没有这种终结感。这意味着与其他媒介相比，更改起来更容易。客户、同事和利益相关者应拥抱数字世界的柔韧性，以创建动态的设计体系，从而适应不断变化的媒介、用户需求和业务需求。

这种思维上的转变从根本上影响了我们的工作范围。在客户服务业务中工作的人们习惯于以整洁的方式交付项目。内部团队也一样，他们倾向于从一个项目过渡到另一项项目。无论你是内部团队的一员，还是外部招聘的人员，我想你都经历过基于项目工作的缺点。在项目开始时幻想永远不会实现的未来，然后设定任务，然后急于交付并忘记当初的幻想，最后继续进行下一个幻想的项目。

如果我们致力于创造真正能满足客户和组织需求的有用工作，那么必须从根本上重新定义我们的工作范围。正如Nathan Curtis所说，设计体系不应该是一个范围有限的项目，而应该是随着时间推移而发展和演变的产品：

把焦点放在样式指南的交付上是错误的。> 一个系统不是一个会完成的项目，它是一个可以为其他产品服务的，动态且不断发展的产品。——> Nathan Curtis>
网站是永远不会完成的，设计体系的创建只是漫长旅程的第一步。设计体系应该是一项长期承诺，其远大目标是彻底改变组织创建数字作品的方式。是不是感到很鸡冻？那我们该如何确保它的实现呢？

创建可维护的设计体系

当你踏上以样式构成的旅程时，让我们谈谈可以做些什么来制定一套设计系统，以使你的组织取得长期成功。你如何创建工作流程中必不可少的的设计体系并扎根于组织？你需要注意什么陷阱？你如何确保设计体系产生巨大的成果？要建立设计系统以获得长期成功，你需要：

• 使其正式化
  
• 使其适应性强
  
• 使其可维护
  
• 使其跨岗位
  
• 使其容易理解
  
• 使其可见性强
  
• 不断扩大范围
  
• 使它与上下文无关
  
• 提供使用场景
  
• 使其持久化
  

让我们详细地探讨这其中的每一个要点。

使其正式化

最初的样式指南可能是作为附带项目，黑客马拉松的产物或一两个团队成员的创意而开始。正如我们在上一章中讨论的那样，你的客户或老板甚至不必知道你正在创建一个完善的设计体系和样式库。记住：寻求认可，而不是允许！有效的开始都是好事，但为了建立一个真正有影响力的设计体系，使你的组织长期成功，设计体系需要发展成为正式认可的工作。这意味着将其视为真正的产品，而非项目附带产物，并为它分配时间、预算和人员。说服利益相关者为设计体系预先投入大量的金钱、时间和资源可能是非常具有挑战性的。那么我们该怎么办呢？这是我的建议：

1. 开始做。
   
2. 证明它很有用。
   
3. 使其成为正式项目。
   

让我们进一步分解这些步骤。

1.开始做

你必须从某个地方开始，开始总比没有要强。选择一个对你建立设计体系非常有用的项目；遵循与第四章中讨论的类似过程; 考虑第2章中详细介绍的原子设计心理模型; 最后，你将获得深思熟虑的设计体系和样式库的坚实基础，该体系和样式库可帮助你的团队更有效地工作。

花点时间将你的UI样式打包在样式库中，以便随时使用。我已经与几位雄心勃勃的团队成员进行了交谈，他们在周末的时间内建立了样式库的基本要点。这项工作使情况大为不同，因为它为利益相关者提供了可以做出切实反应的具体东西。再说一次：展示而不是解释。

2.证明它很有用

有了一个新的、切实可行的设计体系，你就可以与控制资金、进度和资源的人员进行更有意义的对话。你可以确切地讨论设计体系如何帮助节省时间和金钱（请参阅第4章），然后描绘出如果组织投资于正式的、完整的设计系统，这些收益将如何进一步扩大。

让来自不同岗位的团队成员为你提供支持，推动该体系的初步成功，并吸引其他感兴趣的人，他们将从扩展的设计体系中受益。

3.使其成为正式项目

你已经证明了初始设计体系的价值，并提出了如何使其变得更好的路线图。运气好的话，你的组织将致力于使设计体系成为正式项目。

通过最高级别的批准，你就可以将一个计划付诸行动，其中包括：分配或雇用人员在设计体系上工作；制定计划以使其更加强大；建立清晰的维护策略；并制定产品路线图。

值得指出的是，事情可能不会像你希望的那样彻底改变。尽管展现出真正的价值并提出了具体的行动计划，但高层人士仍可能挫败你的主动权。不要气馁。你可能输掉了这场战斗，但是一定可以赢得这场战争。你的团队应继续以任何能力扩展壮大设计体系，直到其价值不可否认。随着越来越多的人从该体系中受益，你最终将获得一个由基层支持的体系，该体系可以帮助推动这一过程。

建立设计体系团队

随着设计体系计划的批准，现在是时候部署合适的人员和流程来确保体系对你的组织有利。

设计体系创建者和用户

首先要认识到，组织中肯定会有人来帮助制作和维护设计体系，同时也会有人会成为设计体系的用户。这两个群体之间可能有重叠，但是确立创建者和用户的角色仍然非常重要。

当我谈论建立一个更协作的过程（如我在上一章中详述的过程）时，难免会听到大型组织的员工说：“但是，布拉德，有成百上千个开发在使用我们的产品。要让所有这些人进行协作和做出这样的贡献将非常困难。”

他们可能是对的。如果整个组织都采用更加灵活、协作性更高的流程，那将是理想的选择，但是这项工作背后艰巨的工作使其很难实现。这就是问题：不是组织中的每个人都需要直接为设计体系做出贡献，而是某个人（或更可能是某些人）必须拥有它的所有权。

设计体系的创建者是创建、维护和管理系统的人，他们需要紧密合作以确保系统智能、灵活、可扩展并满足用户和企业的需求。设计体系用户是组织中的团队，他们将使用体系并将其界面样式应用于特定的应用程序。

设计系统创建者和用户。

设计系统创建者和用户需要保持紧密的工作关系，以确保系统内定义的样式可以满足应用程序的需求，并且所有文档均清晰可见。创建者提供了设计体系所服务的整个生态系统的鸟瞰图，而用户提供了一个关注于系统具体应用的实地视角。

Salesforce的Jina Bolton很好地总结了创建者和用户之间的关系：

设计体系指导我们的产品设计，反过来> 我们的产品设计也会反馈回设计体系。——> Salesforce的Jina Bolton

两种观点对于设计体系的成功都是至关重要的，这就是为什么对于创建者和用户来说，保持健康的关系如此重要，这涉及到频繁的沟通和协作。

设计体系创建者

谁更新设计体系？谁批准变更？谁与设计体系的用户进行交流以确保其能够满足他们的需求？谁来决定保留，删除或需要调整哪些样式？

这些问题的答案在很大程度上取决于组织的规模和设置。

大型组织能够投入大量资源来管理设计体系。例如，Salesforce拥有一个正式的设计体系团队，该团队目前包括大约十二名全职员工。该团队专门负责管理设计体系，并确保它满足内部产品团队以及在公司平台上工作的外部开发人员的需求。当一个设计体系服务于成千上万的用户时，明智的做法是让至少几个全职员工来管理和扩展该系统。

较小的组织很可能没有豪华的团队来为设计体系提供服务。小型组织中的团队成员出于必要而不得不同时兼职多项任务，因此维护设计体系将可能成为另一项责任。这听起来像是一个额外的负担，但是这项特殊的工作应该是一件令人愉悦的事情，因为它可以提高工作效率和质量。

通常，规模较小的组织中的设计系统创建者是具有经验的高级人员，他们具有做出周到的决策以及执行设计系统的权限。

然后是外部机构，承包商和顾问。长期维护客户的设计体系时，第三方的作用是什么？一方面，外部合作伙伴在某种程度上处于劣势，因为他们实际上并不为客户工作。一个成功的设计系统需要成为组织DNA的一部分，但由于第三方存在于公司的外部，因此其影响本质上是有限的。

但是另一方面，外部各方通常可以提供一种在公司内部工作时很难看到的视角。这是局外人真正发挥作用的地方。在担任顾问的过程中，我与组织合作建立长期的设计体系维护策略，并帮助建立合适的人员和流程。虽然该系统的长期成功最终取决于组织，但是第三方可以授之于渔并提供重要的战略指导、反馈和观点。

设计体系用户

谁负责使用设计体系构建新功能和新应用程序？与系统创建者交流报告问题并请求功能的人员是谁？

同样，问题的答案很大程度上取决于你组织的规模和结构。

设计体系用户可以是创建设计体系的同一团队，也可以是组织内的各个开发团队，初级设计师和开发人员，合作伙伴机构，外部开发机构或其他第三方团队。

用户对设计体系的接近程度和参与程度无疑会有所不同。你可能在一个初创公司只开发单个产品，因此你的小型团队可以同时创建和使用设计体系。或者，你可能在一家大型跨国公司工作，其开发团队和第三方合作伙伴遍布全球。如果是这种情况，设计系统创建者和用户可能很少或从未见过面，这意味着有用的文档和敏锐的鸟瞰图变得尤为重要。

设计系统用户和制造商之间存在着一系列潜在的关系，而公司的规模和构成无疑将影响这些关系。

建立周到的设计体系的最大优势之一是，它允许组织扩展最佳实践。如果将所有这些最佳实践（响应性，可访问性，性能，UX，人体工程学等）纳入系统，则用户只需插入样式即可获得回报。这意味着设计体系用户不必是高级设计师或开发人员即可设计出色的作品。设计体系充当质量控制工具，可帮助用户应用最佳实践，而无需考虑每个人的技能水平。

设计体系团队组成

应该建立一个跨岗位的团队来适当地管理、维护和扩展系统。组织中的所有岗位，包括UX设计，视觉设计，内容策略师，前端开发，后端开发，产品经理，项目经理，执行人员和其他利益相关者，都具有独特的视角，这些视角无疑可以为工作提供信息。将这些观点纳入设计系统很重要，但是并不一定要求每个岗位都不断参与开发。

会有一些岗位积极地开展工作，而其他岗位可能会承担更多的咨询作用。负责设计和构建用户界面的人员，如UX设计，视觉设计，前端开发人员，可能会充当创建和更新设计体系的角色。他们应该协同工作（如第4章中所述），并与其他岗位进行协调，以确保体系反映整个业务的价值和考虑因素。

其他人可能不是积极从事这项工作的人，但必须征询他们的意见，以确保他们的观点正确反映在系统中。后端工程师需要让团队知道可能会影响前端UI的任何体系结构决策。高管需要使团队意识到将影响系统角色和效用的重要计划；当然，设计系统用户需要与创建者协作，以确保系统满足各个应用程序的需求。

使其适应性强

正如人们常说的，变化是唯一的不变。动态设计体系的动态部分，意味着它需要随机应变，适应反馈、迭代，并随着服务的产品而不断发展。

对设计体系的一个误解是，一旦建立了设计系统，它们就会成为无所不能且不可更改的真理来源。以这种僵化的方式思考必然会导致设计体系适得其反。如果用户感到束手无策并迷失于无法解决问题的样式，他们会认为设计体系是无用的工具，并开始在其他地方搜索可以更好地满足其需求的东西。

创建清晰的管理计划对于确保你的设计体系能够随时间而不断发展至关重要。坚实的管理策略首先要回答有关处理变更的一些重要问题，如下：

• 当现有样式不适用于特定应用时怎么办？样式会被修改吗？你是否建议使用其他样式？是否需要创建新样式？
  
• 如何处理新样式的申请？
  
• 旧样式如何下架？
  
• 发现错误该如何处理？
  
• 谁批准设计体系的变更？
  
• 谁负责更新文档？
  
• 谁实际更改系统的UI样式?
  
• 如何将设计体系更改同步到实际应用中？
  
• 如何发现更改？
• 
  

可能还有许多更具体的问题要回答，关键是你的团队应该有适当的答案和流程来解决系统不可避免的变更。

如前所述，创建者和用户之间的频繁沟通和协作是成功管理设计体系的关键。使用户和创建者之间的交流应尽可能容易。创建设计体系的反馈群，确定正常的办公时间，确保你的反馈渠道方便沟通并敞开大门。如果用户卡在某个东西上，他们应该确切知道该向谁寻求帮助。

除了创建者和用户之间的非正式日常交流外，还应该安排定期会议来与创建者、用户和其他关键利益相关者一起审查设计体系。讨论有效的方法，对需要改进的内容虚心接受，并检查优先级和路线图，以确保系统满足业务需求。这些定期检查对于使利益相关者了解最新情况特别有用，因为他们通常不参与设计体系的日常操作。

更改样式

设计系统维护的关键是确保UI样式保持最新，接受不断发展的设计和开发最佳实践以及继续满足组织的实际需求。制定处理样式变更的策略至关重要，这就是为什么Inayaili deLeónPersson的Canonical Web团队在创建Vanilla前端框架时花时间制定其策略的原因。

我们认为最好规范一个样式成为Vanilla样式所应遵循的流程，因此，经过一番集思广益，我们创建了一个图表，显示了在提交样式之前应该采取的不同步骤，直到其被完全接受成为> V> anilla样式。——Inayaili deLeónPersson，> Canonical

最后得到一个华丽的决策树，它精确反映了向设计体系添加新样式的整个流程。

Canonical Web团队制定了用于管理Vanilla前端框架中样式的更新和添加的决策过程。

设计体系中的样式可能发生的三种类型的更改：修改，增加和删除。

修改样式

可能会因为多种原因修改UI样式：功能增加，错误修复，细微或重大视觉调整，性能改进，可访问性增强，代码重构，UX最佳实践更新等。

设计体系维护人员需要了解为什么以及何时调整样式，如何进行这些更改以及如何将这些改进同步到各个应用程序中。

保持样式更新对于设计系统的长期健康至关重要。没有人愿意使用和维护Web 2.0外观的设计体系！

增加样式

即使你的团队非常聪明，也不可能将每一个样式都将包含在设计体系中。随着设计体系应用于更多产品，现有样式无法解决应用程序的需求时，不可避免地会出现缺口。在这种情况下，显然要创建新的样式来满足这些需求。

向库中添加样式时应非常谨慎。如果每一次心血来潮都添加一种新样式，那么设计体系将会变得臃肿而笨拙。这时需要判断，这是一次性情况还是可以在其他应用程序中复用的情况。你首先要假设为一次性情况，直到另一个团队遇到类似的情况。

如果开发应用2的团队查看应用1时说：“我也想要那个！”这就很好地表明应将一次性样式添加到样式库中。

删除样式

可以出于多种原因而弃用样式：也许通过使用发现某种样式非常糟糕；也许出于用户体验或技术原因，该行业已经放弃该样式；也许该样式是任何应用程序都多年未使用过的；也许用户报告了有关使用特定样式的许多负面反馈。

制定计划淘汰样式是一个好主意。但是，如何从设计体系中删除样式而又不伤害那些依赖这些样式的人呢?为了解决此问题，Salesforce创建了一个名为Sass Deprecate的简洁程序，它标记即将在不久被下架的样式。通过巧妙地使用Sass变量标志和样式，创建者团队可以提前通知用户该特定的样式将会被淘汰，并推荐其它样式。

使其易于维护

在讨论了有关修改，添加和删除样式的所有内容后，你可能会想，“我们的应用到底该如何同步所有这些更改？！”在问这个问题时，你会发现一个成功维护设计体系所面临的最大挑战之一。

对任何体系来说，最大的生存威胁就是忽视。——Alex Schleifer, Airbnb

许多体系陷入失修状态是因为更新所需的工作量太高。如果更新样式、文档和应用既困难又耗时，人们最终会感到沮丧，从而停止努力，而设计体系将开始被遗忘。对UI样式，文档和应用程序进行更新时，应尽可能做到无摩擦，因此减少这种摩擦应成为设计体系团队的当务之急。这需要从技术和工作流程的角度进行仔细考虑。

寻找圣杯

设计体系的圣杯包含创建一个样式库和实时应用程序可以完美同步的环境。**我们的想法是，你应该能够对UI样式进行更改，并看到该更改会自动反映在样式库和应用中包含该样式的任何位置。

设计系统的圣杯是一个环境，其对UI样式进行更改会同时更新样式库和生产应用程序。

该技术消除了任何重复劳动，并确保样式库和使用样式的应用程序保持同步。听起来像说梦话，对吗？

事实证明，这个梦想可以成为现实。旅行指南公司Lonely Planet是最早建立名为“Rizzo”的圣杯设计体系的公司之一。通过一些智能架构，他们为自己的UI样式创建了一个API，该API可以推送到生产环境以及其样式库中。从而得到一个集中的设计体系，可确保实时应用程序和文档保持完美同步。

Lonely Planet为其UI样式创建了一个API，该API在样式库和生产环境均采用。通过以此方式构建其设计体系，对UI样式的更改会自动反映在样式库和生产环境中。

这种方法绝非易事，因为它需要复杂的技术架构和聪明的人来进行设置以及一个相对集中的组织文化。你追求圣杯的方式取决于整个环境因素，包括技术架构和组织构成。

清除技术障碍

保持样式库与生产环境同步需要以智能，可伸缩和可维护的方式共享代码。详细描述围绕圣杯的所有不同技术策略和注意事项将需要重新写一本书，在这里我们仅指出保持前端代码同步的几个重要方面。

前端

UI设计体系通过前端技术来体现其整个Web体验，它由HTML，CSS和JavaScript组成。如何将前端代码带入具有复杂应用逻辑和后端代码的生产环境中，是当前的任务。

Web开发人员Marcelo Somers 在他的文章“ 追逐圣杯 ”中详细介绍了实现圣杯的各种技术方法。他重点介绍了将设计体系提供给应用程序以使两个代码库保持同步的每种策略的利弊。这里我不会详细介绍Marcelo的每一种策略，但值得注意的是，有多种方法可供选择：一种方法比较原始，通过手工复制和粘贴前端代码到一端，另一种方法是将样式库直接放入生产环境。

根据我的经验，发现与生产环境共享CSS和演示性JavaScript相对容易，而共享标记却很困难。因为CSS和JavaScript倾向于被编译成一个文件（或者可能是几个文件），所以可以将它们扔到CDN上，然后简单地链接到每个应用程序中的文件。Marcelo解释了如何在牢记版本控制的同时执行此操作：

你将为开发团队提供一个版本化的URL（例如，http：//mycdn.com/1.3.5/styles.css），升级就像在URL中增加版本号一样简单。Marcelo Somers

共享CSS和JavaScript很容易，但要在环境之间共享标记时，会遇到麻烦。为什么？标记通常和后端逻辑、应用程序的代码库交织在一起，这导致在样式库和生产环境之间简单地复制和粘贴标记变得困难。幸运的是，有解决此问题的方法。

通过模板语言填补标记差距

使用HTML模板语言（例如Moustache，Handlebars，Twig，Underscore，Jade，Nunjucks以及许多其他语言）使标记更易于移植和动态化。模板语言将结构和数据分开，并增强了HTML的功能，从而使我们不必一遍又一遍地编写相同的标记样式。好消息是，许多CMS和应用程序环境还利用模板语言来提供前端标记。

模板语言可以充当样式库和生产环境之间的桥梁。如果使用模板语言在设计体系中创建样式（我们在第3章中进行了详细讨论），则可以轻松地与使用相同模板引擎的生产环境共享这些样式。

诸如Mustache，Handlebars，Underscore，Jade等模板语言可以充当桥梁，允许在样式库和生产应用之间共享前端代码。

Phase2 Technology的团队通过使用Pattern Lab作为其样式库开发工具并使用Drupal作为其内容管理系统来实现了这一目标。由于Pattern Lab和Drupal都支持流行的Twig模板引擎，因此Phase2能够轻松地在两种环境之间共享样式，从而确保其客户的样式库和生产版本始终保持一致。

通过使用相同的模板引擎，并在组件库Drupal模块的帮助下，该工具使Drupal能够直接包含，扩展和嵌入Pattern Lab用于其组件的Twig模板，而无需任何模板重复！——Evan Lovely，Phase2 Technology

公司文化和圣杯是否兼容？

你可能已经读完最后一部分，并认为：“太神奇了！我的公司现在需要这个！”虽然圣杯系统确实很棒，但是由于某些原因，你可能无法自动保持生产环境和样式库同步。可能是因为你的组织使用完全不同的技术在许多不同的平台上创建了大量的数字产品；可能因为你是遍布全球的巨型跨国公司；可能因为你的公司具有高度分散的自主文化；也可能因为你是一个庞大的联邦政府。

美国Web设计标准草案是美国联邦政府的设计体系。

美国政府的设计体系（称为“ 美国Web数字标准草案”）是UI组件和视觉样式的集合，旨在使政府网站构建更一致的UI。设计体系为用户提供了标记和样式，以供下载并编入其应用程序。看到如此巨大的规模实现了圣杯设计体系，无疑是令人惊叹的，但是正如你可能想象的那样，这是一个很高的要求。该组织的庞大性和分散性意味着，如果不对联邦政府网站的构建方式进行一些戏剧性的重组，就不可能真正实现同步样式库。

如果你面临的是相对分散的团队文化，请不要灰心！建立部分设计体系（部分UI样式，部分有用的文档和指导原则）也可以向你的组织展示指向圣杯的光芒。正如我们在本章中讨论的那样，这些工作应该一直在进行，但是在奔跑之前，你必须首先学习如何行走。

使其跨岗位

样式指南通常会直接进入代码段和样式使用中，以使设计体系用户受益。当然，样式库需要对实际使用样式的人员有所帮助，但是仅将样式指南视为开发资源会限制其潜力。

样式指南有机会成为整个组织的一个资源池，帮助公司的每个岗位建立通用的词汇表。建立此通用词汇表可以使整个组织中各岗位之间更有效的工作、沟通和协作。这就是为什么样式指南应该成为每个人的理想之地，而不仅仅是设计体系用户。

就拿轮播图来举例子。从组织的角度来看，该组件非常复杂。电子商务网站上的首页轮播需要许多岗位的投入。企业所有者和编辑人员必须选择要在轮播中展示的产品。文案必须确保文案是有效的，并保持在设计的约束范围内。艺术总监需要确保美观的设计令人愉悦，并且产品图在每个屏幕尺寸上都清晰可见。用户体验设计师必须确认功能和控件是否直观。前端人员必须确保该组件具有自适应能力，可访问性和性能。后端开发需要确保组件正确连接到后端系统。明白了吗？

像沃尔玛这样的网站上的首页轮播需要许多不同岗位和利益相关者的投入。样式指南可以帮助收集不同观点。

精心设计的样式指南可以帮助管理所有这些动态部件，并确保影响每种样式的每个角度都正确记录在样式指南中。使样式库对每个岗位都可访问，并考虑如何使其变得容易并邀请不同岗位来为文档做出贡献。

使其平易近人

人们倾向于被有美好的事物吸引。使样式指南成为跨岗位资源的重要部分是确保用于存放样式库和其他文档的容器美观，引人入胜且易于浏览。

Yelp的样式指南有一个吸引人的友好首页，它解释了资源的含义，用途及其使用方式。

花时间为你的样式指南和文档制作一个吸引人的首页可能会带来更多的使用，建立认知，帮助组织进行投资并帮助非开发人员关注样式指南。所有这些都有助于形成重要的共享词汇，从而促进更好的跨岗位协作。

但是，创建美观，直观的样式指南的体验并不是立马就会完成的，而且将样式指南落地时可能会出现问题。如果团队知道制作一个有用的风格指南需要制作一些大型的、官方的东西，包括定制品牌和一个漂亮的网站，他们可能会从一开始就被阻止。因此请记住：

1. 开始做。
   
2. 证明它很有用。
   
3. 使其成为正式项目。
   

创建有用的设计体系应该是团队的首要任务。建造一个幸福的家来容纳所有一切可能不会一蹴而就，但是一旦设计体系正式发布，它应该成为当务之急。制作美观的样式指南不仅是为了设计而设计；它反映了组织对制作和维护周到且深思熟虑的设计体系的承诺。

使其可见性强

可见性对于设计体系的持续健康至关重要，如此重要的工作不应被隐藏在幕后。可以采取哪些步骤来确保设计体系维持设计和开发工作流的基础？

设计系统的传播

即使你创建了世界上最好的样式指南，使用最先进的技术，拥有一支出色的团队并吸引用户，但如果你积极推广设计体系并持续更新，整体效果将大打折扣。

即使在系统尚未落地之前，也要努力宣传你的设计体系。在项目开始时，可以找个地方来记录项目进度，以帮助大家提高对设计体系工作的认识和兴奋度。我的一个客户建立了一个内部博客来发布该项目的更新，以及一个设计体系Yammer频道（注：类似于钉钉），开发人员和利益相关者在其中分享想法，消除疑问，提供反馈并提问。在流程的早期建立沟通文化将增加设计体系扎根的可能性。

交流变更

一旦设计体系落地并应用于实际应用中，就必须将变更，更新和持续的愿景传达给整个组织。这种交流的策略可以从具体的细节到面向外部的营销工作而变化。以下是一些有助于交流变化的材料：

• 更新日志：“这是本月样式库中发生的更改。”
  
• 路标：“这是接下来几个月的内容。”
  
• 成功案例：“ X团队使用设计体系启动了这个出色的新应用程序；进一步了解他们的做法。”
  
• 提示和技巧：“以下是在整个应用程序中使用我们系统按钮的一些最佳做法和注意事项。”
  

为所有这些材料建立基础是一个好方法，同时使它们与样式指南本身紧密相关也很有意义。

Material Design团队在其样式指南中发布了变更日志，因此用户可以轻松地了解系统的最新更新。

设计体系的变更，更新和要求应该通过各种途径传播。其中可能包括Slack，Basecamp，GitHub，Wiki，Yammer，电子邮件列表，公司博客，内网，以及团队用来交流和协作的任何其他内部工具。听起来工作量很大，但别担心！保持团队和用户的获取最新状态并不需要付出太大的体力劳动。由于我们工具的互联特性，团队可以通过软件自动收到有关更改的提醒，Shyp的Micah Sivitz解释说：

每当有人发出请求时，都会向我们的Design slack频道发送通知，向团队宣布有提案更改，需要反馈。> Micah Sivitz，Shyp
将这种交流融入团队的日常工作流中，可以使创建者，用户和利益相关者保持互动，并有助于向用户暗示样式库正在得到积极维护和改进。

培训与支持

你不会将锤子，锯子和螺丝刀交给别人，并说：“好，你已经有了所需的东西。现在，去给我盖一栋漂亮的新房子。”知道如何正确使用工具通常比该工具的可用性更为重要。以样式指南的形式提供文档无疑是有帮助的，但是只有文档还远远不够。必须为设计体系的用户提供足够的培训和持续的支持，以确保他们成功使用该工具，并进行出色的工作。培训用户如何使用设计体系可以采取多种形式，包括：

• 面对面会议：没有什么比坐在一起完成项目更好。尽管比其他培训方式更耗费时间，但它是使创建者和用户共同协作，了解系统的工作方式并揭示新的机会和缺点的最佳方法。
  
• 工作坊：从沉浸式的全天会议到快速的演练，在创建者和用户之间建立面对面工作坊非常有用。它可以帮助消除对系统的任何误解，在手把手的指导下帮助用户提升理解，并在负责维护和使用系统的人员之间建立良好关系。
  
• 在线会议：如果不可能举行工作坊或面对面会议，或者你需要大规模培训用户，那么在线会议可能会很棒。用户可以在线参与以了解如何正确使用该系统。进行在线会议时，请务必留一些时间在问答环节，来回答用户的问题，疑虑和评论。
  
• 教程：一系列博客文章和截屏视频可以巧妙地展示设计体系的核心概念。这些帮助不仅可以作为培训工具，而且可以作为很好的参考。
  
• 入职培训：将设计系统注入公司文化的一种好方法是将设计体系培训直接纳入新员工的入职流程。新同事将理解模块化，复用以及设计体系带来的所有好处的重要性。

一旦启动并运行设计体系的构建，肯定就会有用户遇到问题或疑问。他们需要知道有一个强大的体系来支持并帮助回答任何问题，听取要求并解决错误。有很多机制可以为用户提供支持，包括：

• 问题追踪器：JIRA和GitHub Issues之类的工具非常适合用户和创建者报告错误并进行技术对话。用户应了解如何提交错误，并觉得有权做出贡献。
  
• 官方时间：安排设计体系团队在固定时间可以提出问题，解决问题并讨论设计系统的下一步工作。
  
• 即时通讯工具：许多协作工具的实时性为对话提供了巨大的方便。借助Slack，Yammer和HipChat等工具，创建者和用户可以随时随地相互交流。
  
• 论坛：事实证明，Stack Overflow和GitHub之类的社区在启用基层，社区驱动支持方面非常有效。与其让设计体系创建者成为主要支持者，不如向整个用户社区开放支持。
  
• 扩展活动：不是每个人都有时间或个性来提出问题并提出建议。设计体系创建者应积极主动，并与使用该设计体系的开发人员联系，以了解他们是否有任何问题或疑虑。这些行动可以帮助在创建者和用户之间建立真正的积极关系。
  

美国网络数字标准草案系统使用GitHub跟踪问题，为用户和创建者提供了一个提交错误并进行实质讨论的场所。

借助GitHub之类的工具，设计体系用户不必再受限于消费者的角色。如果有机会，那些每天使用系统的人也可能成为设计系体系极有价值的贡献者。用户渴望加入并使系统尽可能强大。以下是鼓励用户做出贡献的一些策略：

• 建议和请求：鼓励使用设计体系的所有人提出更改和新功能的建议。更好的做法是，邀请用户以拉取分支请求的形式提交更改，这些更改可以直接合并回代码库。
  
• 个人访谈和圆桌讨论：与用户交谈始终是一个好方法，因此请定期安排时间与使用者聊天。统筹兼顾，听取好与坏，并共同确定应对计划，以解决所有问题和建议。
  
• 请求反馈：管理可能部署到数百个应用程序的系统可能很棘手。在做出可能影响很多人的决定之前，请先征求意见：“我们正在考虑弃用轮播样式，并希望听听您的想法。”
  
• 问卷调查：如果无法进行访谈，则可以依靠快速问卷来了解UI样式和样式指南的有效性。诸如“样式文档有多有用，可以打1到5分？有什么建议吗？”可以帮助你识别盲点，并让用户提出可以提高效率的功能。
  
• 定期会议：安排定期的会议，设计体系团队将在该会议上讨论产品路线图，在此过程中学到的经验教训以及建议和反馈。鼓励所有人参加会议，并确保记录和分发这些会议纪要，以便大家都掌握总体规划。

公开

交流变更，进行宣讲并开展适当的培训与支持，对于提高体系的可见性都很有用。但是，还有另一个将你的沟通策略提升层次的机会：使你的风格指南可公开访问。

为什么？风格指南不仅仅是内部资源来帮助组织中的人们更好地协作吗？对外界有什么用？并且发布你的样式指南不会泄露所有商业秘密吗？

发布你的样式指南以供全世界查看，可以提高其知名度，增强责任感并充当出色的招聘工具。**

将样式指南放在内网或防火墙后面会降低可见性，并给团队和合作伙伴带来不必要的负担，从而限制资源的有效性和潜力。另外，对于泄露商业秘密的担心是完全不必要的。这些只是UI样式，而不是核心代码。

Styleguides.io收集了来自世界各地团队的150多种公开风格指南。

除了使重要文档更易于访问之外，公共风格指南还有助于建立团队的责任感。发布样式指南可以证明你的团队对设计系统的承诺，这会给你带来一定的压力，使它成为最新和有用的资源。

公开的风格指南对于招聘也很有帮助。设计师，开发人员和其他领域的工作人员想为包含现代数字最佳实践的组织工作，并且（正如我们在本书中所讨论的）设计体系正在迅速成为全行业的最佳实践。公开你的风格指南会发出强大的信号，以吸引热情，有模式思维的人。例如，样式指南专家Jina Bolton看到了公司针对其Salesforce1产品的样式指南后就去了Salesforce工作。

当我看到[Salesforce的风格指南]时，我认为它很漂亮，这就是我想加入这个团队的原因。> Jina Bolton

自加入Salesforce以来，她帮助创建了非常成功的Lightning Design System，并帮助管理他们不断壮大的设计体系团队。Jina的故事不是一个孤立的故事。我和Anna Debenham的所有嘉宾都在Styleguides Podcast上接受了采访，他们讨论了公开样式库对于吸引人才的帮助。所有这些意味着公共风格指南为你的团队增加竞争力，而不是减少。

不断扩大范围

一个可见的，跨学科的，可访问的样式库是你的团队需要不断使用的，要充分利用这个优势。由于团队的目光已经固定在这一资源上，因此有很大的机会将其扩展到包括其他有用的文档，例如我们在第1章中讨论过的语调和语气，品牌指南，代码样式指南，设计原则和写作指南。

Intuit的Harmony设计体系包括一个样式库，设计原则，语调和语气，营销准则等。将此有用的文档放在一起有助于提高其可见性和有效性。

现在，你的组织可能不需要实施所有指南，关键是创建一个集中式指南中心，从而增强对最佳实践的认识，提高文档的有效性。

另一种扩展样式库功能的方法是在基于Web的样式旁边增加原生平台的样式。我们可以再次看看Intuit的Harmony设计体系，它将iOS和Android原生移动平台样式放在了Web样式的旁边。

Intuit的Harmony模式库包括用于在每种样式的Web，iOS和Android之间切换的按钮。这样一来，团队就可以跨平台维护一个几乎一致的设计体系，而且还可以在出现模式差异时记录它们。

使它与上下文无关

UI样式的命名方式无疑将影响其使用。不可知的样式名称越多，它们变得越通用和可复用。

因为我们倾向于在更广阔的页面环境中建立UI样式，所以经常会根据组件的位置来命名。但是，与其将你的组件命名为“首页轮播”，不如直接将其命名为“轮播”，这意味着可以将轮播放到任何地方！

命名展示类样式的另一个挑战是，我们会受到其内部内容样式的干扰。例如，在电商网站上，你可能会倾向于将包含产品图像和标题的模块称为“产品卡片”。但是以这种方式命名会限制其中可以容纳的内容类型。通过简单地将其命名为“卡片”，你可以在其中放置各种内容样式：产品，促销信息，店铺位置等。

给事物起名真的很难。但是，有一些策略可以帮助你创建可靠的名称。进行界面清点（如第4章中所述）可帮助你将样式从通常所在的页面上下文剥离出来，这意味着你的团队可以创建不受其上下文干扰的名称。我与团队进行了命名练习，其中我们模糊了样式中的内容，以便每个人都可以专注于结构，而不是其中内容。

命名时，一个很好的方法是使内容模糊，让名字反映其结构，而不是内部的内容。

尽管命名始终是一个挑战，但是与上下文和内容无关的样式名称将更加可移植，可复用和通用。

提供使用场景

在样式库中展示UI样式很有用，但是你需要向设计体系用户展示上下文，以了解如何以及在何处正确使用它们。大多数样式库都展示了每个UI样式的demo，但是正如我们已经讨论的那样，这些样式并不是存在于真空中的，它们到底在哪使用？

演示上下文的一种方法是展示屏幕截图或操作中的组件视频。Material Design设计的文档在这方面做得非常出色：每个组件都包含照片，视频和用法详细信息，以使用户清楚地了解这些它们在应用程序上下文中的外观，并演示应如何使用每个样式。

Material Design的组件库不仅包含每个组件的示例，它使用大量图像和视频彻底记录了该组件的使用情况以提供支持。

显示上下文的另一种方法是为每个样式提供继承信息。正如我们在第3章中讨论的那样，像Pattern Lab这样的工具会自动生成此信息，除了显示每个组件的使用位置之外，你还可以查看组件由哪些样式组成。这提供了一种样式的书面记录，可极大地帮助质量检查工作，因为它准确地突出了如果对特定样式进行更改，则需要测试哪些样式和模板。

诸如Pattern Lab之类的工具提供了继承信息，使团队可以查看任何给定组件中包括哪些较小的组件，以及每种样式的使用位置。

使其持久化

创建设计体系是一项非常重要的工作。但是，如果没有适当的维护，设计体系的价值将贬值，就像汽车刚从车库里开出来一样。相反，你的设计体系应该像一瓶优质葡萄酒不断增值。

通过适当的维护，你的设计体系应该会随着时间的流逝而增加价值，就像一瓶优质葡萄酒一样，而不是像刚刚被淘汰的二手车一样。图片来源：Flickr

正如我们在本章中讨论的那样，使你的设计体系经受时间的考验需要大量的时间和精力。但是，不是所有生物都这样吗？动物需要吃饭，植物需要水和阳光才能生存。创建一个动态的设计体系意味着给予关注和照顾，以使其继续蓬勃发展。

所有这些努力不仅为你的团队创造了更好的礼物，而且为你的长期成功做好了准备。建立清晰的维护计划，传达变更并实施本章中的其他建议有助于设计系统扎根并成为组织工作流程的组成部分。创建是困难的部分，但是一旦建立，你将拥有坚实的基础，可以在以后的几年中继续发展。即使你要推倒重建新系统，也会仍然需要按钮，表单字段，选项卡和其他现有组件。并且你将需要显示和记录系统。不要因噎废食！

以上就是所有内容。要创建可维护的设计系统，你应该：

• 通过为设计体系分配时间、金钱和资源来使其正式化。
  
• 通过指望变更并制定清晰的维护计划来使其适应性强。
  
• 通过寻找圣杯并使其易于部署并将改变传达给设计体系来使其易于维护。
  
• 通过使你的样式库成为整个组织通用的资源使其跨岗位。
  
• 通过使一个有吸引力的，易于使用的风格指南帮助文档使其平易近人。
  
• 通过传达变更，宣传设计体系并将其公开来使其可见性强。
  
• 通过包含品牌指南，语调和语气指南，代码指南，设计原则和写作准则来扩大规模。
  
• 通过根据样式的结构而不是其上下文或内容来命名，使其与上下文无关。
  
• 通过演示样式组成并显示其使用位置来提供使用场景。
  
• 奠定坚实的基础，并在未来数年中不断发展，以实现持久化。

**

以原子的名义出发

我们的任务是使大量产品，站点和应用程序正常工作，并在令人眼花缭乱的各种设备，屏幕尺寸，外形尺寸和环境中保持美观。我希望本书所涵盖的概念能够为你勇敢地应对这种日益多样化的数字环境奠定坚实的基础。通过创建设计系体系，慎重考虑如何构建用户界面，建立协作和样式驱动的工作流，以及设置流程来成功维护设计体系，希望你和你的团队共同创造美好的事物。

以原子的名义出发！