1.简介 #编程设计系统

发布于 2022年 02月 14日 19:15

我们如今正处于一个从‘面向对象’向‘面向系统’的过度时期。变化没有发生在事务本身上,而是在事务完成的方法上。

Jack Burnham (1968), Systems Esthetics

​ 如果我让你定义一下平面设计师扮演的角色,会是怎样的?这个问题会有各种各样的答案,但我的定义是:平面设计师是一个通过形状和颜色来传达一段内容的人。这项工作可以有很多形式,但目前为止,它主要包括了海报,名片,书籍封面等形式的印刷品。

​ 我们面临着新的挑战,不是因为设计的定义发生了巨大的改变,而是我们需要生产的产品已经变了。我们如今把大部分的时间花在电子屏幕而不是纸上,于是对能够为数字设备做设计的设计师产生了极大的需求。但是数字产品不像印刷品。数字产品需要把动态的内容显示在不同尺寸的设备上。数字产品能让用户与内容交互,并从动态效果中获取有用的信息。此外,数字产品通常具有时间逻辑,其中的线性叙事被复杂的状态和转换替代了。 (Furthermore, digital products often have temporal logic where a linear narrative is replaced by a set of complex states and transitions. ) 但是归根结底,数字产品都有同一个特征:都是通过编程语言创作的。

​ 对于根植于纯艺 (fine arts) 的领域来说,这将是一个非常困难的转变。许多平面设计的学校都采取了瀑布式的教学方法 (waterfall philosophy),学生们把自己定位成能够为他人提供构想的创意者。毕竟,这比采取一个全新的教学方式简单多了。但是,这种方法的根本问题在于传统的静态设计工具(例如illustrator和sketch)无法胜任数字系统的原型制作。即使实在页面隐喻 *(metaphor)*任然盛行的网页设计中,它们似乎也只能局限于设计网页的外观。谷歌会只是因为有一个好看的搜索框而成为一个优秀的网站吗?传统的平面设计固然非常重要,这本书也是构建在传统平面设计基础上的。然而设计领域和新兴技术之间已经有了长达一个世纪的纽带,如果平面设计师不习惯于这些新的数字现实 (digital reality),那么就会被时代淘汰。如今我们有了编写生成精美设计作品代码的能力,而未来的设计师必须了解如何实现这个承诺(and the designer of tomorrow will have to understand how to deliver on that promise.)

​ 当我们试图通过把一门编程语言当作设计师的工具来重定义平面设计课程时会发生什么?这本书给出了一个简单的答案。有很多理由来说明为什么这是一个强有力的概念。首先,平面设计师经常在他们工作中使用设计系统 (systems)。我们使用栅格系统来平衡我们的排版,使用色环来选择合适的颜色 (colors with proper distance to each other)。历史告诉我们设计系统能够使我们克服对空白画布的恐惧。将这些系统的概念应用到代码里将会是一个很有力的概念 (powerful concept)。其次,代码能使设计师做一些之前做不到的事情。在原型设计阶段,设计中的变化可以更迅速地被测试,并且可以使用随机函数生成设计师永远也无法通过铅笔达到的效果。第三,它使设计师创建能够根据时间、地点或者用途而变化的动态系统。把设计作品扔在墙上不管不顾,仅仅是看,使印刷作品遗留下来的不良习惯,没有理由使设计的过程伴随着作品的诞生而结束。

​ 这本书的结构类似于对平面设计的介绍,着重于视觉设计的元素以及它们与算法设计的关系。这本书是写给想要成为更好程序员的设计师和想成为更好设计师的程序员。在你阅读此书时,你会发现它从最基础的内容开始。代码将会非常简单,练习也会限制在合理的范围。如果觉得这本书很简单,请继续往下读。这些基础概念是为某些复杂的概念奠定基础的,我们很快就会接触到更具挑战性的主题。在本书的最后,我希望你能学习到两个新技能:如何使用代码创建新颖有趣的平面设计作品,以及如何评估这些设计是否成功。

