丁宇 | blog

Twitter上不去，实在忍不住，不得不跑上来骂一句：Nokia的证书系统就是一沱屎！1000个软件有999个都因为这沱屎而不能安装。

GFW是另外一沱。

用Firefox有5年多了，在Windows上绝对是最棒的浏览器，可是在Mac上由于运行速度的原因只能算二等公民。FF3比之前的版本提速很多，可还是慢，有时甚至要花费4-5分钟的时间才能从其它程序切换到FF－一点不夸张。几经犹豫，最终下定决心，在Chrome足够成熟且支持扩展之前，使用Safari作为主力浏览器。

Safari爽在哪里

Safari确实快！程序的启动和响应速度比FF可谓是天壤之别，而且其页面的渲染速度也很惊人，根本就不需要软件测试，这种速度差异肉眼都能看出来！

Safari的字体渲染效果也很棒！相比较而言，FF2在Mac上的字体渲染可以用惨不忍睹来形容，FF3有了很大改观，但比Safari仍然有差距。

此外，Safari对双指缩放有着原生支持。自从用了Safari以后，使用command++来放大网页的习惯已经没有了，两根手指直接一划，方便得很！

武装Safari

和Firefox一样，不装插件的Safari基本上没法用。经过一个月的使用，我给Safari安装了如下插件：

Xmarks

就是以前的Foxmarks，自从Google Browser Sync（GBS）宣布停止开发后，我就不得不使用Foxmarks来同步书签。所幸它现在不仅支持Firefox以外的浏览器，还可以同步网页密码，要是能像GBS那样同步历史记录就好了。

Glims

老牌插件Saft的替代品。基本上Saft有的功能Glims都有，Saft没有的功能Glims也有，完全可以用它来替代Saft。可惜的是，Glims不能像Saft一样管理浏览进程，一旦浏览器崩溃（和PC上的FF比起来还挺频繁），就只能用历史记录来找回之前的页面，有点麻烦。

SafariBlock

屏蔽广告的插件，可以订阅广告列表，美中不足的是不能像Adblock Plus一样手动屏蔽网页上的所有内容，比如，你不能用SafariBlock来屏蔽一个div。

另外，它不能正常解析Adblock Plus的订阅地址（虽然它宣传可以），所以你可以像我一样手动订阅Chinalist这个广告列表：http://adblock-chinalist.googlecode.com/svn/trunk/adblock.txt

除了SafariBlock以外还有个Safari AdBlock，遵循GPL协议，也可以一用。

SafariSource

一个给HTML源代码进行语法加亮的插件，调试网页时很好用。

Tidy

可以自动对HTML代码进行W3C校验，并给出结果，网页设计师必备。

DeliciousSafari

这东西就像Firefox上的Delicious扩展一样好用，Delicious用户必备。

GreaseKit

GreastKit让Greasemonkey脚步也能运行在Webkit核心的浏览器上。

Safari不爽在哪里

对我来说，Safari缺少Torbutton、Foxyproxy和Firebug这几点很不爽。Mac上用Tor似乎没有Windows上那样方便，而缺少一个像样的智能化代理插件，使我每次翻墙都头疼；Firebug根本没办法替代，Safari上的Web Inspector看起来很漂亮，可惜中看不中用。

好吧，我失业了。

因为经济危机的缘故，Idean关掉了上海办公室，我和同事们集体失业。

其实是一家很不错的公司，管理绝对的以人为本，非常人性化，工作强度适中，又继承了北欧国家一贯的高福利的特点，工作起来很舒适。

在朋友那儿借了个NDSL，窝在家里玩“勇者斗恶龙”……

前言

用户研究到底研究什么？各公司情况不一样，做法自然也不同。比较常见的情况是，很多公司根本不做用户研究，完全凭行业经验和拍脑袋来决定“用户需求”。有一些公司想到了要做用户研究，拿起电话就问：你觉得我们的产品怎么样……哦，挺好的……那就好，于是得出结论：用户喜欢我们的产品。还有一些公司觉得面对面访谈效果好一些，便约好用户，闲聊了几句发现没话说了，好像用户对产品也没什么意见，结果只能结束访谈，最终也没能拿到什么结论。

那么，用户研究到底研究什么呢？这个问题貌似并没有一个大家都认可的答案。我则一直在使用一个我称之为MACUEE模型的方法来做用户研究。

MACUEE的原型来源于Idean的培训课程，我看到其中一页幻灯片后，觉得它刚好可以适用到用户研究上，经过在项目中不断地摸索和揣摩，最终将其发展成了现在的MACUEE模型。

MACUEE解决什么问题

这一模型主要解决以下一些问题：

