小白如何快速绘制原型图

说到绘制产品原型图的工具，大家一定首先先到的是大名鼎鼎的“Axure RP”，或者在线协同的“墨刀”。它们的功能确实非常的强大，以至于很多产品经理可以做出还原度非常高的产品原型，不过能够熟练的够驾驭它们，还需使用者有不少的磨练。对于小型的团队（3-5人），特别是在没有专业的产品经理的情况下，大部分我们在接到产品的需求时，我们需要借助一个简单的、快速的工具将需求体现在产品上。这也是今天小白要介绍的一个轻量级产品原型设计工具Balsamiq Mockups。

简单来说，Balsamiq Mockups是一个用来绘制低保证的产品原型草图的工具。当我们产品的业务流程和数据流转还没明确时，大家在考虑产品架构时，快速的绘制草图有助于明确成员对业务产品的用途，以及同步大家的预期。以往我们可能都是先用纸、笔或黑板的方式跟成员交流，不过它们的最大劣势就是——很难将有价值的原型保存下来，Mockups就是为了完美的解决了这个问题而诞生的。

最近小白参与了一个Kubernetes云产品的的项目，客户需求大致也比较简单，不过在前期项目需求沟通的时候，我们也是通过用mockups快速的将需求转化成前期的产品草图来帮助后方的研发同学来理解项目产品。选择mockups的原因也很简单，可爱的手绘风格、快速的绘图方式、常用且现成的控件，这些都让作为小白的我们不需要去精心设计交互和界面色彩，而是将大部分精力专注在产品功能本身。

可以看到mockups的空间并没有太多，而且几乎都是统一的手绘风格，也省去了我们四处寻找素材的时间。经过小白两周的使用，深感非常方便，便做一个阶段性总结分享给大家。

Balsamiq Mockups安装与费用

Balsamiq Mockups是一个付费App，目前它单个用户的license费用是$89，折算成人民币大约需要580。它的桌面客户端支持Windows和MacOS两个系统，可以在下面的官方网站上下载

https://balsamiq.com/wireframes/desktop/

当然Linux也可以直接使用mockups的Web版本，它的定价是按照项目个数来计费，产品也更倾向于多人合作，定价也也许的小贵。20个项目每年费用在$490，算下来每个项目每年要人民币小1600元。

Balsamiq Mockups使用

用户界面

当安装完成后，我们打开Mockups会看到下面的界面

可以看到，他的用户界面主要分为四个区域，我们的主要工作也是围绕这四个区域展开，他们分别为：

导航栏
UI控件栏
空间属性拦
主绘版

除此之外，我们还可以在右上角找到"项目属性"和"预览"的按钮，也可通过Export将项目导出成PDF文件。那么小白先来总结下各个区域的基本功能。

1. 导航栏

导航栏主要是用于管理原型的图纸，当需要添加或修改草图时，可以直接在导航栏中快速选择对应的图纸进入修改。除此之外，还可以对当前的版本做版本管理，有就是通过右键选择"Create Alternate Version"来新建一个当前草图的副本

2. UI控件拦

可以看到UI控件拦是按不同的元素进行分类的。可以在"All"里面找到所有的控件，不过我们还是有必要先熟悉它的分类。

All - 包含了Balsamiq中存在的所有UI元素
Assets - 包含了用户自定义的控件，包含自己上传的图片
Big - 包含了一些大尺寸的UI元素，如charts图标、图片、地图等相较独立的控件
Buttonss - 顾名思义，包含了一些常用的按钮和复选框
Common - 这些是用于表示最常见交互的不同形状和控件
Containers - 产品的容器，顾名思义就是运行产品的载体，可以是web、phone或者pad
Forms - 表单相关的所有UI控件都在此类别中
Icos - mockups内置的一套图标
iOS - 一些iOS元素的控件
Layout - 产品设计里的关于布局的一些控件，比如滑动拦、标签页之类的
Markup - 注释标记，主要用于一些控件的说明
Media - 包含一些常用的多媒体控件，如图片、视频，音量的控制
Symbos - 可重用的组件（不清楚具体用途）
Text - 与文本或段落相关的所有UI控件（如链接栏，文本块，组合框）均在此类别下可用

