遇见乌托邦。用流体类型和空间尺度进行设计和建造

20年前，当我们开始从舒适的、可预测的印刷品设计的海岸到万维网的流动和不断变化的公海的航行时，John Allsopp鼓励我们接受 “事物的起伏”。十年后，Ethan Marcotte创造了 “响应式网页设计 “这一术语，启动了从固定宽度的桌面网站–以及它们独立的移动网站–向灵活设计的单一代码库的地震式转变。

但我们并没有接受这种起伏。并非如此。相反，我们采用了一个任意断点的系统，并且在那里结束了探险。与现实世界的设备联系在一起的僵硬的 “神奇数字 “困扰着我们的CSS，并指导着我们的设计过程。今天的开发者经常会收到一系列的模拟图，包括手机（320px）、大型手机（400px）、平板电脑（768px）、小型桌面（1024px）和大型桌面（1440px）。生成这么多离散的工件所花费的努力是对时间和资源的低效利用。它也延续了创建特定设备网站的陈旧做法。

此外，由于有这么多独特的参考资料，开发人员往往只能猜测设计过程中使用的逻辑（如果有的话）。这可能会导致似乎有无限多的类似值进入代码库，不必要地增加CSS的重量和项目维护的复杂性。随着生成的特定设备的模拟模型的数量以及参与设计的人员的数量的增加，这种矛盾也会呈指数级增长。

乌托邦的承诺

确保我们的设计在更多的设备上感觉自如的方法之一是增加更多的断点，以便在更多的屏幕尺寸上进行更细致的设计调整。这样做的代价是更费力的设计过程，更多的模型生成，更多的代码，以及更多的文档。

另一种方法是向媒介的流动性靠拢，认识到这种感知到的限制是它真正的优势。我们可以放开手脚，放弃一些控制权，让媒介来分担负荷，而不是通过加载断点来收紧我们的手脚。我们可以用一种更加流畅和系统的方法来拥抱设计基础的起伏。

在与客户和同事的交谈中，我们发现自己正在努力阐明这些有点模糊的概念。为了将这个想法变为现实，我们给它起了一个名字。 乌托邦.用一个词来指代对流体响应式网页设计的基本原理的特殊思考方式。以下是我们认为的好处。

• 使用少量的相关规则进行快速的设计和开发，建立系统，而不是在任意的断点上对其内容进行每一种排列组合。
• 为您的项目创建定制的约束条件，以确保一致和和谐的设计。
• 简化设计和开发之间的沟通和协作。
• 将不可见的东西可视化：将响应式空间组件化，将其实施和行为编码化。
• 将刺耳的断点跳转换成奶油般光滑的插值，为_每一个_屏幕尺寸的字体和空间比例进行程序化定制。

乌托邦 “的起源

Utopia是在多年的工作中出现的，在机构和产品的背景下进行设计和开发。我们发现了一些常见的模式和陷阱，并在与真正的客户进行迭代的过程中逐渐锁定了一个解决方案。

在2018年，我们从一个简单的基于电子表格的计算器开始，但沟通流体响应式思维的好处是具有挑战性的。2020年初，在Clearleft的一次非正式冲刺中，我们发布了utopia.fyi，在那里，我们将一些想法与流体类型标尺计算器一起发布。

流体类型标尺

用模块化尺度排版并不是一个新概念。它是一种成熟的数学方法，可以确保设计中字体大小之间的和谐关系。但是，传统的印刷品衍生的排版系统是为特定的页面尺寸设计的，而Utopia可以为所有的设备释放优雅的排版。

通过为小屏幕定义一个合适的字体尺寸，为大屏幕定义另一个合适的字体尺寸，我们可以让浏览器根据当前的视口尺寸在这两者之间平滑地插值。这样做的结果是，一组字体的尺寸总是与自己相适应，而不需要为多个断点手动设置尺寸。

