致有爱的设计师（前端开发者的一封信）

亲爱的设计师，

这封信已经酝酿多年。 很长一段时间以来，它的部分内容已经通过演讲和书面形式传达给了不同的设计师。

然而，我一直害怕发布它，因为担心它会牵连到我正在与之合作的当前设计师或客户。 所以在我继续之前，我想强调这不是一个具体的不满，而是一个 18 年分歧的逐项清单。

我们已经合作了将近二十年，您发送给我的每个 PSD 文件（或多或少）都存在相同的问题。 那么请原谅我试图教你工作的不雅行为。

我不打算教你图形或美学。 我不会深入研究排版、易读性或空白的使用。

相反，我想解释一下你的劳动成果如何影响我的。

我想提醒您将设计复制为像素完美的网页需要什么。 我想告诉您您的设计文件将如何用于文档，以及您创建的图像如何确定所使用的技术——直至可扩展性和性能的最基本级别。

此外，我想演示什么可以快速轻松地完成，什么会产生开销，从而拖累整个制作过程。

最重要的是，我想提醒你，你现在正在创作的图片将变成一个活生生的东西，它可以互动和回应，可以与成千上万不同的人交流，需要教他们，从他们身上学习他们以最轻松的方式。 既为它，也为他们。

文档设计

首先，我想提醒您的是，您制作的 PSD 文件不仅是供客户批准的图像来源，它们也是供开发人员使用的技术文档和源材料。 因此，请保持您的图层和组整洁、有条理并命名。

注释您的设计。 使用您使用的约定创建一个单独的文件，或者在单独的隐藏层中记录它们。

告诉我你用过哪些字体。 让我知道要使用哪些颜色、间距和上下文。 我需要知道。

如果没有针对特定功能进行设计，我还需要知道如何推断。

我想我想说的是：如果可能的话，为你正在设计的产品创建一个简短的风格指南。

为了我们双方的利益，在添加标准文本块（例如标题）时，在它们后面添加一个矩形以指示它们周围的间距。 这应该使您每次都能始终如一地放置它们。 如果这工作量太大，至少要指出文档中的哪个示例是佳能。

我无法告诉你我发现标题是用肉眼放置的频率，因此它们在视觉上适合放置它们的单个实例，但在测量时，会发现每个标题都有自己的间距。

内容块也是如此。 如果您有不同内容块的列表，请始终将它们隔开。

我将在内容设计部分告诉你更多信息，但请不要假设你的标题总是在一行中，并在文件中使用该信息。

我不断遇到这些字体大小为 22px 且行高为 92px 的标题（显然是从主页标题复制和粘贴的）。 您选择的设置是相关的，即使它们不会在视觉上更改导出的文件。

为技术而设计

这有两个方面：可以做什么以及适合媒体的内容。

虽然我们正在快速达到网站开发在技术上一切皆有可能的地步（如果没有别的，我仍然可以使用画布逐个像素地绘制出来），但其中许多解决方案还没有准备好生产。

您找到了一个示例，其中有人成功地将 WebGL 3D 与 CSS 模糊以及滤镜蒙版组合用于演示页面，但这并不意味着您可以将其用作单页面应用程序中的全窗口视差面板。

如果您真的想走在最前沿，请在提交设计以供批准之前咨询您的开发人员。 否则，很难让客户接受更少。

但是，如果您真的想测试边缘，并且想尝试一下，请私下与我联系。 我和你一样喜欢创造这样的东西。 只是不要将这些东西放入预算的生产项目中。

除了这些事情——除了测试可以做的事情的极限之外，试着对应该做的事情保持敏感和理智。

您不是图形艺术家； 你不止于此，你是一名设计师。

您不仅要设计它以某种方式看起来，还必须将其设计为以某种方式运行，以某种方式进行交流和行为。

随处可见设计师熟悉的陈词滥调：如果没有人可以坐在华丽的椅子上，这有什么用？

您必须在设计中结合加载速度、执行速度和易用性，才能使其成为设计而不是图片。

