Invision 官方出品！超全面的「设计系统」 构建指南（一）

这篇章来自于 Invision 的书籍，围绕规划、设计、构建和实现设计系统的实践历指导读者，其中包含了验丰富专家的真知灼见一手验。我很喜欢，也分享给家，推荐阅读。这一系列，一共 7 章，感趣的话，持续关注吧。

20 世 60 ，算机硬件技的升级始超越软件发展的速度。算机的处理速度变得越越，价格也越越便宜，但算机软件发仍然处于缓慢、难以维护的境，并且还很易出错。两者之间的差距以及解决这问题的困境被称之「软件危机」。

在 1968 年的约软件工程会议上，道格拉斯·麦克罗伊（Douglas McIlroy）了基于组件开发有可是解决「软件危机」的方法之一。基于组件开发是一种通过复代码来编程潜的方法，该方法帮助编程工作更效、更易于扩展。这样做既减编程工作量又升软件开发的速，软件更好地现代计算机的量。

在 50 年的今天，我们又面临着类似的挑战，只不一次是在设计领域。在 UI 设计中，设计的角色是在为特定需求量身定做解决方案，很难基于整个应进行扩展。

你有没有走查你输出的界面，现自己使用几种类似的蓝，或者同一个按钮不同的用法，将样式组合对应到你设计的每一个 UI 界面，就意识到一套不成系的设计是么的难以护。

△ 一份 UI 样式走查收集的成果，里面罗列的几种类似的按钮样式说明之前团挖的坑有深。

在这种状下，计要跟上开发的速度，公可以选择做以下三件事：

• 雇更的人
• 提高计速度
• 找到个适用于多个问题解决案

通过复用计，计系统能够帮助队更好、更快地构建产品——复用性使规范成为可能。这是计系统的核心和价值。一个计系统是一个可复用组件的集，由清晰的规范作为指导，组在一起构建成各种的应用程序。

50 多年来，工程师们在遵循着这个理念执工作。现在是时候让设计充分发挥其潜力加入他们了。

用系统思维扩展设计

你可能已经楚地意识到，设计系统已经成为今软件业个热话题，并理由也很充分。很多企业投资设计系统，为他们认识到品体验能够带来竞争优势，不仅能吸引和留住客户，更降低品学习成本。

重视设系统的公司内部，通常能看见这种况：

• 设计团队不断壮大。
• 设师分布整公司的团队中，可能多部门。
• 设计在整个公司平台上的各个产中都起着键作。

如果设师，那么面所对设的投资听起可能会令很奋，但其实也很多挑战。当一应用由不同的团队负责迭各自模块的时候，将如何跨平台设一致的 UI？又如何使所团队能够行速迭？当团队的设师设出新的独立样式时，又将如何处理这种不可避免的设需求？

要了解如何应对上述的挑战，我们要先了解么是设计系统。设计系统将个体和整体两个概念各自的优点结合在一起。

1. 标准

拥 MAC 用户界面的技知识产品设的关键因素，但了解用户界面背后的理论，能够帮创造出色的产品。——苹果人机交互指南

为了设计卓越用户体验，不仅要了解计系统背后的内容，还要了解其计的因。一会通过建立和遵守标准来达成共识，这做能消除主观性和歧义性，保证产品队内部不会出现摩擦和混乱。

这套标准内容涵盖了设计和开发。例如命名约定、障碍标准和文件结构等等，帮助团队成共识，减少出。

视觉语言设标准的核部分。义颜色、形状、类型、图标、布局动效的样式用法对于创建品牌一致的用户体验至关重。系统中的每组件都包含这些元素，它们表达品牌特性中扮演不可或缺的角色。

没有标准，决策时就会无据可依。这仅扩展设计，还会成复杂、差劲的户体验。

超越平台

视语言以不局单一平台，以在 Web，iOS，Android 和其他平台上延续。将规范文档展示在设计系统网站的醒目位置，能够帮助系统开者组件的样式和互模式。例，Google 的 Material Design 就深到其产品视语言的各个面。

2. 组件

组件是系统中复代码的一分，它们充当应程序界面的基础。组件的复杂性各相同。将组件简为单个功（如按钮或拉菜单）可增灵性，使更易于复。复杂的组件，如特定类数据的图表，可很好地满足应场景，但是这种复杂性限制它的使场景数量。组件的复性越，需要维护的次数就越，规模就越简单。

基组件的开通复用代码来减少技术开销。建立标准规范组件的用途、样式和用法。两者结合在一，就相当为你的产品团备一个清晰的系统，让他们到为什么和怎么做。

