心弦blog

无缘D2？

丁宇（Felix Ding） — Thu, 20 Nov 2008 20:27:54 +0800

继连续参加了两届D2前端论坛以后（第一届和第二届参会感受），第三届我以个人身份报名，被拒了：

“感谢您报名参加 D2. 因为名额有限，我们经过认真考虑，非常遗憾地通知您：您未能受邀参与本届 D2 前端技术论坛。”

Greasemonkey脚本：保持安静（让Discuz论坛上贴的音乐自己待会儿）

丁宇（Felix Ding） — Wed, 19 Nov 2008 16:25:32 +0800

花了点时间写了这个Greasemonkey的小脚本，作用是：

在论坛上点开帖子的时候，如果帖子里面有歌曲，因为心里一点准备都没有，常常被吓一跳。这个脚本可以让播放器默认隐藏起来，想听的话点播放就行，或者你也可以下载此歌曲。

源代码及下载地址见：http://userscripts.org/scripts/show/37123。

顺便说一句，userscripts.org这个网站做得真不错！

吴虞，吴忧吉他音乐会和《奇鸟行状录》

丁宇（Felix Ding） — Wed, 19 Nov 2008 13:45:45 +0800

“吴虞，吴忧吉他音乐会”

上周六参加了在上海音乐学院举办的“吴虞，吴忧吉他音乐会”。

两位表演者年纪都不大，一个叫吴虞的19岁，另一个叫吴忧的才15岁。这哥俩的名字挺逗的，同姓不说，名字虽然为不同的两个字，却是一个意思。

人不大，水平却不低。两人都有国内外比赛的经验和好名次，都受教于名师叶登民先生门下。

吴忧还算是我的老乡－他来自于吉林省四平市。我上学的时候还专门跑去四平吃李连贵熏肉大饼、打车寻找传说中的“四平精神病院”。在我们那儿，说谁谁该去四平精神病院就是骂他脑袋有问题，呵呵。这话从小一直说到大，却从未亲眼目睹这个医院，就连有关这个医院的正式消息都没有听说过，所以这个场所对我们来说都只是一种象征……扯远了，怎么说吉他说到精神病院来了，哈哈。

听了二人的演出，我喜欢上其中两部作品，一是泰萨的“回转木马组曲－吉他二重奏 ”，二是巴赫的“吉格与变奏BWV.997”。听后者的时候我一直在想：究竟是什么样的感情和动机，让巴赫创作出如此变幻又略带沉重的音乐呢。

奇怪的是后来在Youtube上找到的“吉格与变奏BWV.997”都不是我那天听到的，难不成我记错曲目了？

上另一个我喜欢的曲子：索尔的“魔笛主题与变奏(Introduction & Variations on a Theme by Mozart, Op.9/Variations on A Theme From "The Magic Flute")”：

这里是一些用手机拍的照片：

吴忧在演出

吴忧在演出（近照）

师徒三人

《奇鸟行状录》

我首先要说的就是：我居然把这本书看完了！这么变态的书我居然都能从头到尾一字不拉地读完，相当佩服自己，想必以后便是《尤利西斯》也都不在话下了。

《奇鸟行状录》

《奇鸟行状录》有多变态呢？请允许我摘抄一段译者林少华先生的原话：

“小说一开始便推出一连串偏离常规的现实：该上班的不上班，该上学的不上学，该归宿的不归宿，水井干了，房子空了，猫不见了。继而各种奇妙人物纷至沓来：特异功能者，“意识娼妇”、占卜师、中尉、服装设计师、脸上有疫的兽医、剥皮鲍里斯……健中有谜，戏中有戏，画中有画。似梦非梦，似真非真，似我非我。不相连而又相连，离奇而又不离奇，无可理喻而又可以理喻……”

现在你大概知道这本书有多变态了吧。据豆瓣上一位朋友讲，此书“在国内的销量,是村上所有的书中,最少的. 只有5000-6000册的样子”，林少华老师甚至说，看过此书的人“都很了不起”！

在所有读过的村上的书中，《挪威的森林》是在几小时之内一口气读完的，和《奇鸟行状录》篇幅接近的《海边的卡夫卡》，也只花了不到一周的时间。而我整整花了一个月，才断断续续地读完了《奇鸟行状录》。莫名其妙的意象太多、语言太晦涩、人物的行为举止太让人费解，而最让人无法忍受的，是代表恶势力的意象太抽象太无以名状，很多时候都感觉男主角像是在和风车对战的堂吉诃德。

读完了这本书，我想村上的作品应该告一段落了。接下来有什么好书可读吗？

闲聊网页制作工具

丁宇（Felix Ding） — Thu, 13 Nov 2008 11:12:43 +0800

试用了一下刚出的Dreamweaver CS4，第一感觉是速度比以前快了。试用了一会儿就关了，在这个CSS决定表现的时代，想不出有什么理由还用它。“网页三剑客”的说法现在已经几乎听不到了。

做网页，我的常用工具包括Editplus、Coda和CSSEdit。

Editplus

在Windows上，Ultraedit太复杂，Aptana太笨重。Editplus小巧轻便，想开就开想关就关，一个字：快！无论是CSS、HTML还是Javascript我都用它包圆了。

Coda

Mac上很多人喜欢用Textmate，尤其是写Ruby的人更是对它赞不绝口。我则偏爱Coda，主要的原因是其用户体验好。不光是我这么认为，Apple也是如此－实际上，Coda是2007年的“Apple Design Award”获得者，奖项是“Best Mac OS X User Experience”。现在知道它的厉害了吧！

关于Coda的具体功能和特点，你可以去它的网站详细了解一下。顺便说一句，它的网站做的也是一流的棒！不仅视觉效果非常漂亮，而且和Coda的界面风格统一，更绝的是，就这样一个看似简单的网站，却发明了两种Javascript特效，一是“Download”按钮上面的浮动提示框，二是网页主体部分的滑动面板。目前这两种效果都已被jQuery爱好者封装为jQuery的插件。

Coda的官方网站

CSSEdit

其实Coda也可以编辑CSS，并且功能也不赖，可是和CSSEdit比起来还是稍逊一筹。

CSSEdit最让我满意的，有两个地方。一是其代码提示的手感非常好，这手感堪比MS的IDE（比如VB），写代码时干净利落、一气呵成，爽快得很！二是其“实时预览”功能非常好用，屏幕大的话，左面放预览窗，右面是编辑器，一边写CSS一边看效果，不用保存、刷新和切换，工作效率之高可想而知！

CSSEdit和24寸宽屏

另外，CSSEdit也是2007年“Apple Design Award”得主，奖项则是“Best Mac OS X Developer Tool”，它的官方网站做得也很棒！

第三届D2前端技术论坛

丁宇（Felix Ding） — Mon, 10 Nov 2008 20:18:00 +0800

D2前端技术论坛马上就要迎来它的第三次活动（第一届和第二届的参会感受），这次的主题是“前沿技术与前端协作”。我比较感兴趣的是这个“前端协作”，因为前端技术越来越像“后端技术”，那么相比较而言，在团队协作方面它的流程、方法和工具有哪些新的东西或经验，是个颇有意思的话题。比如，有多大可能做到像Java基于Eclipse的那种团队开发模式？

其中特别有2个主题我比较期待，一是由阿里巴巴的徐湛带来的“前端敏捷开发-质量与效率的战争”，因为敏捷并不等于损失质量，或者这里边的“敏捷”不是“Agile”？二是“IE8 as future platform”，虽然在前端工程师眼里IE以问题多闻名，但以MS的水平来说，这未必是技术上的问题，所以听听MS对“未来平台”的展望，或许可以从技术上了解浏览器接下来的发展趋势。

南京南京

丁宇（Felix Ding） — Sun, 09 Nov 2008 11:26:14 +0800

前不久在南京游玩了一番，这是我第一次去南京，收获不少。

南京真是个相当不错的地方，文化氛围极为浓厚，街上绿树成荫（走在路上颇有家乡的感觉），小吃众多，经济也非常发达，生活起来应该是相当舒服的。

南京火车站

南京火车站是我见过的最漂亮的火车站，虽然火车站本身的设计并不是非常合理，比如人车混流、候车大厅稍显混乱等，但当你走出站台，面对平静广阔的玄武湖时，所有上述缺点都不值一提。

玄武纪事

湖南路狮子桥

这是南京著名的小吃一条街。我们慕名去了其上的尹氏鸡汁汤包。到了以后发现，小店不大，排队的人可真不少。坐下来一尝，汤包果然好吃！味道甜甜的、汤汁多而不腻，非常可口。倒是南京人爱吃的鸭血粉丝我不大习惯，一碗鸭血粉丝汤，我就把汤喝了，粉丝吃了几筷子，剩下的一点没动，服务员基本上是原样端回。

可惜光顾着吃了，也没拍照。

南京地铁

南京的地铁进出站闸机是对开门式的，投了币（就是地铁票）以后，门朝两侧打开，人就可以畅通无阻了。这点比上海地铁好多了，上海地铁采用的那个旋转式栏杆很烦，我经常用手去推开它。

总统府

