這是歷史版本頁面 — 看 Balsamiq Mockups 最新版本

Balsamiq Mockups 畫線框圖還夠用嗎

Balsamiq Mockups 軟體圖示 Balsamiq Mockups 3.4.1 資料更新 2016-05-31 閱讀約 5 分鐘

你正在規劃一個新功能或新頁面,腦子裡已經有大概的輪廓,但打開 PowerPoint 或 Figma 想畫出來時,卻發現自己卡在「要選什麼顏色」「字體多大」這些細節上,半小時過去了,版面還沒排出來。你只是想讓團隊看懂「這裡有個按鈕、那邊放一張圖」,卻被迫先當一個視覺設計師。這種時候,你需要的是把想法快速倒出來、讓大家討論功能而不是美醜的工具。

一般人的直覺是打開繪圖軟體或簡報軟體來畫,但這些工具的精細度反而成了阻礙——太容易分心在視覺細節,而且修改版面很費工。另一條路是拿紙筆畫草圖,但紙本無法分享給遠端同事,也無法建立多頁流程。於是出現了一種折衷做法:用數位工具模擬手繪草圖的質感,刻意保持「未完成」的樣貌,讓討論焦點鎖定在功能與架構上,而不是顏色和字型。

Balsamiq Mockups 操作介面
Balsamiq Mockups 的操作介面

01Balsamiq Mockups 到底能做什麼?

它是一套快速建立線框圖(wireframe)的工具,用來在產品開發初期畫出網頁或 App 的版面草稿。你從左側元件庫拖曳按鈕、文字方塊、圖片框等到畫布上,排列出頁面配置,再用連結功能把多個頁面串起來,變成可以點擊的簡易原型。畫出來的成品是手繪風格,看起來像草圖,目的是讓討論聚焦在功能與動線上。

02它和一般設計軟體畫出來的東西有什麼不同?

最大的差別在於「精緻度」。Figma 或 Adobe XD 這類工具做出來的是高傳真設計,顏色、字型、間距都接近最終成品;Balsamiq 刻意維持低傳真的手繪感,讓觀看者不會被視覺細節帶走,專注在版面結構與功能邏輯。如果你需要跟客戶確認「首頁要放哪些區塊」,用 Balsamiq 比用高傳真稿更不容易失焦。

Balsamiq Mockups 介面畫面 2
Balsamiq Mockups 介面畫面

03能不能做出可以點來點去的原型?

可以。你可以在不同頁面之間建立連結,做出點擊按鈕就跳到下一頁的效果,用來模擬使用流程。這對於使用者測試或向利害關係人展示動線很有用。不過它的互動能力僅限於頁面跳轉,不支援複雜的動畫、條件式邏輯或動態資料,這點要先有心理準備。

04畫好的東西要怎麼給別人看?

可以匯出成 PNG 或 PDF。PDF 匯出時會保留頁面之間的連結,對方在 PDF 閱讀器裡點擊就能跳頁,適合用來做簡報或寄給客戶確認。如果你想要更進一步的協作,可以考慮它後續推出的雲端版本,但這套桌面版本身沒有內建多人即時共編功能。

Balsamiq Mockups 介面畫面 3
Balsamiq Mockups 介面畫面

05多人一起用的話,它怎麼運作?

這套桌面版沒有即時協作功能,團隊要分工的話,比較常見的做法是各自畫好自己的部分,再合併討論。不過它支援建立可重複使用的元件庫(Symbols),團隊可以先定義好共用的按鈕、表單等元件,大家畫圖時直接拖出來用,確保一致性。註解功能可以讓你在圖上加註意見,方便非同步溝通。

06不會寫程式的人用得了嗎?

可以,這正是它的設計目標之一。操作方式就是拖曳元件、調整大小、輸入文字,不需要任何程式背景。官方說明也提到,任何人只要會用滑鼠就能上手。產品經理、專案經理、業務人員都可以用它來表達想法,不需要等設計師有空才能動工。

Balsamiq Mockups 介面畫面 4
Balsamiq Mockups 介面畫面

07產品經理或開發者適合用嗎?

適合。產品經理可以用它快速把需求視覺化,跟工程師溝通時有個具體的參考依據,減少「我說的是這個意思嗎」的來回確認。開發者也可以用它先畫出介面草稿,確認版面與流程後再開始寫程式,避免開發到一半才發現動線有問題。它特別強調「在流程最早期的時候迭代,成本最低」這個概念。

08它和 Figma 或 Adobe XD 比起來如何?

