說到繪制產(chǎn)品原型圖的工具，大家一定首先先到的是大名鼎鼎的“Axure RP”，或者在線協(xié)同的“墨刀”。它們的功能確實非常的強大，以至于很多產(chǎn)品經(jīng)理可以做出還原度非常高的產(chǎn)品原型，不過能夠熟練的夠駕馭它們，還需使用者有不少的磨練。對于小型的團隊（3-5人），特別是在沒有專業(yè)的產(chǎn)品經(jīng)理的情況下，大部分我們在接到產(chǎn)品的需求時，我們需要借助一個簡單的、快速的工具將需求體現(xiàn)在產(chǎn)品上。這也是今天小白要介紹的一個輕量級產(chǎn)品原型設計工具Balsamiq Mockups

簡單來說，Balsamiq Mockups是一個用來繪制低保證的產(chǎn)品原型草圖的工具。當我們產(chǎn)品的業(yè)務流程和數(shù)據(jù)流轉(zhuǎn)還沒明確時，大家在考慮產(chǎn)品架構(gòu)時，快速的繪制草圖有助于明確成員對業(yè)務產(chǎn)品的用途，以及同步大家的預期。以往我們可能都是先用紙、筆或黑板的方式跟成員交流，不過它們的最大劣勢就是——很難將有價值的原型保存下來，Mockups就是為了完美的解決了這個問題而誕生的。

最近小白參與了一個Kubernetes云產(chǎn)品的的項目，客戶需求大致也比較簡單，不過在前期項目需求溝通的時候，我們也是通過用mockups快速的將需求轉(zhuǎn)化成前期的產(chǎn)品草圖來幫助后方的研發(fā)同學來理解項目產(chǎn)品。選擇mockups的原因也很簡單，可愛的手繪風格、快速的繪圖方式、常用且現(xiàn)成的控件，這些都讓作為小白的我們不需要去精心設計交互和界面色彩，而是將大部分精力專注在產(chǎn)品功能本身。

可以看到mockups的空間并沒有太多，而且?guī)缀醵际墙y(tǒng)一的手繪風格，也省去了我們四處尋找素材的時間。經(jīng)過小白兩周的使用，深感非常方便，便做一個階段性總結(jié)分享給大家。

Balsamiq Mockups安裝與費用

Balsamiq Mockups是一個付費App，目前它單個用戶的license費用是$89，折算成人民幣大約需要580。它的桌面客戶端支持Windows和MacOS兩個系統(tǒng)，可以在下面的官方網(wǎng)站上下載

https://balsamiq.com/wireframes/desktop/
當然Linux也可以直接使用mockups的Web版本，它的定價是按照項目個數(shù)來計費，產(chǎn)品也更傾向于多人合作，定價也也許的小貴。20個項目每年費用在$490，算下來每個項目每年要人民幣小1600元。

Balsamiq Mockups使用

用戶界面

當安裝完成后，我們打開Mockups會看到下面的界面

可以看到，他的用戶界面主要分為四個區(qū)域，我們的主要工作也是圍繞這四個區(qū)域展開，他們分別為：

1. 導航欄
2. UI控件欄
3. 空間屬性攔
4. 主繪版

除此之外，我們還可以在右上角找到"項目屬性"和"預覽"的按鈕，也可通過Export將項目導出成PDF文件。那么小白先來總結(jié)下各個區(qū)域的基本功能。

1. 導航欄

導航欄主要是用于管理原型的圖紙，當需要添加或修改草圖時，可以直接在導航欄中快速選擇對應的圖紙進入修改。除此之外，還可以對當前的版本做版本管理，有就是通過右鍵選擇"Create Alternate Version"來新建一個當前草圖的副本

2. UI控件攔

• All - 包含了Balsamiq中存在的所有UI元素
• Assets - 包含了用戶自定義的控件，包含自己上傳的圖片
• Big - 包含了一些大尺寸的UI元素，如charts圖標、圖片、地圖等相較獨立的控件
• Buttonss - 顧名思義，包含了一些常用的按鈕和復選框
• Common - 這些是用于表示最常見交互的不同形狀和控件
• Containers - 產(chǎn)品的容器，顧名思義就是運行產(chǎn)品的載體，可以是web、phone或者pad
• Forms - 表單相關的所有UI控件都在此類別中
• Icos - mockups內(nèi)置的一套圖標
• iOS - 一些iOS元素的控件
• Layout - 產(chǎn)品設計里的關于布局的一些控件，比如滑動欄、標簽頁之類的
• Markup - 注釋標記，主要用于一些控件的說明
• Media - 包含一些常用的多媒體控件，如圖片、視頻，音量的控制
• Symbos - 可重用的組件（不清楚具體用途）
• Text - 與文本或段落相關的所有UI控件（如鏈接欄，文本塊，組合框）均在此類別下可用