以步骤而不是数值的方式思考，我们允许计算机计算出最佳的尺寸，而不是自己费力地去计算它们。这种声明式的思维方式与CSS本身的工作方式相吻合：我们告诉浏览器我们希望发生什么，浏览器就会想出如何去做。

这也在设计者和开发者之间创造了一种共享的、量身定做的语言。与其说一个标题尺寸的变化是 “从1.687rem到2.3125rem”，不如说这套整齐的选项让你说。”第2步到第3步”。通过增加命名步骤的有意摩擦，并接受这种自我约束，我们可以防止无穷无尽的神奇数字字体大小渗入我们的代码库和设计中。

乌托邦 “鼓励我们策划一个足够小的系统来保存在短期记忆中，而不是一个必须不断被提及的庞大系统。

用流畅的字体设计

我们通常会在项目开始时，在提名的最小和最大视口宽度上定义一个合适的正文字体和尺寸。具体的尺寸取决于产品的字体、视觉风格、内容、布局和受众。我们通过在Figma中使用客户提供的大块现实文案以及我们共同发现的任何设计方向的见解来进行试验。在这一点上，我们最感兴趣的是可读性、行长、行高、大小和重量对比–所有这些因素结合在一起，就会形成一个合适的阅读体验。

经过这样的实验，我们会对适用于这个项目的比例有一个很好的想法，现在是时候访问Utopia字体比例计算器了。

在这里，我们将把粗略的字体大小映射到数学字体比例上，把数值拉到Figma中–目前是手动的–以确认它们适合内容的需要。

您可以在Utopia博客上阅读更多关于使用流体字体比例设计的信息。

使用流体字体设计进行开发

为了将这些设计基础转化为代码，开发者可以访问与设计师相同的URL。他们可以直接从该工具中导出CSS，并将其放入项目中。

Utopia在很大程度上依赖于CSS自定义属性和CSS锁。这有两个好处：它是完全选择的，而且数值可以在浏览器中进行调整。

关于保持你的值的可塑性的附带说明。这是Utopia计算器的一个关键设计决定。我们从经验中知道，所有的数值都会随着项目的进行而改变。数字设计是一个流动的过程。像Figma这样的设计工具是令人难以置信的，但它们不能向你展示你的字体在每个设备上的每个浏览器中是如何呈现的。项目中的内容经常会发生变化。可用性测试可能会出现未曾预料到的问题。利益相关者会出现他们自己的设计偏好。只要记住这个口号：”数字产品永远不会完成”，并允许系统在你工作的过程中灵活、变化和成长。

由于自定义属性所暴露的流动尺寸，有两种主要的实现方式。在任何声明中，我们不把字体大小的值设置为一个静态单位（例如px），而是参考步骤大小。

h2 {
  font-size: var(--step-2);
}
复制代码

另外，通过创建一小套单一责任的实用程序，我们可以用一个单一的类来创建流体组件。

.u-step-2 {
  font-size: var(--step-2);
}
<h3 class="u-step-2">Heading</h3>
复制代码

推荐阅读。只用CSS的流体模块化类型比例

流体空间调色板

空间通常是由设计师临时创建的，而开发者则是猜测的。Utopia旨在通过标准化设计和开发中使用的基本空间单位来解决这个问题。这创造了一个共同的理解和一套共同的有意的，可供两个学科使用的流体间隙。流体空间计算器是Utopia系列的最新工具。

以流体类型标尺中的 “第0步 “为基本单位，我们部署了一套乘法器来创建一系列的空间单位。为了简单起见，我们把它们称为T恤衫尺寸。(S)mall, (M)edium, (L)arge, 等等。由于有了流动的基本单位，这些数值会根据屏幕的大小而微妙地收缩和增长。

许多系统在任意的断点处交换空间值，而Utopia有一个替代方案。每个单独的空间单位可以在你的最小和最大断点之间插值到一个不同的单位。开箱后，Utopia创建了 “单步对”，在尺寸的阶梯上走一步（2XS → XS，XS → S，等等），但该工具也允许你创建任何数量的自定义对。