总统府即孙中山和蒋介石等官员办公的地方。在历史上这还是著名的“两江总督府”和太平天国政权办公的地方。

下面请听题：“两江”指的是现在的什么地方？

总统府

喜欢这地儿－总统府对面的CBD

南大

南大漫步

在南大校园里闲逛时，还看到了支付宝的招聘广告，仔细一读，发现敢情大辉等一干人当天就在南大招聘，世界有多小！

夫子庙

夫子庙本身其实没什么意思，但以它为中心的商业区内却不乏好玩之处。比如秦淮河的渡口、乌衣巷和江南贡院等。商益棠先生在他的文章《秦淮八艳与秦淮八绝》中这样说道：

“应考过吴承恩、唐伯虎、郑板桥、吴敬梓、翁同龢、袁枚、张謇、李鸿章等名人的江南贡院，所出的状元达58名，占清代状元总数的52%。如此声名显赫令人肃然起敬的威严肃穆的高考考场，却设在秦淮青楼群当中，门当户对且被各式各样的妓院重重包围着；”

“又比如说，不遗余力宣扬“男女授受不亲”“非礼勿视”的夫子庙，却允许素不相识的男男女女在近旁眉来眼去勾肩搭背打情骂俏随便上床。”

单凭此段文字，想必你也能想象出这里独特的风貌。我在这儿买了一只咸水鸭，吃到嘴里面也不知道是吃鸭肉还是吃咸盐，哈。

秦淮河

十里秦淮

来南京玩，坐画舫夜游秦淮河是绝对不可错过的！坐在名为“画舫”的小船上，随着导游的讲解以及两岸景致的不断变换，好像真的能感受到古代的遗韵。秦淮河相关的典故很多，40多分钟的游览也只能管中窥豹而已。

中山陵

我们去中山陵游玩那天，天气真是出奇的好，天空蓝得堪比家乡，让人不由心旷神怡。

中山陵前

站在中山陵的最高处，回头望去，整个南京尽收眼底。

回首遥望南京城

明孝陵

又犯懒了，不想写了，直接贴图吧：

向明孝陵进发

神采奕奕

明孝陵中的古树

明孝陵中漂亮的草坪和蔚蓝的天空

神道

Apple和它的设计－8. “One more thing”及写在后面的话

丁宇（Felix Ding） — Fri, 07 Nov 2008 15:17:16 +0800

上一篇：Apple和它的设计－7. Apple的设计方法和过程

“One more thing”

“One more thing”这句话，俨然已经成为了Jobs演讲的一个亮点甚至传奇。Jobs是个演讲高手（当然也是炼出来的），他经常在整个演讲接近尾声的时候，宣称要讲的都讲完了的时候，像突然想起来一样，说：“哦！还有一件事儿（One more thing）”，然后便噼里啪啦地展示出Apple的全新重量级产品，让众观众惊讶之余喜出望外。

其实这种方法算不得新鲜，中国文化里早有“欲扬先抑”或“先抑后扬”的说法。但Jobs妙就妙在他实行的Apple变态的产品保密策略，以及抓住了由此而来的粉丝对Apple新产品无比期待的心理。

我的“One more thing”，则是本系列文章的PDF版本－你可以不用在blog上一篇篇点过去，直接下载这个PDF看就行了：

写在后面的话

前看后看，左改右改，终于把这个幻灯片的“文字注释版”写完了。可输出了PDF再打开一看，还是有很多不满意的地方，什么用词不当阿、引用图片没有标注来源阿、排版不够漂亮阿等等等等不一而足。然而丑媳妇还是要见公婆的，硬着头皮还是把它放了出来。希望能够抛砖引玉、借此广交朋友吧。

本文的第一个读者是苏州的michelle，作为一个对计算机不那么精通的普通人，她给我提了很多的意见和建议，使本文的可读性有了不小的提高，谢谢这个满脑子古灵精怪的小朋友。

最后呼吁一下：希望像我一样的IT民工珍爱生命，远离电脑，花更多的时间和家人朋友一起去户外转转，感受一下这个世界的丰富多彩。

就现在，去吧！

（全文完）

Apple和它的设计－7. Apple的设计方法和过程

丁宇（Felix Ding） — Tue, 04 Nov 2008 14:06:20 +0800

上一篇：Apple和它的设计－6. Mac OS的UI的演进（下）：从Panther到Leopard

写在前面

欣赏了半天Apple精湛的设计，是不是不由得想知道它们是怎样被制作出来的呢？遗憾的是，除了Apple自己，没人真正清楚Apple的设计方法和过程。这是因为：

Apple从不参加任何设计行业会议；
Apple对其所有的设计方法和过程都守口如瓶；
一旦有幸进入了Apple的核心设计团队，你就基本上得放弃公开发言的机会了（比如写blog）；
Apple在产品研发过程中极其变态的保密措施（去看看iPhone的研发过程）。由于太过变态，猜测Apple会发布何种新产品甚至成为了其用户的一种乐趣；

所以，虽然接下来的内容都是我长期的积累、搜集和整理的结果，但你仍可以对其采取将信将疑的态度。

1. 与众不同的产品设计思路

传统的产品设计思路是什么？对，以用户为中心，也就是常说的UCD－先去了解用户和他们的需求，然后再根据得到的结果去设计产品。如下图：

传统的产品设计思路：UCD方法

可是Apple不这样。它根据自己的特点和需要，为自己设计产品，然后让被极度细分人群去认可和追随。

Apple的产品设计思路

上述观点是我自行杜撰的吗？当然不是，这是Steve Jobs自己说的：

“你没法走大街上去问别人，你说，下一件牛叉的事情会是什么？亨利·福特曾经有过一句经典名言，他说：如果我当年去问顾客他们想要什么，他们肯定会告诉我'一匹更快的马'。”

他接着说：

“这事儿和流行文化无关，和坑蒙拐骗无关，和说服人们接受一件他们压根儿不需要的东西也无关。我们只是在搞明白我们自己需要什么。

而且我认为，我们已经建立了一套良好的思维体系，以确保其他许多人都会需要这么个东西。我们收了钱就是来做这事儿的。”

注：这几段话的中文翻译不是我做的，可是我找不到原作者了，这里标明一下，算是对原始翻译者的尊重。

如果你还不明白他的意思，下面这句话一定能让你醍醐灌顶：

“我们之所以去做 iTunes ，是因为我们都热爱音乐。iTunes是最好的音乐播放器，我们又都希望随身携带全部的音乐。产品团队展开了非常艰辛的工作。它们之所以这么卖命，就是因为我们都需要一个这样的产品。你知道吗？我的意思是，我们自己就是最早期的那几百个用户。”

看了这段话，你还会觉得UCD是产品设计唯一正确的路吗？说句题外话，我本来觉得豆瓣是最有希望成为独具自我风格的、类似Apple这样的公司的，可似乎阿北身上所具备的独特的个人理念正被越来越多的用户所消磨殆尽，对比一下早期和现在的豆瓣，不能不说这或多或少是一种遗憾。

2. 明确独特的精神理念

还记得前面花了大篇幅讲到的“1984精神”和“Think Different”吗？我觉得之所以Apple及其产品和设计让大家觉得与众不同、特立独行，是和他们所一贯奉行和崇尚的明确独特的精神理念所分不开的。

在“Think Different”中，Apple发出了响亮的宣言：

“People who are crazy enough to think they can change the world, are the ones who do!”

这段话现已成为我的座右铭。有趣的是，我此前自己写下的座右铭是“To be a man who can change the world, whatever he does.”

海盗旗

Think Different

3. 设计师的通才要求

Apple的设计师的岗位，是世界上几乎所有从事这个行业的人所梦寐以求的。那么，究竟怎样才能进入它核心的设计团队，成为这个星球上最牛逼的设计师之一呢？不妨看看Apple对ITMS UI设计师的要求：

对优雅的设计有热情；
愿意并能够使用最新的科技实施设计；
有美感，深入理解视觉设计和人本界面设计间的依赖关系；
深入了解色彩、一致性和字体的关系，追求细节完美；
可以创建Aqua风格的widgets。

iTunes Music Store

我不止一次地公开反对国内互联网公司内徒有其表的分工方式。网页设计明明就是一种艺术和技术相结合的工作，一个或几个页面上的事情，非得还要分出来什么研究视觉交互代码，听起来像回事儿似的，实际操作起来能把人累死，效果还不一定好。这个问题我不在这里展开了，详见我blog上的专门讨论。

4. 简洁有效的流程

下面这一流程来自于前不久披露的Apple设计流程：

1) Pixel Perfect Mockups

这是Apple的常用语，我在它的招聘网页上看到过几次，很是感叹他们精益求精的精神。据称这样做是因为：虽然前期花了不少时间制作原型，但减少了不确定性因素和沟通成本，总体上看反倒有利。

2) 10 to 3 to 1

这是说，Apple往往为某个产品设计众多的原型，然后从中挑选10个最好的，继而从这10个中选出3个，最后则从3个中确定最终设计。这样的方法很酷，不过对于分秒必争的互联网公司来说似乎不适用。

3) Paired Design Meetings

