构建灵活组件的开发人员决策

原文链接：www.smashingmagazine.com/2021/09/dev…

快速总结 ↬ 前端开发人员的一项关键技能是能够将设计转化为代码。这些设计通常以静态模型的形式呈现，将浏览网站的“理想”体验可视化。

在现实世界中，内容通常与设计中呈现的整洁、完美契合的内容大不相同。除此之外，在现代网络上，用户可以选择越来越多的方式来访问我们构建的网站。

在本文中，我们将介绍对文本和媒体组件进行看似简单的设计并决定如何最好地将其转换为代码的过程，同时牢记用户和内容作者的需求。我们不会深入研究如何对其进行编码 - 而是将决定我们的开发决策的因素。我们将在每一步考虑我们需要提出的问题（包括我们自己和其他利益相关者）。

改变我们的发展心态

我们不能再只针对“最佳”内容或浏览条件进行设计和开发。相反，我们必须拥抱网络固有的灵活性和不可预测性，并构建弹性组件。静态模型无法满足所有场景，因此许多设计决策在构建时由开发人员决定。不管你喜不喜欢，如果你是一名 UI 开发人员，你就是一名设计师——即使你不认为自己是一名设计师！

我在 WordPress 专业网络代理机构Atomic Smash 工作时，我们为需要我们提供的组件提供最大灵活性的客户构建网站，同时确保网站看起来仍然很棒，无论他们投放什么内容。有时解释设计意味着要求设计师进一步阐述他们的想法（甚至重新评估它们）。其他时候，这意味着根据我们的知识和经验即时做出设计决策或提出建议。我们将研究这些方法在本案例研究中可能适用的某些情况。

设计

我们从一个简单的文本和媒体组件设计开始——这在产品登陆页面上很常见。它由左侧的图像或视频和右侧的列组成，其中包含一个标题、一段文本和一个号召性用语链接。此设计适用于（虚构的）初创公司，可帮助想要学习新技能的人找到导师。

文本和媒体组件的初始设计。（大图预览）

**注意：如果您想直接跳到代码并查看我们为此组件提供的所有可能的解决方案，您可以在此 Codepen 演示中找到它。

跳跃后更多！继续往下看↓

布局和顺序

设计者规定所有其他组件都应该翻转布局，使图像在右侧，文本列在左侧。

桌面和移动设计。（大图预览）

然而，在移动布局中，图像在所有情况下都堆叠在文本内容之上。假设我们使用 Grid 或 flexbox 构建此布局，我们可以使用flex-direction或order属性为每个第二个组件重新排序布局：

.text-and-media:nth-child(even) {
    flex-direction: row-reverse;
}

值得记住的是，虽然这些会在视觉上重新排列内容，但它不会改变 DOM 顺序。这意味着对于使用屏幕阅读器浏览网站的视力不正常的人来说，内容的顺序可能不合逻辑，从左到右跳到右到左。

就个人而言，在其中一栏唯一内容是图片的情况下，我觉得使用该order属性或多或少还可以。但是，如果我们有两列文本，例如，使用 CSS 重新排序可能会造成混乱的体验。在这些情况下，我们还有其他一些选择。我们可以：

1. 提出我们的可访问性问题，并建议将移动布局的视觉顺序更改为与桌面顺序匹配。
2. 使用 Javascript 重新排序 DOM 中的元素。

我们还需要考虑是通过选择器强制执行顺序:nth-child还是允许客户端控制顺序（例如，通过向组件添加类）。每个选项的适用性可能取决于项目。

处理不同的内容长度

在设计上，文字内容相对于图片的比例是相当令人满意的。它允许图像保持理想的纵横比。但是，如果文本比呈现的更长或更短，会发生什么？让我们先处理前者。

更长的内容

我们可以在我们选择的 CMS 中的文本字段上设置字符限制（如果我们愿意的话），但我们应该允许我们的组件中至少有一些变化。如果我们添加更长的段落，则相反的媒体栏可能会以以下几种方式之一运行：

