如何在 WordPress 内部进行线框设计：介绍 Kadence 线框模块！

已发表: 2021-08-20

在为新页面设计线框图时，如果您想完成任务，通常必须使用单独的工具或应用程序（甚至可能是老式的素描本！）。但是，如果您可以直接从块编辑器中使用 WordPress 进行线框设计，而无需关闭浏览器呢？

WordPress 内的线框图开辟了许多可能性，同时为您节省了大量时间。

与其猜测设计是否可以轻松开发或想知道如何实际实现页面布局，您可以在实际的 WordPress 页面中开始设计的基础。
您的线框将位于 WordPress 中，而不是使用单独的工具然后传输线框模型，从而为您节省了额外的步骤。
您可以轻松地在客户现有站点内或在 WordPress 临时站点上为客户提供线框预览，而无需使用单独类型的文件使流程复杂化。

在本指南中，我们将介绍什么是线框图、网站线框图如何加快您的网页设计工作流程，以及如何快速开始使用新的 Kadence Blocks 线框图集合（完全免费！）我们将首先展示您将了解线框的构成并解释线框如何融入整个网页设计过程。您还将了解线框应包含哪些功能。让我们潜入吧！

第一件事：什么是线框图？

如果您涉足用户体验设计的复杂世界，那么您可能至少听说过“线框图”这个词。但究竟什么是线框，为什么它们是网站用户体验设计过程中如此重要的一部分？

简而言之，线框与建筑师使用的蓝图并没有什么不同。线框是网页或应用程序的二维轮廓，设计师将使用它来构建最终产品。

线框的目的是让设计师对网站的以下内容有一个明显的概述：

布局
结构
用户流程
预期行为
信息架构
功能

线框几乎总是代表设计项目的初始概念。因此，图形、颜色和样式等内容都保持在最低限度。

在某些情况下，甚至可以在一张纸上用手勾勒出线框。其他线框是在数字领域中创建的。这实际上取决于特定线框中所需的细节。它还取决于网页或应用程序的最终设计将包含多少细节。换句话说，网页越详细，线框就需要越详细。

UX 设计团队最常使用线框图的做法。完成该过程将使所有相关方（利益相关者）在项目移交给开发人员进行构建之前就信息在页面上的位置达成一致。

在将网页设计项目移交给开发人员之前对其进行线框化，通常可以省去很多麻烦。这是因为项目的初始蓝图（线框）可以（并且应该）始终是最终结果应该是什么样子的第一个参考点。

线框图如何加速网页设计

线框图最好的事情之一是能够加快设计过程。以下是线框图如何加快网页设计过程的快速浏览。

1. 整理好大创意

使用线框，您只处理初始概念，而不是完成项目附带的所有细节和批量。换句话说，您可以在迷失在设计的小细节中之前获得重要的事情。拥有正确的大创意可以让您通过首先拥有线框元素然后添加真实内容而无需重新开始来加快流程。

2. 轻松调整

线框图的使用可帮助您将您的想法组织到屏幕上，然后您可以随时轻松地进行修改。您可以轻松调整您拥有的内容和拥有的位置。

3. 客户输入的空间

线框图是网站设计的蓝图版本——您的设计的黑白二维表示。您将能够看到您的设计并衡量该设计的功能。在一切都被锁定之前，客户可以添加他们的想法。在实际建造建筑物之前移动建筑物要容易得多。

您需要处理的元素越少，您就能越快地将鸭子连成一排。

警告：混合隐喻很像尝试使用所有元素来设计您的网站。线框图将其全部剥离为最简单的形式。

介绍 Kadence Blocks 线框集合

免费的 Kadence Blocks 插件包括一个全新的预构建块或元素集合，称为 W ireframes 。这些干净的部分旨在帮助您构建和规划您的网站，而不会被设计细节所困扰，这样您就可以专注于方式。使用 Kadence Blocks，您不需要单独的工具或应用程序来对新页面设计进行线框设计——您可以直接从原生 WordPress 块编辑器在WordPress内部进行线框设计。

如果您不熟悉网页设计过程的线框图阶段，我们希望您能很快看到它在涉及新设计或现有内容修订时可以加快工作流程的方式。

下载 Kadence Blocks 插件，免费！

什么是线框块？

那么究竟什么是线框块？很高兴你问了！

来自 Kadence Blocks 的线框图块是一组新的 WordPress 块，可为您提供预先构建的、干净的部分，以帮助您构建站点……就在本机 WordPress 块编辑器中。

假设您需要为客户模拟一个新的页面设计。无需使用单独的应用程序或使用单独的工具绘制设计草图，现在您可以直接在 WordPress 内提供线框模型。

