首页设计

---

---

步骤 1 - 打开电脑上安装的 Balsamiq Mockups。在 UI 库的“快速添加”控件中，输入 – 浏览器。

步骤 2 - 选择浏览器后，该控件将出现在线框区域中。单击切换按钮检查器，可在右侧面板中查看 UI 控件的详细信息。

在检查器部分，将X 位置和Y 位置文本框都输入 0（零）。这将使浏览器控件位于线框空间的角落，以便更好地查看。

在大小文本框中，将宽度输入 1024，将高度输入 768。

使用 UI 库部分上方的缩放选项，将缩放级别设置为“适应窗口”，浏览器窗口将跨越整个线框空间。

设置完所有上述参数后，您将看到以下屏幕。

步骤 3 - 在线框中地址栏下方的空白处，让我们创建网站的页眉。

首先，让我们创建一个徽标。在线框图中，表示屏幕控件的位置通常就足够了。例如，我们将使用“图像”控件并将其命名为“徽标”。在快速添加框中，输入“图像”。“图像”控件将高亮显示。选择它将其放置在线框区域中。

在右侧的属性对话框中，输入大小 – 宽度 139 和高度 93。将图像在X 轴上的位置设置为 16，在Y 轴上的位置设置为 94。

完成后，我们将能够看到如下所示的线框空间。

步骤 4 - 在图像下方，为了让查看者更好地理解，从 UI 库中插入一个标签；将其命名为“公司徽标”。在右侧的属性选项卡中，将标签大小设置为 15。

完成此步骤后，您应该能够看到如下所示的图像和文本。

步骤 5 - 现在让我们插入公司标题，使用相对较大的字体。在 UI 库的快速添加框中，输入“标题”。屏幕上将显示带有文本“大标题”的标题。双击文本以重命名它。输入文本“您的公司名称”。

在本教程中，提供了X 轴和Y 轴上的精确位置。您可以根据需要拖动文本到相应位置。

在右侧的属性部分，将位置下的X 值更新为 626，将Y 值更新为 107。

我们将看到页眉形状如下所示。

步骤 6 - 在徽标文本和标题下方添加一个水平分隔线，以将页眉与页面主体内容分开。

在快速添加框中，输入“rule”。它将显示H.Rule 和V.Rule。它们代表水平规则和垂直规则。选择H.Rule，并通过鼠标拖动将规则插入标题和徽标文本下方。使用规则上的句柄，您可以增加/减小规则的大小。

放大一级以查看插入的水平规则。将其放置在如下所示的屏幕位置。

步骤 7 - 同样，使用 UI 控件 - 文本块和标题插入“产品”和“服务”部分。使用水平规则来分隔该部分。您应该能够看到如下所示的线框空间。

步骤 8 - 使用与上述相同的 UI 控件添加“公司愿景”部分。

步骤 9 - 在此页面上添加链接栏以进行导航。如今，使用链接栏进行更轻松的导航是一种常见做法。使用快速添加框插入链接栏。通过双击页面上插入的选项卡栏来更新值。添加逗号分隔的值以用于不同的页面链接。将链接栏放置在如下所示的位置。

这完成了主页线框图的设计。我们已经看到添加 UI 控件并开始网站 UI 布局是多么容易和简单。

通过转到项目菜单→保存项目来保存 Balsamiq 项目文件。