最新更新!
這個頁面已經(jīng)被更新為Balsamiq Mockups 3。舊文檔在這里。
Balsamiq Mockups 是一個創(chuàng)建線框(也被叫做實物模型或者低保真原型)的用戶接口設(shè)計工具。你可以使用它來形成你產(chǎn)品思路的數(shù)字草圖,在代碼編寫之前協(xié)助討論和理解。
每個 Balsamiq Mockups 文件(有一個 .bmpr 文件擴展名)代表一個項目并包含許多實物模型和圖片,它們被一起存儲在一個單獨的 .bmpr 文件中。不同項目的實物模型應(yīng)該在各自的 Balsamiq Mockups 文件中被創(chuàng)建。為了創(chuàng)建一個新的項目,可以從菜單中選擇 Project > New Project。
注意:單獨的項目文件在 Balsamiq Mockups 3 中都是是新的。(了解更多)
Balsamiq Mockups 用戶接口由五個基本的區(qū)域組成:工具欄,UI 庫,畫布,導(dǎo)航面板和屬性面板。每個都會在下面被描述。
http://wiki.jikexueyuan.com/project/balsamiq-mockups-doc/images/ui-overview.png" alt="image" />
在 UI 區(qū)域上的 myBalsamiq 獨有的文檔,查看 myBalsamiq 編輯文檔。
注意:你可以在我們的 Mockups Intro Video tutorial 看一個包含基本應(yīng)用程序使用方法的視頻。
工具欄包含一系列的圖標用來在其他用戶接口的區(qū)域執(zhí)行操作。
第一個圖標集如下所描述。
http://wiki.jikexueyuan.com/project/balsamiq-mockups-doc/images/toolbar.png" alt="image" />
1.在 Mockups,資產(chǎn),標志和垃圾箱間導(dǎo)航
2.展示/隱藏左邊的面板
3.用一個縮略圖顯示你的實物模型
4.創(chuàng)建一個新的實物模型
5.Mockup 動作(重命名等)和在實物模型間(當左邊面板被隱藏時展示)導(dǎo)航
6.到下一個或前一個實物模型(當左邊面板被隱藏時展示)
工具欄中心的圖標組作用于通常執(zhí)行的畫布功能。這些是你可能在文章編輯器或者其他繪畫工具中已經(jīng)習(xí)慣的動作,比如復(fù)制,粘貼,分組,排列和縮放。最后一個圖標是用來切換標記的(閱讀有關(guān)標記的細節(jié))。
http://wiki.jikexueyuan.com/project/balsamiq-mockups-doc/images/toolbar1.png" alt="image" />
工具欄最右邊的最后一部分包含了快速添加工具,UI 庫,屬性檢視視圖和項目信息面板的切換圖標,和一個進入全屏展示模式的圖標。
http://wiki.jikexueyuan.com/project/balsamiq-mockups-doc/images/toolbar2.png" alt="image" />
工具欄的頂部展示了項目的名字,你可以雙擊來重命名(或者到菜單中的 Project > Rename Project...)。
http://wiki.jikexueyuan.com/project/balsamiq-mockups-doc/images/rename-project.png" alt="image" />
快速添加工具是最快的添加 UI 控件到你的實物模型的方法。為了使用快速添加,在快速添加輸入框內(nèi)點擊(或者使用 / 或者 + 鍵盤快捷鍵來進入)。從一個 UI 控件或者圖標輸入一些字母,快速添加將為你顯示一列推薦。使用你的鼠標或者方向鍵來快速瀏覽列表然后點擊或者按下 Enter 來給實物模型畫布添加控件或圖標。你也可以使用 Shift + Enter 來將控件放到你的鼠標游標在畫布上的位置。
例如,輸入 “bu” 顯示了一些包含 “Button”,“Button Bar”,“Help Button”,“Radio Button” 和 “Round Button” 的列表。另一方面,輸入 “hel”,僅僅返回 “Help Button”。按下 ESCape 鍵使得列表消失,就像我們所期待的那樣。
http://wiki.jikexueyuan.com/project/balsamiq-mockups-doc/images/icon-quickadd.png" alt="image" />
現(xiàn)在嘗試下快速添加吧!當你熟悉它,你甚至可以隱藏 UI 庫并簡單地使用快速添加來添加 UI 元素到你的實物模型中。這最大化了你的畫布區(qū)域和速度!
UI 庫,或者 UI 控件,是工具欄下的 UI 控件的長條地帶。它羅列了所有 Mockup 和資產(chǎn),圖標和標志的 UI 控件的類型。UI 庫的主要目標是讓你添加 UI 控件到實物模型畫布,但是你也能使用它來為你的實物模型獲得靈感。
http://wiki.jikexueyuan.com/project/balsamiq-mockups-doc/images/uilibrary.png" alt="image" />
為了添加一個新的 UI 控件到畫布,選擇你想要添加的控件類型,然后可以拖動它到下面的實物模型畫布,或是簡單地雙擊它,Balsamiq Mockups 將為你把它放到實物模型畫布中。
UI 庫能通過幾種方式被打開或關(guān)閉:點擊快速添加框右邊的圖標,使用鍵盤快捷鍵 CTRL/CMD + L,或者通過選擇應(yīng)用程序菜單欄的 View > UI Library。
這是 Balsamiq Mockups 的主要工作區(qū)域,在那里你的 UI 實物模型被賦予生命。一旦你添加了 UI 控件,你能移動它們,調(diào)整它們到你的核心內(nèi)容,直到你的 UI 實物模型已經(jīng)準備完畢。看使用 UI 控件以了解更多。
實物模型畫布根據(jù)你的應(yīng)用程序窗口增加或收縮,所以如果需要的話你可以為更大的實物模型分配空間。
注意:如果你在一個小屏幕上工作或者有很大的實物模型,你可能想要讀這篇關(guān)于隱藏面板來為畫布獲得更多空間的文章
位于左邊的導(dǎo)航面板展示了實物模型,資產(chǎn)或者你項目中的標志。當前選擇的對象被突出了。實物模型和資產(chǎn)能以文本列表或者縮略圖預(yù)覽的形式被查看。
http://wiki.jikexueyuan.com/project/balsamiq-mockups-doc/images/navigatorpanel.png" alt="image" />
你可以通過點擊面板上方導(dǎo)航切換圖標來隱藏導(dǎo)航面板(鍵盤快捷鍵:CTRL/CMD + J)。隱藏它將顯示工具欄中額外的圖標(如上所示),來在實物模型或者資產(chǎn)(依賴于被選擇的那一個)間導(dǎo)航。
可以通過從畫布中分離導(dǎo)航面板并把它向左或向右拖動,放置你的鼠標游標到線上來調(diào)整面板大小。你可以雙擊分隔線來把它重新設(shè)置為默認寬度。
實物模型能在導(dǎo)航面板中通過把它們向上或向下拖動被重新排序。這在導(dǎo)出到 PDF 時是有用的。舉個例子。當你關(guān)閉并重新打開你的項目,甚至在一臺不同的電腦上打開時,你的實物模型的順序?qū)⒈挥涀 ?/p>
一個在導(dǎo)航面板上打開的上下文菜單對于項目來說也是可以獲得的。你可以通過右擊選擇的項目或是點擊當你在它身邊移動時出現(xiàn)的小箭頭來打開菜單。
http://wiki.jikexueyuan.com/project/balsamiq-mockups-doc/images/mockup-context-menu.png" alt="image" />
這個菜單的內(nèi)容根據(jù)哪種類型的對象被選擇而顯得不同(實物模型,資產(chǎn),標志或垃圾),但是它通常包含比如重命名,移動到垃圾箱或者克隆的選項。在 Mockups 視圖中,它也包含使用 alternates 的動作。
重命名實物模型可以通過上下文菜單或者通過雙擊導(dǎo)航面板中的實物模型的名字來完成。有鏈接的實物模型在當所連接的實物模型名字被改變時將自動更新。
http://wiki.jikexueyuan.com/project/balsamiq-mockups-doc/images/rename-mockup.png" alt="image" />
應(yīng)用程序(當顯示時)右邊的面板展示了所選擇的控件或者對象的屬性。依賴于所選擇的圖標,它展示了或是屬性檢視視圖或是項目信息面板。它能通過選擇視圖菜單中的工具欄或未檢查的檢視視圖的圖標以及項目信息中的圖標來隱藏。
http://wiki.jikexueyuan.com/project/balsamiq-mockups-doc/images/property-inspector.png" alt="image" />
點擊圖標右邊的導(dǎo)航面板切換將轉(zhuǎn)換到縮略圖,以下是展示。
http://wiki.jikexueyuan.com/project/balsamiq-mockups-doc/images/thumbnail-grid.png" alt="image" />
這個視圖展示了所有你的實物模型的縮略圖,這對于獲得你項目的整體預(yù)覽是有用的。它允許你立刻看見更多的有關(guān)實物模型,而且是一個非常好的用來重排序和整理(例如,重命名和移動到垃圾箱)的視圖。
縮略圖在查看實物模型和資產(chǎn)時可獲得,而且是僅有的垃圾箱可獲得的視圖。