或者，您可能想在页面中添加常见问题解答部分。无需创建行布局并使用不同的块来确定如何最好地设置它，您只需直接从“线框块”选项卡中导入常见问题解答线框即可。

通过这种方式，您可以构建并专注于优化您的内容，将结构留给预先构建的线框元素库。

用于构建 WordPress 页面设计的 50 多个线框块

假设免费的 Kadence Wireframe Blocks 库是强大的。您可以使用 50 多个线框块，每周都会添加更多。

您甚至可以按类别过滤线框块，让您的搜索更加轻松。

查看您可以在 Kadence Blocks 设计库中使用的所有不同线框模块：

内容线框块– 使用这组线框块来布置站点内容丰富的区域，例如常见问题解答部分、样式化的项目符号列表，甚至电子邮件注册。
价格表线框块– 具有最小样式的线框定价表，以更好地掌握定价选项
页脚线框块- 这些线框块可以轻松规划您网站的页脚区域
卡片线框块– 将这些线框块用于站点的简单“卡片”部分。
推荐线框块- 不要忘记您的客户不得不说的所有好话！这些有用的块有助于页面上的线框推荐部分。
倒计时线框块– 倒计时有助于提高紧迫感，但当您第一次开始使用新设计时，所有样式选项都可能变得难以驾驭。这些块为线框倒数计时器提供了几个选项。
投资组合线框块——这些线框块为投资组合提供了一个起点。
表单线框块——表单是另一种可以提供大量设计选项的元素，因此这些简单的表单块为您在线框设计时提供了几个基本的起点。
定价表（深色） – 如果您正在寻找三层薪酬计划选项，那么此定价表线框非常适合帮助您建设。
定价表（浅色） – 此定价线框还将为您提供三种付款方式，但顶部的背景颜色为白色。您有一个地方可以为每个计划上传自定义图像，而不是图标。
内容布局- 此内容线框元素提供两列和一个位置，用于放置图像和标题。此块可能有助于突出产品功能、价值主张、团队信息等。
带有特色内容框的内容布局- 此内容线框还提供两列，但在左侧有一个框（类似于侧边栏）。一个盒子会吸引眼球并引起您对您选择放置在其中的文字或设计元素的注意。
内容（不同的对齐方式） ——另一个很棒的内容线框，它允许以不同的对齐方式呈现您所呈现的内容的编号方法。它还包括图像帧。内容的分解有助于保持读者的注意力。
页脚– 页脚是添加法律要求、其他社交按钮和其他联系信息的好方法。这个线框提供了所有这些以及一个标志。
画廊– 此画廊线框提供了一种简单的方式，您可以共享多个图像。它非常适合回顾活动、分享新产品或突出新产品线。
网格（卡片） ——网格允许您以易于扫描的格式将信息放在一起。您可以使用此线框来展示您的服务、产品或程序的基础知识。
网格（与图标的高对比度） ——另一个很棒的网格选项，带有不同的色块，可以让信息更加突出。
网格（浅色） – 此网格提供空间来添加有关您正在共享的元素的附加信息。此线框为您的读者提供了一个正式的模块，非常适合律师、教育组织和健康行业。
网格（深色背景） ——这是展示包含多个元素的产品或服务的完美网格。带有按钮和图像的大块可用于定向到登录页面，而较小的块提供有关三个主要组件的更多信息。
带引用的内容部分- 当您为博客文章撰写内容时，将某些信息分开会很有帮助。该线框提供两列，均匀分布，一侧是醒目的大字体。
带有拉式引用的内容部分——另一个包含两列的内容线框，但具有用于引用或突出显示信息的阴影块。
内容部分（居中引用） ——另一种突出引用或特色内容的方法是在内容本身中使用一个块。当您想引起对内容最重要部分的注意时，此线框效果最佳。
内容注释（深色背景） – 此线框块非常适合定义内容元素或为读者分享信息的花絮。
内容注释（浅色背景） – 您是否要添加与内容正文不一定相关的信息？此笔记线框可用于向读者提供标注，分享内容之外的随机信息，或提供尖刻的智慧话语。
目录（左） – 目录可让您的读者查看内容的重点，而无需扫描整个文档。此线框将 TOC 放置在内容的一侧。
目录（内联） - 此线框将目录置于内容的顶部，并将内容分解为主要副标题之外的内容。
简单卡片——另一种突出信息的方法是使用简单卡片。此线框为您提供了自定义图标和信息的块。
简单卡片（3 列） – 另一张简单卡片，可让您突出显示点、产品或分层信息。
更多！ 我们的计划是提供总共 50 个有用的线框块，请继续关注添加更多！