I have enjoyed paper/white-board prototyping for a long time, even made it my teams’ one of first “rules of engagement”. I have also been a big fan of Balsamiq Mockups, and today I would like to introduce you another great quick prototyping tool: WireframeSketcher.

In a nutshell, WireframeSketcher is, as its home page says:

WireframeSketcher is an Eclipse plugin for creating wireframes, screen mockups and UI prototypes.

Having tried it out on two small projects in the last two weeks, I am impressed. It’s a neat, and pleasant tool to use and fits very well with both my personal and my team’s development process.

First, a screen-shot showing it in action:

wireframesketcher-screenshot

Being an Eclipse plugin, it means

  • developer friendly, as it’s right inside an environment already familiar to many developers (80% of my team uses eclipse on a daily basis), there is no extra software or framework or platform to install, and developers can just svn up project’s design mockup folder, then open the mockups in the same IDE, very neat and appealing experience compared to that of other prototype tools;
  • cross platform;
  • enjoys the benefits Eclipse plugin infrastructure brings, like update mechanism

Highlights I want to mention:

  • The fastest and most responsive prototype tool I have tried and used;
  • Mockups are stored as xml documents instead of image files, that means it’s friendly to scm tools like Subversion and diff;
  • Has annotation support, good for asynchronous communication;
  • Grouping of UI elements can be nested, i.e. I can group a label and an input box first, then group them with a button as another group, when ungrouping the latter, the first group of label and input box is still intact;
  • Presentation of a mockup or a storyboard is handy, it’s right inside Eclipse. There is no need to export them to images first then pasted to a .ppt file in order to just show the mockups or the sequence of the mockups;

The most pleasant surprise to me is “Master Screen”, which allows me to pick any existing mockup as the base of a new mockup, this helps save time particularly when many of a site pages share the same header and footer. And there’s more. When I later make changes to the master screen, all screens that are “derived” from it automatically get updated without their xml files being modified (again, very friendly to Subversion and the like).

A close look of my sample mockups:

wireframesketcher-1

Storyboard example:

wireframesketcher-storyboard

Some nitpicks or features I would like to see in the future WireframeSketcher:

  • annotation does not provide link from notes to the annotated element
  • I strongly believe url is an important element of user experience, but currently there is no way to specify the url on the browser control (I would suggest it takes two lines of input, the first being the page title, and the second line for the url);
  • I couldn’t find a way to reuse a group of UI element, my idea is to allow user to have a collection of custom built (e.g. Paginator, Chinese version of “Loren Lpsum”) or assembled controls or control groups (e.g. a text input field always comes with a label and input box) as a separate category, this would help productivity among a project team at least;
  • colors support in more controls (e.g. form validation error, and different colors in progress bar, red for slow progressed, and green for complete or near complete)
  • One feature I particularly like about Balsamiq Mockups is the command line script to batch process (e.g. export to image files), I use it in my Ant build script to export mockup images. I hope this feature is coming to WireframeSketcher soon;
  • Hopefully, a community could grow out of this tool, like what Balsamiq has achieved with Mockups To Go;

Conclusion? I would strongly encourage any developer or any development team that live and breathe in Eclipse to give WireframeSketcher a serious try.

Oh, did I mention a tiny problem with it being an eclipse plugin? RescueTime now can not tell if I am actually using a Dev Tool or a Design Tool … But heck, I sure can live with that given such a great prototype tool.

平时工作中在界面设计的时候,我总是要求工程师先在纸上画图,初步确定后,仅仅用HTML+CSS做出静态的界面再次与用户(主要是其他业务部门)确认后,再动手写实际的代码。

纸上的原型设计是经常使用(至少我自己)的初期设计方式,办公室里用白板(空间大,而且环保些)和马克笔。这种办法不仅快,能尽早发现在文字和口头的沟通上理解不一致的地方,同时也尽可能减少开发成本和因为理解不一致导致返工的情况。纸上的原型设计在可用性上能起到很大作用,也有专门一本书介绍和探讨,这就不多说了。

但是这也有它们本身的不足。首先是没法很好地保留设计和讨论的内容,我曾经尝试用数码相机把白板上的内容拍下来,但仅仅是为了保留,没法有效地在后续的讨论和工作中继续使用。

