如何在软件设计中创建线框？

如果 UX 设计师或开发人员没有清楚地了解系统的整个布局和功能，那么为 UX 设计师或开发人员设计网站并不是一件容易的事。在构建软件时，客户可以定期请求更改网页上的各处内容，这对任何开发人员或设计人员来说都是令人沮丧的。

大公司如何解决这些问题？

答案是 线框图

在大公司中，大多数开发人员和设计师都遵循线框图的概念。线框图让您了解网页的整体结构以及导航如何在这些页面中流动以供用户执行特定任务。某个组件或元素需要放置在哪里？需要放置图像、视频、导航栏、按钮和其他元素的位置。您也可以将其称为网站的骨架。

在大公司中，开发人员首先创建一个线框，然后再进行实际的编码部分。线框图不仅可以节省大量时间和金钱，还可以消除 UX 设计师和利益相关者之间所有与设计相关的混淆。线框图的主要目标是您如何规划网站的工作流程。

线框图对于 UX 设计师/开发人员和利益相关者来说就像一个活生生的文档。如果线框的概念对您来说是新的，那么请阅读 UX 设计中的博客线框：优点、类型和创建它的方法以了解基本概念。

在这个博客中，我们将以一个网站为例，我们将学习为这个网站创建一个线框。在此之前，请阅读博客在软件设计中创建线框的 5 个简单步骤，以了解创建线框的一些基本步骤。

对理论概念感到厌烦？？？

让我们深入了解一些实际细节，并了解创建线框的分步过程。

您不必成为图形设计师即可创建线框。您可以使用笔和纸或使用一些在线工具轻松创建它。

第 1 步：规划站点地图

开始使用站点地图规划创建线框。站点地图为您的整个网站指明了方向，以便您知道要构建哪些页面以及它们将如何连接。从主页开始，这是每个站点地图或网站最常见的页面。其他所有页面都从主页流出，因此您应该始终从这里开始创建线框。

除了主页之外，站点地图还包含一些其他页面，例如关于我们、功能、联系我们等。这些页面是您网站的核心，它表示您要路由到的网站的主屏幕。这些页面下面也有子页面。站点地图为您提供了网站的基本布局。主要项目需要存在于何处，以及这些项目需要如何相互关联。

小型站点不需要站点地图，因为它们通常只有一个登录页面。但是，当您开始构建一个小型站点时，一旦您开始在其中实现其他页面或功能，它就会变得更大和更复杂。

假设在我们的网站上有主页、功能页面和联系我们页面三个页面。现在在站点地图中展示这一点。只需添加几个框并命名它们以显示页面，下方的线条显示子页面，您就完成了第一步。你不需要花太多时间在上面。

第 2 步：创建主页线框

完成创建站点地图后，移至第一页，即主页。主页将有两个最重要的部分。一个是带有导航和菜单的页眉，另一个是页脚。这两件事都将存在于大多数其他页面上。

为主页创建布局。如果你想在设计中选择 bootstrap（或其他一些框架），那么你需要将 12 列分成几个部分来创建一个布局并将项目放置在其中。

您也可以选择自己的布局。在主页上，我们将表示滑块图像、徽标和主菜单。用一些特定的形状或简单的图形来表示每个项目。

1. 创建一个带有文本“L”的圆圈来表示徽标。
2. 对于菜单，在一个带有阴影的大矩形框中绘制几个框来表示当前页面（对于其他部分，例如关于我们，联系我们或功能，这将有所不同。目前，主页部分将被阴影)
3. 用一个大矩形框和两条交叉对角线表示英雄图像。英雄形象在网站前面以及标题附近运行。在框的左右角画一个左右箭头，代表图片的滑动。
4. 要表示号召性用语，您可以绘制一个带有十字的矩形。
5. 要表示某些信息或段落，您可以使用多条水平线，一条在一条下方。
6. 如果你想在主页的其他部分展示图像，那么再次创建一个带有两条对角线的框，相互交叉。
7. 您可以在主页上添加更多部分，例如推荐或赞助商（这完全取决于您，您想在主页上展示什么信息）。您可以绘制多个框来表示它们。同样，您可以使用引导网格布局来划分这些框。
8. 使用页脚部分完成主页。包括常见元素，例如徽标、联系表格、联系信息、社交媒体链接以及您想要代表的其他页面。
9. 标记线框中的每个部分以表示它是什么。