1. 如何有效地挖掘用户需求？
2. 从哪些方面着手进行用户研究？
3. 从哪些角度去访谈？

MACUEE详解

完整的MACUEE模型可以用下面的图来表示：

由上图可见，MACUEE分别代表“动机（Motivation）”、“操作（Action）”、“情境（Context）”、“用户（User）”、“经验（Experience）”和“期望（Expectation）”。解释如下：

用户

我把“用户”放在最前面了，因为你得首先搞清楚你的用户是谁。这个要是弄错了，后面的方法和流程再对，结果也是错的。简单地说，找什么样的用户取决于你产品的目标用户。比如你想开一家麦当劳那样的快餐连锁店，你的客户群就可以是已有的麦当劳消费者。

但这个问题远没那么简单，实际上我觉得这是整个环节中最难的。就拿上面的例子来说，什么叫“麦当劳消费者”？我这辈子第一次到麦当劳买东西，你说我算不算消费者？每天都到麦当劳吃早饭，你说我算不算？或者我只是喜欢那里自由的环境，却从不在那里吃东西，这样算不算？说白了，就是符合什么样条件的人，才是你的用户？

这个问题绝不是三言两语可以说得清的。总之，找到你的用户，了解他们都是一群什么样的人，他们自身的特质，将会影响到其行为方式。因此你对他们了解越多越好，最好是无所不知，无所不晓 ，呵呵。

动机

我一般把用户需求分为两个层面：动机层面的需求和操作层面的需求。这里先说动机。

所谓的动机，就是要做某事的原因。比如我肚子饿了，想吃东西；或者朋友给我发了一封邮件，我需要去看一下。动机回答的是用户为什么要用你的产品的问题。这很关键，可以说是用户使用某产品的最原始的需求，研究过程中必须得找出动机来。有了动机，你可以知道该做什么产品，此产品应具有哪些功能。

情境

情境就是用户所处的时间和环境等外部因素，这也是需要搞明白的地方，因为情境会影响用户的动机、操作和期望。比如说“肚子饿了，想吃东西”是动机，那么当我看到街上有个面包店时，我的动机会变为“肚子饿了，想吃面包”。

情境有时候可以对产品设计产生非常大的影响。比如我同事在非洲做过一个地下矿井挖掘机的项目，工人在深入地下一公里的位置操作机器，环境非常恶劣，高热、潮湿、尘土飞扬，现有的挖掘机操作面板上常常覆盖了一层尘土，很难看得清楚；而长时间在潮湿高热的环境里工作又会使人多少有些神志不清，此时情境无疑会对工作有着至关重要的影响。

操作

当用户有了动机后，他会考虑如何操作以便实现动机，这就是操作层面的需求。比如当我来到面包店后，我应该拿起一个托盘自助挑选呢，还是请服务员帮忙？我付款时要用现金还是刷卡？这些都是具体的操作层面的需求。操作层面的需求对交互设计帮助最大，充分了解操作层面的需求，可以让设计师设计出与需求相一致的界面。

经验

用户过去的经验也会产生影响。这个很好理解，我就不举例了。但要注意的是，在调查用户过去的经验时，不妨也使用MACUEE模型，即从这六个方面去了解他过去的情况。

另外经验也可以被称为“用户习惯”，我们知道习惯是很强大的，尽量不要去改变用户的习惯。有一些新产品就是因为没有充分调研用户经验和习惯而失败。

期望

用户在具体操作前往往会对操作结果有一定的期望。比如上面买面包的例子，在我拿出银行卡付款时，我显然期望这家店可以支持刷卡。Apple的产品能够给人带来惊喜，一个很重要的原因就是它不仅仅是满足期望，而是超越期望。

一个完整的例子

现在我们来看一个完整的例子。

假设我们打算设计生产一款全新的mp3播放器，不妨叫它Zunee（嗯，显然，这又是一款iPod杀手）。这款播放器定位高端，价格不菲，专门卖给有钱有闲的人。

那么第一步我们先来做用户模型（Persona）。不妨假设经过调研，我们发现符合条件的用户都具有如下特点：年龄介于28-35岁，月收入在5万左右，明天早上晨跑，边跑边听激烈的音乐。

第二步我们找出用户动机－为什么在晨跑时要听音乐？经过研究发现边跑边听音乐可以减少运动时的孤独感，听激烈的音乐运动起来更带劲儿。

第三步看看使用情境。研究发现用户在跑步时往往身穿体恤短裤，播放器放在哪里成了问题；此外由于用户此时需要听些激烈的音乐，而目前的播放器里面什么音乐都有，因此每次跑步前不得不设置好播放列表，很麻烦。

