- Balsamiq 模型教程
- Balsamiq 模型 - 主頁
- 線框圖基礎知識
- Balsamiq 模型 - 簡介
- Balsamiq 模型 - 第一個專案
- 線框圖在操作中
- Balsamiq 模型 - 導航
- 匯出模型
- Balsamiq 模型資源
- Balsamiq 模型 - 快速指南
- Balsamiq 模型 - 資源
- Balsamiq 模型 - 討論
設計關於我們頁面
步驟 1 − 首先,右鍵單擊左側“模型”部分中的“產品和服務”。選擇“複製”。將建立一個當前頁面的精確副本,它將被命名為“產品和服務副本”。將此頁面重新命名為“關於我們”。
現在我們建立關於我們的頁面元素。首先,從“連結欄”中突出顯示“關於我們”連結。為此,選擇連結欄,然後在右側的“屬性”部分中,在選擇項下,選擇“產品”。
我們刪除不需要的 UI 控制元件。刪除“產品和服務”標籤、文字塊、水平規則線。此外,刪除“案例研究標籤”,然後刪除四個影像及其標籤。你將能夠看到以下螢幕。
步驟 2 − 現在讓我們插入大標題“關於我們”和一個“文字塊”。
步驟 3 − 對於“關於我們”,公司網站通常會介紹其團隊成員。讓我們使用 UI 元素 - 使用者來顯示它。首先,建立一個名為“我們的團隊”的標籤。然後,在快速新增框中,鍵入“使用者”。從顯示的選項中,選擇“使用者圓形”。
步驟 4 − 當我們插入圖示時,在右側的“屬性”窗格中,我們將能夠看到“圖示大小”的選項。有關詳細資訊,請參見以下螢幕截圖。從大小中選擇“XL”。
步驟 5 − 將它們對齊,如下面的螢幕所示。
在這裡,我們完成了“關於我們”頁面。如果你知道所有控制元件以及如何將它們放在螢幕上,它相對容易。
balsamiq_mockups_wireframing_in_action.htm
廣告