尽量只使用 HTML 和 CSS 来实现。 避免使用 Photoshop 中提供的漂亮功能。 不要使用混合！ 不要使用仿粗体和仿斜体。

除非您打算将元素作为图像，否则根本不要使用过滤器——除了最简单的阴影。

不要让我计算或选择颜色，因为您使用了混合颜色填充。 请不要使用叠加混合来伪造透明图像； 我实际上需要现场透明图像。

如果我们使用前端框架，例如 Bootstrap，这些问题中的许多问题已经解决了，所以了解它是如何完成的以及如何修改它。 不要随便设计一些不相关的东西。

如果您的设计与框架的功能不符，那么实施它就不是实施设计。 相反，我们最终选择性地覆盖了框架，因此它不会干扰我们的设计，然后从头开始实现它。 工作量增加了一倍而不是减半。

最后，不要在网站上使用超过三种字体或字体变体。 如果您需要六种不同的权重，每一种都有自己的常规和斜体变体，那么您就不再是为 Web 设计了。

交互设计

这是一个巨大的。 而这封信最初是专门为这个话题而写的。 您确实必须了解和理解用户和功能可以交互的所有方式。

让我们从最简单的事情开始：链接。

链接不只有两种状态。

在我收到的导航中，您始终提供链接和活动链接（当前页面）的设计。

在其他情况下，您通常提供基本和悬停状态。

如果你想对用户友好一点，你应该对基本、悬停和焦点状态有不同的设计（访问和活动对于 UX 来说也是不错的）。 而对于导航，一个链接和一个活动链接都具有上述所有状态。

哦，你不敢改变状态之间的链接布局（改变边框宽度、填充等）。

同样，如果它看起来不像一个按钮，它就没有背景。 时期。 填充内联文本元素是一团糟，未填充的文本背景永远不会这样做。

由于我们将在移动设备上使用它，请确保单独的交互元素之间有足够的空白，并且每个 hitbox 足够大。 我认为每个轴上至少 42px 是常态。

绘制一个不可见的矩形，或者一个显示命中框的隐藏层； 确保它们不重叠并且用户交互是明确的。

表单元素更糟糕。

我看到的最常见的情况是单选按钮和复选框。 标准的太丑了！ 所以，你设计你自己的，给我一个检查和未检查的状态，然后认为你已经完成了。

但是，复选框有一个完整的多维状态表，每个状态都应该直观地显示给用户。

我们有以下状态：

• 选中或未选中
• 悬停与否
• 专注与否
• 启用或禁用
• 错误与否

其中每一个都可以与其他组合。

禁用会阻止某些组合（禁用时悬停和焦点通常无关紧要）但不是全部（checked-disabled-error 是复选框的完全有效且信息丰富的状态）。 所以我们最终得到了 16 个启用状态和 4 个禁用状态，总共至少有 20 个不同的状态。 例如，在该设置中，您通常给我的状态是checked-not-not-enabled-not 和 unchecked-not-not-enabled-not。

其他表单元素可能没有选中-未选中状态，但可以为空或非空（显示占位符文本）。 它们还可以具有更复杂的信息状态，因此错误与否的情况可以像中性警告错误成功一样复杂。

然后，最重要的是，您应该有强制性或可选的指示符，以及标签、输入帮助和错误文本的明确定义的布局和设计。

而且，如果你真的想对用户友好，你需要 pristine-set-dirty states，表示用户从未提供过数据，或者数据已经存储，或者已经更改但尚未存储。

我要说的是：为交互性设计是困难的。 如果您想更改单选按钮的外观，请不要在两种状态下轻松地做到这一点。

关于交互性设计的最后一点：确定交互的样子。 意思是，决定你要为交互元素使用什么约定，不要在其他任何东西上使用它们。

不，您不能使用您的主要品牌颜色来指示链接，特别是如果您将使用相同的解决方案来突出重要内容！

内容设计

每个充满lipsum内容的元素的理想布局足以向客户展示图片以获得视觉风格的认可。 但内容设计既不是从那里开始也不是在那里结束。

