Balsamiq Mockups 快速指南

Balsamiq Mockups - 線框圖基礎

在軟體開發方面，在實際開發開始之前瞭解實際軟體的外觀非常重要。這是一項關鍵活動，因為它為軟體專案中的所有利益相關者提供了指導。

傳統上，段落文字用於描述或引出軟體需求。但是，當涉及到理解這些文字時，每個人都會有自己視覺化需求的方式。這導致軟體開發團隊之間出現混淆，最終的代價是浪費精力、金錢和時間。

線框圖可以定義為視覺化給定螢幕（移動或網頁）佈局的活動。近年來，對線框圖螢幕/頁面以衡量其可接受性提出了越來越高的要求。

為什麼要使用線框圖？

需要線框圖是為了節省理解軟體需求所花費的時間。正如人們所說，一圖勝千言，線框圖透過有效地視覺化屏幕布局和元素，提供了對任何功能/頁面需求的概覽。最終，它還有助於開發團隊朝著共同的目標前進。

線框圖活動的負責人通常是業務分析師/使用者介面設計師/互動設計師。該團隊成員需要線上框圖過程之前、之後和期間與團隊協作。

Balsamiq 作為線框圖工具

對於分配了線框圖活動的專業人員來說，使用工具來節省時間是有意義的。進行線框圖最有效的工具之一是使用簡單的鋼筆和鉛筆！這完全不需要任何投資！但是，當涉及到與團隊溝通時，我們需要一種類似於鋼筆和鉛筆的外觀和感覺，但具有其他功能，例如透過電子郵件或類似媒介共享。

Balsamiq 是一款出色的工具，滿足了線框圖、協作和創意的所有需求。其獨特的功能集使團隊成員能夠進行快速線框圖繪製，並在要開發的功能上達成共識。這最終將使團隊在佈局方面與功能保持一致。

它還支援不同團隊之間的協作，以便團隊成員可以與不同地點或遠端團隊協作。它能夠以 PDF/PNG 格式匯出線框圖，從而提供了靈活性，同時與團隊共享線框圖。

我們現在知道 Balsamiq 如何高效地建立即時線框圖。如果我們在軟體開發的早期利用這段時間來設定利益相關者的期望，那麼考慮到建立線框圖所需的最少時間，利益相關者會獲得更高的滿意度。這就是大多數產品組織使用 Balsamiq 的主要原因，在這些組織中，滿足客戶/利益相關者的關係至關重要。

對於產品經理/UX 分析師來說，Balsamiq Mockups 提供了一個平臺，可以在開發早期增加價值。透過使用其豐富的工具集，產品經理/UX 分析師可以順利地推動產品走向成功。

Balsamiq Mockups - 簡介

安裝 Balsamiq

要安裝 Balsamiq，請確保您具備以下要求。

要在您的計算機上執行 Balsamiq，需要執行 Adobe Air 2.6。它在大多數計算機和作業系統上都能正常工作。Adobe Air 2.6 的最低系統要求如下所示：

適用於 Windows

2.33GHz 或更快的 x86 相容處理器，或適用於上網本級裝置的 Intel Atom^TM 1.6GHz 或更快的處理器。
Microsoft® Windows Server 2008、Windows 7、Windows 8 Classic 或 Windows 10。
至少 512MB RAM（建議 1GB）。
AIR SDK 開發支援 Microsoft® Windows 7 及更高版本，僅限 64 位。

適用於 Mac

Intel® Core^TM Duo 1.83GHz 或更快的處理器。
Mac OS X v10.7 及更高版本。
至少 512MB RAM（建議 1GB）。
AIR SDK 開發支援 Mac OS 10.9 及更高版本，僅限 64 位。

參考連結 - Balsamiq 系統要求

下載 Balsamiq

我們可以從以下連結下載 Balsamiq – Balsamiq Mockups for Desktop Balsamiq 可用於 Windows 和 Mac OS。

使用者介面

安裝完成後，我們應該能夠從計算機開啟 Balsamiq。當我們第一次執行 Balsamiq 時，將看到以下螢幕。

如上圖所示，Balsamiq 的使用者介面分為以下四個部分。

導航器
UI 庫
檢查器
線框圖空間/區域

在螢幕截圖中，紅色突出顯示的部分是檢查器/專案資訊部分的切換按鈕。根據選擇，我們應該能夠看到檢查器/專案資訊部分 (3)。

UI 庫

如以下螢幕截圖所示，UI 庫按不同的螢幕元素進行分類。您可以在“全部”部分水平滾動，瞭解 Balsamiq 中可用的螢幕元素。

讓我們熟悉一下 Balsamiq 中可用的不同基本螢幕元素類別。

全部 - 這包括 Balsamiq 中存在的所有 UI 元素。您可以水平滾動以檢視/使用它們。
資產 - 出於介紹的目的，這些是使用者上傳的自定義資產。
大 - 此類別包括尺寸/外觀相當大的螢幕元素。您可以在此類別中看到佔位符、瀏覽器視窗、iPad、iPhone 等元素。
按鈕 - 它包括移動/網頁線框圖中使用的所有按鈕控制元件。一個典型的例子是操作按鈕、複選框等。
常用 - 這些是用於表示最常見互動的不同形狀/控制元件。
容器 - 顧名思義，它包括視窗、欄位集、瀏覽器等。
表單 - 此類別中存在與表單相關的所有 UI 控制元件。
圖示 - 在任何給定時間點，您可能需要透過圖示來表示特定操作。例如，在最近的過去，我們有帶“儲存”按鈕的軟盤圖示。此類控制元件將為您提供此操作所需的圖示。Balsamiq 擁有大量的圖示收藏；隨意檢視！
iOS - 此類別下提供了特定於 Apple iOS 移動作業系統的 UI 控制元件。
佈局 - 在表示基本頁面/功能時，表示基本佈局變得很重要。佈局類別包括大多數佈局，例如手風琴、水平/垂直選項卡等。
標記 - 假設您想線上框圖中的特定控制元件上添加註釋。註釋框在標記中可用。此外，在許多情況下，使用標註來顯示互連性。它位於標記類別下。
媒體 - 當涉及到線上框圖中顯示影像/聲音時，相關的 UI 控制元件位於媒體類別下。
符號 - 符號是可重複使用的元件，可以減少建立最常見元素的時間。
文字 - 顧名思義，所有與文字或段落相關的 UI 控制元件，例如連結欄、文字塊、組合框都位於此類別下。