几年前发现过一个做网站的设计草图的工具软件,Denim,这是一个大学的项目,学术性和尝试性的味道强了些,界面设计上有很多新颖的地方,但毕竟不是从每天蹲在“战壕”中的工程师的角度出发,玩玩可以,实际工作上还是不大可能用上。(附:Denim的截图)。

前阵子发现了一个新软件:Balsamiq Mockups,用下来发现它真正抓住了原型设计的核心与平衡点,既能快速设计草图,又能比较好地进入到平时团队工作的流程和工具中,可以说是击中了原型设计的Sweet Spot,强烈推荐。

先看看截图:
balsamiq markup screenshot

再说说功能和亮点:

  1. 操作方面,拖拽,控件分组,甚至元素之间的对齐都做得很贴心;
  2. 预制了很多界面元素,从简单的输入框,下拉框,浏览器主要元素,到经常用得到的导航条,日历,表格,到复杂的Tag Cloud,Cover Flow, 地图,WYSWYG的格式工具栏等,有了这些不用从头画起,往往比用白板都快;
  3. 界面元素的修改很简单,比如导航条的几个标签页的label,就是用逗号分隔的文字,下拉框的选项就是分行的文字;
  4. 使用xml语言来记录和保存界面元素和布局,
    1. 这使得每个设计都能被很好得放进SVN,Git,和CVS等工具中进行管理和跟踪;
    2. 可以设计复杂的界面元素,保存后,以后可以重复使用(包括修改);
  5. 可以将设计导出成PNG格式的图片;
    balsamiq markup exported to png
  6. 可以用命令行进行导出操作,这样就能让我写个脚本,从svn里checkout某个目录下的所有设计文件后,导出图片,打包后用邮件发到项目经理,工程师甚至客户那;
  7. 跨平台,Balsamiq Mokups是用Flex和Air实现的,所以在Mac OS, Linux和Windows下都能使用;
  8. 不仅仅有桌面版本,还有能集成在Confluence,JIRA,和XWiki中的版本,使得异地在线协作更方便有效;

据作者说,现在这款软件的设计就是用它自己来设计的,经典的“吃自己的狗粮”,这也让我对其更有信心,因为它是开发者为开发者写的软件

更多信息,大家可以到它的网站上了解。

还有值得一提的是Balsamiq Mokups的在GetSatisfaction上的用户支持和服务,作者Peldi对问题报告,新需求的回应很积极和及时。而且根据这个讨论上看,到月底就会有一个专门用来分享界面控件设计的社区网站了,很期待。

再要说的一点是这款软件是要付费的,79美元(也可以免费,具体如何免费,请看网站上的说明),相对于它能节省下来的时间和提高的效率,是很值得的。Peldi说在2008年,这款软件就从1,322位付费用户那获得了162,302美元的收入(其中仅12月份就有39,000美元),这令人鼓舞地证明了只要是提供真正价值的服务和软件,就能够创造很好的收入,即使在经济萧条的寒冬里。

另外说一句, GetSatisfaction也是一个很不错的服务。

tools @ 22 March 2007, “No Comments”

为了能够在blog里显示代码,一直没有找到理想的解决方案,因为没能满足以下三个要求:

  1. 能够根据语法高亮或者着色;
  2. 不在代码里添加内嵌的css代码;
  3. 没有副作用(比如第二点,在代码里直接插入渲染的代码,要修改可能就比较麻烦),包括增加服务器的压力;

今天找到一个满意的方案:google-code-prettify,很好地满足了前面三个要求,使用方法很简单

当然,如果在RSS阅读器里看代码,是看不到语法着色的(这是第二个要求的代价);如果浏览器关掉了Javascript,也看不到(这是第三个要求的代价)。

例子:

PHP:


require_once 'Url/PathVars.class.php';
...
require_once 'View/SearchPage.class.php';