注意：我们将复制并粘贴一些部分的布局，例如页眉、页脚、徽标和菜单，以包含在其他页面中，例如功能、联系我们等。这样您就可以轻松快速地创建其他页面。如果您使用一些在线工具（例如 Figma 或 Adobe XD）以数字方式进行操作，则创建资产组件并在整个设计过程中重复使用它们。这些工具还可以帮助您动态更新部件，以防您在根组件中进行更改。如果您使用笔和纸，那么您可以手动完成。

第 3 步：在线框中使用标记（这适用于所有页面）

完成页面布局的创建后，转到下一步并标记页面部分中的每个项目以表示它是什么。您的线框将被许多设计师、开发人员和客户查看。如果您不标记其中的元素，他们将不会理解任何内容，尤其是您的客户，如果他/她不了解技术方面的内容。

当您完成页面布局的创建后，您可以在最后执行此操作。选择一种颜色（例如红色）并开始标记页面上的内容，例如联系表格、标题、联系信息、图像、功能、徽标赞助商、版权等。

您不必详细解释每个部分正在做什么或项目最终会是什么。只是代表它是什么。因此，不要使用“联系表格示例”标签，而是使用“联系表格”标签。

第 4 步：创建功能和联系页面

功能和联系页面的布局与主页略有不同。功能页面将推广您的产品或您网站的服务。在此页面上，我们将包含号召性用语、照片和文字来代表不同的产品/功能。这将有助于吸引客户。在联系页面上，我们将提供电话号码、电子邮件地址、地址和联系表格。

功能页面

1. 从主页复制标题部分，但不要包含大图像滑块。
2. 创建一个矩形框并覆盖它以表示页面标题。
3. 在页面标题下方，创建三到四个部分来代表产品和服务。
4. 在每个部分中，创建一个带有两条交叉对角线的大框来表示产品的图像。在盒子旁边，添加一些水平线和一个小盒子来给出产品的标题和描述。
5. 在其他部分做我们在第 4 点中提到的同样的事情，但为了让它更有趣，把产品图片和它的描述放在对面。
6. 从主页复制页脚部分并将其添加到页面底部。
7. 在此页面上用红色文本标记每个功能和页面标题。

联系页面

1. 从主页复制标题部分，但不要包含大图像滑块。
2. 创建一个矩形框并覆盖它以表示页面标题。
3. 在页面下方，标题创建一个部分，并在其右侧创建一个带有两条交叉对角线的大框。这将代表谷歌地图（地址）。
4. 创建一个小图标和一个小矩形框来表示电话号码和电子邮件地址。
5. 对于联系表单，在 Google 地图（左侧）旁边创建一个框，并在其中包含一些不同形状和大小的小框。
6. 从主页复制页脚部分并将其添加到页面底部。
7. 在此页面上用红色文本标记每个元素。

第 5 步：创建响应式线框

今天，很多网站都是在移动设备上浏览的。所以最好为手机或平板电脑版本创建一个线框。当您为较小的屏幕尺寸开发应用程序时，您需要了解设计如何适应。

我们将在响应式线框中使用略有不同的元素。桌面版将有更多的宽度，但在移动版中，我们将减小宽度，并增加高度。让我们以主页为例，逐节为其创建响应式线框。

1. 大多数行和列将被折叠。图像、文本和块的大小将减小。
2. 在顶部创建一个部分，并在屏幕中间包含徽标。在背景中创建一个小方块来表示滑块图像。
3. 在徽标下方，为关于我们、赞助商和页脚创建各个部分。重新排列每个部分中的元素。所有元素都将以较小的尺寸表示。
4. 在此页面上用红色文本标记每个元素。

注意：某些部分的高度与其各自的桌面版本相同。但是如果一个部分有很多图像，那么它会有更多的滚动高度。

结论

如果您是开发人员或设计师，那么我们强烈建议您在进入编码部分之前为您的应用程序创建一个线框。您将为您的应用程序获得更好的想法和可视化。这将帮助您在开发的早期阶段解决客户的许多疑问和问题。