使用 Balsamiq 開始使用線框圖

理想情況下，線框圖可以定義為可視化屏幕佈局的活動。 當今市場上有許多線框圖工具，但最簡單且使用最廣泛的是 Balsamiq——我們今天的主題。 但是，在此之前，讓我們先了解為什麼我們需要線框？
在軟件開發方面，了解最終產品的外觀至關重要，甚至在開發開始之前。 產品的這種初始可視化可作為所有利益相關者的指導方針，並有助於避免未來可能出現的任何歧義。
在過去，使用文本段落來引出軟件需求。

然而，這些文本塊不足以讓可視化繼續進行——因為每個閱讀需求的人都會以某種可能與其他人不同的方式對其進行可視化。 這種模棱兩可會導致很多混淆，並導致浪費時間、金錢和精力。 為了幫助這一事業，線框圖出現了。 由於它為整個開發過程帶來了便利。

在本文中，我們將幫助您理解以下問題：

• • 什麼是香脂？

• • 如何開始使用它？

• 如何導出最終的線框/模型？

什麼是香脂？

本質上，線框圖可以用筆在餐巾紙上進行。 歸根結底，這畢竟只是一個草圖。 但是，在與專業人士協作和共享時，最好切換到當今市場上存在的眾多工具之一。 Balsamiq 就是一個這樣的工具——它使用簡單，並提供了許多功能來構建有用的線框。
Balsamiq 是一款出色的工具，可滿足線框圖和協作的所有要求。 它具有一組獨特的功能，使您能夠進行快速線框圖、獲取實時反饋、合併這些反饋並改進線框圖。 這最終使整個團隊與應用程序的佈局功能保持一致。
使用 Balsamiq，與位於遠程的團隊成員協作也變得輕而易舉，因為它可以以 PNG 或 PDF 格式導出線框，從而在共享線框的同時提供靈活性。
10 種最有效的線框圖工具

開始使用 Balsamiq

Balsamiq 適用於 Windows 和 Mac OS，並可在線下載。 下載並打開該工具後，您將看到如下屏幕：

如上圖所示，Balsamiq 的用戶界面分為以下四個部分。

• • 航海家

• • 用戶界面庫

• • 督察

• 線框空間/面積

以紅色突出顯示的部分用於在部分檢查器和項目信息之間切換。 這些功能都包含在 UI 庫中，讓我們深入了解一下。

用戶界面庫

UI 庫根據不同的屏幕元素進行分類。
讓我們熟悉 Balsamiq 中可用的不同屏幕元素類別。

• • All - 單擊此按鈕將顯示 Balsamiq 提供的所有 UI 元素。 水平滾動將允許您查看或使用它們。

• • 資產- 此部分包括您可以上傳並稍後在您的線框中使用的內容。

• • Big - 這包括相當大的屏幕元素，如佔位符、瀏覽器窗口、iPhone 和 iPad。

• • Buttons - 此部分包括線框中所需的所有按鈕控件，例如 - 操作按鈕、複選框等。

• • Common - 本節包含用於表示最常見交互的形狀。

• • Containers - 它包括 Window、FieldSet、Browser 等選項。顧名思義，它包括 Window、FieldSet、瀏覽器等。

• • Forms - 此類別包含與表單相關的所有控件，例如輸入元素、單選按鈕、提交按鈕等。

• • Icons - 這包含一組可用於表示特定操作的圖標。 例如，一個軟盤圖標而不是保存按鈕等。Balsamiq 提供了大量免費圖標，可用於各種操作。

• • iOS - 這包含特定於 iOS 的 UI 控件。

• • 佈局- 當您需要表示基本頁面/功能時，佈局非常重要。 此類別包括大多數佈局，如垂直/水平選項卡、手風琴等。

• • Markup - 這用於在線框中添加對特定控件的註釋。 它還包含用於在許多場景中顯示連接性的標註。

• • 媒體- 本節中提供了所有與媒體相關的 UI 控件，有助於在線框中顯示圖像/視頻/聲音。

• • Symbols - 這是可重用組件的集合，可以減少創建通用組件的時間。

• Text - 顧名思義，它包含與文本相關的所有 UI 控件。 此類別下提供文本塊、組合框、鏈接欄等功能。

這些組件的知識加上 Balsamiq 允許您輕鬆拖放組件的事實將幫助您快速有效地創建您選擇的線框。
您已經在使用以下哪些產品管理工具？

現在，假設對於您的網站，您已經創建了這四個頁面的線框 - 主頁、產品和服務、聯繫我們和關於我們。 現在，我們需要執行另一項基本任務，讓我們的線框看起來更像一個成熟的網站，而不是草圖。 為此，我們需要鏈接我們的頁面，因為理想情況下它們會在網站中鏈接。 鏈接還可以幫助您輕鬆地在線框之間來回切換。

鏈接頁面

此步驟將幫助您的線框按順序顯示 - 就像它們在任何網站上一樣。 要實現此導航，請單擊右上角的鏈接欄。
首先，讓我們首先將主頁連接到產品和服務頁面：

• • 轉到主頁

• 點擊右上角的鏈接欄

請參閱屬性窗格

綠色突出顯示的部分顯示了您迄今為止創建的各種線框。 讓我們從鏈接主頁開始。 單擊下拉列表以查看可用模型的列表。 它將顯示如下列表：

從顯示的下拉列表中，選擇產品和服務以創建從主頁到產品和服務的鏈接。 同樣，對其他頁面重複相同的過程。
決策的藝術：對於經理、領導者和產品人員

導出線框

如果您不能以更常見的格式（如 PDF 或 PNG）將其呈現給您的客戶/最終用戶，那麼您剛剛創建的線框將毫無用處。 為此，Balsamiq 允許您輕鬆地以這些格式中的任何一種導出模型。
在此示例中，我們以 PDF 格式導出模型。 為此，單擊項目菜單，然後單擊導出為 PDF。
您將看到如下所示的屏幕：

選中復選框 - “顯示鏈接提示”。
然後，單擊導出為 PDF 。 它將顯示一個彈出窗口，您可以在其中指定要導出 PDF 的本地位置。 進度將顯示在如下進度條中。

導出完成後，會出現一個確認框。 單擊該框後，您將能夠查看 PDF 以及您設置的所有導航。
構建最小可行產品——多少才算太多？

包起來…
不可否認線框圖在當今應用程序開發領域的重要性。 它們提供了許多功能，最終減輕了您的整體工作量 - 絕對不缺少線框圖工具，但 Balsamiq 是為數不多的滿足您全方位需求的工具之一！

從世界頂級大學學習在線 MBA 課程。 獲得碩士、Executive PGP 或高級證書課程以加快您的職業生涯。