从印刷设计到网页设计：对比类比

我曾经在印刷前制版工作了很长时间。甚至比我从事网页设计的时间还要长。我每天都在使用 InDesign 文档。我算不上超级专业人士，但我对它相当熟悉。最近我完成了我的新书《深入 WordPress》（您可以在 此处购买！）的排版工作，在此期间我思考了 InDesign 中的一些工作方式与 CSS 相似之处，以及一些不同之处。让我们来看看。

印刷文档具有固定尺寸。网页浏览器是流动的。

在印刷中，您声明页面宽度和高度，并且可以绝对依赖它并围绕边缘进行设计。在网页设计中，唯一可以依赖的边缘是顶部边缘。如果您左对齐，您也可以依赖左侧边缘，但仅此而已。在印刷中，出血（图形/颜色与边缘齐平）的可能性要大得多。

印刷尺寸通常相当标准。网页设计尺寸通常又高又窄。

在印刷中，最终查看者会拿起并用手拿着材料。印刷设计师会考虑到这一点，并确保最终产品易于处理。在网络上，我们的设计可以滚动，用户也不害怕这样做。这意味着完整网页的尺寸通常非常高，因此相对较窄。在网络上，我们不使用 10,000px 高的图像，因为我们需要考虑性能、可见区域和内容波动。

在印刷中使用段落样式就像设置块级 CSS。

在 InDesign（和其他主要的版式程序）中，您可以选择一段文本并应用段落样式。例如，您可以创建一个名为“文章 1 文本”的段落样式，将其应用于您在杂志版式中处理的第一篇文章的所有普通段落。此段落样式有很多选项可以设置。您可以设置字体系列、样式和大小。您可以设置颜色。您可以设置缩进和间距，这控制着段落在页面上彼此交互的方式。

这很像使用 CSS 并为块级段落（<p>）标签设置样式。您在段落样式中可能执行的操作，您也可以在 CSS 中像这样执行

p {
   font: italic 16px/1.5 Georgia, Serif;
   margin: 0 0 24px 0;
   text-indent: 24px;
   color: #222;
}

在这两种情况下，这都是明智的做法。这意味着如果您以后需要进行更改，您可以在一个地方更改内容，并且该更改会反映在整个网页（在网页设计的情况下）或整个文档（在印刷设计的情况下）。

在印刷中使用字符样式就像设置内联级 CSS。

类似地，在 InDesign 中，您可以选择文本并应用字符样式。使用字符样式，您还可以选择字体系列和颜色等内容，但您无法更改间距。这就像在 CSS 中为内联元素（如 span、strong 或 em 元素）设置样式。

在印刷中，您绝对知道最终结果会是什么样子。在网络上，您只能寄希望于最好。

在印刷设计中，您会收到打印机提供的文档校样，如果一切看起来都与您期望的完全一致，您会签署确认。如果您是一位非常敬业的印刷设计师，您甚至会当您的设计付印时在打印机旁边，以确保最终产品完美无缺。

在网页设计中，我们能做的最好的事情就是跨浏览器检查。但是有如此多的不同浏览器、不同的平台、不同的显示器，它们具有不同的校准和不同的尺寸。我们可以检查合理数量的浏览器，并检查最流行的组合，但除此之外，我们只需要运用我们的专业判断和经验来判断设计在所有环境中看起来是否可以接受。

所见即所得工具在印刷中是理想的，但在网页设计中却很糟糕。

印刷设计工具远远优于网页设计师的工具。在 InDesign 中，您可以单击并拖动方框，它们会停留在您放置的位置。需要三栏文本而不是两栏？只需点击几下即可。您拥有钢笔工具、铅笔工具和调整大小工具，所有这些工具的行为都符合其隐喻。

Adobe 试图将这些相同的隐喻应用于 Dreamweaver 等所见即所得的网页设计工具，但这并不奏效。您不能仅仅在画布上绘制一个方框并将其拖动，然后期望程序将其转换为完美的 HTML 和 CSS。还有太多其他因素在起作用。结果要么完全按照您的绘制方式呈现，并且充满了糟糕且不灵活的代码，要么根本不按照您的绘制方式呈现。

如果您是从印刷转向网页设计，不要期望使用之前相同的工具。至少不能以同样的方式使用。准备好编写代码，但别担心，它真的没有那么复杂。

如果您是从印刷行业转过来的，您不会喜欢这里的字体情况。

公平地说，情况正在变得越来越好。但是印刷设计师确实拥有优势。世界上任何字体都可以获得和使用。在网络上，我们处理的是非常有限的字体集，只有通过糟糕的技术（例如使用图像）、花哨的付费技术（例如 TypeKit）或许可问题（例如，很少有体面的字体可以合法地与 @font-face 一起使用）才能扩展。

即使网络上的情况正在改善（嘿，我们甚至 获得了连字！），但很长一段时间内控制力仍然会很差。印刷设计师是字距调整的大师。字距调整在网络上很难做到。想要在网络上给字母应用描边？祝您好运。

印刷是一个 300 DPI 的世界。网络是一个 72 PPI 的世界。

PPI 表示每英寸像素数，DPI 表示每英寸点数（尽管在数字印刷中，您将使用 300 PPI 工作）。公平地说，如今的数字印刷不再真正需要 300 DPI，但这仍然是一个有效的观点。而且，需要说明的是，许多电脑屏幕的 PPI 都高于 72，但您仍然可能在 Photoshop 中以 72 PPI 工作。印刷设计师可能会喜欢来到一个可以在 Photoshop 中始终以 100% 工作的世界。您在 Photoshop 中看到的内容就是您在浏览器中看到的内容。文件尺寸更小，因此 Photoshop 的响应速度更快。您下载的剪贴画也便宜得多！

两者都可能令人沮丧。

一旦你习惯了在其中一个或另一个中工作，你肯定会发现另一个中某些事情令人沮丧。为什么我不能在 InDesign 中的字符样式中设置背景颜色、填充和圆角？气死我了！为什么在网页上制作全尺寸背景图像如此困难？气死我了！

基础知识是一样的。

线条、形状、颜色、平衡、纹理、对比、流动、可供性、格式塔……最终是什么造就了一个优秀的网页设计师，也正是最终是什么造就了一个优秀的平面设计师：基础知识。你只需要知道什么看起来好，什么看起来不好，并有时间和耐心去做到优秀。了解你的工具有帮助，并且绝对会让你更快，但它们只是构成优秀设计师的一小部分。

我经常遇到平面设计师谈论他们想进入网页设计。很棒。两者都很酷，但网页绝对是未来的媒介。如果他们已经是优秀的平面设计师，我就知道他们在网页设计方面也会做得很好。如果他们成为平面设计师是因为它在大学里是一个容易的专业，并且只是试图学习网页设计因为他们担心失去工作，我就会担心。