一旦您大致了解要对内容布局做什么，请记住您正在使用动态内容。 对于每条内容，您必须检查两种情况：

• 如果它太多了怎么办？
• 如果它太少（或完全丢失）怎么办？

检查如果标题短得离谱或长得离谱会发生什么。 如果缺少关键元素，内容块应该是什么样子？ 如果没有图片怎么办？

如果页面部分没有内容，我们是删除整个部分 - 标题、容器和所有部分 - 还是保留该部分，并显示类似以下内容的内容：“还没有文章，稍后再回来查看？” 更好的是：“您希望在此内容到达时收到通知吗？ 注册我们的通讯！”

做出决定！ 然后设计那些东西！

如果您正在设计从外部或动态源加载的提要或内容，请不要忘记包含所有错误和通知。 事实上，设计页面通知元内容以显示它在全局范围内的样子，然后坚持这些设计约定以在出现问题时通知用户。

避免使用固定宽度的按钮和固定高度的文本块。 而且，如果我之前没有说过，如果你认为它总是只有一行文字，那你就错了！ 现在，去检查使它成为多行的最佳方法。

确保相同的内容具有相同的结构。

如果在多个地方都可以看到相同的标题，请不要在一种情况下加粗一个词，而在其他地方加粗另一个词！

事实上，尽量避免在标题中完全格式化结构。 同样，不要在一个地方手动打断文本，而是在另一个地方以不同的方式打断它。 事实上，不要手动中断文本！

这些东西可能会使您的设计更好，但请记住，内容很可能是通过 CMS 输入的，输入内容的人可能在发布之前看不到它的样子，或者甚至可能没有手动破解的工具，或者格式化文本。

设计具有与最终内容相同的限制——固定宽度的文本容器和自动换行。 如果这样看起来很难看，那么设计就不好。

响应式设计

最近这方面取得了很大进展。 至少在实际设计移动设备的情况下。 越来越多，我们让引导程序弄清楚，并在裂缝上贴创可贴。

无论如何，您必须了解一些简单的原则。

首先，移动版和桌面版不是单独的页面。 我知道你知道这一点。 它们只是同一页面的重排。

简而言之，它与使用左对齐文本相同。 句子不会因为你把它放在一个较小的容器中而改变单词或字母的顺序。

此外，内容组应该在所有布局之间共享。 添加列时，请确保分栏符是一致的。

此外，对于不同版本的页面，您的约定应该遵循相同的结构。 这意味着，如果两个元素在桌面上看起来相同，那么它们在移动设备上也应该相同。

哦，如果你想要视差，请提供一张大到可以移动的图片。 如果您适合，或裁剪图片使其在您向客户展示的文件上看起来正确，那么我没有什么可移动的。

设计异常

当然，例外总是可能的。 此外，它们对于产品看起来有吸引力和有效是必要的。 但是，不要在第一次逐个传递时添加它们。

如果您发现自己一遍又一遍地解决相同的设计问题，这是行不通的，特别是如果您在每个实例中都寻求不同的解决方案。

一旦你完成了上述所有工作，你应该得到一个高效、稳定和一致（如果有点乏味）的设计。 现在是为事情增添趣味的时候了。 将整个页面视为一个整体，与客户交谈以找出最赚钱的项目——这些项目将为他们带来最大的收益。

我们已经合作多年，我们的客户一直对最终结果感到满意。

当然，如果你错过了其中的几点，我会加入，当使用复杂的设计是合理的时，如果需要，我会用 JavaScript 编写渲染逻辑。

如有必要，我会介入并向客户证明额外工作的合理性。 哎呀，多年来我一直在设计表单和交互性，所以这不是问题。

我只是希望，读完这篇文章后，下次我们一起工作时，你会记住其中的一些提示。 我希望他们会在您不知道该怎么做时为您的工作提供信息并提供指导。 我想让你明白我们的关系对我很重要，我写这篇文章不是为了伤害你，而是为了让我们的关系更好。

有爱，

您的前端开发人员