人员，流程，实现设计系统

说起来都容易。到目前为止，我们一直在谈论。并不是说这不是富有成效的谈话！毕竟，我们已经讨论了模块化思维的重要性，已经学习了精心设计UI设计系统的方法，并且展示了用于创建有效模式库的工具。

但是这里是橡胶与道路交汇的地方。我们在这里袖手旁观，并将所有这些理论付诸实践。我们需要把事情做好。本章将介绍销售，创建和维护有效设计系统的所有内容。你准备好了吗？让我们开始吧。

It’s people!

创建有效的设计系统（或确实完成任何出色的工作）并不那么神秘：这全归于人们之间真正的协作和交流。

如果这是常识，我们为什么不能听到世界各地成千上万的成功案例？我让Mark Boulton解释：设计过程既奇怪又复杂，因为人们很奇怪又复杂。

你可以拥有所有合适的技术，使用最新和最好的工具，甚至可以聘用非常有才华的人，但是如果涉及的每个人实际上并没有彼此合作和沟通，那么你就不会创造出色的工作结果。就这么简单。这并不是说你不能做出出色的工作，而是会更多地创造许多令人失望的糟糕工作中的一种。

建立和维护成功的界面设计系统需要整个团队的努力，本章将讨论如何克服人类的许多怪癖以实现它们。

何时建立设计系统

那么什么时候是建立界面设计系统的最佳时间呢？简而言之：现在。

设计系统及其随附的模式库通常是与新设计或重新设计项目，重新设计工作或其​​他计划一起创建的。背负另一个项目是将模式库潜移默化的带入团队的好方法。

话虽如此，创建设计系统和模式库不一定需要与另一个项目一致。如果你可以说服你的客户和利益相关者为专门的设计系统项目花费大量资金和资源，那么对你是益处多多的！

俯仰模式

引入一种新的做事方式绝非易事，因为它需要改变人们现有的思维方式和行为。要使利益相关者和客户参与建立设计系统，除了需要一些营销技巧外，还需要不断的教育。

首先是第一件事。有必要向你的客户，同事和利益相关者介绍界面设计系统的概念。解释这些设计系统是什么以及它们可以帮助组织的多种方式。我们在整本书中都讨论了这些好处，因此你可以解释设计系统如何提高一致性和凝聚力，加快团队的生产力，建立更具协作性的工作流，建立共同的开发语言，提供有用的文档，使测试更容易并用作一个对未来友好的基金会。谁能对所有这些说不！！

（译注：后文大量篇幅都在讲如何建立一个设计系统/UI库，总的来说就是明确目标，列出界面需要的组件，一一实现它们，在此略过不表）

瀑布之死

告诉我你是否曾经听过这样一句话。一个团队的任务是建立一个网站。一旦启动会议尘埃落定，UX设计师就会离开，垂头丧气，最后出现一个巨大的PDF文档，详细介绍了整个体验。该整体线框文档传递给了项目受众，他们在获得一些反馈和建议后将其签字。

然后，UX设计器将线框传递给视觉设计器，后者跳入Photoshop或Sketch中，以将颜色，版式和纹理应用于结构化但无菌的线框。在设计评审会议上，利益相关者在投影机启动时急切地坐着，项目经理跑去为所有人打印设计平台的副本。艺术总监将他们放在房间的最前面，并揭开设计的神秘面纱。看哪，一个网站设计！演示结束后，会议室很快就会响起嗡嗡的反馈和对话。在最初的反应和称赞消退之后，一位主要利益相关者大声疾呼。

“这看起来棒极了，我认为确实为我们要在此项目中完成的工作打上了烙印。但是…… ”

他们表示希望看到一些可能具有替代布局的东西，一些能够捕捉到某种氛围的东西，也许是使用不同摄影作品的东西，或者只是……弹出的东西。

随着话匣子的打开，其他利益相关者突然意识到他们也想分享自己的观点和建设性批评。在会议结束时，每个人都从他们希望完成设计的愿望清单中溜走了。

视觉设计师略有放弃，但还是下定决心，回到他们的工具中，以根据利益相关者的建议进行工作。在下一次设计评审会议上，同一场景重演，利益相关者表达了同等的鼓励和渴望。“我觉得我们快到了。我们可以……”

......

视觉设计师为最终完成工作而松了一口气，悄悄地脚步来到开发部门的地盘。他们将经过批准的设计稿拿出来，当他们四处走开时，他们大喊：“您能在三周内完成吗？我们已经赶不上计划，而且超出预算！”