设计师有大概的想法后，便和工程师结对，一边展示自己的设计，一边请工程师做可行性的分析，并听听对方有没有更好的建议。我觉得软件UI的实现确实比较复杂，但对于网站来说，设计师完全应承担前端编码的工作。当然与后台相关的还是要请工程师来评估。

这个专题的主要内容就讲完了，现在让我们来回顾一下其主要内容：

Apple的诞生；
独特的精神理念：从1984到Think Different；
Mac OS的UI的演进；
Apple的设计方法和过程。

下一篇：Apple和它的设计－8. “One more thing”及写在后面的话

Apple和它的设计－6. Mac OS的UI的演进（下）：从Panther到Leopard

丁宇（Felix Ding） — Mon, 03 Nov 2008 20:57:38 +0800

上一篇：Apple和它的设计－5. Mac OS的UI的演进（中）：从Mac OS X Public Beta到Jaguar

Mac OS X 10.3 Panther, 2003

Panther在材质上比以前有很大不同，逐步向深沉内敛的方向转变。除此之外，Panther在UI上最大的革新就属Exposé和Finder了。

Fast User Switching

这是一个凭借用户体验取胜的绝佳例子！Jobs在Macworld上展示此功能时，台下的观众不由得发出了惊叹的叫声－原来切换不同的用户可以做到如此酷的效果：整个屏幕如同立方体一样旋转到另外一个用户的桌面上！

User Centric Finder

在Windows XP的资源管理器中选中一个文件，其左面的侧边栏中会出现诸如“复制”、“粘贴”一类的快捷方式，这其实是以文档为中心的－你选择一个文档，与其相关的操作便显现。这是个不错的设计，可当我使用了Finder以后，我更喜欢Finder中以我为中心的侧边栏，默认的分类适用于绝大部分情况，节约了很多给文件分类的时间和精力；并且查找起来也是十分方便：我可以很容易快速地转到另外一个文件分类。此外，我还可以根据自己的需要自定义侧边栏中的项目。使用起来方便极了！

Exposé

作为全新概念的窗口管理器，Exposé受到了Mac用户广泛的好评。Exposé可以迅速平铺屏幕上的所有窗口，以方便用户在应用或窗口间切换。我个人没觉得Exposé有多好用，还写了好几篇文章批评Exposé和Dock的设计。

Mac OS X 10.4 Tiger, 2005

由于新功能Spotlight及由此而来的“智能文件夹”的引入，10.4中Finder变得更好用了，我个人觉得这是Mac OS X历史中最好用的Finder，10.5中Finder的侧边栏变小了很多，点起来难度很大（Fitts’ Law）。

Spotlight

前面提到的Raskin认为，用户是不应该为文件其名字、并只靠短短几个字的名字硬性记忆或识别文件内容的。多年前MS提出的WinFS让人看到了解决这一问题的一线希望，然而我们都看到了其令人失望的结果。Spotlight的出现大大降低了用户的记忆负担，找到想要的文件变得易如反掌－只要你记得关于这一文件的哪怕一条信息。此外，从某种程度上说，目前层出不穷的基于Tag的文件管理软件，可以说是对WinFS和Spotlight理念的进一步发展。

Dashboard

一键呼出，快速找到信息，继续工作。这句话可以高度概括Dashboard的精髓。其实达到类似目的的软件早已有之，常见的做法是在桌面上放一些小的Widgets，或者把软件集成到系统中（比如Windows中窗口标题栏上）。但它们的缺点都太过明显，以至于很难成为主流应用。Dashboard则通过另外一种形式的“虚拟桌面”，漂亮地解决了这一问题。此外，其让人惊讶的水波纹特效一时成为了争相效仿的对象。

Mac OS X 10.5 Leopard, 2007

Time Machine

在10.5中推出的几百个新功能中，有两个是必须要大书特书的。其一便是Time Machine（TM）。

Time Machine

虽然此前有不计其数的数据备份软件，但TM让它们黯然失色。TM的出色之处恰恰在于极其出色的UI，它真的让备份成为了一件轻松惬意的事情－只要接上第二块硬盘并打开TM，软件就会在后台默默地实时工作。恢复操作则更让人惊艳：我的天，TM的主界面居然是一个时间隧道！你可以查看或恢复任何一个时间点上的文件，就好像真的在时间隧道中穿行一样！当Apple的VP Scoot在WWDC上第一次展示这个界面时，全场都沸腾了！

Time Machine

TM出现以后，Linux上迅速出现了类似的软件（名字倒是记不得了，Digg和LDCN上都有过报道）。可是这些软件无一例外地都只能做到实时监视文件系统的变化并备份或恢复，而在UI设计上与TM相距甚远。原因？这就是接下来要说的TM背后的秘密武器：Core Animation。

Core Animation

Core Animation是一个面向程序员的动画开发框架，它旨在统一、规范并简化程序员在UI设计上的编码工作，并通过提供一系列预定义好的API，让开发者可以轻松地实现各种视觉特效。

Core Animation把UI设计向前推进了一大步，是它加速了直接操纵（Direct Manipulation，详见我写的介绍性文章）这种交互方式的普及。在10.5中，它作为一个重要的基础框架被提出，奠定了未来几年Apple在其各个产品上UI设计的基础。我们目前常见的最典型的应用就是iPhone，可以说，Core Animation是iPhone易用且绚烂多姿的UI的最大功臣。

下面是此技术在iPhone上的几个直接操纵的例子：

Coverflow - 在3D界面上滑动并选择项目

Pinch - 用手指缩放来调整图片大小

Shake - 通过晃动－而非常见的“Undo/Redo”操作－来放弃更改

Wave - 通过舞动手机来调整方向。后来的Wii Fit有异曲同工之妙

下一篇：Apple和它的设计－7. Apple的设计方法和过程

Apple和它的设计－5. Mac OS的UI的演进（中）：从Mac OS X Public Beta到Jaguar

丁宇（Felix Ding） — Mon, 03 Nov 2008 10:45:11 +0800

上一篇：Apple和它的设计－4. Mac OS的UI的演进（上）：Classic OS

现在我们来看看划时代的Mac OS X

Mac OS X

Mac OS X简介

Mac OS X是传统UNIX和现代用户界面的完美结合。它既继承了所有UNIX的优良传统，如稳定、安全和强大的用户及权限管理等，又有一个无以伦比的用户界面。

Mac OS X架构

我曾经花了很长时间去试用各种操作系统（包括UNIX/Linux的各种发行版、窗口管理器和桌面环境、BeOS及其各类衍生版、以及诸如SkyOS的一些比较偏门的系统），希望能够找出一个能够替代Windows的选择，最终发现只有Mac OS X能满足我的需求。

在Jobs第一次公开介绍Mac OS X的用户界面时，他宣称不仅要作出一个高可用性的用户界面，更重要的是，Mac OS X将具备一个名为AQUA的“Dream User Interface”。AQUA一方面保留有古典系统高度易用的特点；另一方面，通过各种视觉特效的引入，AQUA将带来前所未有的用户体验。

Mac OS X一共经历了五个主要的版本（其实在Puma之前还有一个代号为Cheetah的版本，奇怪的是现在却被Apple官方的忽略掉了），每个版本都有一个以大型猫科动物命名的代号。这在开始时可能是无意之举，但现在却成了Apple在市场营销方面的一个成功案例－相比较于冰冷的版本号，用户更喜欢亲切地以代号相称。

Mac OS X的5个版本

有趣的是，上图包装盒的5个标志清晰地展现出了AQUA在设计风格上的诸多变化：从最开始的清澈、鲜亮，到活泼、时尚，再慢慢地朝着后工业时代冷峻、内敛的方向发展。材质上逐渐由水（AQUA），过渡到拉丝金属及现在的磨砂合金。

实际上，这种变化同样体现在Apple硬件产品的工业设计上。仔细观察早期的G3、中期的G3/G4、后期的G5和现在的Intel Mac，会发现它们在工业设计上的转变和用户界面上的是一脉相承的。这应该是Jobs年龄和阅历增长的必然结果。

Mac OS X Public Beta, 2000

这是2000年发布的Mac OS X Public Beta版的截图，有几个方面值得注意：一是位于菜单栏正中的Apple菜单按钮，这个设计遭到了用户批评，后来改到了左上角；二是Finder中诸如“Computer”、“Home”……这样的按钮显然是从NextStep系统传承下来的。

Mac OS X 10.0 Cheetah, 2001

相比前一个Beta版，Cheetah在UI上的变化并不十分明显（刚才提到的Finder上的按钮位置和外形略有变化），这个版本主要大幅度提升了系统的稳定性和运行速度。

Mac OS X 10.1 Puma, 2001

从Puma开始，拉丝金属被应用到了UI中。另外以后大获成功的iTunes也开始展露头角。

Mac OS X 10.2 Jaguar, 2002

从上图可见，从Jaguar开始拉丝金属已经得到广泛的应用。Jaguar引入了好几项非常好用的功能，如Spring-loaded Folders、Quartz Extreme和Rendezvous / Bonjour等，我接下来对后两者分别介绍一下。

Quartz Extreme

