首頁設計

---

---

步驟 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 專案檔案。