当前端开发人员将设计图从地板上摘下来时，视觉设计师已经消失在了深夜。瞥了一眼组成物，一种奇怪的感觉（迷惑，愤怒和恐惧的某种结合）就将它们淹没了。设计到底有什么问题？也许是整个伴奏中使用的七个字体和九种独特的按钮样式。也许这是以桌面为中心，不可能实际执行的布局。也许这是用户生成的完美内容，而现在还不太可能。

......

在将前端代码进行分支管理之后，疯狂地完成了网站的内容，并进行了最后一刻的质量检查测试，团队最终启动了该网站。尽管没有人大声说出来，但在将项目推向门外的喜悦和轻松中，空气中充满了失望的色彩。毕竟案例展示时没有提到之前许诺过的补偿，同事，部门之间的摩擦也影响了一些关系。

我希望这个故事对你来说是一种虚构的作品，但是根据我自己的经验以及与无数其他人的交谈，我想你在某个时刻经历了这个悲惨的故事。它甚至可能像猛击肠子一样击中了你的心。无论你是否亲身经历了这一过程，重要的是要认识到，亨利·福特式的瀑布式的过程越来越不可能带来出色的数字化工作。

瀑布式开发流程

有很多工作可以并且应该同时进行。要创建完善的UI设计系统，我们必须重新设置涉众的期望，并让他们适应模糊，协作的过程。

这项工作将并行进行，并不意味着每个人在整个过程中都会大放异彩。当然，大量的研究，信息体系结构以及UX设计的其他基本方面将倾向于在流程的早期进行，但是这项工作不应拖延其他小组的工作。即使一个人完成了大部分的工作，他们也绝不应简单地从项目中淡出。对于每个小组而言，继续与其他小组协商以确保他们的愿景成为最终产品至关重要。因此，与僵化的顺序瀑布过程不同，随着时间的推移，更多的协作过程看起来像这样：

更具协作性的工作流程

前端厨师

正如我们之前讨论的那样，前端开发人员通常只在做出所有设计决策后，才将其运用于项目中的原始生产机器。这一过时的过程使各小组之间无法保持同步，并阻止团队以有意义的方式合作。这是一个巨大的错误。将前端开发作为设计过程的关键部分包括在内，就需要改变项目结构和团队成员的思维方式。

在餐饮业中，重要的却是鲜为人知的厨师角色。一名厨师准备者切菜，腌泡肉和做沙拉，为第二天的工作做准备。通过提前准备食材，厨房员工可以专注于协作和烹饪，而不是繁琐的工作。没有预备厨师的前期工作，主厨师的流动就会中断，厨房的快速步伐也将停止。

前端开发人员需要成为Web设计过程的准备厨师。如果开发人员从项目的第一天开始就没有进行编码，那么该过程就会出问题。“但是布拉德，”我听到你说，“如果我不知道应该编写什么代码，该如何开始编码？”

相信我，在对项目的信息设计或美学方向一无所知的情况下， 前端也有很多工作要做。除了设置开发环境（例如准备Git存储库，开发服务器，CMS和开发工具）之外，开发人员还可以深入研究代码并开始标记模式。但是，如果你对设计一无所知，应该如何标记？这取决于你正在处理的项目类型。

你正在建立电子商务网站吗？您可以设置站点搜索，购物车表，占位符产品详细信息页面，主页和结帐页面。进行在线服务？开始标记注册和登录表单，忘记密码的流程以及仪表板。而且，当然，大多数网站将具有页眉，页脚和主要内容区域。设置外壳模板并为你预期使用的模式编写基本标记。这种标记最初将是粗糙的，但它为协作和迭代提供了关键的起点。

这项前端准备厨师工作可节省开发人员与设计师合作的时间，而不是在设计完成后进行工作。有了基本的标记，开发人员可以与设计人员一起通过对话和工作原型来帮助验证UX设计决策。它们可以帮助视觉设计师更好地了解源代码顺序和Web布局，并可以快速生成雏形的代码库，这些代码库最终将演变为最终产品。

小结：本章主要讲了制作一个ui库或者说模式库需要经历那些步骤，还提到了瀑布式开发流程的弊端，结合我的实际开发经验，我认为针对与页面交互不是那么丰富的项目，目前这个时代的前端工作的重点在于与后台的配合，视觉方面的设计其实也就差不多1-2天的时间，划分模块，划分公共组件，指定开发人员并分配任务。前期准备工作主要是搭建项目，进行架构方面和权限方面的设计，ui稿评审之后才进入大规模的开发，毕竟一般的团队都是直接用现成的ui库而不是自己造轮子。而团队间的配合主要在于前端与后端之间的配合，如果后端能先提供可以直接mock的接口文档（类似于rap这种），那么开发时间将大大缩短，正如上面那个图画的那样。

下一章 【译】原子设计5——维护设计系统（节选，终章）
译文目录在这里： https://www.jianshu.com/nb/47456777