如何画线框（即使你不会画）

即使是绘图能力有限的人，如果他们学习了一些用于表示各种设计元素的常用约定，也可以学习绘制线框图。

线框可视化用户路径或流程，以及页面布局、信息层次结构，甚至交互。根据它们的目的，它们的保真度会有所不同——从快速草图到最终设计的详细表示。

分步草图指南

有一些常见的组件在线框中一次又一次地使用。如果您知道如何绘制这些基本部分的草图，您就可以专注于使您的想法正确，而不是如何绘制。这是一个分步指南，可让您快速绘制草图。

第 1 步：确定您的浏览器窗口或设备纵横比。

这个比例不必很精确，特别是如果您是手绘草图。对于更高保真度的线框，以下是一些起始尺寸：

对于 web 线框，一些常见的断点大小是 1024x768 像素和 1920x1080 像素。  

对于移动设备，尺寸范围将基于特定设备（例如平板电脑、各种尺寸的手机）。首先找出您应该针对哪种设备进行优化。

第二步：绘制导航和搜索。

导航和搜索为线框添加上下文。如果您正在遵循现有的设计或模板，请绘制已经存在的框架 - 例如，如果您知道所有页面都有导航栏，则在页面顶部放置一个导航栏。

如果您是从头开始，请考虑哪种类型的导航可能有效。（请记住，您不需要第一次就做对。）通过在页面上的相应位置绘制一个矩形来指示导航栏（无论是水平还是垂直）。如果您使用的是隐藏导航，请根据您的关注点将其展开或不显示。如果您想显示您在特定导航链接上，请在该链接周围加下划线或加框。

搜索功能可以通过搜索图标和关联的搜索框来表示，如下例所示。如果需要，您可以在搜索框下方的矩形中显示搜索建议。

第 3 步：识别并绘制设计中最大的元素。

接下来，专注于绘制您想法的主要部分——例如，标题、大横幅和图像，甚至是正文的大部分内容。以下是一些常见的线框图约定：

标题使用较粗的线条表示。

正文使用细线勾画。

图像表示为一个矩形，其中一个 x 穿过它。

第 4 步：填写其余详细信息。 

通常，这些细节是与选择相关的小组件，如按钮、下拉菜单、复选框或比例按钮，但也可以包括文本字段或正文副本的任何剩余单行。如果您要对作为流程一部分的多个屏幕进行线框化，您可能还会有进度条和对话框。不要忘记添加号召性用语或显示选择，因为这些细节有助于其他人了解您的设计理念。

下拉菜单由一个矩形和一个插入符号组成。

复选框和单选按钮分别有一个正方形或圆形，还有一条线来表示文本。要显示选择，复选框应该有一个检查和单选按钮将被填写。

按钮可以用多种不同的方式表示。通常，最好使用带有线条或箭头的基本矩形来表示它将用户带到其他地方。但是，对于号召性用语，还应包括一个文本标签，以便向查看您的线框的其他人提供关键细节。

横幅有一行或两行文本，带有可选的相关按钮或取消图标。

对话框包含一个标题、1-2 行文本、1-2 个按钮和一个取消图标。

进度指示器是部分填充的圆角矩形，以说明剩余的等待时间。

图标可以以与图像相同的方式表示（带有 X）或粗线艺术（就像我们在这里展示的搜索图标）。尽管我们建议在最终 UI 中为图标使用文本标签，但可以跳过线框中图标占位符的标签。

示例：绘制产品详细信息页面

我们在下面说明了这些步骤如何为产品详细信息页面生成一个简单的线框。

第 1 步：由于我们的设计是为桌面网页设计的，因此我们从一个大小与普通浏览器窗口对应的空白画布开始。 

第 2 步：我们添加一个顶部导航栏并搜索到我们的线框。

第 3 步：绘制设计中最大的元素。由于线框代表产品页面，因此在此阶段我们专注于显示与产品相关的信息，例如名称、描述和图像。

第 4 步：添加其他详细信息，例如选择选项的下拉框和将产品添加到购物车的按钮。

结论

任何人，无论他们的绘画能力如何，都可以绘制线框图来探索设计问题的可能解决方案。循序渐进，使用通用组件来创建快速、凌乱但有用的线框图。