本章节是《设计系统编程》的开篇,它是一本由Rune Madsen编著的介绍平面设计新基础和实际应用的免费电子书。本书还在连载中,更新动态可以关注这里。 翻译&校验: freedom
    原文地址 https://www.programmingdesignsystems.com/

    无论你去哪里,你都会被系统包围着。我们用“系统”这个词来描述一组相互作用的各个部分作为一个共同的整体,这些部分可以是简单的,比如手表,也可以是非常复杂的,比如我们称之为互联网的计算机网络。在这本书中,“系统设计”一词被用来描述鼓励那些设计师将其设计规则定义为可用于多个产品的系统指令的哲学。这用一个简单的故事来解释好像更好。

    假设当地啤酒厂要求我为著名的烈性啤酒设计一个标签。我为了确保我的设计很适合这个产品,花了很多时间研究和品尝啤酒,然后才作出我的最终设计。啤酒厂很喜欢我的新设计,他们要求我为剩下的10种啤酒设计标签。现在我面临一个问题。我为我的标签设计选择的颜色、字体和插图非常适合烈性的和浓稠的啤酒,但它对其他啤酒不起作用。因此,我最终为每种啤酒创建了不同的视觉风格的标签,但并没有为啤酒厂的品牌提供一致的标签风格。

    如果我设计第一个标签,相信它将是一个更大东西的一部分:啤酒厂的设计系统,这个问题是可以避免的。而不是专注于特定的烈性,我会定义一系列的视觉风格,以用于不同的啤酒类型。这将包括一组相关的字体和颜色,这些字体和颜色有足够的差异可用于单个啤酒,但可识别到足以为酿酒厂提供一个共同的标识。只有在创建了这个设计系统之后,我才会设计第一个标签。

    什么是设计系统? - 图1

    1970年为纽约交通局编制的“图形标准手册”就是设计系统的一个例子。超过350页,它定义了所有与纽约市地铁相关的标志的视觉指南。©

    设计系统提供了一种不同的思维方式,设计人员被迫考虑许多场景和约束,而不是依赖一次性的设计过程。当然,这种方法并不新鲜,有些人可能会说,它一直是设计师工作的一部分。从纽约交通局的图形标准手册到谷歌的材料设计,多年来已经建立了数以千计的设计系统。大多数“财富”榜上500强企业之所以能被认可,都是有原因的:它们在产品线上对字体和颜色的使用制定了严格的规则。

    什么是设计系统? - 图2

    谷歌的材料设计文档是为了帮助解释公司视觉语言背后的想法。这包括使用颜色、分层和动画的规则。

    最近一个简单设计系统的例子是麻省理工学院媒体实验室的标志,由宾塔格拉姆(Pentagram)创建。这个想法很简单:用垂直线填充7x7网格,创建黑色和白色的抽象字母或符号。该系统用于为实验室的23个研究小组创建带有首字母缩写的徽标,并作为构建自定义字体、图标和模式的基础。

    什么是设计系统? - 图3

    什么是设计系统? - 图4

    麻省理工学院媒体实验室设计系统。©

    这个标志是一个很好的例子,说明一个设计系统可以用来给一个组织提供一致的外观和独特的风格。该系统既简单又灵活,用有限的空间创造了几乎无限的设计。

    今天,设计系统也特别有趣,因为数字产品是系统的,编码的设计者不再局限于设计系统的创建,因为设计系统最终会出现在印刷手册中。代码允许设计者不仅创造设计,还可以建立数字系统来创造设计。当然,将花费更多的时间在代码中制定系统规则,但设计师将不受传统设计软件的限制。美国计算机科学家唐纳德·克努斯(DonaldKnuth)就这样写道:

    “元设计比设计困难得多;绘制东西比解释如何绘制更容易。其中一个问题是,不同的潜在规范集合不能轻易地同时预见。另一个问题是计算机必须被完全告诉一切。然而,一旦我们成功地解释了如何以足够一般的方式绘制一些东西,那么在不同的情况下,同样的解释将适用于相关的形状;因此,在制定精确解释时花费的时间是值得的。”

    《Metafont》Donald Knuth(1986)

    在这个方面,“足够普遍的态度”一词很重要。软件可以被编写成允许一系列可能的输出,设计系统的变化可以在(字面上的)一秒内产生。程序生成设计的能力是算法设计中最有力量的能力之一,无论是它导致一个标志产生45,000个变体,建立一个具有生成景观的无限行星星系,还是创建一篇根据地图选择改变其内容的动态文章

    什么是设计系统? - 图5

    保罗·兰德设计的海报。©

    设计系统编程示例1@yylifenCodePen

    同样的海报在代码中重现。

    在这本书中,我们将研究在鼓励设计师创建设计系统并通过编写软件使这些系统有生命力时可以构建些什么。

    ps: 本电子书翻译持续更新中,全部更新完之后会有所有章节的完整版,敬请期待…