对于互联网产品如网站从产品概念构思到实体开发的第一步通常是 “产品原型设计” 这也通常是交互设计师及用户体验设计师最熟悉的操作步骤,具体工作内容通常包括绘制网站的低保真框架图并搭配大量注释旁注及流程说明。提起产品原型设计多数人会想到 Axure 但对于很多中小型公司来说 Axure 显得过于臃肿且功能过于强大非常适合高保真的产品原型制作,但在产品原型初期很多设计师并不需要过于精准的高保真原型而更多设计师更喜欢采用纸笔的方式制作低保真原型,今天介绍的这款手绘风格的设计软件 Mockups 是一款来自加利福尼亚 Balsamiq 工作室基于 Adobe AIR 技术开发的产品原型设计工具由于基于 AIR 技术所以可以很方便的跨操作系统和跨平台甚至无需安装只要有一个支持 Flash 的浏览器即可……
如何安装:
上面提供了几个地址可以很容易的访问 Mockups 的演示页面和官方网站,最上面的在线体验地址只需要你的浏览器支持 Flash 即可迅速体验到 Mockups 后面的下载版本可以下载最新的桌面安装版文件而在线安装链接可以直接在线安装 Mockups 但需要你的电脑安装有 AdobeAIR 框架通常安装了 AdobeCS5 套件的系统都默认已经附带安装了 AdobeAIR 没有安装的可以从 http://get.adobe.com/air/ 这个地址获取相应平台和系统的 AIR 框架支持。
使用说明:
整个 Mockups 使用上非常简单方便远没有 Axure 那么复杂,非常适合没有代码基础的交互设计师和用户体验设计师,只需要将所需要的原件(UI Library)从工具栏拖放到工作区即可 Mockups 的 UI Library 库非常丰富不仅包括了常用的网页界面元素甚至拓展了 iPhone iOS 的很多界面元素如 button 按钮 picker 选择框 menu 各种菜单和一些小图标,总的来说非常适合做产品的低保真原型设计,还有一个相当酷的功能被称之为“实时协作”类似于谷歌文件的多人协作模式在 Mockups 中可以有多个用户同时编辑同一文件并即时反馈给每个正在使用相同模型的用户屏幕上。
示例截图:
可以看出 Mockups 非常容易上手上图就是我用 Mockups 花了大概 10 分钟的成果类似一个 iPhone 的应用网站
适用对象:
由于 Mockups 非常适合制作低保真的产品原型所以更适合如:产品经理 交互设计师 用户体验设计师 甚至是公司高层的一些人也可以很方便的上手,虽然是很小巧的软件但目前国内有很多一线互联网公司的产品团队也在使用如腾讯搜狐网易的一些产品团队就在使用 Mockups 来做低保真产品原型。
同类产品:
Microsoft Office Visio & PowerPoint:来自微软 Office 套件中的 Visio 和 PPT 其实也是非常容易上手的产品原型设计工具 Visio 适合展示网站用户流程而 PPT 更方便展示页面 UE 体验等等;
Axure:应该是产品原型制作工具中最专业的一款了但近 600 美元的售价使得多数公司更愿意用纸和笔来代替这个东西;
OmniGraffle:做出的流程图非常漂亮但仅限于 Mac 平台不利于公司内容共享交流;
其实介绍了这么多工具我还是比较推荐 Visio 来做网站流程图而用 Mockups 来做低保真的产品原型图,如果是小的项目下一步就可以直接 HTML 了稍大一点的项目可能还需要 Fireworks 或者 Photoshop 设计一下界面 UI 然后再开发,虽然 Mockups 目前售价为 79 美元但可以通过多种方式获得免费的注册许可。
免费获取:
如果想要免费获取这套价值 $79 美元的手绘风格产品原型设计工具需要符合以下几个条件之一:非营利慈善机构或开源贡献者;学校高中班老师;加入 Mockups 的可用性专业培训;为至少 15 人演示该产品原型工具等等。
非常荣幸的是我在今年 7 月份收到了 Balsamiq 工作室寄送的免费许可,在此希望有更多的朋友尝试这款非常易用的手绘风格产品原型快速设计工具……