这项被简称为QE的新技术给UI设计带来了新的可能性。简单地说，它就是利用了显卡的强劲性能，为UI提供硬件加速。对于现代的显卡来说，给界面的种种特效提供加速支持简直就是小菜一碟。这样进一步解除了机器性能对UI设计的限制，设计师可以充分发挥自己的创造力。由此可见，想要产出或保持一个高水平的UI设计，先进的底层技术是重要基础。

从QE开始，显卡性能开始对Mac的使用体验产生了重要影响。我原来的iBook G3就是因为不支持QE，好多应用都无法使用。后来Apple研发出Core Image以后，又有一批Mac用户只能对那撩人的水波纹特效望洋兴叹。

Rendezvous / Bonjour

记得在2006年于杭州召开的“User Friendly”大会中，曾有人提到说最好的界面应该是“没有界面”，我同事笑称“没有界面”就等于我们全下岗。其实在很多情况下，这个“没有界面”的观点和做法都是更好的。Apple提出的Rendezvous（现在叫Bonjour），就是这一观点的成功实践。

Rendezvous可以看成是电脑之间、电脑和外设之间的全自动发现和配置（Zero Configuration），比如你把一台打印机接入网络，电脑就会和这台打印机进行对话，无需作任何的设置和干预，等上几秒钟，你就可以用它来打印了！不妨试想一下如果我不告诉你有这项技术，在接到“利用网络打印机打印”的产品需求时，你会如何设计用户界面？

下一篇：Apple和它的设计－6. Mac OS的UI的演进（下）：从Panther到Leopard

应用题

丁宇（Felix Ding） — Mon, 03 Nov 2008 09:52:20 +0800

昨天下午给上小学的表妹辅导英语，小姑娘借机会问了我一道数学题，请听：

小明做数学题，每作对一道得8分，作错一道扣5分，小明一共做了18道题，得了92分。问：小明作对、做错各几道题？

注1：不许用二元一次方程，只允许用小学四年级数学知识解答；

注2：靠猜的拖出去吊起来打！

Apple和它的设计－4. Mac OS的UI的演进（上）：Classic OS

丁宇（Felix Ding） — Sun, 02 Nov 2008 19:02:15 +0800

上一篇：Apple和它的设计－3.独特的精神理念（下）：Think Different

作为世界上可用性及用户体验最好的操作系统之一，Mac OS一直深受其用户的赞誉。它的很多设计都成为了其它软件和系统所模仿和借鉴的对象，对全世界人机界面及其相关行业的影响极其深远。

在诸多版本的Mac OS中，MacOS 9及以前的Mac操作系统通常被称为古典系统（Classic OS），从2000年开始，Mac OS进入了全新的Mac OS X时代。

我们将简要地介绍古典系统，把重点放在Mac OS X上。

古典系统

古典系统的UI设计

Macintosh 桌面

上图就是1984年在Mac上跑的操作系统，它继承了LisaOS的大部分因素。当时的MacOS有一个匪夷所思的设计：把磁盘图标拖入废纸篓等于把磁盘从电脑中弹出。这当然收到了广泛的批评。

此外，曾经有人问过我一个让我哭笑不得的问题：Apple是不是为了故意显得与众不同，才把菜单栏放在屏幕顶部、和Windows的任务栏相反的？搞UI的都应该听说过Fitts’ Law－鼠标光标指向某一物体的时间，受物体大小和光标距离其远近这两个因素所决定。位于顶部的菜单栏其实是对Fitts’ Law的灵活运用－由于光标不会跑到屏幕外面去，因此你尽可以随便把鼠标往上甩，光标肯定位于菜单栏上，这降低了光标指向的难度。

然而时过境迁，在大屏幕、多显示器越来越普及的今天，这个设计逐渐受到了挑战：在某些极端的情况下（比如主窗口位于最右面的显示器上），用户不得不移动鼠标横跨数台显示器、几千个像素去操作菜单。

从System 6到MacOS 9

System 6, 1988

System 7.5.3, 1991

MacOS 8.1, 1997

MacOS 9, 1999

上面显示了从1988年的System 6到1999年的MacOS 9在界面和功能上的变化。可以管窥到Apple在界面设计上所进行的一系列探索。

值得注意的是1991年的System 7中出现的快捷工具条（屏幕底部），在某种程度上，这可以被看成是Mac OS X中Dock的前身（也有人认为Dock的前身是NextStep操作系统中出现的Dock）。

我个人认为古典系统已经把可用性做到了极致，虽然其界面看起来貌似简陋，但简单、干净的界面却对用户的干扰很小，长时间使用时不会像Mac OS X那样产生或多或少的疲劳感。记得早年买的网页设计类书籍中，大部分截图都来自于Mac，当时便对这些设计师很是艳羡。

从Netscape到IE

仔细观察上面两张图片，你会发现其中的浏览器由Netscape换成了IE。这是因为1997年Jobs重新回到Apple时，与Microsoft签订了一个协议，协议中的一个条款就是把Mac上预装的浏览器由Netscape更换为IE。这项举措也是Jobs当时一项颇为无奈之举，举措本身也受到了Mac爱好者的嘘声和抵制－如前文所说，在一些比较老的网页设计类图书中，我们还是常常可以看到运行着Netscape的Mac。

当然现在Netscape已经以Firefox的形式重新绽放了新生，这的确是让我们这些老网虫感到欣慰的一点（怀念那些个使用Netscape和GetRight的日子）。

MacOS的启动画面

还记得Windows 3系列的“窗子”和Windows 95的“蓝天白云”吗？MacOS则以笑脸来迎接它的用户，让人不由会心一笑。

下一篇：Apple和它的设计－5. Mac OS的UI的演进（中）：从Mac OS X Public Beta到Jaguar

Apple和它的设计－3.独特的精神理念（下）：Think Different

丁宇（Felix Ding） — Sun, 02 Nov 2008 13:39:10 +0800

上一篇：Apple和它的设计－2.独特的精神理念（上）：1984

现在我们来看看1997年的“Think Different”

Think Different

Jobs和他的NeXT

在成功地发布了Mac之后，Jobs由于一系列不当的言行，被迫离开了由他一手创建的Apple。之后他创建了一家名为NeXT的公司，这为Apple日后的衰落和兴起，打下了伏笔。

顺便说一句，NeXTStep系统的UI实在太棒了！在Linux上，我最喜欢的Window Manager（窗口管理器）既不是Gnome也不是KDE，而是继承了NeXTStep风格的Window Maker－可惜它几乎已经无人问津了。

NeXT Cube在Byte杂志上的广告

NeXT Cube

Jobs和他的NeXT Cube

进入90年代，Apple开始大幅度衰落

从上世纪90年代开始，由于硬件产品线混乱、软件更新缓慢（当时MacOS的死机频繁到了连Apple内部的员工都在抱怨的程度）以及研发投入产出比极低，Apple业绩惨淡，公司未来前景也令人堪忧。人们都在讨论Apple倒闭或是被收购一类的新闻。

下图显示的是Apple从上市伊始到现在股价的变化。可以非常清楚的看到，从1993年中期开始，它的股价开始出现大幅度的下滑，虽然1995年下半年时股价又重新回归到了一个短期的高位，但此后便持续下降，到了1997、1998年前后，Apple可以说已经是在死亡线上挣扎了。

Apple的股价

吉尔·阿米里奥（Gil Amelio），这位美国国家半导体公司的前任CEO（记得Cyrix吗？），在执掌Apple帅印17个月后，终因无法撼动其独特的工程师文化而抱憾离任，他后来写下的著名的《甜苹果？酸苹果？》（On the Firing Line: My 500 Days at Apple）一书，成为Apple当年每况愈下的真实写照。

推荐去Roughly Drafted网站详细了解一下这段历史。

Think Different广告战役

1997年Jobs回到Apple后，开始着手实行一系列的改革措施，包括大幅度缩减研究项目、将原来混乱的产品线精简为著名的“产品矩阵”、全力研发Mac OS X等等。为了重新塑造Apple反主流文化、别具一格的形象，他重新找到当年制作“1984”广告片的公司，开始了名为“Think Different”广告片的制作。

这则广告中使用了大量对人类社会产生重大影响、或者说推动了人类社会向前发展的一系列名人，如爱因斯坦、甘地、拳王阿里等等。旨在引起人们对Apple的特立独行、以及人们自身特立独行可能性的思考。

虽然影响远不及“1984” ，但这则广告也获得了广泛的关注。1997年9月30日，在Think Different广告成功播出后，Jobs在Apple员工聚会上这样说道：“我们的品牌，是现在我们所拥有的最有价值的东西－至少是最有价值的东西之一……不过用了15……30……或者60秒的时间，就重建了Apple在90年代所丢失的这一反主流文化的形象。”

下一篇：Apple和它的设计－4. Mac OS的UI的演进（上）：Classic OS

Apple和它的设计－2.独特的精神理念（上）：1984

丁宇（Felix Ding） — Sun, 02 Nov 2008 00:01:05 +0800

上一篇：Apple和它的设计－1.写在前面的话及Apple的诞生