​ 我决定本书中的所有实例都使用P5.js这个JavaScript库 。它已经被证明对于初学者来说是一个很好的编程环境,同时对于高级用户来说,它也足够强大。我知道,不可能选择一种适合所有人的编程语言,并且读者可能需要根据具体项目的性质,将本书中的思想移植到其他编程语言和框架中。因此,我试图将文字写得尽可能概括。同样重要的是,要注意这不是一本关于网页设计的书。尽管这些示例可以嵌入到任何网页上,但是这些技术可以同时应用于数字和印刷作品。实际上,我已经看到我的学生创造了各种各样的设计作品,包括雕塑,绘画,时装,摄影,游戏设计,网页设计和印刷品等项目。

​ 这本书是为具有JavaScript编程入门知识的读者而写的,这意味着几乎没有时间花在解释变量,函数和循环等概念上。对于没有基础的读者,我强烈推荐Daniel Shiffman的Coding Rainbow YouTube YouTube频道,Dan在解释这些概念方面做得比我做得更好。这些视频还将介绍P5.js中编程的基本概念。

​ 我不是第一个写有关平面设计系统的作者,这本书使用了许多令人难以置信的作者的想法,这些作者多到在这里无法一一提及。 我也不是第一个写编程和平面设计的人,但是我对这个领域的书籍感到沮丧,这些书大致分为两类:那些专注于代码和生成设计的书,却没有讲授平面设计原理。 那些做出优秀设计作品的书,却没有总结项目的制作方式或成功的原因。 所以需要一本以现代的方式讲授平面设计的基础的教学材料,特别是如果它还能为学生提供用于批判数字设计项目的心理模型。

​ 我选择在没有出版商的情况下免费在线出版这本书。 这样做的主要原因是自由。 它使我能够编写和设计我想要的书籍类型。 这反映在本书的结构中,该书的结构包括许多较短的章节,这些章节在网络上更易于阅读,并且教师可以直接改编以用于教学(由于拥有知识共享许可,因此完全合法)。 我将以非线性方式撰写这些章节,讨论我在特定时间最感兴趣的主题。 尽管我将其作为全职工作,但没有完成本书的具体截止日期。 本书的源代码可在GitHub上找到,我鼓励所有读者提交问题 *(issues)*或提出修改请求 (pull requests)。 要了解本书的最新进展,可以在网站上通过邮箱订阅。

​ 我要感谢下面这些人,没有他们就没有这本书。当我2009年移居纽约,在纽约大学的“互动电信计划”(ITP)学习时,我只有一个模糊的想法,就是想在艺术与代码的交汇处创作。作为主要开发横幅广告的Flash开发人员,在ITP的两年时间完全改变了我的想法。我要感谢Dan O'Sullivan对这个项目的大力支持,该项目始于ITP的一个班级,在我担任研究人员的同时它经发展成为一本书。没有Daniel Shiffman的帮助和指导,这本书就不会存在。Daniel Shiffman的工作启发了成千上万的学生学习代码。我还要感谢斯图尔特·史密斯(Stewart Smith),他在“可视化数据”课上讲授了本书的早期构想。我感谢所有帮助塑造这些想法的ITP教师和校友,包括Patrick Hebron,Greg Borenstein,Clay Shirky,Danny Rozin,Tom Igoe,David Nolen,Gabe Barcia-Colombo和George Agudow。特别感谢P5.js的原始作者Lauren McCarthy,以及Casey Reas和Ben Fry在Processing方面的工作。我要感谢钱德勒·亚伯拉罕(Chandler Abraham)在色彩空间一章中所做的详细编辑,克莱尔·科尼·沃尔普(Claire Kearney-Volpe)回答了我有关可访问性的众多问题,以及玛丽亚·玛格瓦德·詹森(Maria Marqvard Jensen)的不懈努力。现在,我们开始吧。

本文译自Programming Design Systems

本作品采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可。

推荐文章