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

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

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

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

Balsamiq Mockups安裝與費(fèi)用

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

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

Balsamiq Mockups使用

用戶界面

當(dāng)安裝完成后，我們打開Mockups會(huì)看到下面的界面

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

1. 導(dǎo)航欄
2. UI控件欄
3. 空間屬性攔
4. 主繪版

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

1. 導(dǎo)航欄

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

2. UI控件攔

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

3. UI屬性欄

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

4. 主繪版

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

繪制出我的第一個(gè)草圖

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

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

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

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

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

3. 確認(rèn)好應(yīng)用布局后，

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

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

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

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

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

怎么樣是不是非常簡單？

總結(jié)

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

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