Apple的产品的为何具有强烈且独特的特点？这是由于它具有一般公司所没有的独特的精神、理念甚至信仰，这是其设计风格得以产生和延续的根基，反映在产品上，就表现出了非同一般的特质。

Macintosh广告

Mac Mini、iPod、键盘和鼠标

Apple Store

在Apple的历史上，有两次明确地表明了自己的这种精神、理念和信仰，我分别称之为“1984精神”和“Think Different”。我们先看看“1984精神”。

1984

Xerox PARC

提到1984，有一个地方不能不提，这就是施乐Palo Alto研究中心（简称XPARC）。这是GUI、鼠标、彩色电脑图像、所见即所得编辑器、以太网、SmallTalk、激光打印机、InterPress等等一系列伟大发明的诞生地。XPARC是我一生为之向往的地方，我觉得要是有幸能在当时的XPARC工作，这辈子就没什么遗憾了……Jobs当年带了一群人去XPARC参观以后，把GUI和鼠标等概念带回了Apple，并将其用在了Apple的新产品Lisa电脑中。

Lisa

Lisa是Apple在GUI方面的第一次尝试，Jobs对这部电脑给予了很大的希望，可惜事与愿违，由于技术不成熟和售价高昂，Lisa的销售状况非常不理想，Jobs本人也因为种种原因被迫退出了Lisa开发组。

Lisa全貌

虽然尚显稚嫩，但LisaOS奠定了Apple在GUI设计上的基础，现代GUI所具有的WIMP（Window, Icon, Menu, Pointing device）等因素都已具备。

此外，不同于现在“以应用程序为中心”的设计，LisaOS是“以文档为中心”的，用户首先要考虑的是文档，而不是处理它的应用程序，这和“Mac之父”Jef Raskin的Canon Cat系统有点像。

LisaOS

正当Apple被Lisa和Apple III的失败搞得焦头烂额之际，IBM于1981年正式推出了其个人电脑－IBM PC，并非常明智的开放了除了BIOS以外的全部技术方案和生产授权，这促使市场上一时间诞生（或兴起）了很多按照上述技术方案生产IBM PC兼容机的厂商，比如我们熟知的Compaq和AST等（记得AST在8、90年代的国内蛮普遍的），IBM PC及其兼容机在市场上大受欢迎，这一下子给了Apple巨大的压力。

IBM PC

必须指出的是，千万不要以现状去推测当年IBM的盛况。在上个世纪的7、80年代，IBM在任何涉足的领域都是垄断地位。一个颇有趣的例证就是，它每次的员工大会都会引来各种媒体的争相报道。关于IBM公司当时的情况，推荐阅读创始人沃森及其儿子小沃森的自传。

《特立独行者和他的IBM帝国--沃森传》（点击图片至豆瓣上的相关页面）

《小沃森自传》（点击图片至豆瓣上的相关页面）

离开Lisa开发组后，Jobs利用种种手段，挤掉了Macintosh开发组的领导者Jef Raskin，并成功接管了该开发组。他把他的全部精力都投入了Apple的新产品Macintosh（简称Mac）上，立志要作出一个比Lisa更好的产品。

面对IBM PC带来的压力，他购买了1984年初“超级碗”橄榄球比赛决赛时段的广告，“超级碗”决赛是当时全美收视率最高的节目，广告效果自不待言，价格也是十分的昂贵。Jobs同广告公司一起，精心地制作了一则广告片，并把它投放在上述比赛中。

广告播出后引起了广泛、持久而又强烈的反响，成百上千家各类媒体都在重复的免费播放和讨论这则广告所要传达的寓意和精神内涵。Jobs的宝贝Mac一时间造成了轰动效果。

我给这则广告片翻译并添加了中文字幕，并上传至Youtube上：

这则电视广告看了以后有什么感觉？反正我第一次看的时候没搞懂，直到我查阅了Wikipedia后才明白是怎么回事。

原来，Jobs是借用了英国作家乔治奥威尔的代表作《一九八四》中的思想，将IBM比作书中统治人民思想和行动的“老大哥”（Big Brother），将即将到来的、被IBM主宰的个人电脑领域比作书中那个黑暗、压抑的世界；而片中打碎老大哥意象的女郎，显然就是他所领导的Apple和将要发布的Mac。

《一九八四》（点击图片至豆瓣上的相关页面）

这则广告被很多媒体评为近50年来的最佳电视广告，受到了广泛的评论甚至研究。

说来也巧，我曾经遍寻《一九八四》不到，却无意中走进马上打烊的“枫林晚”书店，习惯性地买了《读书》后，随口一问，就买到了此书。

易于使用

从Mac开始，Apple就明确了“易于使用”这个特点，这可以通过当时拍摄的一组5则广告片看出来。

广告截图1－鼠标

广告截图2－顶部提手

首先，Mac具有在当时来讲绚丽且简单易用的GUI，用户终于可以不再通过记忆命令和敲击键盘来操作电脑了；

广告截图3－鼠标

广告截图4－鼠标

其次，Mac在顶部有一个硬件提手，可以非常方便地用单手将其提起并搬运，这一设计在当时也是独一无二的。

广告截图5－全貌

1984精神的实质

那么，“1984精神”到底指什么呢？在上面提及的5则广告片中，每一则结尾都有一句广告语，即“The computer for the rest of us”，我觉得这句话很好的表明了“1984精神”的实质：

叛逆、前卫、非主流甚至反主流文化，崇尚嬉皮士风格。

下图是当年悬挂在Mac开发组办公楼上的海盗旗，它很形象地展示了Jobs所带领的Apple对主流文化的态度。

广当年悬挂在Mac开发组办公楼上的海盗旗

下一篇：Apple和它的设计－3.独特的精神理念（下）：Think Different

Apple和它的设计－1.写在前面的话及Apple的诞生

丁宇（Felix Ding） — Fri, 31 Oct 2008 22:36:02 +0800

写在前面的话

08年4月我还在支付宝工作时，在用户体验部的“设计沙龙”上做了一次名为“Apple和它的设计”的知识分享。结束后同事反映不错，希望我能把幻灯片分享出来，但由于文件格式（Keynote）和大小（接近200M）的缘故，我当时没办法使其如愿。从那以后我便开始陆陆续续地修改这个幻灯片，一是使其便于分享，二是让那些当时没能在场的朋友也可以对演讲的内容大致了解。

没想到这一改就是半年多。改完了以后发现，基本上所有幻灯片都重新做了一遍，无论是内容还是排版，都经过了大幅度的调整，现在的这个PDF与其称之为幻灯片，不如说是一个电子读物更为合适（稍后我会将PDF放出，它已经在我的硬盘上待了好久了）。

当然，相比较于PC，我使用Mac的时间并不长，对Apple及围绕在其周围的社区的认识实在算不上深刻，所以本文的内容免不了偏颇甚至错误，还望各位海涵。

最后，本文中所引用的所有图片、视频和其它资料的版权属于各自的作者所有。

Apple的诞生

众所周知，Apple电脑公司诞生于1976年。传说当年两位创始人Steve Jobs和Steve Wozniak在Jobs家的车库里搞出了Apple I型主机板，并由此创立了改写人类历史的Apple电脑公司。

Jobs家的车库

研发

Apple I主机板

加了外壳的Apple I电脑

然而，被称为硅谷老好人的Wozniak（以下简称Woz）却在其自传《我是沃兹》中，以翔实生动的笔墨描述了他单枪匹马在HP公司的办公室中搞出了Apple I原型的整个过程。Jobs在技术上的贡献，只限于帮Woz搞到了Intel产的内存一类的事情上。Jobs虽然对Woz的描述不置可否，但从他们各自的一贯表现来看（Jobs曾在Atari游戏机的事情上欺骗过Woz，而天性善良的后者几乎没有负面新闻），事实或许就是如此。

《我是沃兹》

无论怎样，Apple通过Apple I型主机板和后来大红大紫的Apple II机型，迅速成为了知名的个人电脑厂商，并由此展开了一段波澜壮阔的历史。

下一篇：Apple和它的设计－2.独特的精神理念（上）：1984

User Friendly 2008第二、三天印象

丁宇（Felix Ding） — Wed, 29 Oct 2008 11:59:04 +0800

第一天的印象和笔记见这里。

量化和评估用户体验

在这次的UF2008大会上，我不止一次听到了有人提到量化用户体验的重要性，如黄峰在他的主题演讲中，强调在每一个版本发布前后，要通过数据对结果进行对比衡量；再如Sarah在其“如何将用户体验带入一个IT企业”的工作坊中，指出“UI设计是主观、不可衡量”是“一些管理人员常见的错误认识”。这些实际上是和我的观点相一致的，在我总结整理的用户体验框架中，清晰、明确、可衡量的目标是重中之重，也是后续所有工作的目标和基础。

借着这次大会的机会，我把我的用户体验框架和一些朋友做了分享，正面和负面的评价都有，我自己收获也不少，这里不妨简要介绍一下：