好了，问题出来了。记住，用户往往是在特定的情境里面产生问题，所以如果访谈时你上来就问：你觉得你现在的播放器使用起来有什么问题。用户多半回答不上来。

第四步挖掘操作层面的需求。由前文可知，用户在操作上需要1）以合理的方式携带播放器；2）以最便捷的方式播放激烈的音乐。

第五步则是以往的经验。研究发现，用户觉得用袜套把播放器固定在胳膊上觉得很热，此外，他很喜欢以前用过的一个播放器，这个播放器可以利用内建的运动感应器来自动选择合适的音乐。

瞧，随着研究的深入，用户甚至自己提出了解决方案！这就是为什么要调查以往经验的原因之一。

最后一步就是获取用户期望。研究得知此类用户希望播放器能够更加便携、能够适应不同的天气情况（比如下小雨）、能够自动化地播放合适的音乐等等。

经过对上述这六个方面的研究，用户及其需求已经比较清楚了，接下来就可以进入产品设计的工作了。

一些注意事项

看完了介绍先别急着尝试，下面的注意事项也很重要：

1. 要以用户为基础进行调研。对什么样的人用什么样的方法、问什么样的问题。比如我们前段时间作了一个关于油漆软件的项目，大部分用户都没有受过良好教育，抽象的、概括的问题人家根本听不懂或答不上来。
2. 要以情境为基础进行调研。无论是调查动机也好经验也罢，一定要以一个个情境为中心来推进话题，在每一个情境中分别挖掘动机、操作、经验和期望。最好是陪用户一起体验情境，在用户使用产品的过程中进行访谈。
3. 在调查期望时小心不要被用户带到沟里。调查期望不是让用户畅想这产品能具有什么功能，而是为了满足现有需求应该具有什么功能。我记得有一次做对讲机的项目，当时在场的用户挺多，客户代表也在，场面不太好控制，用户居然说要在对讲机上集成WiFi和3G……我后来和同事打趣说，当时要是再不收住，一会儿要上4G LTE了，呵呵。

差不多就这么多吧，有问题欢迎讨论。

写了一个新的jQuery插件，作用是根据你输入的文章标题，自动地将其中的英文字母和数字提取出来，然后生成一个slug。slug通常的作用是给blog文章一个漂亮的网址，比如你现在看到的这篇文章，它的网址是 http://dingyu.me/blog/posts/view/jquery-simpleslug-plugin，它的slug就是jquery-simpleslug-plugin。

这个插件在jQuery Plugin上的主页是http://plugins.jquery.com/project/jquery-simpleslug，觉得好用就投上一票 :D

演示

http://dingyu.me/blog/files/jquery-simpleslug-plugin/demo.html

用法

用法很简单，比如你blog编辑界面上用来输入slug的文本框的id为slug，用来输入文章标题的文本框的id为title，则只要如下一行代码即可：

$('input#slug').simpleslug({
	source: 'input#title'
});

source的意思就是生成slug的源文本框。除了这个参数以外，还支持以下两个参数

preview

你可以在input的旁边放一个id为preview的span，然后这样用preview：

$('input#slug').simpleslug({
	source: 'input#title',
	preview: 'span#preview'
});

这样插件会实时地把生成的slug显示出来，用处就是告诉用户这篇blog文章的完整的网址。比如你可以在span前面写上 http://dingyu.me/blog/posts/view/。

replacement

默认情况下单词或数字之间的间隔符是“-”。比如你输入“Hello world”，那么出来的slug就是“hello-world”。你可以改成你喜欢的，比如：

$('input#slug').simpleslug({
	source: 'input#title',
	preview: 'span#preview',
	replacement: '_'
});

和Wordpress集成

默认情况下，Wordpress会把文章标题整个作为slug，而有些人只想要其中的英文和数字。利用SimpleSlug的slugify()方法，这很容易：

1. 修改 wp-includes/js/autosave.js
2. 在文件开头加入如下代码：

   function slugify(str, replacement) {
   		//replace everything that is not a word character
   		slug = str.replace(/[^0-9a-zA-Z]/g, replacement);
    
   		//replace mutilple continous replacements
   		slug = slug.replace(eval("/"+replacement+"{2,}/g"), replacement);
    
   		//replace the beginning and ending replacement(s)
   		slug = slug.replace(eval("/(^"+replacement+")|("+replacement+"$)/g"), '');
   		//convert the slug to lower case
   		slug = slug.toLowerCase();
    
   		return slug;
   }

3. 找到文件中的

   jQuery("#title").val()

   替换为

   slugify(jQuery("#title").val(),'-')

4. 保存文件，搞定！

下载

http://dingyu.me/blog/files/jquery-simpleslug-plugin/jquery.simpleslug.0.1.js