1. 图像或视频保留在顶部，而在下方添加空间（图 1）。
2. 图像或视频居中，在顶部或底部增加空间（图 2）。
3. 缩放图像或视频的比例以匹配高度，object-fit: cover用于防止失真并确保图像填充可用空间。这意味着图像的某些部分可能会被剪裁（图 3）。

图 1.（大预览）图 2.（大预览）图 3.（大预览）

我们认为选项 3 在视觉上是最令人愉悦的，并且在大多数情况下，内容作者将能够获取适当的图像，其中少量剪辑是可以接受的。但它对视频内容提出了更多挑战，其中重要部分可能被剪辑的风险更大。我们选择了另一个选项，即创建不同的设计变体，其中视频将保持其原始纵横比，并包含在最大宽度内而不是与页面边缘对齐。

（大图预览）

内容作者可以在更适合他们的需求时选择此选项。

此外，我们选择将此选项扩展到使用图像而不是视频的情况。它为客户提供了更广泛的布局选项，而不会对设计产生不利影响。在更广泛的页面上下文中，它甚至可以被视为一种改进，当页面上使用多个这些块时，允许更有趣的页面。

较短的内容

处理较少的内容要简单一些，但仍然给我们带来了一些问题。当文本内容较短时，图像应该如何表现？它是否应该变浅，以便组件的整体高度由文本内容决定（图 4）？或者我们应该设置一个最小纵横比，以便图像不会变成信箱，还是让图像占据其自然的、固有的高度？在这种情况下，我们还需要考虑是将文本居中对齐还是顶部对齐（图 5 和 5a）。

图 4.（大预览）图 5.（大预览）图 5a。（大图预览）

航向长度

别忘了我们还需要测试不同长度的标题。在设计中，标题简短而活泼，很少环绕在第二行上。但是如果一个标题有几行长，或者内容使用了很多长词，导致文本换行不同怎么办？这在德语等语言中可能尤其成问题，例如，单词往往比英语长得多。在此布局中使用时，设计中标题字体的大小是否允许适当的行长？长词在换行时应该连字符吗？Ahmad Shadeed 的这篇文章解决了内容长度的问题，并包含了一些关于如何在 CSS 中处理它的方便提示。

是否允许内容作者在适合他们的地方完全省略标题？这使我们进入下一个考虑。

省略内容

尽可能灵活地构建这个组件意味着确保内容作者可以省略某些字段，并且仍然具有正确的设计外观和功能。客户端可能希望在野外使用此组件时省略正文、链接甚至标题，这似乎是合理的。我们需要小心地对每一种可能的内容组合进行测试，这样我们才能确信我们的组件不会在压力下崩溃。当字段内容不存在时，确保我们不会呈现空的 HTML 标签是一种很好的做法。这将帮助我们避免不可预见的布局错误。

分别测试省略正文和链接的组件。（大图预览）

我们可以在 CMS 中使用“必填”字段来限制内容作者，但也许我们可能还希望考虑客户端可能选择省略图像，或者相反，没有任何文本内容的场景？为他们提供这些选项可能会有所帮助。以下是我们在这些情况下如何选择渲染组件的示例：

（大图预览）

通过稍微缩进文本并增加正文文本的宽度，即使没有图像，我们也可以保持平衡。

多个链接

省略内容是一种情况。但是在 Atomic Smash，我们发现更多情况下，客户希望选择向组件添加多个链接。这为我们提供了另一种选择：如何布局多个链接？我们是将它们并排放置（图 8），还是垂直堆叠（图 8a）？

图 8。（大预览）图 8a。（大图预览）

我们如何处理不同长度的链接标题？一个不错的技巧是将两个链接的宽度设置为最长的最大宽度（图 9）。（本文仅介绍了这一点。）这对于垂直堆叠的按钮非常有效，而将它们水平放置则为我们提供了更多选择（图 9a）。

图 9.（大预览）图 9a。（大图预览）

我们是否需要辅助链接样式来区分它们？这些都是需要考虑的问题。

我们选择添加辅助链接样式，以帮助区分链接。（大图预览）

