引言
在本课中，我们将探讨为何使用站点编辑器进行设计和原型制作是一个好主意。课程成果包括识别使用站点编辑器的优势、使用站点编辑器预览样式选择以及强调与网页相关的设计原则。站点编辑器是WordPress的视觉设计工具，可让您自定义从页眉和页脚到整个页面布局的所有内容。
使用站点编辑器的优势
编辑器具有以下几个优势：
- 当您掌握区块后，由于整个站点完全由区块构建，您可以轻松管理站点上的所有内容。区块取代了所有先前的方法，包括短代码、小工具、嵌入和自定义HTML，从而简化了您的内容创建过程。
- 通过在WordPress内部直接设计，您可以简化从概念到实施的流程，便于更轻松的更新和维护。这种方法还减少了设计师与开发者之间传统的交接挑战。
- 编辑器提供设计的实时交互预览，使您能够立即进行测试和优化。
- 此外，通过使用WordPress的原生工具进行设计，您可以确保与平台的兼容性，并减少通常与外部设计软件相关的学习曲线。
在站点编辑器中设计
接下来，让我们探索在站点编辑器中进行设计。开始时，请确保安装并激活一个基于区块的主题，例如Twenty Twenty-Five，然后打开站点编辑器。接着，我们可以进入样式，然后选择“缩小”选项。然后我们就可以开始样式设计了。首先，我将更新文本的排版，然后是标题。接着，我将进入颜色并更新我的调色板。我将更改背景颜色，以及对比色和强调色。一旦我更新了调色板，我会确保增强交互元素，例如按钮。所以，让我们继续选择我们的按钮区块，并将文本外观改为半粗体。
接下来，我们可以继续修改页眉和页脚模板部分。因此，我将打开我的页面模板，因为模板当然提供了页面的结构，然后我将在列表视图中选择我的页眉。然后我们有一系列模式可供选择。当您找到所需的模式后，您可以修改它以符合您的设计需求。然后继续处理您的页脚模板部分。一旦您对页眉和页脚满意，您可以自定义您的模板。例如，所有存档模板、单篇文章模板，甚至搜索结果模板。对于这个例子，让我们修改404模板，该模板在未找到页面时显示。当然，您可以完全更改此模板，但我只是要调整和修改内容的布局。一旦我们编辑了模板，我们就可以开始选择模式和部分，并根据我们的设计愿景进行修改。
提醒一下，区块优先设计意味着将您的网站分解为更小的、可重用的组件，这些组件可以混合搭配以创建多样化的布局。在第一个例子中，我们可以复制主题自带的一个模式，将其保存为同步或非同步模式，然后进入“我的模式”，并相应地修改模式或可重用组件。然后您还可以选择从头构建一个同步或非同步模式。当您返回模式时，可以点击“添加新模式”，适当命名，选择一个类别，然后选择是否同步。然后您可以构建您的模式或可重用组件。然后您会注意到此模式也出现在“我的模式”下方。
与网页相关的设计原则
最后，让我们探索一些关键的网页设计原则，这些原则将帮助指导您的旅程，也称为格式塔原则，即接近性、相似性、连续性和闭合性。
- 接近性：将相关元素分组在一起，以营造组织感和结构感。在上面的例子中，您会注意到没有使用足够的间距来将相关部分分组在一起。
- 相似性：对相关元素使用一致的样式以表明它们的联系。在这个例子中，类别之间的相似性帮助用户快速找到他们需要的内容。让我们从不同角度看待相似性。在下面的例子中，行动号召按钮使用不同的颜色来显示不同的操作，但它们相似的尺寸和形状使它们感觉相互关联。通过在您的网站上对类似功能或内容类型使用一致的样式（如颜色、形状或尺寸），您可以帮助用户快速识别并理解不同元素的用途。
- 连续性：对齐元素以创建眼睛可以跟随的自然流动。
- 闭合性：让用户的大脑完成形状或模式，减少视觉杂乱。这一原则常用于标志设计和图标中，以创建简单而令人难忘的视觉效果。如果我们看WWF的标志，您会注意到我们填补了空白以完成熊猫的图像。通过掌握站点编辑器并理解这些基本的网页设计原则，您已经具备了在WordPress内部直接创建功能网站的能力。
结论
通过掌握站点编辑器并理解这些基本的网页设计原则，您将能够轻松创建视觉上引人注目且功能强大的 WordPress 设计。