最近已經(jīng)上傳完畢！

這篇網(wǎng)頁是為了 Balsamiq Mockups 3 而上傳的。原來的文件您可以點擊這里來觀看。

Balsamiq Mockups 3 包含令人難以置信的 Font Awesome 的圖標集。包含了超過 500 個圖標，而且種類豐富，從極小到很大的圖標都有。而且它還頻繁地更新，我們計劃無論何時我們發(fā)布的新版本都要保持同步更新（了解更多我們?yōu)楹无D(zhuǎn)換）。

這里幾乎有所有你想要的圖標，但是如果沒有，你可以添加自己的圖標或者從 Front Awesome 要求一些新的圖標。

http://wiki.jikexueyuan.com/project/balsamiq-mockups-doc/images/icon-library.png" alt="icon-library.png" />

之前版本 Balsamiq Mockups 中的圖標已經(jīng)重新繪制成新圖標。了解在 Balsamiq Mockups 3 項目中如何使用舊圖標。

通過 UI 庫或 Quick Add 來添加圖標

在 Balsamiq 3 同樣是新內(nèi)容，圖標現(xiàn)在在 UI 庫中有它們自己的類別了，所以你可以像其它控件一樣拖拽它們。

http://wiki.jikexueyuan.com/project/balsamiq-mockups-doc/images/icon-uilibrary.png" alt="icon-uilibrary.png" />

不只是這些，它們會在 Quick Add 結(jié)果中顯示，節(jié)省你用名字或關鍵字來搜索的時間。

http://wiki.jikexueyuan.com/project/balsamiq-mockups-doc/images/icon-quickadd.png" alt="icon-quickadd.png" />

圖標檢索到的與你輸入匹配的結(jié)果將顯示在任何 UI 控件的下方。

通過屬性檢視視圖添加和替換圖標

一些控件允許你為它們添加圖標(比如按鈕)。你可以在屬性檢視視圖完成，兩種方法任選其一：搜索圖標和圖標庫對話框。

搜索圖標

如果你選中的控件支持圖標，你可以在屬性面板看到搜索圖標框。這看起來很像 Quick Add 工具，只需要輸入你尋找的圖標名字中的幾個字母，就會列出許多供選擇的圖標。只要在你想用的上面單擊就可以了。

http://wiki.jikexueyuan.com/project/balsamiq-mockups-doc/images/icon-search.png" alt="icon-search.png" />

然后你可以調(diào)整圖標大小從 "X5"(16 px)到 "XXL"(128 px)。你也可以通過搜索框旁邊的按鈕旋轉(zhuǎn)圖標 90 度。

圖標庫對話框

如果你想瀏覽所有可用圖標，點擊圖標搜索框右邊的圖標。

http://wiki.jikexueyuan.com/project/balsamiq-mockups-doc/images/icon-open-library.png" alt="icon-open-library.png" />

這樣就會顯示圖標庫對話框，在這里你可以分類瀏覽并預覽不同大小的圖標。你可以雙擊一個圖標來立即選擇或者單擊選中在點擊 "Select" 按鈕添加它。

http://wiki.jikexueyuan.com/project/balsamiq-mockups-doc/images/icon-library.png" alt="icon-library.png" />

在你選中了一個圖標之后，你可以通過屬性檢視視圖重新調(diào)整它的大小，旋轉(zhuǎn)它或者移除它。

添加你自己的定制圖標

你也可以在你的線框圖中添加自己的圖標。

通過圖標庫對話框添加

有兩種方式向 Balsamiq Mockups 中添加定制圖標。一種是通過圖標庫對話框。

http://wiki.jikexueyuan.com/project/balsamiq-mockups-doc/images/icon-import.png" alt="icon-import.png" />

在底部選擇 Assets 分類，然后點擊小加號按鈕，選擇一個圖標文件然后你的圖片將被調(diào)整至符合已有圖標大小并添加至你的資源中。

通過 Assets 添加

第二種方式是手動添加圖標文件到你的資源中。如果你為每一個文件名添加 "icon_" 前綴，并將它們拖拽到你的資源中，它們將出現(xiàn)在圖標庫和 Quick Add 搜索中。

http://wiki.jikexueyuan.com/project/balsamiq-mockups-doc/images/icon-custom.png" alt="icon-custom.png" />

注釋：MAC 用戶可以為多個文件快速添加 "icon_" 前綴通過使用批重命名工具 Mac OS X（10.10 或更高版本）。

在圖標對話框中，文件名 "icon_" 后面的內(nèi)容將作為檢索的關鍵字。所以文件名為 icon_airplane.png 的關鍵字為 "airplane"。你可以將幾個標簽組合在一起來獲得標簽的近義詞。例如，如果文件被命名為 icon_bag briefcase portfolio.png ，那么所有這些在 icon_ 之后的詞都將可搜索。

使用已經(jīng)存在的定制圖標集

有一些圖標集用來補足手繪風的 Mockups。這個在 Tips Blogger 的博客列舉了一些更手繪風的圖標集，可能會有用。

有些圖標設計者已經(jīng)開始創(chuàng)建圖標包，兼容我們的命名體制。這里有一些我們知道的。

如果想使用這些圖標包，只需要解壓圖標文件，并把它們拖拽到你的 Assets，像之前描述的那樣。如果你正在使用 myBalsamiq，可以通過 Assets 對話框上傳圖標文件。

創(chuàng)建或準備定制圖標的最佳練習

Mockups 使用顏色和透明度，但是如果你添加的圖標沒有做 Mockups 希望它們做的準備的話，恐怕不會像你想像中的那樣顯示。下面給出一些建議讓你的定制圖標更好用。

顏色

• Mockups 使用黑色來代替 100% 不透明度。
• 圖標不創(chuàng)建成黑色的會在上色時會有不良影響。
• 我們建議使用黑色作為你的圖標的顏色。

透明區(qū)域

• Mockups 為圖標整個不透明區(qū)域著色。
• 為了最佳效果，我們建議將你的圖標的白色區(qū)域設置為透明。透明的 PNG 文件最佳。

下列例子在左列顯示常規(guī)圖標，在中間列是使用黑色的定制圖標，然后最右列是一些看起來不太好的圖標。修理最右側(cè)圖標的方式是將感嘆號變成透明，然后顏色選擇黑色。

http://wiki.jikexueyuan.com/project/balsamiq-mockups-doc/images/customicon-bestpractice.png" alt="customicon-bestpractice.png" />