3. UI属性栏

顾名思义，属性栏当然是调整每个UI控件的一些特性啦。其中主要就包括调整组件的size、图层、字体、颜色、状态和链接等熟悉了。由于mockups本身控件不多，所以大部分情况下，对于它们的属性我们调锅一两次就会很熟悉了。到后期我们完全可以依靠复制粘贴的方式快速批量的创建控件。

4. 主绘版

主绘版就是抒发我们灵感的主要地方。这里没有任何限制，我们只需要将需要的控件通过拖拽的方式在主绘板上组合，即可得到我们想要的原型图。小白也将常用的控件列表出来，仅供大家参考。

绘制出我的第一个草图

当我们在绘制一个产品的原型图时，我们首先应当在脑海中梳理出产品的大致业务功能和数据流转，并将他们抽象成具体的功能模块。由于这个阶段，我们大多数人都是先有一个想法，然后再通过扩展去完善细节的流程。所以大多数，我们都是利用头脑风暴和思维导图的方式，将产品的原型框架做一个整体的设计。比如小白以K8S的管理为例，我们就需要在自己产品里面先找到共性和特性。所谓共性就是一些业界通用的功能，比如Workerload的编排、Pod的管理等。特性就是产品本身具备的一些独特特性，比如是产品是强调的多租户的资源隔离性管理、又或者是多集群资源的集中调度。我们需要针对这些特性场景下去设计产品独的特性质。

关于共性和特性，一定是我们在绘制产品之前就有了一个清晰整体的概念。否则，我们极易在绘图的过程中被临时的想法打乱，导致重新设计。这将浪费我们项目上为数不多的时间。那么当我们准备好第一步后，就可以打开Mockups个工具开始肆意发挥了。

1. 首先我们创建一个Browser的容器来作为应用的载体，通常对于浏览器，我们采用的是1080 * 720分辨率的规格。

分辨率没有严格限制大小，我们可以创建一个非常长的版面也是可以的。

2. 其次，我们应该考虑下应用的布局。这里不需要去考虑什么专业的网页栅格和计算8PT网格的分配。mockups里只需要对网页有一个大致的布局即可，这里可以考虑下常见的web系统的布局方式，大体就是下面贴图的几种类型。

3. 确认好应用布局后，我们就可以着手开始绘制一些产品的基本功能。比如这里我们就可以用Rectangle来绘制顶部侧边栏，和用Accordion来设计侧边的导航栏。

这里，我们可以看到Accordion可以通过一些简单的格式来设计侧边栏的功能导航的，同时还能在属性中的Selection来选择当前页面tab的展开状态。

4. 之后我们就需要在展示页面上设计产品的主要功能了，这里才是真正体现我们产品业务流程和数据的地方。我们常用的控件都可以从控件拦中获取，这里小白以多Kubernetes切换的功能来展示出产品的业务形态举例。

5. 当我们有多个页面需要进行事件联动时，我们就需要link的功能来做页面链接，例如小白这里还有一个集群监控的页面，需要在集群详情上点击"查看集群监控"后弹出监控页面，据可以在相关的元素上添加link事件，与之产生跳转

这样，当我们在预览该页面时，就能点击该元素直接跳转到相应的页面上去，如下：

怎么样是不是非常简单？

总结

Balsamiq Mockups对小白来说是一个入门非常快的产品，在绘制草图时，它没有很多产品设计里面专业的概念要素在里面，它强调的就是一个快，出图快，理解快的精髓。希望大家在使用时能够够好的把握住自己产品的核心功能。

最后，如果大家对这类文章感兴趣的话，还请麻烦点赞支持小白，如果效果不错的话，我在后续还会持续更新Mockups的使用总结。谢谢大家

关注公众号【云原生小白】，进入Loki学习群