Balsamiq Mockups终极教程

之前介绍过Balsamiq Mockups,自己之前也用过,但这段整理设计规范,才深知之前用得不深,Balsamiq Mockups除了交互弱点,其他真的很强大,也说明充分利用好手头上的工具才是王道。回顾之前,主要有以下问题:

1、很多功能都没有用到。
比如对Geometric Shape、Rectangle/Canvas/Panel、Icon、Crop、Arrow/line、Hide Markup、Export Selected等的使用。像Geometric Shape,太常见以致被忽略,之前一直用Rectangle/Canvas/Panel控件做导航栏,实际用Geometric Shape更规整;像Arrow/line,其中Arrow Direction、Curvature,箭头加在一起多种变形,我之前也都没有完全用到。

再比如,如何在一段文字中将某个词加粗、倾斜、加下划线、标红?Balsamiq Mockups本身其实都有教我们。建议每个控件的每种状态都用下,这样会发现很多以前所忽略的功能。

2、不会分析。
对于一些复杂的形状,Balsamiq Mockups本身可能没有直接可用的控件,但我们可以通过不同控件的组合加以实现。比如百度地图上类似雨滴的标注点,开始不知道如何画出来,后来看到别人的实现:一个圆+一个菱形,当即觉得自己真笨,这都没想到。类似很多,关键在于分解。

3、见识少。
之前都是自己一个人在画,这次看到Jw做的东西后,思路开阔很多,水平也迅速升了一级。虽然我们平常很难看到别人做的,但一方面你可以到这里(软件菜单栏Help==>Download More Controls)下载别人做的原型(其中Social系列就很不错),模仿着练习一遍;另一方面可以对着iOS人机界面指南把iPhone的标准控件都绘制一遍,或者重绘一些线上知名App的产品原型图。

 

P.s.
1、文中提到的部分案例可到这里下载,顺便出个蛋疼的问题:VR Thin如何做出来的?答对的同学(限女生)将获得本人的陌陌号。==|||
2、作为一项工具,BM有自己的优势和定位,同时其页面细节同样可以做得很细致(需要考虑实现时间成本),但比掌握BM更重要的是对产品的思考。

X地图

说到手机地图App,最早的时候当然是用Google地图,后来Google慢,百度地图更快,就一直用百度了。平时用得不多,直到前段组织同学去玩,以及自己去了两个陌生的城市,百度地图是我那段用得最频繁的App之一。

使用中遇到的一些小问题:
1、收藏夹分类不明显。当时还说路线呢,明明收藏了,用户使用App时的环境并不是冷静的。
2、支持公交线路报错。在苏州时,有条公交线路的数据过期了,应该提供一个报错的机会。
3、收藏的路线里,“我的位置”后面是否可以加个括号说明下具体位置?
4、增加测距功能。当时带同学从长城回来,特想知道自己的位置到八达岭车站要走多远。

基于以上经历以及这四天的研究,在搜狗地图的基础上画了个地图App的主要原型图。里面会有一些不合理的地方,因为对地图的理解还不够深,也缺少实际的调研和数据分析,但想说的都在原型图中。

改动包括:
1、凸显主要功能。
路线放入标签栏,城市、收藏夹放入更多等。

2、简化流程。
包括对搜索,对路线的简化。

3、强化公交查询功能。
8684公交在hiapk下载次数:4865301,旅行·地图类里排名第五。搜狗地图下载次数:1028494,排名18。
8684公交在gfan市场下载:1901392,交通导航类里排名第九。搜狗地图下载:247207,排名18。
(2012.8.22的数据)

 

P.s.
原型图下载:HTML文件(解压后点击start),rp文件(用Axure打开)
思维导图下载:png文件xmind文件(用Xmind打开)

一款云笔记App构思

市面上的笔记App总不能让人满意,就自己动手用Balsamiq Mockups画了一个我所期待的笔记App的原型。

一、设计理念
1、简单易用。
最快地让用户记好笔记,因为只是记个笔记而已,而且灵感转瞬即逝。
2、看重整理。
笔记最终是要整理的,不整理的笔记没有意义,在整理中收获更多。移动端进行简单、琐碎的编辑,PC、Web端进行系统的整理。

二、功能点
主要:
1、新建笔记:文字是最常用的,是最终形态;音频方便,有时文字来不及;照片是特定需要。
2、多终端同步:智能终端的丰富,数据同步才有了需要。

次要:
1、查看:浏览,搜索
2、整理:编辑,删除,移动

再次要:
1、分享:邮件、短信、新浪微博
2、安全:密码锁定

 

P.s.
App原型png图片下载地址,bmml文件下载地址

产品设计师必备工具之Balsamiq Mockups

Balsamiq Mockups是一款手绘风格的原型软件。优势是简便易操作,手绘风格的图也清爽好看,不足是交互这块,当然人家就不是走大而全路线的。个人觉得适于简单产品,或复杂产品前期的构思和讨论。

软件的Help菜单里有一项Download More Controls(下载更多控件),我就下载了iPhone Keyboards,然后仿着做了一张微信的登录图:

P.s.
1、关于该软件的详细介绍,看此文足矣;
2、扩展阅读:12

P.s.2
前几天用金山快盘共享一做好的文件给同事,结果显示乱码,奇怪极了,一度以为是金山快盘的一个bug,后来突然想到,可能是没有勾选“Use System Fonts(使用系统字体)”的缘故,一试果然OK了。