这个框架的想法来源于两个方面，一是用户体验设计在目前并没有一套通用的方法和流程，一些人有自己的一套做法，另外一些人则尚在摸索。即使是同一个公司内，每个人的做事方式可能也不同，这样的现状不仅给刚入行的设计师带来困惑，使他们不知从何入手，也造成其他设计师之间口径的不一致，以致提高了沟通成本。另一方面，是与用户体验设计一墙之隔的程序开发，却有着非常成熟的流程、方法和工具，在程序设计中，框架的使用可以极大地提高工作效率，减少各种成本，并提供了非次高的统一性和扩展性，那为什么不把这种框架的思想引入到用户体验设计中来呢？

正是基于上述两点考虑，我才于年初提出了“用户体验架构”的概念，经过差不多一年的发展，我将“用户体验架构”一分为二：

1. 框架。用于给单个设计师提供一个类似于程序开发中的、标准化的流程和工具，设计师可以按照框架中定义的流程、使用其中的方法来进行工作。这一框架包括1）定义清晰、明确并可量化的商业需求；2）实施用户研究；3）定义清晰、明确并可量化的用户体验需求；4）编写设计规范，提供设计工具；5）实施TDD（测试驱动设计）；6）用户体验评估等六个部分。具体内容不在这里展开，不过我相信标题已经有很大的自明性了。从朋友们初步的反馈来看，这个框架还算不错，达到了我的预期。

2. 分工。我明确反对过细的分工，这个提过好几次了，这里不再赘述。

用户研究的价值

“以用户为中心”就要去做用户研究，搞明白用户及其需求，才是做出好设计的一个基础。很多时候，用户研究做好了，解决问题的办法自然而然也就出来了。UF2008大会上有好多场主题演讲都是关于用户研究的，虽然内容都不是很深入，但非常好地强调了研究的重要性。

回想一下自己写过的几篇相关文章，有讲虚拟社区中用户行为的“An Automated Tool for Managing Interactions in Virtual Communities”有讲问卷设计的“可用性测试中常用的问卷量表”，有用于信息架构的“卡片分类测试实施攻略”，有关于用户访谈的“绝望主持人”系列（第一季、第二季、第三季）等等。

亚洲（东亚、南亚）用户的特点

来自印度埃森哲的Sushmita Munshi给我们做了一次非常精彩的演讲，题目为“ 亚洲青年：重新定义用户研究和设计去满足亚洲最大的目标用户群即青年正在不断改变的习惯和期望”。嗯，她的题目能把读者憋死，但侥幸活下来的话，就能听到非常有趣的内容。我听下来她的演讲主要包含了两个部分，一是亚洲青年用户的特点，她所谓的青年指的是1980年至1989年出生的这一代人，Sushmita精辟地总结了这一代人所拥有的一些特点，如独生子女、大量受到美国文化的影响等等；二是如何如何针对这些用户的特点作研究。

期间她提到说如果用户为年轻的女性，那么采用男性主持人是不合适的做法，可她没有解释原因。于是我脱口而出：“why（为什么）”？坐我旁边的是Infosys的设计副总裁Sridhar Marri，他听到后大笑不止，说：“they will love him（怕她们爱上他）”，果然猥琐。

在企业文化基础上推广和实施用户体验活动

这是听Sarah Bloomer的那场“如何将用户体验带入一个IT企业”学到的内容。她的意思是，你得判断所在企业的风格和文化是什么，是技术型？设计型？还是市场型？对于市场型公司来说，设计师的专业能力并不是首当其冲要考虑的，而能否和市场及销售部门有效沟通、能否使这些业务部门相信甚至理解可用性才是最重要的。我对此深表赞同。国内成功的技术型互联网公司很少，而在大部分的市场型公司中，可用性的推广和地位又多少成问题，Sarah的观点对此很有借鉴意义。

敏捷方法

敏捷开发越来越流行和普遍，在这种情况下实施用户体验设计和以往有什么不同，是个值得引起注意的问题。在Sarah的讲座中，她花了相当大的篇幅来讨论敏捷，可惜我敏捷的实践经验少得可怜，只记得她采取换人的方式来避免精疲力尽（burnout）比较有意思。

此外，我当时问了个关于敏捷开发中UI规范的问题，她的答复有些自相矛盾，她说应成立一个单独的小组用于制定各种规范和工具，但另一方面她自己也提到说敏捷的一大特点就是没有文档，因此这两种做法实际上是冲突的。

已经是深夜了，先写这么多吧。

评论功能修复，及将CakePHP升级到1.2RC3带来的麻烦

丁宇（Felix Ding） — Tue, 28 Oct 2008 15:14:59 +0800

刚刚才知道blog的评论功能出问题了（谢谢taine），第一时间修复好了，有什么话被憋住了，现在尽管说！

这只是我把LonelyThinker（我的blog系统）所用的CakePHP类库，从1.2.0.5427alpha升级到1.2.0.7692-rc3所引起的诸多麻烦和问题之一。我此前说过，Cake的变化非常频繁，原来我使用的类库1.2.0.5427alpha是2007年7月9日发布的，现在已经时隔一年多了，其中变化可想而知。

到目前为止，我遇到并解决了如下问题：

othAuth Component失效

othAuth是一个非常好用的开源认证模块，它在Cake 1.2中的失效主要由CAKE_ADMIN这个系统常量定义的消失，解决方法是在939行，将所有有关CAKE_ADMIN的代码都修改为Configure::read('Routing.admin')。

不过我怀疑仍然有安全隐患存在，以后有空会自己写个RBAC（Role-Based Access Control）的Component。

系统常量被替换为配置类Configure

这个涉及到core.php，原来定义系统运行的一些常量，通通被Configure的运行时实例所取代。升级到Cake 1.2时逐个修改就行了，体力活。

Automagic RSS Feeds失效

这个Plugin调用了FeedCreator这个开源应用来输出RSS，Cake 1.2中此Plugin失效，原因在引用某个Model时无法载入这个文件（uses()在1.2中升级成了App::import()），解决方法嘛……我索性用Cake内建的RSS Helper自己写了个RSS输出功能，半小时就搞定了。

Scaffolding在Theme开启时失效

这应该是1.2 RC3的bug，CakePHP Google Group上也有人提到了。

Validation的自定义规则部分有变动

假设你在Model中自定义了一个名为antispam($value)的规则，那么在1.2 RC3中，$value会由以前的一个普通的变量，变为一个数组，数组中元素的键名为表单域的名字，值则为表单域的值。

比如我为了抵挡SPAM而设立的隐藏表单域data[comment][antispam]，在$value数组中就变为$value[]['antispam']。CakePHP这样设计有点奇怪，不知意义何在……

User Friendly 2008第一天印象

丁宇（Felix Ding） — Fri, 24 Oct 2008 23:57:02 +0800

刚回到酒店，抑制不住激动的小心，上来写blog。至于为啥激动，一会儿你就知道了。

第一天感受如下：

1. 今年明显人少

经济危机搞得各行各业都不景气，今年算是实实在在的感受到了这种事对普通老百姓的冲击。这次参加UF的只有400多人，去年那种一个公司来十几号甚至几十号人的情况，今年变得十分少见。酒店礼堂不算大，可仍是没有坐满。

另一方面，参展的厂商数量也十分可怜。可能是我去的时机不对，小小的展厅冷冷清清的没什么人，我只和Hyperlink的Marcus同学聊了几句就闪人了。

2. 演讲人的资历都颇深，只是……

只是这幻灯片设计都太一般。按说搞了这么多年设计，又深喑“以用户为中心”的理念，制作高可读性又精美的幻灯片还不是小菜一碟。可是很多人的幻灯片居然犯些最基本的错误，比如贴一大堆文字在上面、单页信息量过大、背景颜色和文字颜色区分度不高等等，真是让人大跌眼镜。

Paul Sherman - UPA国际主席

Ginny Radish－“国际权威用户体验专家”

其实我越来越感受到，“以用户为中心”这一理念并不仅仅适用于UI，它实际上可以作为处理其它事情乃至做人的一个方法。就拿作演讲来说，你的听众想听什么、为其准备哪些内容、如何组织这些内容、怎样将组织好的内容以合适的形式展现出来、在讲的时候如何遣词造句……这些事情都可以“以用户为中心”来设计。我在准备演讲的时候，都会仔仔细细地思考“这页幻灯片会给用户的心理造成哪些影响”、“如何对这一影响做出反应”等一系列问题。你可以看到，这不就是一个UI的设计流程和方法么！所以说，其实这些事情在内在上都是相通的，而“以用户为中心”，就是贯穿各个事情且行之有效的方法。

我一直想把作演讲的心得和经验总结一下，并择机分享出来，之所以始终没动手，一是因为怕有自夸的嫌疑，二是担心水平不够而贻笑大方（虽然同事和客户对此多有好评）。所幸前几天那篇“画Web流程图的一点心得”所受欢迎大大超出预期，多少给了我点继续分享的动力。

3. “不就是做网页嘛！”