定位不同。Figma 和 Adobe XD 是完整的高傳真設計工具,適合做最終視覺稿、設計系統、交互動畫;Balsamiq 只做低傳真線框圖,功能範圍小很多。如果你的工作流程需要先快速確認功能架構,再進入視覺設計,Balsamiq 可以當作第一步;但如果你需要的是直接做出接近成品的設計稿,它幫不上忙。

09這套舊版還值得用嗎?

這套 Mockups 3 for Desktop 已經停止更新,官方把後續版本改名為 Balsamiq Wireframes,並表示舊的 BMPR 檔案格式可以繼續沿用。也就是說,如果你手上已經有這套軟體、檔案也都是這個格式,繼續用沒有問題;但如果你是要新開始使用,官方建議的長期方案是更新的版本或雲端服務,因為舊版不會再有新功能或修正。

10有沒有其他更多人用的選擇?

在線框圖這個領域,Balsamiq 是知名度很高的老牌工具,但它的評分人數只有 80 人,相較之下 Avocode 有 144 人評分、Google Web Designer 有 74 人評分。如果你在意的是社群規模或長期維護,可以參考這些替代方案,或是直接考慮 Figma 這類免費且活躍的設計工具。另外要注意,這套軟體只有英文介面,授權型式是 Trial,使用前需要確認試用限制。

下載與官方連結

前往官方網站 下載 Balsamiq Mockups

Balsamiq_Mockups_3.4.1.exe · 3.87 MB · 連結指向軟體原廠

版本紀錄

再看 5 筆

看完整版本清單

這一版改了什麼

What's new in this version:

(Optional) Manual Save:
- One of the most daring features of Mockups 3 was that everything was always and immediately automatically saved to disk. We thought everyone would love the peace of mind of not having to compulsively hit CTRL+S all the time, living in fear of losing their changes.
- It turns out, while most of you really do love it, you have clearly told us that there are some cases in which automatically saving to the original file all the time is not the right thing to do.
- For instance, sometimes you want to just muck around some wireframes knowing that you'll be able to discard your changes easily at the end of your experimental session. Another case is when working on files stored on slow remote network drives, or busy shared folders. Saving all the time in these cases might slow you down, or generate too much network traffic. Last but not least, some of you just simply prefer to save manually: 30 years of computing and muscle-memory are hard to let go of! :)
- To help with these issues, today we are introducing the option to turn off autosave in Mockups for Desktop.

Autosaveoption:
- When automatic saving is off, you will use CTRL+S to save, and also be able to use "Reload from Disk" to quickly throw away your current set of changes.
- The setting will be remembered across restarts and across projects, so you'll only really have to set it once.
- You can now specify icons in the List control!
- This is very useful when designing Android menus, as well many more kinds of menus and lists.
- FontAwesome Updated to 4.6.3:
- Our friends at FontAwesome released an update, so we incorporated it!
- BTW, we added these new icons to myBalsamiq as well.

Auto-Recover in Case of Data Corruption:
- Just like any other file on your computer, in some rare cases our BMPR files might get corrupted.
- To help mitigate the annoyance this might cause, we added automatic local backups back in version 3.1. The backups work well and usually make it so that no work is lost, but finding the backup was a bit cumbersome.
- With today's release, we make the software do the work. When data corruption is detected, Mockups will now find the latest backed up file and recover it for you. E

Other Improvements and Bug Fixes:
- Fixed an issue with importing symbols in BMML projects in some cases. Thanks Arno D. for reporting it!
- Fixed a little issue with the Open Recent menu which showed the project name instead of the file path after renaming a project. Thanks Jerome for reporting it!
- In Mockups 3 for Confluence Cloud, we now share full-screen settings between the macro, the presentation view and the mockups editor
- Fixed an issue when promoting alternates to official with markup hidden. Thank you markusku for reporting it!
- We now properly hide Quick Add in the Grid view.
- We updated the Webcam control in the Wireframe skin to be gender-neutral. Thanks Oscar G. for bring this up!
- We now allow Import JSON in Symbols as well as Mockups.
- Fixed an issue when exporting some icons to BMML.
- Fixed the title of the Rename Group dialog.
- In our web versions, we now only allow caching of the skin files once per release.
- Fixed an issue with links not showing up properly in Data Grids sometimes. Thanks Michael P. for reporting it!
- Fixed an issue with using the {color} macro in the last row of a Data Grid. Thanks Steve H. for reporting it!
- We now show [New Project] instead of the more cryptic [-] in the window title when a project has never been explicitly saved yet