class Controller_Dispatcher
{
	public static function handle_request($url)
	{
		$pv = new Url_PathVars('/');
		
		// TODO:this is ugly, got to change it
		if (substr(strtolower($pv->fragment), 0, 8) == '/search?')
		{
			self::handle_search_request($pv);
			return;
		}
		switch ( strtolower($pv->fetchByIndex(0)) )
		{
			case '':
				self::handle_default_home_request($pv);
				break;
			case 'people':
				self::handle_people_scope_request($pv);
				break;
		...
	}
}

Javascript:

window.addEventListener(
		"load", 
		function() 
		{
			twsstopper = new TWSStopper(window);
			window.twsstopper = twsstopper;
			twsstopper.startUp(window);

		    var appcontent = window.document.getElementById("appcontent");
		    if (appcontent) 
			{
    		    if (!appcontent.TimeWastingSiteStopper) 
				{
        		    appcontent.TimeWastingSiteStopper = true;
	            	appcontent.addEventListener("DOMContentLoaded", twsstopper.onAction, false);
    	    	}
			}
		}, 
		false);

bash:

cd $TMP_DIR

if [ -f "chrome.manifest" ]; then
  echo "Preprocessing chrome.manifest..."
  # You think this is scary?
  #s/^(content\s+\S*\s+)(\S*\/)$/\1jar:chrome\/$APP_NAME\.jar!\/\2/
  #s/^(skin|locale)(\s+\S*\s+\S*\s+)(.*\/)$/\1\2jar:chrome\/$APP_NAME\.jar!\/\3/
  #
  # Then try this! (Same, but with characters escaped for bash :)
  sed -i -r s/^\(content\\s+\\S*\\s+\)\(\\S*\\/\)\\s*$/\\1jar:chrome\\/$APP_NAME\\.jar!\\/\\2/ chrome.manifest
  sed -i -r s/^\(skin\|locale\)\(\\s+\\S*\\s+\\S*\\s+\)\(.*\\/\)\\s*$/\\1\\2jar:chrome\\/$APP_NAME\\.jar!\\/\\3/ chrome.manifest

  # (it simply adds jar:chrome/whatever.jar!/ at appropriate positions of chrome.manifest)
fi

BAT?:

xcopy build\skin build\chrome\skin /i /e
...
rmdir /s /q build\locale
rmdir /s /q build\skin
 
cd build\chrome
7z a -tzip "%x%.jar" * -r -mx=0
cd ..\..
Tech, tools @ 03 February 2007, “2 Comments”

我的电脑一直是用Linux和Windows双启动,Evolution是在Linux上的email客户端,现在打算换成Thunderbird。其实Evolution没什么特别不好用的地方(除了更占内存,偶尔崩溃等小麻烦外),可以继续用下去。只是现在打算windows和linux下都用同一个email客户端,方便管理(导入导出备份等),Thunderbird就是最好的选择了。

除了跨平台,TB最大的功能就是扩展,跟firefox一样,强大的扩展性可以说是它们的killer feature。现在在用的有:

比较有趣的扩展是Display Mail User Agent,它会显示发件人所用的email客户端软件的logo,用了它才发现原来有那么多以前都不知道的email客户端软件。

另外值得一提的是TB的垃圾邮件过滤也做得不错。

现在Evolution最让我怀念的功能是unmatched vfolder,希望将来TB上也能有这样的功能,或者有扩展提供这个功能,实在不行,自己写一个也不是不可能。

Tech, tools @ 08 January 2007, “6 Comments”

平时使用电脑的时候为了备份或者整理硬盘空间,需要了解目录的大小,Linux上有df和du两个命令,Windows上却没有对应的命令或者工具,而Windows Explorer(资源管理器)上的Details view里只能显示文件的大小,不能显示目录的大小。

痒总是有人会挠的,于是就有了Folder Size和WinDirStat。

Folder Size是个Shell Plugin,安装后,打开Windows Explorer,到要查看的目录,选择detail view,鼠标移到列表头,按右键,选择Folder Size就可以了。要注意的是因为读取目录大小的操作可能比较耗时和导致大量读硬盘的操作(如果某目录下子目录深,文件多,或者变化频繁)。在控制面板里还有个Folder Size的选项,可以终止Folder Size服务。

FolderSize

WinDirStat是个独立的程序,它在显示目录大小之外,还提供了使用TreeMap的直观的展现。

WinDirStat