这话我爱听！下午和Panda聊了一会儿，其间说到设计师分工问题时，Panda说了句“不就是做网页嘛！”，搞得我心里热乎乎的。瞧瞧！头脑清醒、扎实稳妥的人还是大有的！网页设计师从一个很NB的职业，到经常被人说“哎，过来帮我把这个页面美化一下”，再到可用性用户体验，头衔越来越玄乎，讨论也越来越吓人，可很多互联网公司设计部门的设计师却连网页都不会做了。噢，抱歉，“交互设计师”是不需要会做网页的，他/她做的是“交互”……

4. 见到豆瓣的Tony了

晚上在漂邦酒吧见到了豆瓣的Tony，我对豆瓣那甭提有多喜欢了！这次找到组织，一口气聊了一个多小时，过瘾！兴奋！本来我真得是已经非常累了，昨晚凌晨3点入睡，早上8点开始忙活，见到Tony前我常感觉脑袋都不运转了。可我们是越聊越起劲，越聊越激动，最后搞得我表情肌都有点拉伤了才算告饶。

聊了什么呢？回想起来有1）我把对豆瓣产品设计的想法、像倒水一样一股脑连续不断地讲出来，豆瓣有哪些产品应该做但没有做（比如我以前提到过的“豆藏”、“同城”的票务系统），哪些已经有了但存在问题，哪些让人看不到存在意义的；2）豆瓣在UED上的发展方向和发展方法；3）豆瓣对Apple风格的继承和模仿；4）豆瓣的文化和团队等。

有时间我想把具体的内容整理好发出来（如果Tony老弟不介意的话），不过今天先写这么多半，眼看着11点半了，睡觉！

继续阅读：User Friendly 2008第二、三天印象。

NHN

丁宇（Felix Ding） — Thu, 16 Oct 2008 20:45:51 +0800

听说过下图所示的这个互联网公司吗？无论熟悉与否，都请去它的官方网站了解一下。过几天我再告诉你为什么要这样做。

Javascript使用上的几点考虑

丁宇（Felix Ding） — Thu, 16 Oct 2008 14:10:57 +0800

其实Javascript的本意是增强客户端的用户体验，但如果使用不当，反倒会适得其反。比如以下几种情况：

滥用Ajax

最典型的，就是Chinaren的校友录。校友录目前的设计很奇怪：先载入HTML后，再使用Javascript把同学们的留言载入并填充到HTML里。我不清楚其用意何在，但每次打开留言页面都绝对不是一次愉快的体验，一是有时候因为网速的原因，等半天只能看到页面布局而不见留言内容，哪怕我这次来只想看看最新的两条留言也不行；二是如此大范围的DOM修改，再加上页面上原有的乱七八糟的元素，经常搞得Firefox响应变慢。

其实像这种页面完全没必要使用Ajax来载入并填充数据，传统的设计不是挺好？我记得2000年前后Chinaren的设计非常清爽，大面积的色块、线条，整个页面的布局显得井然有序，当时还是我学习和临摹的对象之一。现在的Chinaren臃肿不堪，甚至多次直接导致Firefox崩溃。这还是我启用了Flashblock扩展的情况下，现在我要考虑是不是用Greasemonkey重新设计这个页面了。指望用NoScript访问Chinaren？想都别想。

上图是2001年时Chinaren首页的截图，是从我的光盘备份中翻出来的，你注意到那些不同层次的灰色背景和黑色线条了吗？我当时觉得这样的视觉设计非常棒－现在看起来也仍然不错。

链接到网页还是脚本？

先说校内。

在校内上处理好友申请时，我喜欢批量操作。所以按照习惯，按住CTRL（Mac上按Command）然后在一个个"接受"按钮上点过去，以便分别打开新的页面处理每一个申请。可打开了一大堆页面后发现，这个"接受"按钮分明是链接到Javascript脚本的，这个脚本的作用就是在原有页面上展开一个对话框，来让我填写详细的好友信息。于是我现在所面对的情况就是：数个Firefox标签页，每页中不同好友的详细信息对话框，我在第一个标签页中接受好友申请，第二个标签页中此申请还在，而我则一边操作一遍抱怨为何早不告诉我可以在同一个页面上操作。

今天校内发布了新的设计－他们也意识到这个问题并改掉了。目前的设计很棒，"接受"不再是一个链接，而是一个真正的按钮（input标签），上述问题也就不存在了。

当然这个问题相当普遍，如果要对那些有问题的设计做出改进的话，校内的做法值得借鉴。

顺便说一句，校内在Mac下和Windows下居然表现不一样，下图是Mac下FF的截图：

再说开心。

这个网站本身如何我就不评论了，反正我是被它的垃圾邮件烦得不行，索性注册并试用了一下。登录进去的10秒之内我就感觉非常不爽，因为它的导航链接完全使用了Javascript。我不能打开多个标签页同时查看它导航里的各个内容，通过滥用Javascript，开心网完全剥夺了我的这一权利。我仍旧无法理解把好端端的、标准的、简单的HTML链接替换为Javascript的意义何在。

可访问性（accessibility）一塌糊涂

Web Accessibility Initiative（WAI）对可访问性的定义是"残疾人也应能够使用网站（Web accessibility means that people with disabilities can use the Web）"，其实这个定义本身是不够全面的，因为WAI自己也说可访问性也应包含对非残疾人的考虑，比如支持键盘操作以提升专家用户的使用效率等。

但目前的网站太过于依赖Javascript了，把Javascript一关，很多网站直接瘫痪。好的设计应该具有比较强的包容性，这有点类似于程序中的容错能力，无论CSS/Javascript是否开启，网站应至少提供最基本的功能，而不是直接使用户无法访问。

南京两日游，求路线推荐：）

丁宇（Felix Ding） — Wed, 08 Oct 2008 07:09:47 +0800

打算这周末和朋友去仰慕已久的南京城游玩一番，目前计划去如下景点：

总统府、中山陵、明孝陵、玄武湖、夫子庙、鼓楼、南大（失之交臂的梦中学府）、紫金山天文台（可选，据说缆车很有趣？）、秦淮河、两江总督府（身为红迷，不想错过）、煦园（可选）。

想要玩遍这些景点的话，不知如何计划旅行线路比较好？先去哪里，然后去哪里才顺路？在Google地图上东一下西一下搜了半天，因为搞不清楚这些景点的方位，感觉还真是麻烦，呵呵。

另：时间为周末两天，交通为南京市内的公共交通。

试用Chrome

丁宇（Felix Ding） — Tue, 07 Oct 2008 19:42:32 +0800

试用了下Google的Chrome，感受如下：

载入网页的速度非常快，在我这里明显比Firefox快，或许和我使用的一大堆一大堆的扩展有关系；
视觉效果漂亮、柔和、清新雅致；
当焦点位于表单项时，此项目的边框会变色，可用性细节不错；
同为WebKit外壳，和Safari的表现又不一样。在Safari下面没问题的HTML和Javascript，这里又不行，前端开发真是命苦……

继续用Firefox :D

绝望主持人－第三季

丁宇（Felix Ding） — Sun, 05 Oct 2008 21:15:37 +0800

“绝望主持人”系列是我对用户研究中，访谈方法和技巧的一些总结。曾经写过第一季，内容涉及如何消除用户的紧张；第二季，如何挖出用户心底里的真实想法。这次主要谈谈主持人常犯的一些错误。

一般来说，主持人一般易犯以下几类错误：

1、干扰和引导过强

这是最最常见的错误，危害也比较大。如：

（1）“你不喜欢这个功能，对吗？”

这种问法太可怕了，喜欢都能被主持人引导成不喜欢。

（2）“那你感觉这个功能还……蛮好？”

要是用户觉得不好呢？要是他不好意思说不好呢？

（3）“您是觉得它花哨吗？”

说不定用户有更贴切的词，被主持人这么一引导，懒得想了，直接点头。

2、问题模糊，使用户不知如何回答

（1）“你觉得这个功能怎么样？”

什么叫“怎么样”？这个问题太大了，主持人应想好从哪个方面具体细问。

其实这种问法并不是绝对错误，有的时候也只能这么问（比如测试目标不甚明确的时候），甚至有时候这是最好的选择（面对见多识广且健谈的用户的时候）。不过最好还是事先明确好测试和访谈目标，并设计好问题。

3、面对用户模糊的答案，主持人没有追问

（1）用户：“蛮好的”。主持人：“哦”。

这里的“好”就是个非常模糊的词，应该继续挖下去，比如“怎么才叫好”、“哪些方面让你觉得好”、“这个‘好’到达了怎样一种程度”等等。

反过来，如果用户说不好，就应追问“哪里感觉不好”、“什么使你感觉不好”和“你希望是怎样的”等一系列问题。

4、暴露主观意见或感情，影响用户

这其实也是干扰和引导的一种，只不过危害更大。如：

（1）“为什么又选这个？！”

主持人问这个问题时重音放在了“又”上，语气上也给用户以比较强的压迫感，用户略显尴尬。我觉得改成“你刚才也选择了这个，两次的选择是一样的，这是为什么？”，同时把语气着重在对原因的探寻上，慢一点问，给用户一个思考及缓和情绪的机会，效果会更好。

（2）“为什么你会觉得它是XX功能？这图标看起来也不像啊！”

像不像不是主持人应做的判断，主持人不应有任何主观的意见。

