設計關於我們頁面



步驟 1 − 首先,右鍵單擊左側“模型”部分中的“產品和服務”。選擇“複製”。將建立一個當前頁面的精確副本,它將被命名為“產品和服務副本”。將此頁面重新命名為“關於我們”

現在我們建立關於我們的頁面元素。首先,從“連結欄”中突出顯示“關於我們”連結。為此,選擇連結欄,然後在右側的“屬性”部分中,在選擇項下,選擇“產品”

我們刪除不需要的 UI 控制元件。刪除“產品和服務”標籤、文字塊、水平規則線。此外,刪除“案例研究標籤”,然後刪除四個影像及其標籤。你將能夠看到以下螢幕。

Duplicate

步驟 2 − 現在讓我們插入大標題“關於我們”和一個“文字塊”

About Us

步驟 3 − 對於“關於我們”,公司網站通常會介紹其團隊成員。讓我們使用 UI 元素 - 使用者來顯示它。首先,建立一個名為“我們的團隊”的標籤。然後,在快速新增框中,鍵入“使用者”。從顯示的選項中,選擇“使用者圓形”

Our Team

步驟 4 − 當我們插入圖示時,在右側的“屬性”窗格中,我們將能夠看到“圖示大小”的選項。有關詳細資訊,請參見以下螢幕截圖。從大小中選擇“XL”

Icon Sizes

步驟 5 − 將它們對齊,如下面的螢幕所示。

Align

在這裡,我們完成了“關於我們”頁面。如果你知道所有控制元件以及如何將它們放在螢幕上,它相對容易。

balsamiq_mockups_wireframing_in_action.htm
廣告
© . All rights reserved.