我们可能还需要考虑（在单个链接的情况下）链接的可点击区域实际上是否应该包含整个组件——这样用户可以点击它的任何地方来激活链接。这种选择可能取决于更广泛的背景。这在基于卡片的 UI 中当然很常见。

视频

当组件用于视频而不是静态图像时，我们可能会注意到设计省略了一些关键信息。视频播放是如何控制的？在悬停？它会在滚动时自动播放吗？是否应该有用户可见的控件？

如果视频在悬停时播放，我们必须考虑没有悬停功能的设备用户如何访问视频内容。或者，如果视频自动播放，我们应该考虑为偏好减少运动的用户阻止这种情况，他们可能患有前庭疾病（或者可能只是希望避免不和谐的动画）。我们还应该为所有用户提供一种在他们愿意时停止视频的方法。

把它放在上下文中

在 Web 设计方面如此密切关注组件的一个问题是，有时我们忘记考虑我们构建的组件将如何出现在整个网页的上下文中。我们需要考虑相同类型组件之间的间距以及散布其他组件的页面布局。

这些文本和媒体组件被设计为谨慎使用，创造出引人注目的色彩飞溅，并打破线性布局。但是使用 WordPress，内容作者可以轻松决定构建一个仅由这些组件组成的整个页面。这最终可能看起来相当乏味，而且根本不是我们希望的效果！

在构建过程中，我们决定添加一个选项来省略背景颜色。这使我们能够分解页面并使其更有趣：

由文本和媒体组件的不同变体组成的页面。（大图预览）

我们可以使用或在 CMS 中添加一个字段来强制执行模式:nth-child，以便为客户提供更多的创造性控制。

尽管这不是原始设计的一部分，但它表明设计人员和开发人员之间的开放式沟通可以帮助在更灵活和稳健的设计方面创造更好的结果。

所见即所得的文本样式

在考虑内容时，我们不仅需要考虑文本的长度，还需要考虑正文文本字段中可能允许的实际 HTML 元素。内容作者可能希望在正文中添加多个段落、锚链接、列表等。在 Atomic Smash，我们喜欢为这些区域提供 WYSIWYG（所见即所得）或富文本字段，这可以允许许多不同的元素。使用不同类型的内容和适当的样式进行测试很重要——包括测试所有使用的背景颜色是否有足够的颜色对比度。

正文中的链接样式没有通过颜色对比的 WCAG 指南——我们需要相应地修改样式。（大图预览）

包起来

我们已经触及了与构建这个看似简单的组件有关的许多不同的决定。您甚至可能会想到我们在此未涵盖的其他一些内容！通过考虑设计的各个方面以及如何在上下文中使用它，我们最终得到了更通用的东西，希望这应该会带来更快乐的客户！

有时，设计中省略的越多，开发人员需要的时间和注意力就越多。我在下面整理了一份清单，列出了在构建组件时要测试和质疑的事项，您可能会发现这些清单很有用。它也可以适用于不同的组件。

能够超越表面上的简单性，将组件分解成其组成部分，提出关键问题（甚至在进行任何开发之前），甚至考虑未来的用途，这些技能都将在构建网站时为任何开发人员提供良好的服务——并且将帮助您在需要时提供更准确的估计。良好的团队沟通和强大的协作过程对于构建弹性站点非常宝贵，但最终结果值得投资于培育这种文化。让我们将灵活性融入到我们的设计和构建过程中。

清单

要测试的东西：

1. 布局的可访问性（移动和桌面）。
2. 不同内在纵横比的图像——它们是否被适当地裁剪？
3. 更长和更短的正文（包括多个段落）。
4. 更长和更短的标题（包括各种字长）。
5. 省略（各种）标题、正文、链接和图像。
6. 多个链接（包括不同长度的链接文本）。
7. 视频内容的可访问性。
8. WYSIWYG 文本内容（包括正文中的链接、列表等）。
9. 在上下文中测试 - 包括多个组件（具有不同的内容选项），以及混合到页面布局中的