（3）主持人认为用户操作遇到困难时，说“这说明是设计的失误啊！”

原因同上。

另外想像一下，如果用户根本没有遇到问题，他实际上是因为喜欢此功能而试玩，那么当他听到主持人的意见时心中做何感受！

5、暴露身份

上次说到主持人尽量和设计师划清界限，哪怕这产品真是你设计的，也要告诉用户说这产品的设计和你没什么关系，让用户有什么说什么。因此在访谈中，以下错误犯不得：

（1）“我们提供了一个XX功能”

（2）“我们这样设计的目的是……”

（3）“其实我们不是这样的……”

不是“我们”，是产品设计者，或者说客户。

6、连珠炮似的发问，用户不知所措

（1）用户：“A比B强”。主持人：“A比B强在哪里？就是觉得A怎么样？A与B的区别在哪里？”

主持人的第一个问题是个好问题，可后面的两个补充就实在不怎么样，有的用户甚至会反问“你到底想问什么”。

这种情况多发生于主持人没有想好问题就着急发问，话出口了又想着补充，以至于用户搞不清如何回答。

“绝望主持人”系列到此就结束了，欢迎和各位交流探讨。

10月8日更新：修正了几处文字错误，增加了一点讨论的内容。

Exposé为什么难用

丁宇（Felix Ding） — Sun, 28 Sep 2008 07:13:22 +0800

宣称Exposé比Windows/Gnome/KDE上面的任务栏好用的人，请看此图。

画Web流程图的一点心得

丁宇（Felix Ding） — Sun, 28 Sep 2008 01:38:05 +0800

一个哥们在MSN上告诉我，他们公司的交互设计师只产出流程图，并问我用什么标准评价流程图的好坏。他的说法把我彻底震了－这分工也太细了吧！也不知道该说他们那里这样是好还是不好。

不过仔细想来，我倒的确没有仔细考虑过流程图的好坏，正好借此机会自我总结一下。

1、各司其职的形状

在我的流程图中，适用于不同目的和功能的形状都有各自确定的规范。到目前为止，我一共定义了以下一些形状：

（1）开始和结束

作为整张流程图的头和尾，必须标清楚到底具体指哪个页面，以免日后出现歧义。

（2）网页

如你所见，网页的形状是一个带有漂亮的淡蓝色过渡效果的长方形，它的边框为深蓝色，中间写明了这个网页的用途，括号中的数字代表这个形状所对应的demo文件的名称（比如这里是2.html），我有时会把流程图输出为网页的形式，并把每个网页形状和它所对应的demo文件链接起来，这样查看起来非常方便。对OmniGraffle来说这是小菜一碟，如果你被迫用Visio，嗯……

另外，所有从形状出来的线条，都具有和此形状边框一样的颜色。这样的做法不仅看起来漂亮，在复杂的流程图中还能轻易地标明各形状的关系。我没有见过类似的做法，所以这是由我首创也说不定，呵。

（3）后台判断

很常见的一个形状。我在用法上有一点和其他人的不同在于，我几乎总是让‘是’的分支往下流动，让‘否’的分支向右流动。因为流程图一般都是从上向下、从左到右绘制的，遵循上述规则一方面可以让绘制者不用为选择方向操心，另一方面也方便了读者阅读。

（4）表单错误页

既然有表单，当然会有错误信息。其实这个信息很重要，用户出错时惶恐不安，就靠着错误提示来解决问题了。你不在流程图里说什么时候显示错误页、不在demo里提供错误页，有些程序员会直接在网页上写个“错误，请检查”，所以UI设计师一定要对这个东西重视起来。

但一般来说也没必要把每种错误都在流程图中表示出来，因为含有两个文本框的表单就有三种出错情况了，多了就更不用说了。所以我都是把错误页变为表单的附属页，比如表单页的编号为2，那么此表单错误页的编号就从2.1开始排下去，每种错误放到一个附属页中，这样程序员在拿到demo时也能搞清楚什么意思。

结合网页和表单的形状，一个表单验证的流程图就是这样的：

（5）后台动作

并非所有后台动作都绘入流程图中（否则流程图就会变成庞然大物了），只有需要特别强调的后台动作（和用户体验直接相关的）才使用此形状。

（6）多重分支

多重分支指的是几种并列的情况，每种情况都有发生的可能，发生哪种取决于分支起始处的判断结果。

（7）对话框

有时候一些操作可以利用对话框来完成，这些对话框由js生成，显示在父界面之上。

（8）注释

这个形状（比如页面）详细的内容，或者需要解释的业务逻辑，甚至用户此处的情况等，我都会放到注释中，这样既降低沟通成本，又可作为备忘。

（9）跳转点

在一个复杂的流程图中，往往出现跳转到另外一个远处结点的情况，此时如果直接用线连过去，未免使得流程图显得凌乱，用一个跳转点就解决问题了。在点内标明跳转到的形状的编号，画起来容易，看起来也清楚。

此外，也可以利用跳转点来分割篇幅巨大的流程图，Yahoo!就这么用。

（10）子流程

分割篇幅巨大的流程图，更好的办法是用子流程。

要注意的是，如果你在流程图中使用了子流程这一形状，一定记得同时附上子流程图，以消除影响项目质量的不确定性因素。另外，在子流程图中也可以标明其所属关系。

（11）流程块

可以用流程块将整张流程图分隔为几个部分，并为每个部分单独命名（比如“流程块1”等）。这样做的目的在于从视觉上使复杂的流程图变得更为清晰，在沟通时也方便。

2、图例和流程图信息

在团队合作中，图例是必须的，否则没人知道你画出来的东西到底是什么。即使流程图只给自己看，也最好养成标注图例的好习惯。其实这道理有点类似程序中的注释。

流程图信息也是必备的。其内容至少应包括作者、时间、流程图名称和版本（如下图）。这一方面可以让读者（其他同事）在有问题时能够方便地找到作者你，也起到了meta的作用。

3、绘制流程图的工具

Mac下首选OmniGraffle，Windows下除了Visio，似乎没有更好的选择（虽然Visio已经很难用了）。

4、评价流程图的好坏

我觉得一个好的流程图至少应做到以下几点：

密切地迎合了用户的心理状态、如实的反映了用户的操作习惯。流程图是要指导UI设计的，是UI设计的参照物，如果流程图本身无法正确描绘出用户的情况的话，UI十有八九会出问题；
覆盖了各种可能的情况和细节。这非常重要。任何在先期不确定的因素，都会在项目中成为随时引爆的地雷，都会直接降低最终上线的UI质量。此种情况真是屡见不鲜。但同时这条又很难做到，因为它不仅要求设计师熟悉用户，也要设计师充分知晓产品的商业逻辑，还要了解系统的运作机制，落下以上任何一个方面，都会在流程图中留下死角。这个问题我不知道有没有更好的解决方案，不过与PD和系分反复沟通是个行之有效的方法；
考虑到系统的设计和承受能力。系统的运作机制和承受能力必须在绘制流程图过程中考虑进去，以免出现流程图被开发人员枪毙的情况。我的习惯是，在绘制流程图时和系统分析师频繁沟通和交流，确保每一个环节都是可行的；
确保别人看得懂你的流程图。别人现在看不懂，你自己以后也一样看不懂。为了降低沟通成本，把流程图画清楚吧。

5、其它

（1）想办法把流程图绘制得漂亮些。谁不喜欢漂亮的东西呢？

这是我做过的一些流程图，当然文字全部模糊掉了（放图之前犹豫了好长时间－这样做不知是否有损我的职业道德。我特意请教了Fenng，他觉得没事。如果谁觉得有问题请直言不讳地告诉我）。

（2）如果你在公司里不是一锤定音式的人物的话，你就需要对你的文档进行版本管理。流程图也不例外，什么时间发布的什么版本，都要清楚地标出来，“ 最新”是个用不得的词。

我就说这么多了，抛砖引玉而已，蓉儿等人看你们的了！

噢对了，问个事儿：大家有没有觉得我每次写的文章都太长了？

10月8日更新：继续阅读支付宝交互设计师Joycce的流程图分享，也欢迎参加这次“流程图征集、分享和讨论活动”。

流程图征集、分享和讨论活动开始了！

丁宇（Felix Ding） — Thu, 25 Sep 2008 03:39:59 +0800

UI设计师少不了和流程图打交道，可以说这是主要产出物之一。那么流程图到底该画成什么样、用什么工具、如何评判流程图的好坏、流程图有没有规范等等一系列问题，似乎都鲜有讨论。正好前一阵子有个朋友问起我相关的问题，我想正好借此机会，发动一下群众的力量来为他解惑。

感兴趣的朋友，都可以把自己的得意之作展示出来（但要注意保护商业机密），配上方法和经验的说明，就行了。

如果你有blog的话，文章发好后在本文下面留言告诉我，我会把你的链接加进来；如果没有的话，把想说的内容email给我、或是直接在下面留言都行。

目前已知参加的朋友包括（排名相当的不分先后）：

淘宝的蓉儿；
淘宝的轻候；
支付宝的Joycce；
和辰的Yellow；

当然我也会写的。你呢？