设计系统的价值

让我们详细看看设计系统何帮助你决一直以来的痛苦。

1. 扩展式设计

随着团的成长，设计师通常将注意力集中在应用程序的独立功能区域，搜索和现、帐户管理等。就导致设计碎化，就像是一座设计的巴别塔，每个设计师将他们的设计语言往上添。当设计师单独而不是系统地去决问题时，就生种情况。

没有通用计语言统一产品和计，用户体验就会开始崩溃。当缺乏计规范，计讨论就变得毫无用。为了使队内部保持一致，必须要有一个共享的来源——可供参考的官方式库。

大多数情况下样库都是静态内容，例如设计模版。是静态参考几乎立刻会过时。这是为什么有团队会造像 Shopify’s Polaris 站这样网站——个设计系统站，用该设计系统构而成，记录系统所有，括组件、指南和交互最佳使用场景。为它是与系统起构，所以它能够保持其永远是最新。

对于产品团队言，内部设系统站点、易访问的共享源。它提供了一引力，使团队员保持一致同。

2. 理的债务

随应用程序团队的时间积累，会慢慢形债务。这种债务不金融债务，技设债务。这些债务因解决独立问题获得的。设债务由不可复用不一致的样式惯例组，维护它们不可能完的任务。随时间的推移，这些债务的累积会减缓增的巨负担。

创行为本身并会产生债务——就像钱本身并会产生金融债务一样。但使设计系统将使你的设计和代码保持足够简洁，同时仍然允许你进行升级和迭代。

3. 一致的设计

一致且重复使的标准化组件，使应用程序的易用性提升。标准化的组件还能让设师花少的时间关注样式，花多的时间专注于提升用户体验。

4. 的原型

设系统下作，可以玩乐高一样速拼凑流程交互，构建无数的原型方案行速验证，从帮团队速获得数据结论。

5. 提高可用性

页面样式的不一致会影响产品的可用性，当 CSS 因数不清的不一致样式元素交互增加时，页面加载时间也会加，这会导致很糟糕的用户体验。它还可能产冲突的 CSS  JavaScript，从可能破坏的应用程序。通过使用设程序，通过构建一整体的组件库（而不是页）来避免这些冲突，从而花费更少时来保证品质量。

6. 立可访问性程序

可访问性在组件级可以实现，针残疾士、网速较慢和旧计算上进优化。这是个立易用性程序很好法， 在第 3 章「构设计系统」，Katie Sylor-Miller 解释了设计系统如何帮助你改善品可用性，并保证遵守你所在国家/地区法律。

（译者注：残疾人法案于 1990  7 月通过并签署，其中规网站的可用性必须遵守《残疾人法》（ADA）的相关内。）

设计系统的误区

即使述的这些好处，团队内部推行一设系统的时候，仍然很难服团队员。设师可能会感到局限或束缚，但通常这些被感知到的弱点设系统的优势。

我们来揭穿那些你在推行设计系统时经会遇到的误区。

误区1：过于限

误区：负责深入独立务的设计师看到的设计标准可会与他需求的一样，因此，他们会认为通的设计系统过于限，可无法满足某些特定务的需求。

现：设计师通常设计出自定义的决方案以满应用中的独立的业务，从而增加设计和技术的负担。而使用设计系统，被设计的新决方案以被反馈到设计系统里面，使每个人以使用改进方案。

误区2：缺乏创造力

误区：果设计师被在一个设计系统下做设计，么他将不能去自由地探索设计风。前端的工通常包含着各种样式风的更新。对应用程序的风进行改版通常不是一个小任务。也能是一个很大的风险，因为从项工移除一部分的旧资源，能对用产生负面影响。

现实：计系统的组成部是相互关的，这味着当一个位置进行更改，这项更改会在整个系统中同步，这使得系统内的式更新工作变得轻而易举，但响却大得多。以前是周甚至月的工作量，现在可以在一个下午就能完成。

误3：一劳逸

误：计和构建完计系统后，工作就完成了。

现实：设计系统是有生命，这意味着需要不断其进维护和改进。是由于应用是由设计系统复用性组件提供支持，此该应用会自动步设计系统改进内容，从而减少维护应用程序工作量。这是设计系统提供扩展能力。

总结

设计系统不是时流法，也不是未经检验假设。为了让设计找到与技术快速发展相匹配等案，基于组件设计和开发是有效可靠解决案。

欢迎关注译者的微信公众：「彩云译设」