3. UI屬性欄

顧名思義，屬性欄當然是調(diào)整每個UI控件的一些特性啦。其中主要就包括調(diào)整組件的size、圖層、字體、顏色、狀態(tài)和鏈接等屬性了。由于mockups本身控件不多，所以大部分情況下，對于它們的屬性我們調(diào)過一兩次就會很熟悉了。到后期我們完全可以依靠復制粘貼的方式快速批量的創(chuàng)建控件。

4. 主繪版

主繪版就是抒發(fā)我們靈感的主要地方。這里沒有任何限制，我們只需要將需要的控件通過拖拽的方式在主繪板上組合，即可得到我們想要的原型圖。小白也將常用的控件列表出來，僅供大家參考。

繪制出我的第一個草圖

當我們在繪制一個產(chǎn)品的原型圖時，我們首先應當在腦海中梳理出產(chǎn)品的大致業(yè)務功能和數(shù)據(jù)流轉(zhuǎn)，并將他們抽象成具體的功能模塊。由于這個階段，我們大多數(shù)人都是先有一個想法，然后再通過擴展去完善細節(jié)的流程。所以大多數(shù)，我們都是利用頭腦風暴和思維導圖的方式，將產(chǎn)品的原型框架做一個整體的設計。比如小白以K8S的管理為例，我們就需要在自己產(chǎn)品里面先找到共性和特性。所謂共性就是一些業(yè)界通用的功能，比如Workerload的編排、Pod的管理等。特性就是產(chǎn)品本身具備的一些獨特特性，比如是產(chǎn)品是強調(diào)的多租戶的資源隔離性管理、又或者是多集群資源的集中調(diào)度。我們需要針對這些特性場景下去設計產(chǎn)品的獨特性質(zhì)。

關于共性和特性，一定是我們在繪制產(chǎn)品之前就有了一個清晰整體的概念。否則，我們極易在繪圖的過程中被臨時的想法打亂和發(fā)散，導致重新設計。這將浪費我們項目上為數(shù)不多的時間。那么當我們準備好第一步后，就可以打開Mockups個工具開始肆意發(fā)揮了。

1. 首先我們創(chuàng)建一個Browser的容器來作為應用的載體，通常對于瀏覽器，我們采用的是1080 * 720分辨率的規(guī)格。

分辨率沒有嚴格限制大小，我們可以創(chuàng)建一個非常長的版面也是可以的。

2. 其次，我們應該考慮下應用的布局。這里不需要去考慮什么專業(yè)的網(wǎng)頁柵格和計算8PT網(wǎng)格的分配。mockups里只需要對網(wǎng)頁有一個大致的布局即可，這里可以考慮下常見的web系統(tǒng)的布局方式，大體就是下面貼圖的幾種類型。

3. 確認好應用布局后，

我們就可以著手開始繪制一些產(chǎn)品的基本功能。比如這里我們就可以用Rectangle來繪制頂部側(cè)邊欄，和用Accordion來設計側(cè)邊的導航欄。

這里，我們可以看到Accordion可以通過一些簡單的格式來設計側(cè)邊欄的功能導航的，同時還能在屬性中的Selection來選擇當前頁面tab的展開狀態(tài)。

4. 之后我們就需要在展示頁面上設計產(chǎn)品的主要功能了，這里才是真正體現(xiàn)我們產(chǎn)品業(yè)務流程和數(shù)據(jù)的地方。我們常用的控件都可以從控件欄中獲取，這里小白以多Kubernetes切換的功能來展示出產(chǎn)品的業(yè)務形態(tài)舉例。

5.?當我們有多個頁面需要進行事件聯(lián)動時，我們就需要link的功能來做頁面鏈接，例如小白這里還有一個集群監(jiān)控的頁面，需要在集群詳情上點擊"查看集群監(jiān)控"后彈出監(jiān)控頁面，就可以在相關的元素上添加link事件，與之產(chǎn)生跳轉(zhuǎn)

這樣，當我們在預覽該頁面時，就能點擊該元素直接跳轉(zhuǎn)到相應的頁面上去，如下：

怎么樣是不是非常簡單？

總結(jié)

Balsamiq Mockups對小白來說是一個入門非?？斓漠a(chǎn)品，在繪制草圖時，它沒有很多產(chǎn)品設計里面專業(yè)的概念要素在里面，它強調(diào)的就是一個快，出圖快，理解快的精髓。希望大家在使用時能夠好好的把握住自己產(chǎn)品的核心功能。

最后，如果大家對這類文章感興趣的話，還請麻煩點贊支持小白，如果效果不錯的話，我在后續(xù)還會持續(xù)更新Mockups的使用總結(jié)。謝謝大家