这些配对可以创建令人难以置信的陡峭斜坡（XS → 3XL），非常适合处理英雄板条的间距，甚至可以创建随着视口宽度的扩大而变小的反向斜坡（2XL → XS）。

使用流体空间进行设计

在 Figma 中，我们将为最小和最大尺寸的空间创建一套空间组件。使用变体，我们可以轻松地在每件T恤的尺寸之间进行交换。我们的路线图上有一个可以自动完成这一过程的Figma插件。

使用这些空间作为指导，我们可以把它们放在我们的组件之间，以确保视觉上的一致性。我们发现，在很短的时间内，少量的空间值就会在你的记忆中留下痕迹，而在没有空间指南的情况下，布置符合要求的设计就成了第二天的事。

我们制作了一个演示，以展示这在浏览器中是如何实现的，以及Utopia是如何使空间变得有意义的。

你可以在Utopia博客上阅读更多关于使用流体空间调色板的设计。

使用流体空间进行开发

和排版工具一样，我们可以直接从空间计算器中导出CSS，并通过自定义属性或实用类来实现它，就像这样。

.grid-of-two {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: var(--space-s-l); // (S) 18px → (L) 44px
  margin-bottom: var(--space-xs); // 14px → 17px
}
复制代码

有了一个共享的流体空间调色板，我们发现我们不再需要在多个视口宽度下的每个元素的模拟图了。作为一个使用Utopia的开发者，你现在对你项目的响应式设计的细微差别承担了一些责任。这个空间系统使你有能力在你的界面上画出你认为合适的流体空间。

如果特定的组件在小屏幕上需要定制设计，可以创建一个有针对性的模拟图。一个网站的标题就是一个很好的例子。这使得设计师可以更明智地利用他们的时间，专注于棘手的设计问题，而不是创建由Utopia自动解决的模拟情况。

毫不夸张地说，这种方法已经彻底改变了我们为网络开发的方式，并迅速提高了我们将平面设计转化为和谐、流畅和有意的数字布局的速度。一开始，这样的设计方式可能会让人觉得有些不直观，但一旦它被点击，你就不会再想回头了。

推荐阅读。使用流体空间调色板绘画

现实世界中的乌托邦

乌托邦 “开发过程中的一个重要里程碑是Clearleft与自然历史博物馆的合作。我们与数字团队紧密合作，重新设计年度野生动物摄影师网站，这是世界上最大的同类比赛的在线展示。

在实体展览中，照片被精心安排，辅助信息被精心排版，并被精心定位。我们致力于为数字版本提供同样程度的考虑。利用这些令人敬畏的资产，新网站的工作很简单。”让照片成为明星”。

这种思维方式渗透到设计基础中，并完美地应用了我们的乌托邦原则。如果我们的目标是在每台设备上以最佳方式显示图像和相关内容，我们有两个选择。我们可以用固定的断点使我们的代码饱和，或者接受潮起潮落，靠在网络的流动媒介上，让计算机适应其显示内容。

这个项目的结果是物理体验的沉浸式数字化身，每张图片都有呼吸的空间，在任何设备上都能感觉到与周围的环境相协调。你可以在案例研究中阅读更多关于这个项目的信息，并在Clearleft播客中听到这个项目。

结论

有了这种方法，每个页面上每个组件的每个字符和每个空间都与排版步骤或空间大小相联系。尽管这种方法在项目过程中简化了某些设计决策，但它并不能替代好的设计–这需要一个熟练的设计师来设置适当的字体和空间调色板，并随着设计的发展来管理它们。

无论我们是做一个设计系统还是做一些小的东西，系统化的方法的优点几乎总是大于缺点的。根据一个项目的规模和范围，引入一个系统可能会感觉是过度工程。Utopia的方法被设计成尽可能的轻量级，适合用于各种形状和规模的项目。