作为一名日常使用 WordPress 构建网站和主题的设计师，我很快意识到精心设计的区块模式的重要性。它们是实现无缝用户体验的支柱。通过反复试验，我总结了一些关于什么构成一个好的模式，以及如何确保每个模式都能无缝集成到任何 WordPress 主题中，在保持一致性的同时提供适应性的见解。让我与大家分享一些我在此过程中学到的宝贵经验。

结构

在模式的结构方面有一定的灵活性，但通常像下面这样的结构有助于鼓励模式应用的一致性，方便用户将模式应用到网站的任意位置：

1. 一个顶层的 Group 块。
   1. 横跨页面的整个宽度。
   2. 便于更改整个页面区域的背景颜色。
   3. 便于重新排序页面的各个部分，因为每个模式都包含在一个 Group 块内。
   4. 通常将其左右内边距值映射到网站的全局样式布局设置，以便模式适应主题（以及用户的偏好）。
2. 一个直接嵌套在顶层块内的容器块（Group、Columns 等）。
   1. 设置为主题的“wide”宽度值（theme.json 中的 settings.layout.wideSize），允许模式内容具有主题定义的最大宽度。
3. 两个 Spacer 块，位于容器块的上下方。
   1. 允许用户选择和操作模式之间的间距，而无需查找块的相关内边距控件。

优化模式结构的几个技巧：

• 通过避免过多的块嵌套，使模式尽可能简单。
• 自由使用 Columns 和 Group 块——及其 Row、Stack 和 Grid 变体——进行布局。
• 考虑为模式内的块命名。目前可以为群组、行或堆栈等块命名。您可以选择根据其内容或功能命名不同的部分，例如“标题区域”或“图像区域”，而不是仅仅叫“群组”。这可以帮助用户理解模式，并更容易地浏览其结构。要重命名一个块，您可以使用列表视图并单击要重命名的块，或者在检查器 > 高级中查看块名字段。
• 确保您已考虑到模式的移动端行为。例如，如果使用 Columns 块，您可以添加额外的垂直块间距，以便在移动端重新排列时，块之间有更多的呼吸空间。
• Cover 块非常适合在媒体上方放置内容。
• 确保模式末尾没有附加空段落。

样式

颜色

在设计模式时——特别是那些旨在与站点无关的模式——颜色几乎不应该直接应用于模式内的块。

与站点无关的模式旨在从任何站点的活动 WordPress 主题继承样式，而不是渲染任意的“硬编码”颜色值。这样做的结果是，当这些模式添加到站点时，它们具有更清晰的归属感。

排版

在排版设计选择方面有更多的灵活性。虽然不应将字体族应用于特定的块（因为字体很可能并未安装在每个站点上），但您可以使用编辑器中的任何其他排版控件（行高、字间距等）来添加特色。

通常，最好使用字体大小预设值——而不是任意值——但在某些情况下，固定一个尺寸可能是合适的。

内容

模式的内容是指其中使用的文本、图像或视频。

1. 使其感觉真实，避免使用占位文本。确保图像和文本配合良好，构成连贯的内容。
2. 名称应具有描述性且足够精确，以区分模式，同时避免可能令人困惑的术语。好的例子是“带图像和 CTA 的 Hero 区域 – 右侧”或“带图标的三列区域”。不要在模式名称中包含站点/主题名称，并使用句子大小写。
3. 通常要注意文本中的孤行和寡行。
4. 避免过于人工化、感觉像库存素材的媒体。相反，选择更具情感共鸣和真实感的图像、视频和音频。
5. 所有媒体都需要是CC0许可或属于公共领域。Unsplash 和 Pexels 不是可行的选择，因为它们使用的专有许可证与GPL不兼容。最好仔细检查您计划使用的任何资源的许可证，以确保它们仍然适用。这些资源的好来源包括：
   • Openverse
   • Stocksnap
   • PxHere
   • Smithsonian Open Access
   • Foodies Feed
   • Nappy
   • Flickr Commons
   • RawPixel – Public Domain
   • Skitterphoto
   • MyStockPhotos
   • AI 工具：Midjourney, Dall-E

6. 图像尺寸不应超过 350kb，最大尺寸为 2000px（宽度或高度，取较大者）。考虑使用性能友好的格式，例如WebP 或 AVIF。
7. 优化图像。对于 Mac，我推荐ImageOptim。如果需要，启用有损压缩；JPEG 的 80% 质量应该没问题。对于 Windows，您可以尝试ImageMagick或浏览其他替代方案。
8. 图像需要添加到模式源站点的媒体库中。
9. 为您添加到模式中的图像添加替代文本。屏幕阅读器会读取它来代替图像，使无法看到图像的人也能访问。请参阅如何编写好的替代文本。

下面是一个浓缩的速查表，突出了好的模式和不太好的模式之间的关键差异。

两个“行动号召”模式，左边的模式文案撰写良好，文本颜色对比度足够，信息浓缩，CTA 按钮颜色引人注目，图像高质量、全宽。右边的模式文案有拼写错误，图像和文本之间颜色对比度不足，元素间距过大，图像低分辨率、带水印，宽度尴尬。

一个好的模式：

✔ 感觉真实。
✔ 是连贯的内容。
✔ 图像/媒体已优化。
✔ 名称具有描述性且足够精确。
✔ 简单，没有过多的块嵌套。
✔ 在所有屏幕尺寸下都好看。
✔ 尊重许可限制。
✔ 几乎可用于每个网站/主题。
✨ 视觉上吸引人。

一个不太好的模式：

✖️ 感觉虚假或人工化（例如，像库存素材、AI）。
✖️ 随机、不连贯、不精致。
✖️ 图像未优化。
✖️ 名称模糊（例如，“Newsletter”）。
✖️ 使用过多的块嵌套。
✖️ 并非在所有屏幕尺寸下都好看。
✖️ 使用有许可限制的媒体。
✖️ 与其他模式/主题配合不佳。
😬 视觉上尴尬。

我们的目标是找到一条界线，在这个界线上，您可以使用系统化的方法创建富有表现力、创造性的模式，使设计能够相互协调，并与主题的设计语言和谐共存。