不一样的蚊子

飞机一落地，与你零距离——北纬18°

不一样的蚊子 — Mon, 23 Jan 2012 03:06:47 +0000

旅行，我喜欢没有行程，没有计划表。我喜欢早上起来一切都是未知的，不知道遇会见什么人，会有什么样的结局。我喜欢生活，生活就像一场在排练却永远不会上演的舞台剧。珍惜她，接受她，就像你永远不知道下一手牌是什么，轻轻吟唱。

所有的成长到最后总是一次旅行。离开原地，走开去，那就是所谓最后的旅行。踏上有去无回的列车，就像我们有去无回的青春，开始了最后的旅行。

出发了，路就不远——“懂旅行，不如在路上。”im always on the road

想知道自由是什么？请跟我去享受风的速度。

悸动我心，海风吻乱了秀发。

每每入夜，驱车到各式各样的酒店歇息。在每个房子里度过了一段梦一般的时光，只是梦醒的太突然。
入夜，皑皑的云，满布天空。默默阅读星空，久违的北斗七星看起来比小时候小了很多。

在凡尘中，听不到了自己的呼吸，忘记了姓名，迷失。沉入水中那一刻，一切声音瞬间退却，安静得至剩下自己的呼吸。呼，吸，呼，吸——没有满眼攒动的人群，没有刺目的阳光，只有泛着蓝光的水，和自己。一切那么静谧，享受短暂的简单和宁静。
水底的世界是那么悳宁静与安详，但总得浮出水面，回归尘土。

懦怯囚禁人的灵魂,希望令你感受自由。强者自救,圣者渡人，无论如何我一定要继续呼吸，即使已经没有盼望的理由。一生去做了什么无关紧要，重要的是去做了。做爱做的事，投入全部的热情。

留些期待，留些盼望。有些事不用一次都做完，我们又不赶时间。

查看所有照片

朝朝暮暮朝朝，期期盼盼期期-我的大学毕业

在海之南

五一.在上海.2010

毛哥和他的宗羲观片会（转）

Tour to E’Mei Mountain with Xiao Zhao（与小昭同学游峨嵋）

淘宝2010半年会剪影

不一样的蚊子 — Tue, 14 Sep 2010 13:21:16 +0000

照片.淘宝年会2010

貳零零玖北京之行剪影『壹，故宮』，Photo collection of Palace Museum in Beijing 2009

貳零零玖北京之行剪影『貳，天安門』，Photo collection of Tian An Men in Beijing 2009

貳零零玖北京之行剪影『叁，北京大學』，Photo collection of Beijing University in Beijing 2009

五一.在上海.2010

【招聘】TaobaoUED招聘交互设计实习生

不一样的蚊子 — Tue, 10 Aug 2010 07:55:35 +0000

如果你是在校生（本科、硕士、博士均可）懂得交互设计并有成熟作品。希望来淘宝UED工作，那么请将您的简历和作品直接邮件给我们。

工作内容:

1.协助产品经理完成产品原型设计。

2.在主设计师辅助下完成产品交互设计。

3.通过用户测试,线上数据分析等方式跟踪设计质量进行迭代优化。

你是否就是我们要找的人:

1.爱互联网，总能有很多idea,创意是你的性格。充满好奇心，在每一个有趣的网站都拥有注册帐号。

2.较强逻辑思维能力，并有交互设计及用户研究相关知识背景；

3.良好的沟通与语言表达能力

4.能熟练使用Axure、Photoshop等软件

5.工业设计,可用性,人机交互,计算机,软件工程及相关专业优先

6.了解HTML\CSS

如果您对此职位感兴趣，请将简历投递至：laosan[at]taobao.com

请将个人简历和相关作品及链接附上。邮件主题请按此格式书写 “姓名-应聘-交互设计实习生”

淘宝UED期待您的加入！

==============================================================

公司简介

淘宝网（www.taobao.com）是中国领先亚洲最大的个人电子商务交易平台，2003年7月由全球最佳B2B网站阿里巴巴投资人民币4.5亿元创办。在全球权威ALEXA排名中，淘宝网2004年全球网站综合排名位居前20名，中国电子商务网站排名第1名。

淘宝网成立以来，诚信为本，全力打造中国最安全便捷的个人电子商务交易平台。目前，淘宝网在线商品数量超过1700万件、网页日浏览量突破一亿、注册会员数突破1700万，2005年三季度成交额更是达到了23.4亿元，截止2005年底淘宝网市场份额占70%以上，成为亚洲最大购物网站。

2005年10月20日，阿里巴巴旗下公司淘宝网在北京宣布，从即日起，淘宝网将继续免费三年。同时阿里巴巴公司宣布，对淘宝网追加10亿元人民币的投资，进一步带动中国电子商务的迅猛发展，并在未来三年通过淘宝网的个人网上交易，给中国创造100万个就业机会。

我们心中充满对非凡成就的渴望，

我们钦佩出色的精英，

我们也敬重那支争吵不休却坚忍不拔的唐僧团队！

你心中也充满对激情事业的渴望？

加入我们，成就非凡事业！

此时此刻，非你莫属！

交互设计师-让世界因你而不同（1）总述

交互设计师-成功有效的团体沟通（3）

互联网产品的交互设计方法（UPA2008讲稿）

交互设计

数据与理论结合，让交互设计更专业【碳酸饮料会】

数据与理论结合，让交互设计更专业【碳酸饮料会】

不一样的蚊子 — Mon, 26 Jul 2010 15:39:05 +0000

Part of TaobaoUED 碳酸饮料会讲稿 By 用户体验分析师：晓荷 | 交互设计师：老三 [2010/7/21]

Pay.taobao.com是淘宝卖家订购增值服务的平台，但该平台的可用性和操作体验欠佳，导致客服部门收到非常多来自卖家的订购服务咨询，压力很大，需要在系统层面解决此问题。因此发起了订购流程体验优化项目，对pay.taobao.com进行前后台改版。

图1：优化前的软件服务订购页面

图2：优化后的软件订购中心首页（原来无首页）

图3：优化后产品列表页

优化之后，客服部门反馈数据显示，卖家咨询量由40%下降到7%。为此，与大家分享项目的两点经验：

1. 如何利用数据指导交互设计

前期数据采集
上线后数据分析
用户反馈数据分析

2．良好的团队协作，提升UED话语权

与非UED同事协作
与UED同事协作

1.如何利用数据指导交互设计

1.1前期数据

知己知彼，百战不殆。常说为中间用户设计，只有熟悉数据，了解数据，才知道谁是我们设计的中间用户。通常，公司内部都会有数据部门，也会有后台系统。作为交互设计师，你应该有不少于业务线产品经理（PD）的内部权限，这样才能为设计和决策提供各种数据作为支持。

在制作软件服务订购中心时，我采集了以下几种数据

基础数据
包括原软件服务订购页面的PV、UV，订购的交易转换率，订购的成功率、失败率等数据。
业务数据
项目在规划好时，PD会事先知会交互设计师。然后PD会写PRD（需求文档），交互设计师在此时应开始准备调取部分相关数据，在本例中，调取数据如图4所示。此份定量数据非常重要，对于后期用研的介入、设计的参考都起了很大的作用。

图4 软件服务订购用户数据

服务订购量的人群分布

不难看出

软件服务订购主要由拥有X个（由于保密性，该数据不能透露）服务的会员所购买，核心消费人群为拥有X个服务的会员。
大多数会员拥有的软件服务数为X。

以上数据为前期设计提供了可靠的依据。访问量的多少、用户使用此页面的目标决定了页面的最后设计结果，以及设计该页面时投入的成本。同时，这些数据对于可用性测试的目标用户筛选，提供了明确的指导。

1.2上线后数据

“任务可被完成任务在无外界影响下可以被完成。”

《交互设计实用指南》使用指南总则 by 青云

要知道我们的用户任务是否可完成，就得监控关键页面：订购成功与订购失败页面。软件服务订购中心的一个重要指标是充值的成功率和失败率。

充值失败页面

我们来看一下上线初始的1个多月来，出错页面的访问量：

上线初始出错页面访问量

可以看到，在上线初期，用户支付的失败率非常高，我们来分析一下当时的页面流程。

第一步：输入金额，弹出浮出层

第二步：点击去支付宝付款

第三步：弹出支付宝页面，付款完成后在旧有页面点击任意按钮，判断支付状态。

看过此流程，大家不难发现，第二步有点多余，为什么不直接进入第三步呢？其实第二步的增加是为了解决支付失败率高。直觉反应应该是弹出层的问题，经过分析，一些浏览器会阻挡非用户主动激发的弹出页面，故用户点击充值后并未弹出支付宝页面，用户就疑惑了，并随意点击一个按钮，从而导致出错页面访问量高。

此处优化以后，错误页面的访问量有非常明显的下降。

1.3用户反馈数据

与用户对话，了解你的用户是咋想的，并逐渐的改进产品。与开发、PD、PM共同协商问卷想采集的数据后，再与用研同学合作，他们会整理出合适的题目。特别是一些设计中担心的小点，如页面载入速度、CDN速度等、信息架构等。这份在线问卷的入口放置在订购中心首页左侧。

打开后，是一份半开放、半封闭式的问卷。

用研同学会将这些数据整理好，并出具报告。内容包括定量与定性统计两部分。来自用户的一手反馈能证明团队的工作，还能为后续优化指明方向。

用户反馈文字很小

收到用户反馈字体很小。查看页面数据，发现软件订购中心的访问者中，大分辨率的用户是1024X768用户的2倍以上！于是他们做了专门的界面优化。

2.良好的团队协作，提升UED话语权

2.1从非UED的角度去分析问题（与非UED同事协作）

记得一位朋友讲过，要是两情侣吵架，闹得不可开交那种。你重复她的话，她来重复你的话，两人会觉得很搞笑，自然矛盾也就和解了。

生活如是，工作上也如是。运营、PD、前端、测试、开发要求的东西，你换位思考一下，也自然理解为什么了，也不会去瞎闹腾了。如果你没有这些职位的经验，多和PD、运营交流，类似行业的变身还是很容易。

掌握与PD\PM\开发测试人员沟通的语言

为了与PD、PM、开发、架构师更好地沟通需求，笔者在完成交互设计任务之外，还专门去了解了后台复杂的计费模型、产品定义模型，这样才能更好地了解什么功能能做到，什么功能不能做到，时，其他项目组成员才不会认为你是一个啥都不知道、只会空谈体验的傻逼。

这些底层知识，在原型设计时发挥了相当大的作用。

例如，通过了解预付费模型、后付费模型。在设计计费详单、续费详单时会更加清晰，能更清楚的向用户展现整个收费过程。

站在架构师的角度讨论体验

旧版的订购列表页面将所有服务罗列出来，操作中的订购按钮无论订购与否、一直有效。用户点击订购按钮后，根据用户权限判断进入订购页面或者错误页面。用户可能多次点击均返回错误页面，体验十分糟糕。

为了减少用户的不必要操作，在新版的订购中心，用户在浏览增值产品列表页时，订购与否的逻辑判断移动到该页面（进入产品详情页前），如果你没有购买权限，会在最开始就提示不能购买原因。同时，根据是否可续费显示续费按钮状态；根据是否可升级显示升级状态，并提示用户原因。

正是这样，提高了订购流程了满意度。减少订购中的咨询而增加了订购前的咨询。但页面需要根据每个用户的订购情况来分析应该显示的效果，架构师提出页面展现性能的担忧。该担忧是必要的。与前端交流后提出以下方案，并结合线上数据做分析：

方案1：页面通过后台计算好之后再返回。前端工程师无需任何工作，缺点是用户看到的页面时间会增加。列表页面是否针对每个用户做出独立计算，将其所有的服务状态读取出来。我们可以参考之前采集的页面PV数据得到以下分析：

请求量：?,000,000*1*40 = ?,000,000；不考虑网速的情况下，页面响应相比另一种方案增加200+ms。另外根据页面PV、UV数据，服务器完全可承受该压力。

方案2：页面渲染与服务订购状态异步渲染。即用户会首先看到整体界面，个性化软件服务状态在1S以内会根据用户具体情况调整。异步获取数据在淘宝的商品详情页面有使用，适用于页面量大，用户逐步接受数据页面。缺点是前端工程师需要增加额外工作。再者，如根据是否绑定手机来判断是否开放短信订购入口这些情况，计费系统本身无法判断，需要调取外部接口，开发成本异常高。故决定只枚举计费系统情况，覆盖了80%以上的权限情况。

综合考虑前端、开发成本，由当前页面PV等情况，最终选择了方案1。通过后续用户反馈入口收集到的数据：只有少量用户反馈访问速度慢。这次改进是有效的。

与运营合作

设计界面时，就想到营销手段。做产品列表页面时，想想运营的同事如何在这个列表上完成他们的营销目标？其实很简单，是大家也都能想到的，在超市里面看到特别需要促销的商品会贴上折扣的信息，于是利用UED的技能，为运营提供一些促销技巧。这不是特牛的事，但表达了UED的态度。大家合作也就非常愉快！

2.2与UED同事协作

作为一个平台，当其他服务接入时，我们通常希望其他交互设计师、视觉设计师能做出符合要求的图标。当该产品转交到其他人手里时，让他们理解你的思想，就CODING时候的注释一样，写在里面。方便他人，尊重他人，是为了自己得到尊重。因此，在我的原型里，除了页面，还加入了大量的注释。

文案说明，统一平台的介绍语言。

图标接入说明，为接入其他软件服务时视觉统一做准备。

模块规范，前端有了这个，思考全局组件时更轻松。

3.总结……

通过前期数据采集、上线后数据分析、用户反馈数据分析等方法指导交互设计，在与UED、非UED同事的良好的团队协作，最终提升了UED话语权。让交互设计师走向专业、品质、协同！

网页可用性设计指导思路总结

CRM平台项目的交互模式库总结（持续更新）

交互设计师-让世界因你而不同（1）总述

互联网产品的交互设计方法（UPA2008讲稿）

交互设计

在海之南

不一样的蚊子 — Sun, 04 Jul 2010 16:46:32 +0000

记录眼中的天空，海洋。在纯纯的色彩里感悟自己的心晴。

不喜欢平静，向往闹腾，

就如我爱有浪的外西湖胜过静如止水的里西湖。朝着自己的方向，平静坦然的去闹腾。爱大海，爱他的浪，在浪涛中，你不知道哪一出会更高，你也不知道到下一个是不是会到最低点。

比爱与不爱更可怕的恐慌——不能证明存在。就像一个人发现自己没有影子一样的恐惧，害怕自己就这样到老，然后没有谁记得我曾经存在过，更可怕的是，也许根本就不曾存在。寻找和尝试自己的想法，回到人类世界，去完成自我的救赎……去感受世间百态的浪起浪落。

如果您在海边，请一定去潜水。

在水下7、8米，负压让耳朵学会倾听，让心灵学会倾听，倾听心跳，倾听海水闲闲的味道，感受鱼儿四海为家的坦然。调整呼吸，静心休憩，此时的世界属于你一人，没人能打乱你天马行空的跳跃。

与海交心，您得诚心，掏出自己，她会容纳您的一切。

学会了浮潜，心静、坦荡，全身心交给海，轻松的游弋在浪起浪落，随波逐浪到天涯；欣赏海底的绚烂，赞叹那些你叫不上名儿的鱼

——海，每当我感觉到你，我会深信这一切。

蜈支洲

中国有个海南岛，海南有个蜈支洲。爱上海的色彩，纯纯的爱——清、凉，透彻心扉。

若云

若云，生如棉花糖，只应生如夏花。

若轻轻的清清云

蜈支洲的海水——轻轻的清清

顷雪

浪花飞扬万顷雪

赶

赶浪。

海的天空

喜欢海的天空，总有无限的变化，在涨幅中感受世界变迁。

晚霞、潮汐，——夕阳无限好，只是近黄昏。

天在天边，云在云上

芒果

喜欢攀枝花的芒果，也喜欢不一样的芒果

照片.淘宝年会2010

乌镇

绍兴游记

五一.在上海.2010

随性整理一下照片

五一.在上海.2010

不一样的蚊子 — Tue, 15 Jun 2010 19:20:57 +0000

东方明珠

东方明珠是鸟瞰大上海的最佳场所。举目远望，外滩的万国建筑博览群，南浦大桥，杨浦大桥全部尽收眼底。

电梯每秒7米的上升。

锦江乐园

许多爱情的开始都与摩天轮有关。在锦江乐园，上海最高的摩天轮就矗立在那里，暖暖的阳光中，随着摩天轮的上升与湛蓝的天空慢慢靠近，渴望爱情的心情也变得鲜艳明快起来。就如同人生百味，每一个座舱里都在上演不同的爱情故事。

多伦路文化街

上海的大小马路中有许多小街，多伦路不同在于它是一个卧虎藏龙之地。在中国近现代史上，这条五百米的街道居住着众多的文化名人，鲁迅、茅盾、郭沫若、叶圣陶、柔石、冯雪峰及日本友人内山完造等，都曾经在这条小街上生活居住过，是20世纪二三十年代的文化界的大本营。

海洋公园

喜欢听梁咏琪的《spaghetti》，

“喜欢夏天的儿童乐园，

喜欢周未拥挤的电影院，

喜欢有流星的夜可以许愿”

——寂寞的海洋公园海豚在水中流泪。

想去海洋乐园，在上海的最后一天，去了长风海洋公园。

凶凶的鲨鱼，用表情杀死你~~~

这鱼的头很大只。。。<。)#)))≦

LAST..地铁

照片.淘宝年会2010

在海之南

乌镇

绍兴游记

万万在杭州的新家

毛哥和他的宗羲观片会（转）

不一样的蚊子 — Tue, 18 May 2010 03:27:28 +0000

由胖胡斐撰写　http://www.panghufei.com/?p=10195

“宗羲观片会”是我在淘宝这些年来参加过的最有价值的民间活动组织。

宗羲，又叫老包，或者毛哥。他是个很棒的摄影师，玩胶片，玩旁轴，拍出的很多片子经常羡刹旁人，毛哥的作品可以看这里(om19.cn)。

宗羲也是前淘宝UED最有激情和卓有成就的交互设计师和项目经理，他用TMS产品解放了无数淘宝运营的生产力，我们一次次被TMS超出期望的新功能折服，我至今都记得宗羲为这款产品做的激情十足的推广会。“宗羲观片会”就是他组织的内部摄影交流活动。很可惜，毛哥马上离开淘宝离开杭州。前天我参加了最后一期毛哥主持的宗羲观片会，地点还是贝塔咖啡。

之所以喜欢观片会，是因为观片会的一些原则。其中“一切设备平等对待”、“没有做后期的作品不是摄影作品”和“乐于接受批评”这些原则和我甚有共鸣。尤其是看到毛哥的手机摄影作品，我更深信了。

观片会我真正参加的次数不多，但每次都会非常有收获。我们讨论摄影本身，探讨曝光、构图、后期的技术，通过大家自己拍摄的作品交流和学习。毛哥会和老蒋一起提前评片，跟大家分享作品好在哪里不好在哪里，气氛好到没有人会在期间玩手机。我会钦佩毛哥在摄影技术上的独特眼光，我的片子经常被批评得体无完肤，细想却字字在理句句玑珠。我也欣喜地看到自己很明显的进步。

这些进步，是原先觉得好看就拍，从一堆烂片中挑出能修修补补的，到后来片子数量减少，但精品更多。是原来的焦点中置快速曝光，到考虑画面表达主题，对焦后二次构图。是原来的原片导出，到用后期增色添花。这些是我自己真的能感受到的东西。

所以我喜欢观片会喜欢毛哥，是因为这个组织不是一群臭味相投的家伙在一起做某事，而是大家因为一起做某事而真的成长。

毛哥是人才，他有了自己的选择，有了自己的梦想。我希望他能更好，也希望以后能继续参加他组织的观片会。

好了看最后一期的记录照片吧。再说就成了纪念辞了，呵呵

贝塔咖啡是杭州互联网人才聚集地，也是宗羲观片会的主场。

楷子哥也很棒

跟我一个战壕里的聪

毛哥有很多牛人朋友跟我们分享，足见其实力。这是加拿大的摄影师。

最后，放一张我得过的宗羲观片会最佳片：西湖边的老人。

朝朝暮暮朝朝，期期盼盼期期-我的大学毕业

淘宝旺旺公仔涂鸦大赛作品

求婚 The Proposal

飞机一落地，与你零距离——北纬18°

信心膨胀-分析自己的淘宝之行

杭州九溪十八涧踏春

不一样的蚊子 — Wed, 21 Apr 2010 16:45:00 +0000

周末STS特工队的同学们一起去九溪烧烤。稀稀拉拉的春雨，朦朦胧胧的春意，在一片绿色中，吃着烧烤，胜是惬意。

九溪全名是叫九溪十八涧，同时称她为十八“贱”，这样才够贱嘛~~嘿嘿~~
一开始还真以为是9条溪，18个水潭呢，查过百科，才知道表示很多的意思。

九溪之水发源于杨梅岭，途中汇合了青湾、宏法、方家、佛石、百丈、唐家、小康、云栖、渚头的溪流，因称九溪，溪水一路上穿越青山翠谷，又汇集了无数细流，所以称九溪十八涧。古时候人们常喜欢用“九”字来表示数量的众多。其实，这条山区溪流一路上穿林绕麓，不知汇合了多少细流。十八涧，原是指这条山区溪流的源头—-龙井一带的无数山涧泉流而说的。所以，十八涧也是古时人们用“九”的倍数来形容山涧泉流众多的意思，并非只有十八条山涧。
九溪十八涧的形成是由于：它的源头在龙井村一带形成了一个面积巨大的漏斗状盆地，这个盆地周围的山岭基本上由砂岩组成，只有东北角靠近龙井泉处出露了石灰岩，在龙井盆地中，四周山岭坡面上无数细小的水流都向盆地中心部分汇聚，形成了“万壑争流下九溪”的美丽景色。
百度百科

九溪十八涧景色天然，少有匠气，”溪水因山而曲折”，忽左忽右，其中6处溪流漫过山径，上置石步，游人可涉水溪中，也可自石上鹤步而过，各有意趣。清俞曲园有诗：”重重叠叠山，曲曲环环路，叮叮咚咚泉，高高下下树。”身历其境，尘襟为之一洗，更有一种人在画中游的感觉。

吃完烧烤，车子从龙井山上翻过。龙井山上的道路很窄，只能并行两辆车，但是周围环境非常好。
车子驶过一片绿色，特别令人心醉。周围的路况特别好，有点像《头文字D》里的秋名山，所以难免会有人在这里飙啦车，所以开车就得小心点了。可咱青云GG、淡月MM、天哥技术那可不一般，要不是车上人多，还真得飘逸一把。

期间下了一点雨，天哥的车窗上晶莹剔透的水珠很有感觉，

叶尖的水珠

看似一片片的苔藓，匍匐在旁边，观察其中的细节之美，发现其中两朵苔藓的花特别有意思

天哥的车子开过杨梅岭隧道时，一种进入时光隧道的感觉，

碧绿的潭水，有点点九寨沟的感觉

借淡月姐姐的蛤蟆镜自拍一个哈哈

照片集-2009.12-2010.2

在海之南

貳零零玖北京之行剪影『壹，故宮』，Photo collection of Palace Museum in Beijing 2009

绍兴游记

万万在杭州的新家

绍兴游记

不一样的蚊子 — Thu, 15 Apr 2010 11:55:34 +0000

鲁迅故里·百草园

最熟悉的还是《从百草园到三味书屋》，鲁迅哥哥真是幸福，上学只需走5分钟就到咯。

百草园是个荒芜的园子，不仅瓦砾成堆，杂草丛生，而且有树木、蔓藤和飞鸟虫兽，是孩子们游玩的好地方。鲁迅儿时和他的小伙伴们就经常来此玩耍嬉戏，或采紫红的桑椹和酸甜的覆盆子，或捉蟋蟀、玩斑蟊，有时挖何首乌的块根，有时摘木莲藤的果实，夏天在树荫下纳凉，听蝉鸣唱，寒冬在雪地上捉鸟雀。百草园的动植物，有可看的，有可听的，有可玩的，也有可吃的，对儿童来说真有许多乐趣。“紫红的桑葚，酸甜的覆盆子，光滑的石井栏，高大的皂荚树……浓厚的生活情趣依然带给我丰富的想象。
皂荚树已经用栏杆撑起来，像是一位历尽沧桑的守望者。

正值清明节后，菜畦里的油菜花和一些叫不出名字花朵开得胜是灿烂。

光滑的石井栏，小时读书没看懂。现在一看，原来就是石井的围栏呀，说鲁迅GG小时候在那上窜下跳也不为过。

百草园里虽无明显界线，却有大园小园之分。有门通向东咸欢河，河沿筑有河埠，积肥农船便可在此靠岸，运走周家草灰和粪肥，胜是喜欢河埠旁婆娑的树影。

鲁迅故里·三味书屋

三味书屋是当时绍兴城里著名的私塾，鲁迅先生童年时曾在这儿学习。三味书屋原为三余书屋。何为三余？此名取意于三国时董遇的话。据《三国志·魏志·王肃传》注引所载，董遇常劝学生充分利用“三余”时间读书。所谓“三余”，即“冬者，岁之余；夜者，日之余；阴雨者，时之余”。取名三余大概是希望学生爱惜时间，后来私塾主人兼塾师寿镜吾的祖父寿峰岚改名为“三味书屋”。

沈园

沈园相聚三味书屋不远，走路10分钟就到了。当然，也可以乘乌篷船过去。沈园一直被誉为爱情之园，源于陆游在这里的墙壁上题了一首词《钗头凤》，悼念他和表妹唐琬的爱情。

陆游《钗头凤》

红酥手，黄縢酒，满城春色宫墙柳。东风恶，欢情薄，一怀愁绪，几年离索。错，错，错！
春如旧，人空瘦，泪痕红浥鲛绡透。桃花落，闲池阁，山盟虽在，锦书难托。莫，莫，莫！

唐婉《钗头凤》

世情薄，人情恶，雨送黄昏花易落。晓风乾，泪痕残，欲笺心事，独语斜栏。难，难，难！
人成各，今非昨，病魂常似秋千索。角声寒，夜阑珊，怕人寻问，咽泪装欢。瞒，瞒，瞒！

一篇“风流千古” 的佳作，描述了一个动人的爱情悲剧。据《历代诗馀》载，陆游年轻时娶表妹唐婉为妻，感情深厚。但因陆母不喜唐琬，威逼二人各自另行嫁娶。十年之后的一天，陆游沈园春游，与唐婉不期而遇。此情此景，陆游“怅然久之，为赋《钗头凤》一词，在沈园的粉壁上曾题着两阕《钗头凤》。 ”这便是这首词的来历。

人太多了，没能拍到照片，借一张来用用。

东湖

号称“天下第一盆景” 东湖，原是青石山。两千多年前，秦始皇南巡至会稽(即现在的绍兴)，在这里车喂马，所以称这里的山为“占山”，民间又称“箬篑山”，当年这里山上多青石，此石坚而硬、用途很广。从汉代开始，这里就成为采石场，到隋朝，开采的规模更大。久而久之，靠一代代采石工的辛勤劳动，这么大的青石山被凿去了将近一半。随着时间的推移，采石场内，岩中泉水涌出来，河水从外溢进来，由场而成湖，湖内碧波荡漾，这就是今天的东湖。清朝末年会稽人陶睿宣宣见到此地风景奇秀，便筑了湖堤，将湖水与河一分为二。堤外是贯通浙江东部的浙东（宁波）运河；堤内便是是东湖了。一百多年来，东湖经过许客人的修饰，成了—个巧夺天工的山水大盆景。

原本大自然的许多奇观，用鬼斧神工来形容。看了东湖后，才觉得人类本身也会鬼斧神工的。

从桂岭向北，走过秦桥，这桥也有几千年历史了，从桥名上就可以得知。往东，漫步在白玉长堤上，东湖奇景可以细细品味。这里，景随步移，看岩石，形状怪异，有的壁立数十丈，鬼斧神工；有的相对而立，就像石门；有的曲折有致，状如石洞。这都是古代采石工留下的不可再造的艺术精品。东湖门口有一副对联：“此是山阴_道上，如来西子湖头。”活脱脱写尽东湖的美景。

绕过笔架山。迎面的石壁上刻有郭沫若的诗，是1962年郭沫若游览东湖所写下的，诗曰“箬篑东湖，凿自人工。壁立千尺、路隘难通。大舟入洞、坐井并观空。勿谓湖小，天在其中。”小船划进陶公洞、洞内水色呈黛绿色、手插水中，会感到特别清凉；仰起头来，会有几滴小水珠凌空飞落而下。让我们看看洞顶的天空吧，真象是坐井观天；船桨击水，如同在一个巨瓮中击掌。声音奇妙。

借图一张以示其鬼斧神工。

兰亭·曲水流觞

流觞曲水，亦称流杯曲水或曲水流觞，是旧时上巳节的一种饮宴风俗，其大致方式是众人围坐在回环弯曲的水渠边，将特制的酒杯(多是质地很轻的漆器)置于上游，任其顺着曲折的水流缓缓漂浮，酒杯漂到谁的跟前，谁就取杯饮酒。如此循环往复，直到尽兴为止。文人则将此俗发展成名士雅集–酒杯停在谁的面前，还得赋诗一首，其乐趣略同今人的”击鼓传花”或”丢手绢”。东晋永和九年(353)三月初三，大书法家王羲之与名士谢安、孙绰等四十余人宴集于浙江山阴(今绍兴)兰亭，作流觞曲水之戏，所谓”又有清流激湍，映带左右，引以为流觞曲水。列坐其次，虽无丝竹管弦之盛，一觞一咏，亦足以畅叙幽情”。这些吟咏之作被编成《兰亭集》，由王羲之作序，成为我国书法艺术史上的瑰宝。

兰亭的竹子非常秀丽。

“鹅池”二字，这两个字各成风格，“鹅”字看起来有着南方人的秀气，而“池”字则显得象北方汉子南洋的粗犷，人称“父子碑”,据说是王羲之与其子王献之共同书写的。而王羲之书法的“飘若浮云，矫若惊龙”的精髓就是从鹅的形体上，悟出书法的真谛。

康熙十二年（ 1673 年），知府许宏勋重建，三十四年（ 1659 年），奉敕重建，有御书《兰亭诗》，勒石于天章寺侧，上覆以亭；三十七年（ 1689 年）复御书‘兰亭’两大字悬之。

时间太短，以下几个地方没去成：

会稽山大禹陵

大禹一生四件大事，封禅、娶妻、计功、归葬，都在会稽山完成。大禹妻子是绍兴附近涂山人。至于大禹治水为什么与绍兴有关，个人猜测，也许几千年前绍兴是沿海，长江在此入海也说不定，所以治水治到后期，来到了绍兴会稽山，并喜欢上了这里。成为首领后，还时常到会稽山巡狩，以致终老于此。会稽山在早期，我想应该是非常有名的，除了熟知的越王勾践外，秦始皇和汉武帝也来过这里。后来，也许是五岳等声名鹊起，会稽山就不显得那么著名了。康熙下江南时，在会稽山举办过祭禹大典。

戒珠寺

原本是王羲之的住所，因为王羲之与和尚、墨珠与白鹅的故事，变成了戒珠讲寺。

八字桥

全国重点文物保护单位，据说是中国最早的城市立交桥。站在桥上，看看傍溪而居的人家，甚至还有炊烟，水乡风韵一览无余。当天不知什么原因，这里的乌篷船不运营。

绍兴没有杭州的繁华与喧闹，但更接近水乡的朴素和真实，就如同鲁迅笔下那种绍兴的朴实味道。也许是绍兴的文化底蕴绵绵深厚吧。

在海之南

五一.在上海.2010

杭州九溪十八涧踏春

随性整理一下照片

万万在杭州的新家

浙江东阳横店影视城

不一样的蚊子 — Mon, 22 Mar 2010 02:31:59 +0000

浙江天气很好，就出去旅游了。到横店看看影视剧里面的场景，电影里的场景历历在目呀。下次再去就把清明上河图、欢乐城玩了。还有，那的东阳土菜馆也很不错哦。

绍兴游记

毛哥和他的宗羲观片会（转）

乌镇

不一样的蚊子 — Sun, 07 Mar 2010 14:59:29 +0000

2010年3月6号，大到暴雨，去了乌镇。

在海之南

貳零零玖北京之行剪影『壹，故宮』，Photo collection of Palace Museum in Beijing 2009

貳零零玖北京之行剪影『貳，天安門』，Photo collection of Tian An Men in Beijing 2009

绍兴游记

五一.在上海.2010

照片.淘宝年会2010

不一样的蚊子 — Thu, 04 Mar 2010 15:36:46 +0000

年会照片，喜欢穹顶光影下的节奏，并深深的为之触动。

照片集-2009.12-2010.2

淘宝2010半年会剪影

五一.在上海.2010

随性整理一下照片

万万在杭州的新家

照片集-2009.12-2010.2

不一样的蚊子 — Tue, 02 Mar 2010 12:06:39 +0000

在杭州，和老包、娟姐逛吴山夜市；

在杭州，老大语凝带领我们组的同事们夜游西湖；

在杭州，大军、龚浩游西湖；

在成都，重回科大；

在昆明，龚浩请我吃最好的过桥米线，观文庙，看老城区。

在攀枝花，登巅峰揽众山，下抵金沙江赏花火；

在攀枝花，马路青明星队踢球。

2009.12-2010.2

照片.淘宝年会2010

在海之南

淘宝2010半年会剪影

杭州九溪十八涧踏春

随性整理一下照片

求婚 The Proposal

不一样的蚊子 — Tue, 09 Feb 2010 01:25:41 +0000

2月4日的中午，我师傅，老包，向娟姐求婚了。现场感动得一塌糊涂！祝福老包和娟姐幸福开心——就如我们在一起开心的300天。

以下转自老包的BLOG：求婚 The Proposal

2月4日的中午，在快乐淘宝的项目室里，偶向偶老婆求婚啦！当我在几十位朋友同事的见证下，跪下求婚的那一刹那，我也感觉到了幸福的最大化。场面的壮观程度实在令我和宝贝奔泪不止～走廊上帖了好多好她的照片，项目室里藏在窗帘背后的大海报，99朵玫瑰+钻戒…… 新浪微薄、Twitter、内部论坛Aliway、校内上都有报道和评论～哈哈～当然，除了我制作和杯具录音的求婚视频外，求婚当场的照片和视频偶是不会放出来了。这也是考虑到众多男同胞生死攸关之决策啊。少一个女生看到，少一个男生遭殃。恩： Video：G1 Android、Sony T2，图片：EOS30、LG KF200、Hexar AF，后期：Vegas

还有，灰常感谢胡斐、朱聪、紫罗、汪墨、万万、子翼等外加围观兄弟帮我一手操办了求婚，果然是高水准的娘家婚庆公司！还有坏人等哥们的网络营销！

照片集-2009.12-2010.2

照片.淘宝年会2010

毛哥和他的宗羲观片会（转）

信心膨胀-分析自己的淘宝之行

万万在杭州的新家

淘宝旺旺公仔涂鸦大赛作品

不一样的蚊子 — Wed, 03 Feb 2010 14:39:25 +0000

淘公仔涂鸦大赛，跟着起起哄，先来一张今天下午拍的全家福哦：）

全家福，左起哪吒（BY飞飞），第二个（By咏沙），小林（By我），阿凡达（By语凝），第五个（By咏沙）

全家福，左起第一个（By咏沙），第二个（By咏沙），小林（By我），阿凡达（By语凝）

我画的七龙珠小林铅笔稿。绘画水平有限，就搬了鸟山明爷爷的创意咯。之所以选择他，因为：

小林，名字里有一个和我一样；
没有头发，画起来简单，识别性高，要不别人看不出来是谁 HOHO。
喜欢七龙珠，小时候特着迷。

感谢初彤MM的丙烯颜料，上色后帅呆呆。

再来个特写吧，HOHO

下面，是公司同事们的涂鸦公仔，

我老大语凝的公仔：阿凡达：

飞飞的淘宝公仔：哪吒

照片集-2009.12-2010.2

凤凰涅磐

求婚 The Proposal

淘宝2010半年会剪影

信心膨胀-分析自己的淘宝之行

交互设计师-成功有效的团体沟通（3）

不一样的蚊子 — Mon, 25 Jan 2010 15:30:54 +0000

View more presentations from adam ghost.

本文主要涉及三个部分内容：

演讲的基本要素
演讲、演讲人、听众
有利演说的挑战（提高技艺）

有利演说的基本要素

增进信心

造成演讲恐惧心理的几个事实
- 并非只有你害怕当众演讲，仅仅是不习惯
  80%~90%的成功演讲者在最开始的演讲中都会有林场恐惧症，所以你的临场恐惧和大家都一样。适当的临场恐惧是有用的，当你发现自己的脉搏加速、呼吸急促，别着急，这都是你身体对外界刺激的警觉反应，也随时预备高要采取行动。假如这些生理上的反应都在合理范围之类，反而可以帮助你想得更快，讲得更流利，一般来说，都比在正常情况下要显得更有效率。
  对于大部分人来说，公开演讲是个“未知量”，因此充满了焦虑和恐惧因素。对于刚开始的人来说，公开演讲是一系列错综复杂的陌生状态，很像是刚学开车一样。要使这种让人恐惧的状况变得简单容易，只有靠不停的练习。
正确的准备方法
只有充分准备的演讲者，才会有充分的信心。当你站在台上演讲的时候，你要做好防御任何“攻击”的准备，如果您没有做好准备，那当然会显得没有信心。当然，也不要把整篇演讲稿都一字不拉的记下来，要不然演讲会缺少活力。
- 理清思路
  理清自己的思路，完善的表达自己的想法。演讲完发现不知所云非常不靠谱的做法。你应该先好好思考自己的题目，使其渐趋成熟、深入……然后，再把这些想法变成文字——仅用简单的文字把想法固定下来，记录下来——这样会比较容易组织安排，使松散的观念变得有条理、有秩序。
下定必会成功的信心
就算不喜欢这个题目，但是还得去做的时候，何不把整个人“卖”给这个题目——坚定的信仰。仔细的研究题目，寻找在演讲中煽起信心之火的源头。
表现信心
演讲时变现出对题目的信心，如果你都对自己观点没有信息，如何让其他人对你的观点有信心？

快捷方法

由经验和研究中，找出你擅长谈论的话题
- 把自己的生活体验告诉我们
- 由自己的经历中寻找题目
对你的讲题感兴趣
热切的想和听众分享所讲的内容

演讲、演讲人、听众

主题不要过于分散
加强储备力量。
多用描述和例证
- 5W：何时、何地、何人、何事、为什么
  演讲要和平时讲故事一样，有人物、有情节、有感情色彩。抽象和空泛是演讲的大地，训导式的演讲只会让听众厌倦。讲实例，讲凡人小事，这才是听众想要的。
- 利用对白使演讲变得戏剧化。
用明确、熟悉的字眼来制造图像。
“能够在你面前制造图像的演讲人，必定是个容易被了解的人。”
演讲要和平时讲故事一样，有人物、有情节、有感情色彩。抽象和空泛是演讲的大地，训导式的演讲只会让听众厌倦。讲实例，讲凡人小事，这才是听众想要的。抽象的风格都不好。你的句子应该都是石头、桌子、椅子、男人、女人等这一类具体、有生命的字眼。
一鸟在手，胜过二鸟在林。
下了很大的雨 —— 不下则已，一下便是倾盆大雨。
家禽 —— 一只白色的断腿小鸡
使谈话富有活力
演讲不应该是呆板、无感情的。要全力以赴，调用自己所有的热情，去高呼、去描绘、去感染每一个听总。要熟悉你要讲的题目，然后从自身的感受出发，将之扩展开来。
- 找出你最热切想要讲的题目
  假如演讲人坚决相信某件事，而且又讲得很坚定，则必能吸引一定的支持者。
- 重新体验你对题目的感觉
  演讲的时候不妨加入适量的情绪。别抑制自己真正的感受，别把自己炙热的请同感冷却下来。让听众知道，你对这个题目如何感兴趣，如何愿意谈论这个话题，你便可以吸引住听众的注意力。
- 要做得煞有其事
  当你上台演讲的时候，要显得胸有成竹，不要像是被送上断头台似的。
与听众分享谈话的内容
演讲不是自己讲话自己听，而是要向听众传达信息。在这一过程中，你的态度觉得了听众的态度。放下身段，用真诚、谦虚来影响听众。
- 顾及听众的兴趣。
- 给予最诚挚的赞赏
- 与听众合二为一
  在你开始讲话之后，尽快想办法讲些能与听众建立起关系的话来。
- 让听众参与你的演讲
- 采取较低姿势

有力演说的挑战

如何组织长篇大论

要立刻引起听众的注意
- 以举例证开始
- 制造悬疑性
- 陈述一个引人注意的事实
- 要听众举手反应。
- 告诉听众，他们可以获得什么好处。
- 利用展示。
避免令人不愉快的注意
- 避免一开始便说道歉的话
- 避免一开始使用“滑稽”的故事
支持你的主要观念
- 利用统计资料
- 利用专家的见证
- 利用类推法
- 利用示范表演
要求行动
- 总结说明
  在长篇演讲里，演讲很容易涵盖较多题材，因此到了结尾的时候，听众不免对先前所讲的有点模糊不清，不能有个完整的概念。许多演讲人往往忽略了这点，以为听众会像自己一样，对这些概念清清楚楚。其实不然，因为演讲人对这些概念是经过长期思考，因而熟记于心。但这些对听众都完全是崭新的概念，所以在结尾时应对演讲做一个总结。
- 要求行动
  演讲完了之后，清楚的告诉听众要他们做什么，以达到演讲的思想。

读卡耐基《成功有效的团体沟通》做出的读书笔记。

【招聘】TaobaoUED招聘交互设计实习生

交互设计师-让世界因你而不同（1）总述

互联网产品的交互设计方法（UPA2008讲稿）

交互设计

数据与理论结合，让交互设计更专业【碳酸饮料会】

交互设计师-让世界因你而不同（1）总述

不一样的蚊子 — Mon, 23 Nov 2009 12:41:20 +0000

交互设计师-让世界因你而不同-系列文章目录

交互设计师-让世界因你而不同系列文章【脑图】

在不注重用户体验的公司，交互设计师等于美工。

在不注重商业审美的设计公司，交互设计师等于美工。

在不注重创意的广告公司，交互设计师等于美工。

美工没有什么不好，但是很多人都自称是设计师，都感觉自己在做设计。设计师也不是什么牛B的事情，很多人只会软件就会创意。

交互设计师的关键概念是什么？

商业的，区别与非商业的艺术/画家/涂鸦/玩票/自己感觉很吊
创造性，区别与抄袭/纯粹依靠图库/依赖装饰和素材
科学的，区别与个人的主观臆断/所谓的灵感/没有事实的根据
审美的，区别与垃圾的/文字和图片的堆砌/没有生命的图象/让人不感觉愉悦
独立的，区别与没有见解/没有判断/没有坚持/完全受别人控制

Web交互设计师的定义

秉承以用户为中心的设计理念，应用“以目标为导向的设计”方法，进行互联网产品的设计。

这是关于交互设计师的一个基本定义。无论是现有的交互设计师或是对交互设计有兴趣正打算入行的人都会考虑这个问题。“到底交互设计师是干什么的？”“怎么干？”“是因为我在网页设计方面有经验有能力于是就能当交互设计师了吗？”交互设计师首先需要认同“以用户为中心”的设计理念。有了为用户着想的观念，接下来就是方法，怎么设计才能很好的为用户服务？在我看来，目前实现UCD最有效的方法就是 Alan cooper提出的“以目标为导向的设计”方案。实际上“交互设计”这个名词也是他提出来的。

交互设计师的特点

交互设计师善于表达，以网页语言表达，以网页语言表达产品要告诉用户的信息，要显示给用户的操作功能。所以，凡是涉及到表达、传达的问题，都可以找交互设计师来做，也应该由交互设计师来做。产品经理考虑要做个什么产品才有价值，交互设计师考虑怎么把这个想法最有效的转化成一系列的界面展现给用户。除了展现，还有和用户的交互。这个展现、交互的过程就需要一定的表达能力。这种表达能力并不是我们平时所特指的口头表达，而是使用网页语言表达。我们经常会讨论一个按钮的位置，讨论某个状态下光标的样式，声讨应该写成“登录”而非“登陆”。这些都是网页语言表达。
有些时候，有些交互设计师会问，“网页上的文字要我来写吗？产品经理比我了解的更清楚，他（她）们写吧？”如果说交互设计师的应该具备“善于表达”的特点，那么，网页上的文字就应该由交互设计师来编写，虽然产品经理更了解产品，但是产品经理并不是最懂得如何想用户表达的人，交互设计师是。我们会讨论“你”还是“我”这样的称谓问题，会注意不要在页面上出现“用户”这样的字眼，这些都是文字表达的问题。

对交互设计师的要求

文字表达能力：写邮件，写blog，写各种东西。如前所述，文字表达是页面表达的一部分，具备一定的文字表达能力是必要的。
语言表达能力：多说，开会的时候要发言，一对一的讨论要花心思。
较好的语言表达能力是与同事沟通的必要素质，更为重要的是，语言表达能力是表达能力的一种体现。如果面对面，一对一的交流都有困难，怎么能保证用页面间接的跟用户交流能交流清楚呢。

web交互设计师的工作内容

对产品进行行为设计和界面设计。

行为设计是指各种用户操作后的效果设计。Web的操作以点击为主，点击操作又可以分为“表单提交”类和“跳转链接”类两种。除点击外，还涉及到拖拽操作等。

界面设计包括：页面布局、内容展示等众多界面展现。例如：使用按钮还是使用图标？字号大小的应用，如何使用tab….. 之所以特意提出这样一个话题，是为了强调除了“界面设计”，还需要“行为设计”。交互设计在被认识的过程中会有很多误区，常见的是把交互设计理解为一种专业的、高级的界面设计。一个产品不好用很多时候是因为流程上有问题，页面表现的挺合理，但是，点击了一下之后，就会发现“走不下去了”。流程是一系列的操作，也需要设计。

如何进行一个产品的交互设计?

第一步.信息构架设计

深入理解产品的目标、功能需求。将这些目标、需求转化为界面表现。把内容合理的归类整理为若干的界面。信息构架的设计意味着对导航的设计。“导航栏共有几级？每级几项？”这些问题将随着信息构架的设计而确定。
信息构架设计的要求：

符合用户心理模型。
尽量保持窄而浅的信息树这一步工作需要和产品经理充分的交流。

第二步.界面细节设计

在整体信息构架确定的基础上，对界面上的细节进行推敲。界面细节设计的要求：

符合web可用性标准
符合图形用户界面的基本准则
符合现有互联网上业已形成的设计习惯……
符合大多数互联网用户使用电脑的习惯（目前只想到这几条）

这些细节设计更像是交互设计的专业，通常其他职位的人不会染指。显然这些工作是很有价值的，但是创造性并不大，价值也不很大。随着互联网这个行业的成熟，细节上的表现会更统一、规范。也许今天我们今天激烈争论的问题，几年后已经很成型了，不需要再争论了。相比之下，信息构架的设计更具有创造性，自由度更大。

如何成为一名交互世界师？

5年前，Robert Reimann为Cooper通讯（the Cooper Newsletter）写了第一篇题为《如果你想成为一名交互设计师》的文章。和许多人一样，我读后大受启发：那正是我理想的职业。听从Reimann的建议，我接受培训，成了一名交互设计师。

现在，因为我的书的缘故，我发现人们开始问我同样的问题：如何成为一名交互设计师？成为一名交互设计师意味着什么？每天究竟要做哪些工作作？Reimann的佳作依然值得借鉴，在此基础上我再补充些我自己的看法。

最近五年的交互设计

在Reimann写下《如果你想成为一名交互设计师》之后的5年中，交互设计领域发生了许多变化。网络泡沫导致不少设计师纷纷离开这个领域。但是网络新近的复苏又使新的从业者加入进来。为了促进业内知识的累积，交互设计师们成立了一个新的团体：交互设计协会（Reimann为首届主席）。此外，继软件、互联网等“传统”业务之后，交互设计开始进入一些新的领域，包括手机，医疗设备，金融，娱乐与零售服务等。

而传统领域也在发生变化：互联网已成为应用软件设计的平台，即便是那些无需在线编程和运行的软件，也日渐成为“在线工作”与“线下工作”的混合体。就连操作系统也在逐步摆脱25年前赖以建构的桌面隐喻的束缚。一切都显得那么自然，有如探囊取物—— 使交互设计师在今天成为一份理想的职业。

交互设计师的一天

根据时间和项目的不同，交互设计师的日常工作包括：客户访谈，现场研究，头脑风暴，撰写文档，制作原型以及产品测试。具体工作取决于项目进程。除了埋头撰写文档的日子（如框架构建），每一天都会有所不同。不错，依然有很多EEMP：写邮件（Email），收邮件（Email），会议（meeting）和报告（presentation）。但其间也不乏令人兴奋的时刻。

交互设计师受聘同创意打交道——使抽象的想法付诸现实。很少有工作能够这般精彩。你可以通过头脑风暴，想象前所未有的事物，然后建造出来。还可以塑造行为，使世界变得更加有趣美好。你将用彩笔在白板和“随意贴”上描绘自己的创意，帮助人们解决问题。如果你足够出色，还有机会同那些拥有先进科技及巨大影响力的公司合作，让世界因你而不同。

要实现上述梦想，你必须具备3个条件：气质、培训和经验。

气质

Reimann对于气质价值的论述依旧准确。对于用户的“同情共感”与学习新事物的能力是任何设计师都不可或缺的两大特质。也是该职业必备的基石。

这并不意味着你需要成为“擅于交际的人物”（当然这样更好）。但确实意味着你应当对人类感兴趣，包括人的行为与局限性。你至少理论上要关注人与社会环境。一名优秀的交互设计师需要学会设身处地为用户着想，而不是把自己想象成用户，或者把用户看作与自己类似的人。你们很可能截然不同。

在MBTI人格测验中（Myers-Briggs personality scale），拥有“直觉型”人格（“N”：intuitive）同样十分关键。能够凭借直觉进行跳跃性思维对设计师而言至关重要。因为你不可能永远看清问题全局，接触每一个用户，对项目了然于胸。你不得不猜测与假设——这时你需要直觉。

培训

如果你认为自己的气质适合这样的工作，下一步就需要学习一些基础知识。选择好的入门书，如： About Face系列《软件观念革命-交互设计精髓》（About Face 2.0），《Designing Interfaces》与《Universal Principles of Design》。还需要了解你的工作介质，比如互联网，移动通讯和软件系统。你不必成为一名程序员，但需要了解每种介质技术上的可行性。工业设计准则与良好的沟通技巧也很有帮助。

与有经验的设计师共处，无论是在工作中，还是通过非正式的聚会、会议或者在线交流（比如交互设计协会（IxDA）的邮件讨论）同样受益匪浅（我在这里提到的很多问题都曾在那里讨论过）。那些信手拈来的知识，观点与方法都是设计文化的一部分。少说话，用心听。

快速培训的途径之一即在校学习（尽管过程紧凑，学费高昂）。我现在首推三所学校：卡耐基－梅隆大学（Carnegie Mellon）、伊利诺斯州立大学的设计学院（Institute of Design）和英国皇家设计学院（Royal College of Art）。遗憾的是，上述学校提供的都是面向研究生的课程。我还不知道任何本科阶段的交互设计专业。不过相信未来几年将会出现。

没有交互设计的本科专业，大学阶段该如何准备呢？我的建议如下：进入一所好的设计院校学习工业设计或传媒设计（你都能学到有用的技能），或者关注设计以外的任意领域。人文学科、人类学、文学、心理学、社会学、戏剧、政治、文化研究——都有助于你成为一名更加丰富的设计师。

经验

培训与知识储备，这些还远远不够。即便作为一名交互设计读物的作者，我依然认为书本只能为你提供从业背景，只有设计本身才能让你成长为一名交互设计师。

设计经验从何而来呢？主要有两个方法：一所好的学校能让你接触到现实课题（关于商务、技术以及用户限制）；你也可以提供专业设计或免费为别人设计（后者非无路可走请慎用）。

邮件讨论，本地团体与人才市场是着手找工作的首选。多数工作是通过口头推荐找来的，因此同其他设计者的联系也能有所帮助。

自我展示

尽管Cooper，Google那样的公司会在求职过程中或让你完成一系列的测试，所有的公司都要求作品展示（portfolio）。准确地说你要准备两类作品：一份在线，一份书面。

在线作品集应当提供作品综述，可以包含一些样本文件。

书面作品集（面试携带）则是对作品更加深刻的展现，以便你论述项目问题与解决过程。不要光介绍成果，工作过程很重要。没有作品怎么办？找找看。这个世界充满有待解决的问题，设计一个解决方案。

为什么要做交互设计师？

因为这样你就能改变世界。不错，我们貌似只是在修补按钮、下拉菜单、仪表什么的，但真正的工作却是改变这个世界，一点一滴……让它更加人性。我们帮助人们完成日常工作，无论是游戏，救生还是转账。我们将自己的价值注入这个世界，让事物变得有用，易用，愉快，健康。这样的工作真不赖。

高级交互设计师

职位描述：

对交互设计过程有深入的了解，可以独立完成整个设计过程（交互流程、角色模型等等交互设计方法能熟练应用）；
开发产品原型，配合进行用户测试及分析。
协助产品开发人员和界面/视觉设计师进行详细设计和产品实现。

任职资格：

交互设计/工业设计/人因工程/工业心理学等相关专业本科（含）以上学历，
IT交互设计从业经验两年以上，具有较多的实际产品经验者优先。

如果您健康积极有朝气，对互联网行业充满兴趣与激情，渴望成功
如果您具有创新意识和高度的责任心，具有较强的适应能力
如果您具备较好的专业素养和职业修养，善于沟通协作

那么，你可以胜任一名交互设计师！

网页可用性设计指导思路总结

Designing Interactions 交互设计读书笔记整理以及下载

交互设计师-成功有效的团体沟通（3）

互联网产品的交互设计方法（UPA2008讲稿）

交互设计

谈谈《人月神话》：三、追寻事物本质-《天才是如何思考的》分析事物的本质

不一样的蚊子 — Wed, 14 Oct 2009 07:10:29 +0000

发现事物的本质，是一项艰苦的工作。需要具备一定的技能和恒心。天才们在这方面得心应手，只要看到了本质，就会比别人领悟得更快，做得更好。寻找本质的工作是艰难的，但专门设计的练习可以帮你。下面我们先做两个练习。

给事物定义

在我的课堂上，常要求学生们给出一些简单的事物——如桌子或自行车——的定义。下面是一则典型的师生对话：

A:桌子？是一块木头板，有四条腿。

Q:木头？不能是塑料的吗？或铁的？玻璃的？

A:嗯。对不起。说是一个平面，有四条腿，好一点。

Q:好吧。你说有四条腿。没有三条腿的桌子吗？

A:嗯……

Q:没有两条腿的桌子吗？

A:嗯……

Q:没有一条腿的桌子吗？

A:嗯……

Q:所以说，桌子有几条腿无关紧要。桌腿的数量，作为一个桌子的特征之一，并不是必须的。
对吗？

A:对。

Q:很好。我们接着进行。有没有一条腿也没有的桌子呢？

A:有……没有……

Q:好吧，有没有挂在墙上的桌子呢？

A:有。

Q:那么，这些桌子就没有腿。那么悬起来的桌子呢？

A:嗯……我们没想过那种桌子。

Q:因此，桌腿作为一个参数，根本不是必要的。是吗？

A:是。

Q:那么，这个定义还剩下什么呢？一个平面？你是说一个平面吗？

A:是的。

Q:好吧。墙是一个平面。是桌子吗？

A:不是（很难为情）……我们指的是一个水平的表面。

Q:水平的？有时有些桌子会有点倾斜，所以作为一个特征，水平并不总是事实。再说，地板是
个水平的表面。天花板是个水平的表面。它们是桌子吗？

A:不是（大笑）……

Q:那么，你们的桌子定义还剩了什么呢？

A:什么也没有。

Q:这就是说，第一个定义没有包含必要的特征。回过头来看。你们一定知道定义是用来指定事物本质的。所以，桌子的本质是什么？

A:……(沉默)……

好吧，事物的实质必须包含事物的必要的和充足的特征，这样人们才能从一个定义中了解该事物。同时，记住这个规则：给事物定义之前，先从抽象阶形图中找出最接近的范畴（具体的范畴位于下面，普遍的范畴位于上面，从下到上，从具体到普遍）。在进入上一级范畴之前，把要定义的事物分为几部分。下面是图形演示的做法：

（图略）

例如：

你想给鬈毛狗下个定义，你会怎么说呢？

狗。一种宠物。

很好。如果你说是一种宠物，那么它在抽象范畴内就太靠上了，因为猫也是宠物、鹦鹉也是宠物。鱼也是宠物。鬈毛狗的抽象阶形图如下所示：

物体

活物（因为有无生命的物体）

宠物（因为野生动物不是宠物）

狗（因为猫也是宠物）、鸟、鱼等

鬈毛狗（因为还有小猎犬、叭喇狗等）

说鬈毛狗是狗的一种，很好；“驯化了的狗”更好，因为还有像澳洲野狗。

从这个抽象阶形图中稍高一级的范畴开始，下到狗的其他种类上去，然后定义一只鬈毛狗与德国短毛猎狗、中国家犬等其他狗的不同处。现在让我们回到桌子这个话题上去：

Q:桌子是什么？你从哪儿开始？

A:上一级！是一件家具。

Q:很好。就这一点，就可以排除地板、天花板和墙。好极了！现在让我们到最下一级，区分桌子和其他家具。

A:是一件某种意义上有水平表面的家具。

Q:差不多，但椅子和书架也有水平表面。它们是桌子吗？

A:不是。

Q:再试试。

A:椅子是用来坐的。

Q:嗯……我也可以坐到桌子上去呀。不过，这是个很不错的尝试！

A:桌子比椅子大，是为了工具用的。

Q:好极了！当你说到“为了”某物时。你就接近一个物体的功能了：椅子是为了坐。桌子是为了工作、支承并用作工具台。书架只有支承作用。那么到底桌子是什么呢？

A:工具台，并在吃饭时也可以使用的家具。

Q:棒极了！现在把这句话压缩成两三个词的定义。你拿工具都在桌子上做些什么呀？桌子能帮你做什么呢？

A:整理东西，便于使用。

Q:妙极了！再短一些！

A:组织工作空间用的家具

Q:哇！对比一下第一个定义和最后一个定义。多大的不同！看到了吗？

A:噢，是的！

这就是琐碎的或表象的定义——塑料的、有腿的、有表面的，及其他所有不重要的事项——与天才或实质定义的区别所在。发现事物的本质容易吗？

不容易，太难了。

当然难了。不过，如果你能训练自己给出像刚才这样的定义的话，你认为人们会不会把你看作天才呢？

当然会了。

所以说，命运掌握在自己手中（确切地说，在自己脑子里）。训练你自己给出类似上面的定义。后，我们会学习另一种技巧——掌握一眼看到本质的技巧。天才发现事物的本质后，
一切就变得迎刃而解了。这就是为什么天才的解决方法总是位于抽象阶形图的上端，也就是具体/普遍这一级。

我们将继续强化这一意识，不过，现在让我们使用新的技巧看事物。

正如你在桌子这个例子所看到的，找出实质，就是排除不必要的特征或部分，挑选必要和充分的特征或部分。所有入选的必要部分必须同时是体现本质的充分部分。桌子组织工作空间，而不是休息空间（如：床）或辅助空间（如：书架）。最后一点，桌子是工作空间的组织
工具，而不是工作空间的保护物（如：罩子）或工作空间的照明物（如：台灯）。只选必要
的和充分的特征——不要其他的！否则，这个事物的实质就转化成了另一事物的实质，或无
法与另一事物的实质相区分了。

检测你的定义

你已经学会下定义了，当然就有方法检测这些定义，看它们是否正确。一种最有效的方法是反例法。

先讲一个故事，这个故事是古希腊时候的事了。那时哲学家们想对人（或人类）下个定义。柏位图的定义当时很流行，他说，人是一种没长毛的两腿动物。狄奥真尼斯，当时以言语辛辣、行为费解著称（如：他居住在城市广场一个澡盆里）。有一天，他带着一只拨了毛的公鸡去了柏位图的“学院”。柏位图正跟他的学生们围坐一圈讲学，狄奥真尼斯把公鸡往院子里一丢，看着这只拨了毛的公鸡满院子里跑，哈哈大笑，喊道：“这就是柏位图所说的人！
”

所以，能找到一个反例驳斥你的定义，或证明它是错误的，是一项有待训练和实践的大能力。还记得吗？在关于桌子定义的对话中，我只是给你们提供了一些反例，其他的什么也没做。当时我问，“有三条的桌子吗？”当然有了。于是，桌子有四条腿的定义就证明是错误的了。类似这样的话我问了多次，通过这种问话我们得出了正确的定义。

让我们看看怎样运用这一方法找出上例中学校校长和教育系统的本质任务。为什么我认为孩子（受教育者）和老师（教育者）才是教育体制（教/学）的本质所在呢？让我们很快检测一下。

没有校长或管理人员，教/学活动会发生吗？换句话说，有没有管理人员参预的教/学活动吗（有没有腿的桌子吗）？有。那么，管理人员就不是教/学活动发生的本质。
没有教舍，教/学活动会发生吗？换句话说，有没有教舍的教/学活动吗？有。那么，教舍就不是教育的本质。
没有试卷和考试，教/学活动会发生吗？能。那么，试卷和考试就不是本质。
没有教师，教/学活动会发生吗？不会。必须有教师（某种形式的）。所以，教师是本质。
没有学生，教/学活动会发生吗？不会。所以，学生是教/学体制的本质。

结论很简单：没有孩子（学生），就不存在教/学活动，不存在教育，不存在教育体制。孩子才是教育体制的本质。

你的机会来了。根据你在定义桌子、检测人的定义和找出教育的本质一系列过程中所掌握的知识，能找出你工作的本质吗？能找出你生活的本质吗？能找出音乐、文学、创造性和天才的本质吗？

有了刚刚学会的技巧，你对创造性或天才的定义可能才是最好的。你是你的未来的创造者。你的定义可能使你的生活发生翻天覆地的变化；这样，你就成了大能力者，成了成千上万本书中提到的天才，成了一个为成千上万人所称道、为成千上万人所崇拜的人。这就是天才的道路，而你就是正在成长中的天才。

网页可用性设计指导思路总结

谈谈《人月神话》：一、《人月神话》的结构及其与组织

谈谈《人月神话》：二、哪些是现象，哪些是答案，而哪些才是本质？

交互设计师-让世界因你而不同（1）总述

互联网产品的交互设计方法（UPA2008讲稿）

谈谈《人月神话》：二、哪些是现象，哪些是答案，而哪些才是本质？

不一样的蚊子 — Wed, 14 Oct 2009 07:04:48 +0000

我们先来看一个例子：

街口的乞丐向我伸出手来，我给了他十元钞票。

用现象、答案、本质来分析问题：我给出了解决了他伸手（这个问题）的答案，但没并有触及他伸手的本质：饥饿；更未能触及整个事件的本质：贫穷(或者懒惰)。

《人月神话》对我触动较深的就是他的现象、答案、本质体系。纵览全书，提出了很多问题、解答、本质，周爱民统计的数据如下：

现象、答案、本质统计
章	现象	答案	本质	章	现象	答案	本质
1	3			9	7	7	2
2	10	1	1	10	7	4	1
3	3	3		11	21	6	2
4	3	4	1	12	15	3	1
5	3	2		13	13	4
6	3	5	1	14	13	4	1
7	5	14	2	15	9	5	1
8	10		1	统计	62%	31%	7%

列表中分出了三类：现象、答案和本质。其中现象62%，答案31%，本质7%。对“现象－答案－本质”的分析存在主观的成分，因此你可以重做这个实验。在上面的列表的分析过程中，看到这样的几点本质：

原文以及对应的本质
本质含义	原文	注
项目在定义阶段就发生了错误	2.6我们围绕成本核算的估计技术，混淆了工作量和项目进展。人月是危险和带有欺骗性的神话，因为它暗示人员数量和时间是可以相互替换的。
概念不完整＝定义不明确＝无法实施	4.1 “概念完整性是系统设计中最重要的考虑因素”	注1
形式化会带来精确的定义	6.3出于精确性的考虑，我们需要形式化的设计定义，同样，我们需要记叙性定义来加深理解。
组织是交流（沟通）的结果	7.1巴比伦塔项目的失败是因为缺乏交流，以及交流的结果——组织。
组织的目标：减少必要的交流和协作量	7.16 团队组织的目标是为了减少必要的交流和协作量。
小型程序与大型程序不同	8.2 构建独立小型程序的数据不适用于编程系统项目。
私利性是本质问题	9.6 在大型的团队中，各个小组倾向于不断地局部优化，以满足自己的目标，而较少考虑队用户的整体影响。这种方向性的问题是大型项目的主要危险。	注2
数据表现形式是编程的根本	9.16 更普遍的是，战略上突破常来自于数据或表的重新表达。数据的表现形式是编程的根本。
项目经理的基本职责	10.9 项目经理的基本职责是使每个人都向着相同的方向前进。
产品交付的关键是质量的保障程度	11.7 “开发人员交付的是用户满意程度，而不仅仅是实际的产品。”（Cosgrove）	注3
用户需求变化的根源	11.9 软件产品易于掌握的特性和不可见性，导致了它的构建人员（特别容易）面临着永恒的需求变更。
某些计算机资源不能总是方便的得到	12.4 目标机器的使用需求量是一种特殊曲线：刚开始使用率非常低，突然出现爆发性的增长，接着趋于平缓。	注4
里程碑的性质／定义	14.4 里程碑必须是具体的、特定的、可度量的事件，能进行清晰能定义。
程序＝用户认识＋机器认识	15.1 对于软件编程产品来说，程序向用户所呈现的面貌与提供给机器识别的内容同样重要。

^{注1：这里“精确定义”是本质，形式化只是答案。}
^{注2：对组织中的个体或组织的局部来说。}
^{注3：产品问题不是本身的“完成度”的问题，而是用户可感受到的质量问题。}
^{注4：书用例举的是“调试环境和目标系统”，但可以引申到例如“目标用户”或者“客户现场”。}

上表列出的“62%的现象”只是Brooks从四十年前就好心的提醒我们：看啦，快看看这些奇怪的现象，你难道不觉得它们奇怪么？Brooks没有告诉我们真理，于是，我们开始关注这些现象，并把它们当成关注的焦点。现在，很多Brooks先生曾经给出的答案已经变成了思考同类问题的现实现象。你可以在工程中应用这些既有的答案。

事实是：我们现在的很多工程知识，——无论是从书上看到的，还是从实践中体验到的——大多未曾脱离《人月神话》之所言。《人月神话》“是一本可怕的书”。然而我认为真正的可怕之处在于：如今只要论及工程，那么所讲述的一定是Brooks的这样的经验以及由此推出的观点，或者在不违背这些经验和观点上的一些具体的实作方法！我们全然不顾书中所言是现象，还是本质的推论，或者只是现象归结的一个（未必正确的）答案。尽管这些答案大多数时候都如同预期地出现在你的现实项目中：

原文	基本含义	现实
规格说明的风格必须清晰、完整和准确。用户常常会单独提到某个定义，所以每条说明都必须重复所有的基本要素，所以所有文字都要相互一致。这往往使手册读起来枯燥乏味，但是精确比生动更加重要。(P46)	重复所有基本要素，以便于单个的特性可能会被抽离出来进行讨论。	RUP
将来的规格说明同时包括形式化和记叙性定义两种方式。(P46)	用形式化来精确定义，用记叙性定义来被充说明。	UML
使用实现来作为一种定义的方式有一些优点……（但）可能更加过度地规定了外部功能。(P47)	陈述实现并不是设计中规定外部功能的方法。	UserCase不应指示或暗示实现的方法。
对软件系统的体系结构师而言，存在一种更加可爱的方法来分发和强制定义。对于建立模块间接口语法，而非语义时，它特别有用……(P48)	寻求一种描述功能而不涉及实现的方法，来协助架构师陈述它们的设计。	Interface
项目工作手册不是独立的一篇文档，它是对项目必须产出的一系列文档进行组织的一种结构。项目所有的文档都必须是该结构的一部分……(P54)	项目工作手册应当有组织、有结构地陈述项目各个方面的细节。	RUP
笨拙的文字归档工作确保了所有变更会被阅读，这正是工作手册要达到的目的。(P56)	确保变更不会丢失。	需求管理系统或任务管理系统
是因为控制序更加复杂,所以需要更多的人员？或者因为它们被分派了过多的人员，所以要求有更多的模块？是因为复杂程度非常高，还是分配较多的人员，导致花费了更长的时间？没有人可以确定……(P64)	随时关注生产率并控制它。	项目管理软件
但是只有书面计划是精确和可以沟通的。计划中包括了时间、地点、人物、做什么、资金……(P75)	以书面化的形式来制定计划，并且确保一些要素的准确性。	项目管理软件
试验性的系统必须被构建然后丢弃……(P77)	做一个原型并准备好扔掉它。	原型过程
目标上的一些变化无可避免，事先为它们做准备总比假设它们不会出现要好得多。不但目标上的变化不可避免，而且设计策略和技术上的变化也不可避免……(P77)	为变化而做出设计。	延长设计和迭代的周期。风险评估。
流程图是被吹捧得最过分的一种程序文档。事实上，很多程序甚至不需要流程图，很少有程序需要一页纸以上的流程图。 (P107)	编程的结果产生流程图（以供讨论和分析），而不是对照着流程图进行编程。	编程的结果产生流程图（以供讨论和分析），而不是对照着流程图进行编程。
试图把信息放在不同的文件中，并努力维持它们之间的同步，是一种非常费力不讨好的事情……(P108)	文档应该与代码同步。	代码文档化。
没有银弹(P114)		所有曾被认为是银弹的东西都无情地否定了。

我们应该清楚：现象的存在与是否被发现无关。

苹果从树上掉到地上是现象，你看见这个现象也并不体现你的伟大，你四处大叫“苹果掉地上了”会被人当成疯子。牛顿没有被人（因此）看成疯子的原因：现象只是引起了他的注意，而探究到“本质”才是关键。Brooks给我们描述了现象，在历史的发展中逐渐找到了问题，也逐渐找到了本质。

训练自身发现事物现象与本质的能力在项目开发中至关重要，我们如何去做呢？通常我们总是能给出“答案”，但未见得触及“本质”。作为交互设计师来讲，我们在做项目时一味的调整、修改是不能从根本上解决问题的，抓住问题的本质才是好的办法。

如何追寻事物的本质？

网页可用性设计指导思路总结

CRM平台项目的交互模式库总结（持续更新）

谈谈《人月神话》：一、《人月神话》的结构及其与组织

谈谈《人月神话》：三、追寻事物本质-《天才是如何思考的》分析事物的本质

交互设计

谈谈《人月神话》：一、《人月神话》的结构及其与组织

不一样的蚊子 — Wed, 14 Oct 2009 07:02:39 +0000

最近读了《人月神话》，30年前写的书，到现在也一直被奉为经典。10个人读《人员神话》就会有10种感想，结合互联网上众多的读书笔记，发表一点拙见。

《人月神话》的结构及其与组织
章	内容说明	问题域
1	说明“程序(program)”不是“产品(prodouct)”，更不是“项目(project)”。说明程序员的心理与情绪因素——这是很重要的一个话题。
2	项目的发起、评审与预估（错误的设定项目周期是最大的错误）。 “人月问题”：周期不因为人力投入而变短，事实上它可能更糟糕。	项目定义
3	十个人与几百人面临的问题是不同的。	团队建设
4~5	从设计阶段开始，即致力于获得和维护概念的完整性。	团队管理 – 方向与决策
6	项目过程中的一般性方法。	团队管理 – 一般性方法
7	项目组织过程中的沟通问题。	团队管理 – 沟通问题
8~10	编码过程中的关键问题：－项目复杂程度与需要编码的数据呈指数级关系，反过来，减少编码可降低系统复杂性－数据的表现形式是编程的根本－文档是必须且重要的，但往往不被关注（主要强调重要性）	编码
11	承认变更，承认从需求和设计期就开始的变化。为应付变化而实现的原型系统。	项目定义 – 需求不确定
12	工具带来效能。
13	强调测试，以提升品质和保障项目目标。	项目管理 – 检测/回顾
14	项目控制：进度与里程碑	项目管理 – 控制
15	文档：项目过程文档，包括定义、设计与实现（主要强调方法）	项目管理 – 文档化
16,17	没有银弹、再论没有银弹
18,19	前十五章的回顾（不包括“银弹”的话题）
20	二十年后对上述命题的回顾（包括对银弹现象的进一步解释）

网页可用性设计指导思路总结

CRM平台项目的交互模式库总结（持续更新）

谈谈《人月神话》：二、哪些是现象，哪些是答案，而哪些才是本质？

谈谈《人月神话》：三、追寻事物本质-《天才是如何思考的》分析事物的本质

交互设计

CRM平台项目的交互模式库总结（持续更新）

不一样的蚊子 — Sun, 11 Oct 2009 16:41:02 +0000

现在做的项目都是平台化的，需要配置许多东西，也需要做成许多通用的模块，如：

如何通过后台去配置查询条件中的下拉列表？增加一项“种类4”，
区间可以配置，在区间类增加一个“200-400”，
人物/组织选择器可复用，而且适用于许多情况。

选择框

人物/组织选择器

接下来，您在交互模式库里面可以找到解决方案。线上访问地址：http://adamghost.com/wp-content/sample/AxureLib-CRM-EN/

同时也总结了项目中的一些交互模式，交互库。这些库会在项目的进行中逐渐更正、改进、完善，以做成一个复用率很高的CRM库。欢迎大家踊跃提建议与意见：）

现在库的结构如下（服务器不支持中文，全部用的英文，这里附上中文对照表

–

网页可用性设计指导思路总结

交互设计师-让世界因你而不同（1）总述

Designing Interactions 交互设计读书笔记整理以及下载

互联网产品的交互设计方法（UPA2008讲稿）

交互设计

鱼米之乡-无锡太湖行

不一样的蚊子 — Thu, 08 Oct 2009 15:28:42 +0000

惠山寺

京杭运河-昔日教堂

鼋头渚-孤独的帆船

鼋头渚-抓拍

鼋头渚-凝望

鼋头渚-远眺

蠡园-摩天轮

蠡园-西施-千步长廊

朝朝暮暮朝朝，期期盼盼期期-我的大学毕业

学习PPT之三：控制想像力

不一样的蚊子 — Sat, 05 Sep 2009 15:34:35 +0000

文／胖胡斐
来自：http://darklylee.spaces.live.com

写过的两个文章中，我更喜欢第一篇，“学习PPT”，尤其是“我们干吗做PPT？PPT是干吗的？”一段。最近看了不少东西，也做了不少PPT，也有一些公司内部的讲座，于是，打算把这一块单独拎出来说一说。

易中天先生的《品三国》实在太棒，五一终于倒出空来仔细看。易中天先生站在屏幕前面，扶着演讲台，深入浅出的讲述他心中的三国和三国人物，“品三国”的“品”用的太经典。我们发现易先生“品”的时候没有用PPT，但是整个演讲非常成功，观众的注意力完完全全在易先生身上没有移开过，他从头到尾都是中心，无论是视觉中心还是注意力的中心。所以认为很容易被他的魅力吸引，被他的知识吸引。为什么易先生不用PPT、白板、黑板、幻灯片这种东西呢？我们同时也发现易先生讲座的条理很清晰，只要从头到尾停下来的，一定可以知道演讲的层次，而不需要借助其他的演示设备。因为演讲，重要的是控制听众的思路，让他们随着自己的思路去想。如果能做到这样，还要什么PPT？

再看，余世维的讲座，很少有人没看过，网上都泛滥了。同样的他能够最大限度控制听众的注意力，听众的目光永远在他身上。和易中天先生不同的，是他是典型的台湾讲师，手舞足蹈肢体语言极为丰富，另一处不同，就是余世维先生会用幻灯片和白板。为什么呢？幻灯片上显示讲座的大纲，仅仅是大纲，白板上面写正在说的一些要点和图示。余先生需要用一些辅助的信息渠道去完成沟通，需要把提纲做得更加明显。我窃认为这和目标听众的注意力集中程度有关，呵呵。但是我们可以学到的，就是无论什么辅助信息，都只能是辅助的。千万不能喧兵夺主。

还是要说道Jobs的演讲。Jobs是我见过的将个人魅力和PPT结合最完美的人了。上一篇说过，Jobs在不停的控制观众的注意力，他想让观众什么时候看大屏幕他们就什么时候看，尽管大屏幕一直在那儿。他用PPT（不管是不是powerpoint做的）作为一种辅助，一种满足观众想像力的辅助。

“想像力”是我们今天说的重点，甚至可以说是想像力管理。易中天先生不用任何演示，可以因为易先生说的东西是没有办法具像的，他在第一回中就说了很多人说 xx演的曹操“不像”，“你见过呀你说像不像？”真的，如果把易先生说的人物都具像化的放在背景板上，观众就会把接收到的各种信息往那个人身上套。就丧失了想象力。总之我听完讲曹操的两场，心目中的形象和鲍国安没有任何关系。因为我跟着他的思路去想了，所以我认为我听的超值！

余世维先生呢，我们注意他举例子的时候，会说“甲”怎么样，“乙”怎么样，他的幻灯片上永远都只有简单的文字。因为不能让“steven”“lily”这样的名字给观众一个想像的引导。比如在大多数人想象中，“steven”这个名字就是戴眼镜，个子不高，看上去有点斯文其实有点小坏的男生。

Jobs不一样，他要传达的就是很具像很具像的产品，iPhone、iPod、iMac，一个比一个具体。而且他没有必要让用户去想象这玩意儿该是什么样子。所以Jobs花了很多时间去引导用户想像“如果我有了这个…”这也是想像力管理。

所以，关键在于你想让你的观众往哪里想。你自己一个人的时候，能不能掌握好内容控制大家的注意力。如果可以，那你的PPT别忘了精简精简再精简。

前段时间经常在公司内部分享，做了一些PPT，其中“在淘宝网玩促销”个人比较满意。删了很多次，但是越删页数越多。因为原来在一页里面写了的东西，为了保证信息传播的简单，保证观众不要把目光集中在PPT上，把很多信息拆分成多页。实践了一下，自己感觉还不错。比如第一个，我在说消费者利益的时候，引用了一杯牛奶，整个屏幕上只有一杯牛奶，我需要让大家去想，把牛奶卖掉，应该怎么说话。第二个我想让大家去想这两个创意的信息传达，第三个是在说明数据对比的意义。结果你的观众是可以帮助你往下多做一步的，因为他们在想，因为信息很集中。

前面几篇讲的是控制观众的注意力，今天说了控制观众的想象力。有空我们接着研究。

学习PPT之二：做个好的结案报告

PPT 中滚动字幕无法完全显示解决办法

学习PPT

学习PPT之二：做个好的结案报告

不一样的蚊子 — Tue, 01 Sep 2009 14:12:01 +0000

文／胖胡斐
来自：http://darklylee.spaces.live.com

前一次写学习PPT，被大家说好，还被MSN的编辑放到Live Spaces的首页推荐，导致流量暴涨留言倍增。至今还总有从baidu等搜索引擎引过来的流量。http://darklylee.spaces.live.com/blog/cns!6BAF43F4667DF4C5!585.entry 就是这篇。窃喜窃喜。

上次那篇，不少留言都集中在苹果的那个Keynotes软件上了，其实我的本意是表达怎么样的PPT才能够更好的表达自己的想法。说到底，用什么软件只是一个形式问题。

想起前段时间，自己做的SoCool!活动，花了些心思做了一个总结报告，和大家分享过两次。因为涉及到一些机密，我一直在琢磨怎么能分享出来。终究，删掉很多东西，跟大家分享一下，我认为结案报告的做法和一个好的结案报告应该怎么写。

首先，我们要知道为什么要做结案？结案给谁看？

我们花了很大的精力去做一个项目，得失、成败、喜悦、遗憾都一定有，那么我们需要有一个叫结案的东西，用来

总结：给老板看的，告诉老板你做了什么，有什么结果。
分享：给同事看的，分享自己是怎么做的，有什么好的可取的地方，如果他们做有什么一定要注意的。因为谁也不可能在一个岗位上干一辈子，更不能让自己的事情别人做不了。自己如果能够有一些经验留下来，对自己对公司对别人都是好事。
思考：给自己看的，当自己身处项目之中的时候，不能判断事情的好坏成败，所谓“只缘身在此山中”。当事情结束了，我们静下来仔细去回顾的时候，才会有很多想法浮现出来，这个时候一定要想办法记下来，会让自己印象更加深刻。我们还会发现“说出来”和“写出来”有很大差别，说的时候可以不经过大脑，而写出来就一定要思考过才会写出来。这个“思考”的过程对自己非常重要。

因此，事情做完了，要让老板知道、同事明白、自己成长，做一个像样的结案报告是必要的。

然后，要有个标准：怎么就算好？

大家都见过很多很眩飞来飞去的PPT，看完之后只记得在飞了，却不知道他要说什么，殊不知PPT只是一个表达的工具，是让自己的想法能够传播的东西而已。

我有三个标准，做完结案之后反省一下看是不是达到这几个标准，达到了就可以发了。

别人能“看”懂
老板三分钟就要知道你要说啥
尽量好看一点

我们一个一个说。

别人能“看”懂

和做普通的PPT不同，结案的PPT不是每个人都有机会对着所有人讲，因此我们说这种PPT多是一种“看”的PPT，而不是“听”的PPT。所以我们要让那些没有机会看我们presentation的人很容易弄明白：

你是干什么的？你干什么了？
就是说如果我们离开这个岗位了，留下来的分享，要让别人知道你的基本情况吧。
你怎么干的？效果怎么样？
怎么干的，我们自己可能很清楚，但是别人不一定清楚，一年之后更不会清楚。所以把当时的做法、想法、计划、打算都记录下来，造福后人阿。
告诉人家你做了哪些努力去改善项目，收到了什么样的效果，这样别人会觉得你实在是细致，确实是在努力做事。
如果我做，你有什么要交代的？
换句话说，把自己的遗憾、自己的暗点详尽地表达出来。不可能有完美的项目，知道自己的不足对自己很宝贵。对别人更宝贵，在一个平等分享的公司，这是造福后世的事情。

把自己当成一个很傻很傻的，完全不知道这个项目的人，把自己的PPT过一遍，看看有没有表达清楚。在找一个不了解的人看看，如果他也看懂了就没问题了。千万不要认为自己做了一个别人看不懂的东西是什么光荣的事情！

老板很容易明白

我们说结案PPT很关键是给老板看。那么老板关心什么？我们一定要知道。我不是希望向老板献媚，而是要体现自己的体贴，知道老板要什么，在最短的时间内给老板看他最想要看的东西。这才是给自己机会。
老板都很忙，可能我们的时间只有三分钟。所以

在前三页马上说出你的主要成绩
一定要知道老板关心什么。老板当然知道你是干啥的，也知道你大概干了什么。那么我们只需要告诉他最关心的几个指标就可以了。比如带来了多少销售，有多少人买了。老板不会去关心具体哪一天有多少，你干了多少细节工作。老板很忙，要尽可能一句话告诉他你最成功的点，还要让它记住。所以PPT前几页非常重要。一定要简单，最简单的数字列出KPI就可以了。
后面的内容要尽可能详细
老板看完前面三页的内容，觉得“嗯不错”。但他发现后面还有好几十页，自己却没有时间去看。那这些地方我们还要不要做？当然要。我们要在第四页 PPT告诉老板后面有些什么，可以包括前面讲到的项目概述、时间表、细节等等。老板基本是不会一点点看下去的，这些就是传递给他一个信息：我很细致也很认真。

还是那个说法，这不是讨好老板，而是一种更合适的传播方式。

尽量好看一点

好看的PPT谁都愿意看，但我说这不是必须的。最关健的还是内容，让别人能看懂，让老板容易明白比形式重要一百倍。当然，能做好看就做好看一点。上一篇学习PPT里面有一些PPT制作的原则，可以借鉴的不少。http://darklylee.spaces.live.com/blog/cns!6BAF43F4667DF4C5!585.entry

做了SoCool!活动的结案，我自己感觉受益匪浅，就分享这么多吧。抱歉保密原因不能贴太多图片上来。但是我想方法和原则比具体内容更加重要。

学习PPT之三：控制想像力

PPT 中滚动字幕无法完全显示解决办法

学习PPT

学习PPT

不一样的蚊子 — Thu, 27 Aug 2009 14:30:27 +0000

文／胖胡斐
来自：http://darklylee.spaces.live.com

我敢说，我做的PPT在平常JJYY的圈子里面算是很不错的。我也一直很想有机会有总结和分享。特别是前几天连着看了好几遍Apple WWDC年会的录像之后。

下面这篇，搭眼一看会以为是WWDC的介绍，其实是我研究这个视频之后，对PPT的一些想法而已。

我这里说的PPT，不限于PowerPoint软件，而是说整个的展示、演示的全称。我也不会花很多工夫在技术层面上去说一些技巧，那在Office的帮助里面都有。

从Apple WWDC年会开始说，这是Apple World Wide Developers Conference的全称。每年apple都会在这里做一些回顾，同时推出一些新产品。我是一个标准的apple迷，非常关注apple的每一个新产品新服务。

这回，我的注意力被吸引到了Jobs和他的VP们如何展示他们的PPT上面。当然，他们不使用PowerPoint，在apple的软件里面，PowerPoint会显得很简陋。一款叫Keynotes的软件完成了这个工作。我很愿意花一点时间来说这个软件。

看下面这些图，apple在介绍自己这个软件的时候，总是专挑office没有的功能来说，比如那么立体的图标，酷的像电影的动画，还有图片自动蒙板。我会认为，凡是看到这个的人，都会至少对PowerPoint很熟悉，都会发现PPT做不了下面的很多东西，都会有印象说keynote比 PowerPoint强大很多。其实，强大倒不一定，但keynotes满足了很多人追求的东西：每一个做PPT的人，都会想着作出来的东西是要给别人看的，谁都会希望做的很好看很眩。但是如果没有辅助的画图软件如Photoshop，我们似乎比较难做出下面一半效果的ppt。而用keynotes，这一切都很简单。

我不是在说这个软件多好多好。最终看了图片和软件介绍，我想回归的问题是：

我们干吗做PPT？PPT是干吗的？

我想，PPT有两种，一种是给别人看的，另一种是给别人讲的。共同点是都是要别人了解我们的东西。不同的，是前一种可以用邮件发出去并支持转发，因为里面的东西会说的很清楚，有很多小字很多注释，或者纯是图文，总之，不需要做的人来解释，就可以看懂的。一般情况下这种PPT是下面的人做出来给领导看的或者用于平等分享的。我们平常作的分析、分享、总结大部分属于这种。这样的PPT，观看者是面对电脑屏幕看的，他们眼球和屏幕的距离不会超过1米。

另一种是给别人讲的，就是PPT的内容通常非常简单，PPT背后的东西非常多。这种一般是领导讲的，关键是“讲”，不讲别人没法弄清楚。PPT里面通常有大幅的画面，或者非常非常大的字。最常见的诸如“What?”之类的，广告公司创意提案的时候经常用。这种PPT一定是通过投影打在大屏幕上，演讲者手舞足蹈在前面讲的。

PPT是用来表达自己思想的工具，只是一个工具而已。不同的是，PPT使用一种全屏幕的独占式推送信息的方式，更加容易获得观众的注意力。大少爷说，跟人沟通创意，书面的方式很可能会理解不一样，最好还是追一个电话过去，口头沟通好很多。换句话说，书面的或者打在大屏幕上面的东西，只能也必须是一个辅助，语言和语音的辅助。所以，我还是比较赞同把PPT做得简单一点。

以前有这样的想法，自己做PPT的时候也在模拟，假装自己在讲，可总是仍然想放更多的东西在PPT里面，这样其实对自己很不利，观众会花更多的时间和注意力在大屏幕上面，而不是在关注自己的举止和语气。说严重一点，这就形成不是自己在讲，而是PPT在讲，自己做的是PPT的一个助手。这肯定不对。想了很久，直到认真研究了WWDC的keynotes视频。他们在用这样的方式说事情：

在说明一个新东西的时候，先把这个东西的一个overview显示出来，这就够了，接下来的时间，是让观众看自己的，自己有更多的时间去讲解里面每一个要点（key points）。而这个时候，观众是带着问题和兴趣在听你给他解决问题，因此注意力在自己身上。

一定会有demo，这个在介绍新产品的时候很重要，但是画面上面出现demo本身就好了。我以前做了demo，还会在上面把很多地方 highlight出来，告诉人家这个是什么。其实，一个好的demo，是人就能看得懂的，我们只需要告诉人家这个还能做什么就好了，而这样的话，一定要说出来，而不是写在大屏幕上。

告诉人家什么东西好的时候，一定会有对比，那就要告诉人家跟谁比，哪里好。哪里好的东西也不要写出来，每个看的人都会有自己的看法。我们要做的，就是引导观众朝我们的想法上面去走。

先出内容还是先说出内容？这个是我在研究这个演说的时候注意过的一个问题。通常的提案是先出内容，然后照着念一遍或者解释一遍。我发现，apple 这次演说，之所以说成功，是他们非常纯熟地在运用技巧，控制观众的注意力。本文上面说到，看到key points以后，观众带着疑问看着演讲者，演讲者担当的是解释的角色，演讲者的受关注程度就非常高。同样的，Jobs等人经常会提出一些玄念，一些设问句，接着大屏幕会用比较动感强烈的动画显示出来要推出的新东西，并且通常只有一句话，比如“next month”“today”，这时候观众会豁然开朗，他们的注意力会马上转移到大屏幕上面，接着会无限憧憬和崇敬地看着讲演者，等待解释。因为大屏幕上的内容只有最关键的词，大家只能知道关键点，具体的内容还是要有解答才行。

所以，控制观众的眼球，控制他们的注意力，非常重要！PPT充当的角色，就是帮助我们进行控制。

相关的几个说法，关于PPT制作的：

Magic Seven原则（7士2＝5～9）。每张幻灯片传达5个概念效果最好。 7个概念人脑恰恰好可以处理。超过9个概念负担太重了，请重新组织。
KISS (Keep It Simple and Stupid)原则。因为我们做PPT针对的是大众，不是小众。我们的目的是把自己的理解灌输给听众。深入浅出才代表你对知识的真正掌握。
10/20/30法则。演示文件不超过10页，演讲时间不超过20分钟，演示使用的字体不小于30点(30 point)。

个人觉得这些有指导意义，但经验感和技术感太强。也没有说清楚为什么要这样做。我更愿意接受“利用PPT作为工具控制观众的眼球和注意力”的说法。自己想的。

同样一篇文章里面的东西，是说PPT制作里面一些技巧性的东西，归纳一下分享出来，有一些是自己总结的哦：

能用图表就用图表。所有的人都会先挑图看。
所有人看到图表，第一眼就是找最低的和最高的，然后找跟自己相关的。把这三个东西标出来，人家会觉得很省事。
别写那么多字，没人看，除非你打算照着念。
要想办法让人知道你的PPT还有多少，或者告诉人家你要说的条理和结构。这非常重要，对自己好也对观众好。
不要用超过3种的动画效果，包括幻灯片切换。好的PPT不是靠效果堆砌出来的，朴素一点比花哨的更受欢迎。
多用口语，放在一些类似tips的地方，效果往往加倍。

好了，不说了。我们都还有很多很多事情要学，和顶级的高手学习，像Apple这样的，进步比较快。

学习PPT之二：做个好的结案报告

学习PPT之三：控制想像力

PPT 中滚动字幕无法完全显示解决办法

互联网产品的交互设计方法（UPA2008讲稿）

不一样的蚊子 — Tue, 25 Aug 2009 03:11:27 +0000

目前交互设计在互联网产品中的应用状况
“交互设计可以提高产品可用性。”在国内的互联网行业中，建立在这个认识基础上，交互设计得到了普遍的接受。“产品设计开始的时候应该先交互啊~~”“你这个项目没交互过啊~~”这类的说法越来越多当然是好的信息，但是，交互设计工作到底应该怎么做才能提高产品可用性？通常的互联网产品研发中，交互设计工作是处于没有方法的状况。

理解交互设计
交互设计是一个设计工作。
交互设计是一门技术。
交互设计在目前阶段的主要使命是提高产品可用性。
通过对界面和操作行为的设计提高产品可用性。

互联网产品的特点
1.变化快。
2.质量低。
3.功能操作与信息传达并重。
4.高速创新从而带来的无标准。

那么，互联网产品的交互设计应该怎么做？

互联网产品的交互设计方法分享
经过长期的摸索、体会腾讯互联网产品，我们总结出了几个较为有效的设计方法：
方法一. 自然语言法。设计交互细节的方法。
方法二. 结构图法。设计产品信息构架的方法。
方法三. 任务走查法。对现有产品进行优化的方法，全面普查产品，包括对交互细节和信息构架。

这三个方法的思路，是基于对交互设计工作内容如下的分类：
1. 信息构架
2. 交互细节

但，严格来说，这样的理解是不对的。交互设计工作原本就是“交互细节”工作。另外有信息构架师来解决信息构架的问题。然而，上面提到了互联网产品快的特点，更多的研发步骤显然更容易将研发周期拖的更长，把信息构架工作和交互细节合并起来，减少一个环节，更适应互联网产品的研发特点。
“为什么不把信息构架工作交给产品经理来做呢？”如果说交互设计工作的核心是表达（这个观念，最后还会提到），那么，信息构架和交互细节都是表达的重要手段。信息构架不清楚的产品，怎么谈得到表达的清楚、明确呢。所以，交互设计的工作包含了两部分：信息构架和交互细节。

那么，下面我们就开始具体介绍这三个方法：

方法一. 自然语言法

使用自然的语言来表达页面信息。
这是一个设计界面交互细节的方法。
界面表达的要求是：清晰，明确，简洁，得体。
想象着用面对面的交流来传达信息，再将面对面的传达变为书面表达，再用界面语言翻译书面表达。

除了思路，我们还需要必备的原则、常用的表达方式和具体操作步骤。

页面表达原则：
1. 更少的信息量更好。
2. 结构化更易于理解。
3. 信息的表达应该清楚、明确、直接。
4. 操作可识别。
5. 操作前，结果可预知。
6. 操作时，操作有反馈。
7. 操作后，操作可撤销。
8. 让用户知道身处何地。
9. 避免内容看上去象广告。
10. 不提供多余的功能。
11. 相同的功能，在不同的页面中应保持一致性。
12. 措辞统一。

常用的页面表达方式：
1. 从左到右，从上到下。
2. 大字更突出。
3. 图形更吸引人。
4. 动画会被误认为是广告。
5. 内容逻辑：并列关系；从属关系。

6.多项并列的信息用

7.不同的排序方式VS筛选内容

具体操作
第一步. 概括待表达的信息
第二步. 将概括好的信息排序
第三步. 使用界面语言翻译

实例：中信银行卡

第一步. 概括信息：
描述应该是概括的，尽可能简短。例如：
● 您选择了回邮方式办卡，概括解释这个办卡方式。
● 接下来您应该下载申请表
● 回邮办卡的全过程是这样的…
● 一系列注意事项。

第二步. 排序：
就是上面的顺序，没有变化。
有些时候排序会遇到困难，需要借助界面语言才能准确反应表达顺序。这正是界面设计的价值，它可以胜任一些单纯适用文字表达表达不好的情况。下面的黄钻续费案例中也许你就会遇到类似的问题。遇到这种问题时，记录下排序遇到的问题即可。在翻译过程中问题可能就解决掉了。

第三步. 翻译：

与之前界面对比：
● 开头几句信息顺序需要整理，使上下文关系更清晰。
● 对过程的描述可简化。
● “说明”应更结构化。

这里所说的“与对比界面之前”只是因为之前的需求文档中有相对具象的页面原型，而这并不意味着这里的工作是“优化页面原型”。需求的传达总会有一定的形式，也许是简单的页面原型，也许是一份需求文档。甚至可以更简单。有时相对具象化的信息记录或之前的页面反而会是干扰设计者以明确的思路来设计，尤其需要小心。

我们有了一种成型的方法，但这并不意味着我们设计出的页面就只有一个样子了。实际上不同的设计者使用这个方法会设计出不同的页面。下面这是另外一位设计师给出的思路，或许这是更好的方案：
1. 您选择了回邮方式办卡，概括解释这个办卡方式。
2. 第一步. 下载、填写申请表并回邮给中信
3. 第二步……………………..
4. 第四步……………………..
这样的信息概括和排序页面表现将是什么样子？你可以自己试着画画~~

练习：QQ空间黄钻催费页面

说明：
黄钻贵族是QQ空间中的VIP用户，黄钻贵族用户可以免费适用空间中的装扮，另外还可以享受到日志信纸、超大容量相册等诸多特权。
当用户的黄钻贵族身份即将到期的时候，从QQ聊天主面板上的“我的钱包”提示：“钱包”闪动，点击后用一个490*300px的小窗口告知用户续费的详情。
左侧图片在实际页面中是一个flash动画，若干张图片切换，显示黄钻用户可以装扮出的更好的空间效果。
右侧的续费方式希望在所有的续费方式中选择出两、三种比较常用的方式，直接显示出来（就是现在页面上的“家庭、网吧”两种方式），方便用户。同时提供“支付中心”链接（http://paycenter.qq.com/cgi-bin/showopenservice.cgi?service_type=home），让用户可以在全部续费方式中选择。

请使用上面介绍的自然语言法重新设计这个界面，让信息表达的更高效、清晰、明确。

参考方案
需要表达的信息：
● 某某某，您的黄钻要过期了。
● 黄钻贵族很棒滴~~
● 现在续费黄钻还有额外的优惠。
● 续费方式…

更好的信息：
● 某某某，您的黄钻要过期了。
● 您要是不再是黄钻了，就有XXXXX损失啦~~
● 现在续费黄钻还有额外的优惠。
● 续费方式…

总结“自然语言法”
自然语言法的基本思路是把界面表达转化为自然的人与人交流。人与人的交流是我们每天都会发生的，相对更容易，这个技能也更容易提高。
这里涉及到的两个例子都是比较偏向于信息表达的，对于操作较多的界面，这个方法仍旧适用。

方法二. 结构图法

这个方法的思路：抛开页面细节只考虑信息的组织形式。抛开页面细节，是的，就是上面讨论的那些具体的页面细节，只考虑信息的整体构架，而页面的细节留在确定了信息构架之后，用自然语言法来解决。

信息构架的原则：
1. 一个页面一个主要内容。
2. 个人信息&公共信息。
3. 网页基本内容有两种：列表和文档
4. 更少的信息更好
5. 一个用户自己生成内容的document页，有两个状态：浏览状态&编辑状态。
6. 信息树应该尽量窄而浅，并且尽量保持平衡。
7. 与现实生活经验相符
 ● 页面在网站中需要有一个固定的位置。
 ● 同等级的内容应表现成并列的样子。
……

信息构架的常见模型：
1. 列表+详情页+列表聚合页
2. Wizard模式。第一步->第二步->第三步…
3. 主页+若干个“临时”页面。例如：google帐户

具体操作
第一步. 明确描述全部内容。总结归纳产品所需要表达的所有信息。
第二步. 画树状图。
第三步. 用纸画各页草图。草图中需要包含的关键元素：页面标题、导航、重要的链接和按钮。
第四步. 模拟演示网页操作行为。

实例：黄钻等级

第一步. 总结归纳内容：
● 用户个人的的黄钻等级信息
● 等级介绍
● 黄钻功能特权介绍
● 黄钻贵族可免费领取的道具
● 黄钻活动

第二步. 树状图：
如果单纯的按照上面概括的信息罗列，则可以规划出一个黄钻贵族的网站，树状图如下：

然而，信息构架的设计往往要建立在对现有产品深刻的理解基础上。

Qzone的现状：一个社区，成千上万个个人空间。如何在现有的基础上设计新的黄钻等级？
我们的方案是这样的：

第三步. 草图：

这里需要强调：纸原型中应包括页面标题、模块的标题、导航、重要的链接和按钮，而不只是页面最顶端的导航。有了重要的链接和按钮才能清楚的演示出各个页面之间跳转的关系。

最后，第四步. 手握原型，演示页面间的跳转，确保整个流程的顺畅。

练习：QQ空间日志、心情、私密记事本

参考方案
总结归纳内容：
1. 日志
2. 心情
3. 私密记事本

树状图：
方案一：
● 主页
● “大日志”
■ 日志
■ 心情
■ 私密记事本
● 音乐盒
● 留言板
● 相册
……

方案二：
● 主页
● 日志
● 心情
● 私密记事本
● 音乐盒
● 留言板
● 相册
…

根据上面两种不同的树状图方案，接下来的页面草图也会是不同的，你可是试着画画…

方法三. 任务走查法

这是一种优化现有产品的方法。成本低，见效快。对产品整体上影响小。

以用户任务为线索，以可用性准则为依据。是的，这个说话很好记，类似“以事实为依据，以法律为准绳。”
“用户任务”是指用户实际使用这个产品时需要完成的任务。这个方法中，需要操作者依据主观判断制定用户任务，而不是通过用户研究。这虽然有可能造成更大的误差，但同时节约了时间成本。实际工作中，参与这个产品设计的同学坐在一起讨论一下，通常是可以比较准确的描述出用户任务的。
“可用性准则”在这个方法中是指：页面表达原则、信息构架原则、视觉表现规范，这三部分。页面表达原则和信息构架原则就是前面提到的，视觉表现规范是专门针对视觉设计而制定的。这个方法要处理的问题是现有产品，因此，不同于产品原型，更多了视觉表现这一环，在视觉设计过程中出现的问题也应该在走查中一起发现。

视觉表现规范
1. 滚动条看上去应该象滚动条
2. 表单的对齐方式
3. 重要的内容显示在第一屏
4. 导航应出现在第一屏上半部分
5. 尽量避免使用装饰性的图标
6. 避免内容看上去象广告
7. 光标样式
8. Tab需要有三种状态而不是两种
9. 红色表示警示，绿色表示ok，黄色表示提示
10. 灰色通常表示“暂不可用”（disabled）

具体操作
第一步. 分析并总结所有任务
第二步. 根据任务进行评估

评估中需要注意：
1. 不影响任务的问题不记录
2. 被记录的缺陷是有根据的（根据可用性准则），而不是根据自己的感觉。

实例：QQ秀快速换装

第一步. 任务列表：
● 换一套新形象
● 换表情
● 换心情
● 随便逛逛
● 换一个自己以前的形象

第二步. 评估。以“换心情”任务为例：

问题1 副标题表意不明确
描述：

这句说明仍旧没能说明“这里是什么功能”。如果能通过这句话说明：“在这里添加文字内容，显露您的心情”，说明的效果会更好。至于“让好友都知道！”这几个字几乎是没有用的，没有传达任何信息量。
依据：页面表达原则：信息的表达应该清楚、明确、直接。

问题2 “请输入心情秀”表意不明
描述：

“请输入心情秀文字”其实是第二层要表达的信息，第一层应该是：“这里还没有输入文字”。没有第一句，直接是第二句，需要用户花些时间来推断，推断出，这里显示“请输入心情秀文字”是因为自己没有写文字进去。
依据：页面表达原则：信息的表达应该清楚、明确、直接。

问题3 拖动心情秀时，光标使用不正确
描述：

光标在框中的是link的手型，实际上应该是十字箭头。现在会被误解为有点击操作。
依据：视觉表现规范：光标

问题4 “心情秀”概念不清
描述：

“心情秀预览”暗示出，“心情秀”是指外框+文字内容。
“换心情秀”功能只是换框，这意味着“心情秀”是指外框。
措辞上的含混使得同一个名词出现两种不同的定义，不易于理解。“既然心情秀是指外框+文字内容，那么当我点击“下一个”后，其中的文字内容是不是也会变化？”
依据：页面表达原则：措辞统一

问题5 换心情秀外框操作不便
描述：

“上一个”“下一个”的操作不方便。无预览图，无法确定当前选项在全部“框”的列表中所处位置。
依据：页面表达原则：操作结果不可预知

问题6 “预览”按钮视觉效果不佳
描述：

预览按钮视觉样式比较象disabled
依据：灰色通常表示“暂不可用”（disabled）

问题7 “脱掉”按钮不易找到
描述：

“脱掉”按钮在框的有下角，很多时候看不到，并且文字超小。
依据：页面表达原则：信息的表达应该清楚、明确、直接。

练习1：QQ秀照相馆

练习2：Qzone滔滔心情

总结任务走查法：
为什么要强调是“按任务”。因为，类似“保存形象按钮太难看啦~~”之类的问题是不应该提出来的。因为用户在实际使用的时候，这个问题是远远不如“误以为预览按钮不能点击”重要。“按任务”是在确保评估更接近真实。

“按任务”很多时候与“按栏目”差不多的，但是按任务的优点在于：
1. cover到了各个栏目之间跳转可能出现的问题。
2. 抓住了重点的问题，而放过了无关紧要的问题。比如：“申请红钻”按钮。

总结任务的过程实际是简化了的“人物角色-情景描述-任务分解”方法。

最后最后的总结

从狭义的交互设计的定义来看，交互设计的主要任务是：表达。通过清晰、准确、简洁的表达进而实现人机交互。
互联网产品的交互设计应该怎么做的问题，就演化成了：互联网产品应该如何去表达。
以上方法都紧紧围绕着“什么样的方法才能让产品的表达更有效”这个核心展开。

那么，
let’s talk
let’s talk
let’s talk
……

( 注：本文是UPA user friendy 2008中由我主持的一个同名工作坊的讲稿。
另附PPT文档：互联网产品的交互设计方法.ppt )

转自：臭鱼的交互设计文章：《互联网产品的交互设计方法（UPA2008讲稿）》

http://www.chouyu.com.cn/?p=115忽略

网页可用性设计指导思路总结

CRM平台项目的交互模式库总结（持续更新）

交互设计师-让世界因你而不同（1）总述

Designing Interactions 交互设计读书笔记整理以及下载

交互设计

Safari/Chorme/Webkit-based Browsers CSS hack redux

不一样的蚊子 — Thu, 23 Jul 2009 01:21:52 +0000

In March 2007, I wrote about a Safari CSS hack called the “Pound Safari Post Semicolon” hack (coined by Tony at Simian Design). As of Safari 3.0, this hack no longer works. However, there is a way to target Safari 3.0:

@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari 3.0 and Chrome rules here */
}

As always, the disclaimer: nobody condones the use of hacks, but we all (well, most of us) have to make use of them at least once in a while. The above code targets both Safari 3.0 and Google’s Chrome. Hopefully, it will be a future-proof hack, since the -webkit part of the selector will probably not be adopted by other browsers.

Example: The following code set the background color of the element red in all browsers and then resets it to blue in Safari 3.0 and Chrome.
body { background-color: red; } @media screen and (-webkit-min-device-pixel-ratio:0) { body { background-color: blue; } }
[demo]

Tested on Mac OS X version 10.5.1 with Safari version 3.0.4 (5523.10.6) and Mozilla Firefox version 2.0.0.11. Tested on Windows XP Professional Version 2002 SP 2 with Mozilla Firefox version 2.0.0.11, Opera 9.10, and Microsoft Internet Explorer 6. Hack from CSS, JavaScript and XHTML Explained.

Update 2008-11-26: Since this hack targets Webkit-based browsers, Chrome is also affected. At the original time of writing, it also affected Opera (9.10); it hasn’t since 9.50. The post copy has been updated to reflect these developments.

This article comes from :Safari CSS hack redux http://themechanism.com/blog/2008/01/08/safari-css-hack-redux/

CSS XHTML 相关资源整合

XHTML CSS Tools collection

flash 在浏览器中大小

Having “layout”

拥有布局 IE haslayout

《UI Designer》第二期正式发布

不一样的蚊子 — Mon, 20 Jul 2009 13:26:13 +0000

《UI Designer》第二期正式发布

《UI Designer》是由UIRSS.com创办，UIRSS.com、ChinaUI.com、UItimes.com三家UI设计媒体联合主办的UI行业权威电子杂志。这一期伴随视觉同盟（联合主办）和iconfans（联合发行）的加盟，声势更加浩大。

《UI Designer》第二期的正式发行，要感谢各位UI界同行的关怀，要感谢各位设计师、作者的支持，更要感谢所有热爱和喜欢这本杂志的读者朋友们的信赖。因此，从下一期起（预计2010年4月发行），《UI Designer》杂志将会定期发行（发行周期暂定为每半年一次）。
注：下载地址在本文最后

《UI Designer》第二期主要内容：

独家揭密：OPhone UI诞生背后的故事
走进企业，走近UI
- 中国移动UI Team
- 百度用户体验部
- 群硕软件用户体验部
设计秀场（GUI作品秀）
专家专栏
- 你准备好了吗，可用性测试，主持人系列
- 谁为用户买单，电子商务中的交互设计
- 手持移动设备交互与界面设计精要
- 手机MP3播放器界面设计（GUI教程）
- 一个写实风格的ico是如何诞生的（GUI教程）
UX界
- 中国VS国外（作者：刘超，中国移动研究院UI Team负责人）
- 戒盲目、戒浮躁（作者：张海龙，百度用户体验部高级经理）
- 设计的价值（作者：朱印，前微软设计主管）
- UI业的持续健康发展（作者：邹翔，SKYUI创始人）

《UI Designer》第二期截图：

支持机构：

UPA中国
newwebpick
Arting365
DRC设计资源协作网
动漫交易网
圆点视线
中国插画网
设计·中国
点击动漫网
视觉天下
CGfinal
中国动画网
花果山
水晶石
视觉联盟
创意酷
火神网
设计中国
漫域学园
蓝色理想
CGS创业联盟
DDC传媒
中国美术联盟
视觉天下
FLY视觉
第七频道
设计之家

下载地址：

下载地址1（推荐）：http://www.china-channel.com/ui/UI_Designer_2009.zip（由35互联赞助提供）
下载地址2：http://temp.chinaui.com/UI_Designer_v2.rar（由chinaui提供）
下载地址3：http://www.onvision.com.cn/ui/UI_Designer_2009.zip（由视觉同盟提供）
下载地址4：http://www.uirss.com/downloads/UI_Designer_v2.rar（由UIRSS.com提供）
下载地址5：http://www.iconfans.com/ifdownload/UI_Designer_2009.zip（由IconFans提供）

凤凰涅磐

Phoenix Nirvana

logo design 英语经贸系

梦飞工作室招新海报2008.09.11

发一帮朋友做的LOGO

Solution of “The mobile phone has not responded” for my nokia E51

不一样的蚊子 — Thu, 09 Jul 2009 05:01:30 +0000

When I try and Synchronise, I see it connect, disconnect and report a warning of “The mobile phone has not responded”. I am lost without synchronisation of my calendar and contacts. I would really love to get this working again.

After I upgraded my PC Suite, I got rid of this problem by removing the PC Suite profiles that had been created earlier and restarting PC Suite.

Steps:

Stop PC Suite and any other associated application
Remove or rename PC Suite folders. These are stored on two different locations.
a. C:\Documents and Settings\\Application Data\PC Suite
b. C:\Documents and Settings\All Users\Application Data\PC Suite
Note: If you are not able to remove any of these directories, then look for the process “ServiceLayer.exe” and kill it.
Start PC Suite and PC Sync. You will be asked to recreate the Sync Profile and it won’t complain about creating an outlook profile…

And this solves your problem.

Setup My Team’s Adobe Version Cue

Itunes was unble to load dataclass information from sync services reconnect or try again.

FPort 查看端口报错 ”You must have administrator privileges to run fport – exiting… “的解决方法

Windows7 Profile Problem : Local Profile “Lost” and has status “Backup” and a new which was created for the user at logon has status “Temp”

WordPress API Endpoint Problem

朝朝暮暮朝朝，期期盼盼期期-我的大学毕业

不一样的蚊子 — Thu, 02 Jul 2009 12:54:17 +0000

年年月月年年，朝朝暮暮朝朝，期期盼盼期期，离离合合离离。

毕业离别，自以为很坚强，还是忍不住哭了。回到宿舍，背上书包，转身离开时回眸一视，忍不住掉下眼泪。工作室、寝室的兄弟们，大家一起生活了四年，回想起生活中点点滴滴荡起一丝丝回忆一丝丝感动。离别时天阴阴的下起小雨，无边丝雨细如愁，滴滴啥在心上。

第一次哭红了眼睛，血丝漫漫；没有勇气立即写下博客，我知道没写完早已将键盘打湿。很少把感情写在博客里，是你们这些朝夕相处的兄弟们，让我永难忘记！在车上蒙上双眼没有勇气回头，害怕看见一双双熟悉的眼睛，难以割舍！在机场关掉手机没勇气看短信，害怕与每个人都有说不完的话，害怕踌躇短信里的字字句句！

生命犹如乘火车旅行，旅途中人们上上下下。在旅途中，有时有意外出现，有时会使人们感到意外的惊喜，有时则给人们带来深深的悲哀！工作室的兄弟们，我的同学们，我的朋友们，在生命列车里遇到你们是我的惊喜。感谢大家，感谢你们每一个人！

生命犹如乘火车旅行，旅途中人们上上下下。在旅途中。有时有意外出现，有时会使人们感到意外的惊喜，有时则给人们带来深深的悲哀！来到人间，我们登上生命列车，与一些结伴而行。原以为父母会永远陪伴着我们。遗憾的是，事实并非如此，他们在中途的某个车站下车，使我们成为失去其无法替代的爱抚与陪伴的孤儿。然而，还会有一些在我们的一生中占据非常特殊地位的人上来，我们的兄弟姐妹，亲朋好友和亲密爱人会登上列车。乘坐列车的人中，有些仅仅在车上作短暂的停留，有些在旅途中遭遇的只是悲伤，而有些人则永远准备向需要的人提供帮助！有的人在下车时会给我们留下永久的怀念，有的则消然离去，以至于我们都没觉察到何时离开座位！当发现非常亲密的人竟然坐在另外的车厢里，我们会感到极其惊讶。我们被迫与他们分开。当然，这并不能阻碍我们在旅途中艰难地穿过我们的车厢与我们会合…但遗憾的是，我们不能坐在他们的旁边，因为其它人已占据了座位。尽管旅途中充满挑战，梦想，幻觉，等待和别离，但我们决不回头。让我们尽可能使旅途变得美好，设法同所有旅客建立良好的关系，努力发现每个人的优点。我们经常会回忆起旅途的某个时刻，和我们结伴而行的人，可能会徘徊不定，我们要理解他人，因为我们需要他人的理解。生命之谜就是：我们在什么地方下车？坐在身旁的伴侣在什么地方下车？我们的朋友在什么地方下车？我们无从知晓……我时常这样想：到我该下车的时候，我会留恋吗？我想我还是会的。和我的朋友分离，我会痛苦。让我的孩子孤独地前行，我会悲伤。我执著地希望在我们大家都要到达的那个终点站，我们还会相聚……我的孩子们上车时没有什么行李，如果我能在他们的行囊中留下美好的回忆，我会感到幸福。我下车后，和我同行的旅客都还能记得我，想念我，我将感到快慰。

小余，小航子，金才，小昭，老阮，老沈，大军，晓晓，小宁童鞋，宋珍珍童鞋，小叶童鞋，宋虹童鞋，峰，川，肖琦，王飞，吴高，紫龙，吴迪，吴迪老婆，龚浩，董文弈，董文弈老婆，小师妹，王皓，谢威，张宁江……

威延，小鹏，龙哥，俞龟儿，有龟儿，肖男，兴睿，百盛，一哥，阿边，武同志……

小凤，缘分让我们在最后离开的时候相见，如同我们的初识。你手心熟悉的温度在细雨中暖暖沁过我心，感谢你，无论以前还是现在！

感谢为我送行的兄弟姐妹们，很感动！我会加油的，我会努力的！为自己的梦想而奋斗！

照片集-2009.12-2010.2

求婚 The Proposal

毛哥和他的宗羲观片会（转）

杭州九溪十八涧踏春

飞机一落地，与你零距离——北纬18°

Tour to E’Mei Mountain with Xiao Zhao（与小昭同学游峨嵋）

不一样的蚊子 — Fri, 26 Jun 2009 05:37:25 +0000

人生是旅程，都会开向同一个终点，请慢下脚步欣赏身边的风景。

在即将毕业的日子里，去了峨嵋：自然、轻松、清新。3天旅行，快乐许多。没有看到日出，没有看到云海，我们同样招摇，招摇在群山之中，体验旅程中的风景，体验登山中的点点滴滴。

谢谢阿门、浩哥、张蒂妮、朱静萱，在峨嵋，有你们的时间很快了、很开心。

佩服小昭，100多里山路没难倒你，盘旋的山路你没有晕车！笑容还依然那么可爱。Submit^^^

This album can be viewed in my picasa: Tour to E’Mei Mountain with Xiao Zhao, xiaozhao’s blog is done, so many of her photo show here.

XiaoZhao and me have our e’Mei mountain trip in June while we are going to be graduated. It’s a wonderful, and it really feels good. On the way to the Golden Submit, we meet lots of different people from countries all over the world, such as Holland, Belgium, Frame, Spanish and so on.

Even we didn’t see sun rise and sea of clouds because of the foggy weather, we like the duration of the climbing. See the mountains that we climbed while we were at LeiDongPing, we both fall in love of the beautiful scene.

E’Mei mountain – 放眼群山

Photos we took at Golden Submit – the top of the E’Mei Mountain

myself at Golden Submit 万万-金顶

xiaozhao at Golden Submit 小昭-金顶

The first day, we reaches at Qingyin Pavilion, many Love Locker is here – it means couples will stay together all their lives.

Qingyin Pavilion 清音阁

brook near Qingyin Pavilion 双桥清音-小溪

Then we go to yixiantian Gorge and back to hour hotel at about 6 o’clock.

Yixiantian Gorge 一线天

brook near Qingyin Pavilion 双桥清音-其中一条溪

the second day, we climbed about 40-60km long, 2-3km to the sea level, many precipitous stairs. The most difficult one is Zuantian slope. It’s about 300m high, 2.5km long, 1,500 steps…

precipitous stairs 长到爆的阶梯

ZuanTian slope 钻天坡

and there are many photos of xiaozhao because of her blog is done.

xiaozhao at ZuanTian slope小昭凝望『钻天坡』

Xiaozhao at Qingyin Pavilion 小昭-清音阁前

xiaozhao’s lovely smile 小昭-好可爱的眼神

xiahzhao 小昭

xiaozhao, and i love this picture best 小昭-这张照片我特喜欢

xiaozhao 小昭

The Monkey family, Xizhao included. 猴子一家

Monkey 猴区的猴子

finally, we take photo with the foreign friends. Photoflash is not on, so the second on is something blur.

xiaozhao with foreign friends 路上遇到的外国朋友合影

have breakfast with foreign friends 路上遇到的几位外国朋友合影

朝朝暮暮朝朝，期期盼盼期期-我的大学毕业

淘宝旺旺公仔涂鸦大赛作品

求婚 The Proposal

毛哥和他的宗羲观片会（转）

飞机一落地，与你零距离——北纬18°

Windows7 Profile Problem : Local Profile “Lost” and has status “Backup” and a new which was created for the user at logon has status “Temp”

不一样的蚊子 — Sun, 24 May 2009 14:53:44 +0000

Scenario:

User exist for long time in AD (let’s refer to this as DOMAIN\Username)
User has for long time logged on to the same PC and the profile exist on this (not roamed).
Profile is found as C:\Documents and Settings\[Username]\Profile shown in User Profiles (System Properties -> Advanced) as DOMAIN\Username
User log on to DOMAIN (i.e. not the PC directly – no account exist for the User on the PC).

What happend:

l User logged into the domain on the PC this morning and get’s a new profile created upon Default profile, i.e. user complain icons and application settings are lost.

What is seen now:

Profile is still found as C:\Documents and Settings\[Username]\ (i.e. no .000 etc.)
Looking at User Profiles (System Properties -> Advanced) I find two profiles named DOMAIN\Username – only apparent difference (except size of course is less of the newly created/last modified) is the Status of the "real" profile is "Backup" and the Status of the newly created is "Temp". I also note that "real" profile can have "type changed" be "deleted" and "copied to" whereas the newly created can only be "Change Type" (buttons "Delete" and "Copy To" are grey’ed out).

Question:

Is there a way I can get the "real" profile back?
Has this anything to do with changing the "Status" (as detailed in ‘8′ above)?

Solution:

Use UPHClean to deal with this problem, download it here: UPHClean and other profile ramblings

You can view the solution given by Microsoft: You experience log off problems on a Windows XP-based, Windows Server 2003-based, Windows 2000-based, or Windows NT 4.0-based computer

中文版：解决配置文件卸载问题

Setup My Team’s Adobe Version Cue

Solution of “The mobile phone has not responded” for my nokia E51

Itunes was unble to load dataclass information from sync services reconnect or try again.

FPort 查看端口报错 ”You must have administrator privileges to run fport – exiting… “的解决方法

WordPress API Endpoint Problem

Wordpress更换服务器遇到的问题

不一样的蚊子 — Wed, 06 May 2009 12:38:04 +0000

wordpress更换服务器，和朋友公用一个数据库，遇到一些问题：

wordpress表前缀替换
url重写配置
插件启用以及调试

1.wordpress 更改前缀

Blog更换服务器，用了一空间。无奈有多个Wordpress，只有更换表的前缀。

wordpress默认wp_为前缀，以下更改数据库前缀教程只需要在phpmyadmin运行十几个sql命令即可，傻瓜式的。

首先做的就是更改十个表的前缀,这个简单,命令如下：
ALTER TABLE wp_comments RENAME TO [prefix]_comments ALTER TABLE wp_options RENAME TO [prefix]_options ALTER TABLE wp_posts RENAME TO [prefix]_posts ALTER TABLE wp_postmeta RENAME TO [prefix]_postmeta ALTER TABLE wp_users RENAME TO [prefix]_users ALTER TABLE wp_usermeta RENAME TO [prefix]_usermeta ALTER TABLE wp_links RENAME TO [prefix]_links ALTER TABLE wp_terms RENAME TO [prefix]_terms ALTER TABLE wp_term_taxonomy RENAME TO [prefix]_term_taxonomy ALTER TABLE wp_term_relationships RENAME TO [prefix]_term_relationships
上面的命令就是将默认的前缀wp更改为[prefix],如果你想更改前缀了,只需要替换[prefix]，然后需要在wp-config.php中找到

$table_prefix = ‘wp_’;

将它替换为

$table_prefix = ‘[prefix]_’;

这样后台会登陆不上去，更改options表中项wp_user_roles，以及usermeta以下三项:

wp_autosave_draft_ids
wp_capabilities
wp_user_level

这四项中autosave_draft_ids是日志自动保存,user_roles和user_level是权限方面的,那个capabilities搞不懂是什么,但直觉告诉我也需要修改,所以继续在sql下运行以下命令:
update [prefix]_options set option_name = replace(option_name,'wp_user_roles','[prefix]_user_roles') update [prefix]_usermeta set meta_key = replace(meta_key,'wp_capabilities','[prefix]_capabilities') update [prefix]_usermeta set meta_key = replace(meta_key,'wp_user_level','[prefix]_user_level') update [prefix]_usermeta set meta_key = replace(meta_key,'wp_autosave_draft_ids','dianso_autosave_draft_ids')
这样,我们的目的也达到了,我可以保证,使用此方法可以100%保证对数据库没什么伤害,尽量不要使用编辑器等工具直接替换wp_,因为有些数据库中插件名,绝对地址,文章中都可能存在wp_这个关键词.

It works!插件也正常：）

2.url重写配置

wordpress/feed返回404
wordpress/feed/rss返回404
404 Error After Moving Wordpress to another server
Wordpress Feed 404 Error After Movind Wordpress to another server

Apache:打开Apache的URLRewrite模块，如果用的是空间，在空间的设置里将重写打开。

IIS:给IIS装上ISAPI Rewrite，不了解？没问题，看看ISAPI Rewrite 介绍及相关应用就明白了。我的http.ini文件写法：

Apche:turn you apche URL_Rewrite Mod on, otherwise you are using space, turn it on in your control panel or you can tell your hosting server client.

IIS: install ISAPI_Rewrite in your IIS. and my http.ini file is below:

RewriteRule /tag/(.*) /index\.php\?tag=$1 RewriteRule /(contact|about|contact|photo|favor|archives|tags|sitemap)/ /index\.php\?pagename=$1 RewriteRule /category/(.*)/(feed|rdf|rss|rss2|atom)/?$ /wp-feed\.php\?category_name=$1&feed=$2 RewriteRule /category/?(.*)/ /index\.php\?category_name=$1 RewriteRule /author/(.*)/(feed|rdf|rss|rss2|atom)/?$ /wp-feed\.php\?author_name=$1&feed=$2 RewriteRule /author/?(.*) /index\.php\?author_name=$1 RewriteRule /feed/?$ /wp-feed\.php/\?feed=rss2 RewriteRule /comments/feed/?$ /wp-feed\.php/\?feed=comments-rss2 RewriteRule /page/(.*)/ /index\.php\?paged=$1 RewriteRule /([0-9]{4})/([0-9]{1,2})/([0-9]{1,2})/([^/]+)/?([0-9]+)?/?$ /index\.php?year=$1&monthnum=$2&day=$3&name=$4&page=$5 RewriteRule /([0-9]{4})/([0-9]{1,2})/([^/]+)/?$ /index\.php\?name=$3 RewriteRule /([0-9]{4})/([0-9]{1,2})/([0-9]{1,2})/?$ /index\.php\?year=$1&monthnum=$2&day=$3&page=$4 RewriteRule /([0-9]{4})/([0-9]{1,2})/?$ /index\.php\?year=$1&monthnum=$2&page=$3 RewriteRule /([0-9]{4})/([0-9]{1,2})/([0-9]{1,2})/([^/]+)/(feed|rdf|rss|rss2|atom)/?$ /index\.php\?year=$1&monthnum=$2&day=$3&name=$4&feed=$5 RewriteRule /([0-9]{4})/([0-9]{1,2})/([0-9]{1,2})/([^/]+)/trackback/?$ /wp-trackback\.php\?year=$1&monthnum=$2&day=$3&name=$4&tb=1

3.插件部分：

遇到问题的插件有download monitor，数据全部被清零，方法论的思想研究发现：

windows 服务器换到linux服务器，linux对大小写敏感，在Download Monitor插件里面查找：

DLM_DOWNLOADS
DLM_CATS
DLM_FORMATS
DLM_STATS
DLM_LOG
DLM_META

替换为：

dlm_downloads
dlm_cats
dlm_formats
dlm_stats
dlm_log
dlm_meta

替换过程中注意大小写。

或者将数据库中[*]_dlm_[*]全部修改为大写的。

Setup My Team’s Adobe Version Cue

ISAPI Rewrite 介绍及相关应用

Solution of “The mobile phone has not responded” for my nokia E51

iTunes无法从同步服务中载入数据类信息请重新连接或稍后再试一次

WordPress API Endpoint Problem

ISAPI Rewrite 介绍及相关应用

不一样的蚊子 — Wed, 06 May 2009 11:48:39 +0000

什么是URL重写（URL Rewrite）？

URL 重写就是把传入 Web 请重定向到其他 URL 的过程。

比如浏览器发来请求http://adamghost.com/blog/about/，服务器自动将这个请求中定向为http://adamghost.com/blog/index.php?pagename=about 关于URL重写的相关内容我们将在以后的文章中详细介绍。

我们知道在Apache中有mod_rewrite来实现URL的重写功能（URL Rewrite），然而IIS并没有自带这个功能，因此我们就需要使用第三方组件来实现。其实目前有好几种IIS下的Rewirte组件，都是通过 ISAPI筛选器来加载然后实现URL重写的。

用得比较广泛的一个是ISAPI Rewrite，基本上国内支持Rewirte功能的Windows网站空间都采用了该组件。ISAPI Rewrite组件有免费版以及商业版，免费版只支持全局httpd.ini配置（不能对每个站点进行单独设置，除非通过加载不同的dll来实现，比较麻烦。）而商业版支持用户自定义httpd.ini文件，只要放在站点根目录下就能生效。这个大大方便了用户自己修改URL重写规则。

ISAPI Rewrite是一个基于正则表达式的强大的URL处理引擎，他使用起来基本上就像Apache的mod_rewrite，但是他是专门为微软的Internet Information Server (IIS)设计的。

ISAPI Rewrite是一个使用纯C/C++编写的ISAPI筛选器，所以速度是相当快的！ISAPI Rewrite使你可以自由的规划网站的URL。

ISAPI全称为Internet Server Application Program Interface。

ISAPI Rewrite 2 产品地址

ISAPI Rewrite 3 产品地址

3.0版本主要特性是支持采用Apache的 .htaccess文件来在IIS中使用 mod_rewrite。这个特性使得IIS和Apache在日常应用的Rewrite上的区别基本消除了。

国内大部分空间商都没有关注到商业版这个非常方便的功能，只为用户设置全局重写规则，这样会影响服务器性能，以及当某些规则比较复杂时，会造成冲突，给用户带来不便。

安装篇：

ISAPI Rewrite在安装上相当方便，如果你下载的是安装包，只需要按照提示进行安装即可。而如果你下载的是压缩包，那么只要将文件夹解压缩的任意目录，然后在IIS站点的ISAPI筛选器中添加ISAPI Rewrite的dll即可。

在站点属性中，选择ISAPI筛选器，然后添加ISAPI Rewrite组件即可。

这里要注意的是：必须给予ISAPI Rewrite所在目录IIS_WGP组的读写权限，否则你的网站就会直接Service Unavailable，应用程序池遇到错误而停止。在事件查看器中可以找到相应的错误。

使用篇：

安装成功以后，接下来就要看看怎么用了。我们这里只说一下最简单的应用，因为大多数人只用URL重写功能来实现SEF（搜索引擎友好），以及简单的防盗链的功能（可以参考利用 ISAPI Rewrite 实现防盗链）。如果您有兴趣了解一些深入的功能的话，可以去看一下官方的使用手册。

我们需要对ISAPI Rewrite编写URL重写的规则，将这些规则写在httpd.ini中，用户访问时，就能实现URL重写。

编写Rewrite规则需要我们对正则表达式有一定的了解，推荐大家看一下《30分钟正则表达式入门教程》。当你了解了正则表达式以后，如何编写规则请参考官方使用手册以及一些例子，相信很快就会上手。

ISAPI Rewrite 2使用手册

ISAPI Rewrite 3使用手册

当然，网上有很多别人写好的Rewrite Rules（重写规则），我们可以方便的使用，因为大部分程序所使用的URL重写规则是一样的，比如Discuz!, Wordpress等。

我的wordpress规则在Wordpress更换服务器遇到的问题有写。

当我们已经写好了httpd.ini以后，将httpd.ini放在相应的位置后就能使用了（免费版放在ISAPI Rewrite安装目录中，商业版只需要放在需要重写的站点根目录下就可以了）。

本文转自华鳞志的ISAPI Rewrite 介绍及相关应用一文，为避免做广告的嫌疑，已经文章中一些不必要的外部链接去掉：）

Wordpress更换服务器遇到的问题

iTunes无法从同步服务中载入数据类信息请重新连接或稍后再试一次

XP IE8, Visita IE, CHM文件显示不正常

mysql 10055 错误解决方案

UTF-8 BOM 引发的显示问题

万万在杭州的新家

不一样的蚊子 — Wed, 29 Apr 2009 17:25:11 +0000

花了一周时间，和老包、娟姐、李总每天的空闲时间都在选房子，最终定稿选中了这套，咱们都特喜欢，每天就想着下班回家，我和李总做做饭，品味一下生活，很安逸哦。

地图位置：杭州市文三路竞舟路路口（坐车到文三路丰塘路口）

From home in hangzhou in Adamghost’s Picasa Photo Album

刚好空一间屋子，就租出去咯，这是招贴海报（由万万和老包设计）：

From home in hangzhou in Adamghost’s Picasa Photo Album

部分照片

特喜欢周围的绿化：

From home in hangzhou in Adamghost’s Picasa Photo Album

非诚勿扰 and Alibaba Group

From home in hangzhou in Adamghost’s Picasa Photo Album

香蕉摇椅

From home in hangzhou in Adamghost’s Picasa Photo Album

饭厅里的橱柜：刚搬进来，只有娟姐的两瓶红酒和娃娃

From home in hangzhou in Adamghost’s Picasa Photo Album

厨房

From home in hangzhou in Adamghost’s Picasa Photo Album

娟姐房间一角

From home in hangzhou in Adamghost’s Picasa Photo Album

照片集-2009.12-2010.2

照片.淘宝年会2010

杭州九溪十八涧踏春

Photo Collection

随性整理一下照片

貳零零玖北京之行剪影『叁，北京大學』，Photo collection of Beijing University in Beijing 2009

不一样的蚊子 — Mon, 13 Apr 2009 02:03:12 +0000

貳零零玖北京之行剪影『壹，故宮』，Photo collection of Palace Museum in Beijing 2009

貳零零玖北京之行剪影『貳，天安門』，Photo collection of Tian An Men in Beijing 2009

淘宝2010半年会剪影

Photo Collection

万万在杭州的新家

貳零零玖北京之行剪影『貳，天安門』，Photo collection of Tian An Men in Beijing 2009

不一样的蚊子 — Mon, 13 Apr 2009 01:59:42 +0000

貳零零玖北京之行剪影『壹，故宮』，Photo collection of Palace Museum in Beijing 2009

貳零零玖北京之行剪影『叁，北京大學』，Photo collection of Beijing University in Beijing 2009

淘宝2010半年会剪影

Photo Collection

万万在杭州的新家

貳零零玖北京之行剪影『壹，故宮』，Photo collection of Palace Museum in Beijing 2009

不一样的蚊子 — Thu, 09 Apr 2009 12:23:36 +0000

貳零零玖北京之行剪影『貳，天安門』，Photo collection of Tian An Men in Beijing 2009

貳零零玖北京之行剪影『叁，北京大學』，Photo collection of Beijing University in Beijing 2009

淘宝2010半年会剪影

Photo Collection

万万在杭州的新家

Having “layout”

不一样的蚊子 — Sun, 29 Mar 2009 17:10:21 +0000

Having “layout”

We all know that browsers can be buggy, and IE on Windows seems buggier than most. One of the reasons IE/Win behaves differently from other browsers is because the rendering engine uses an internal concept called “layout.” Because layout is a concept particular to the internal working of the rendering engine, it is not something you would normally need to know about. However, layout problems are the root of many IE/Win rendering bugs, so it is useful to understand the concept and how it affects your CSS.

What is “layout”?

Internet Explorer on Windows uses the layout concept to control the size and positioning of elements. Elements that are said to “have layout” are responsible for sizing and positioning themselves and their children. If an element does not “have layout,” its size and position are controlled by the nearest ancestor with layout. The layout concept is a hack used by IE’s rendering engine to reduce its processing overhead. Ideally all elements would be in control of their own size and positioning. However, this causes huge performance problems in IE. As such, the IE/Win development team decided that by applying layout only to those elements that actually needed it, they could reduce the performance overhead substantially.

Elements that have layout by default include

body
html in standards mode
table
tr, td
img
hr
input, select, textarea, button
iframe, embed, object, applet
marquee

The concept of layout is specific to IE on Windows, and is not a CSS property. Layout cannot be explicitly set in the CSS, although setting certain CSS properties will give an element layout. It is possible to see if an element has layout by using the JavaScript function, hasLayout. This will return true if the element has layout and false if it doesn’t. hasLayout is a read-only property and so cannot be set using JavaScript.

Setting the following CSS properties will automatically give that element layout:

position: absolute
float: left or right
display: inline-block
width: any value
height: any value
zoom: any value (Microsoft property—doesn’t validate)
writing-mode: tb-rl (Microsoft property—doesn’t validate)

What effect does layout have?

Layout is the cause of many IE/Win rendering bugs. For instance, if you have a paragraph of text next to a floated element, the text is supposed to flow around the element. However, in IE 6 and below on Windows, if the paragraph has layout—by setting the height, for example—it is constrained to a rectangular shape, stopping the text from flowing around the float (see Figure below).

Figure Above: Text is supposed to flow around adjacent floated elements. However, on IE/Win, if the text element has layout, this doesn’t happen.

Another problem revolves around how elements with layout size themselves. If the content of an element becomes larger than the element itself, the content is supposed to flow out of the element. However, in IE 6 and below on Windows, elements with layout incorrectly grow to fit the size of their contents (see Figure below).

Figure Above: Elements with layout incorrectly grow to fit their contents.

This means that width in IE/Win actually acts more like a min-width. This behavior is also the cause of many broken floated layouts in IE/Win. When the content of a floated box incorrectly forces the width of the box to grow, the box becomes too big for the available space and drops below the other floated elements.

Common bugs and their fixes

One of the greatest skills any CSS developer can have is the ability to spot common browsers bugs. By knowing the various elements that conspire to cause these bugs, you can spot and fix them before they ever become a problem.

Double-margin float bug

One of the most common and easy-to-spot bugs is the double-margin float bug in IE 6 and below. As the name suggests, this Windows bug doubles the margins on any floated elements (see Figure below).

Figure Above: Demonstration of IE/Win’s double-margin float bug

This bug is easily fixed by setting the display property of the element to inline. As the element is floated, setting the display property to inline won’t actually affect the display characteristics. However, it does seem to stop IE 6 and below on Windows from doubling all of the margins. This is such a simple bug to spot and fix: every time you float an element with horizontal margins, you should automatically set the display property to inline.

Three-pixel text jog bug

Another very common IE 5-6/Win bug is the 3-pixel text jog bug. This bug manifests itself when you have text adjacent to a floated element. For instance, say you had an element floated left and you don’t want the text in the adjacent paragraph to wrap around the float.

You would do this by applying a left margin to the paragraph, the same width as the image:

.myFloat { float: left; width: 200px; } p { margin-left: 200px; }

When you do this, a mysterious 3-pixel gap appears between the text and the floated element. As soon as the floated element stops, the 3-pixel gap disappears (see Figure Below).

Figure Above: Demonstration of the IE 5-6/Win’s 3-pixel text jog bug

Fixing this bug requires a two-pronged attack. First, the element containing the text is given an arbitrary height. This forces the element to have layout, which seemingly removes the text jog. Because IE 6 and below on Windows treats height like min-height, setting a tiny height has no effect on the actual dimensions of the element in that browser. However, it will affect other browsers, so the Holly hack is used to hide this rule from everything other than IE 6 and below on Windows:

/* Hide from IE5-Mac. Only IE-Win sees this. */ * html p { height: 1%; } /* End hide from IE5/Mac */

Unfotunately, doing this causes another problem. As you learned earlier, elements with layout are constrained to a rectangular shape and appear next to floated elements rather than underneath them. The addition of 200 pixels of padding actually creates a 200-pixel gap between the floated element and the paragraph in IE 5-6/Win. To avoid this gap, you need to reset the margin on IE 5-6/Win back to zero:

/* Hide from IE5-Mac. Only IE-Win sees this. */ * html p { height: 1%; margin-left: 0; } /* End hide from IE5/Mac */

The text jog is fixed, but another 3-pixel gap has now appeared, this time on the floated image. To remove this gap, you need to set a negative 3-pixel right margin on the float:

/* Hide from IE5-Mac. Only IE-Win sees this. */ * html p { height: 1%; margin-left: 0; } * html .myFloat { margin-right: -3px; } /* End hide from IE5/Mac */

This will fix the problem if the floated element is anything other than an image. However, if the floated element is an image, there is one last problem to solve. IE 5.x/Win adds a 3-pixel gap to both the left and the right of the image, whereas IE 6 leaves the image’s margins untouched. As such, another hack is required to remove the 3-pixel gap from IE 5.x/Win only:

/* Hide from IE5-Mac. Only IE-Win sees this. */ * html p { height: 1%; margin-left: 0; } * html img.myFloat { margin: 0 -3px; margin: 0; } /* End hide from IE5/Mac */

This solves the problem, but in a really nasty and complicated way. As such, if possible you would be better off splitting these rules up into separate, browser-specific stylesheets. If you did this, you could have one stylesheet for IE 5.x on Windows:

p { height: 1%; margin-left: 0; } img.myFloat { margin: 0 -3px; }

And another for IE 6:

p { height: 1%; margin-left: 0; } img.myFloat { margin: 0; }

IE 6 peek-a-boo bug

Another strange and infuriating bug is IE 6’s peek-a-boo bug, so called because under certain conditions text will seem to disappear, only to reappear when the page is reloaded. This happens when there is a floated element followed by some nonfloated elements and then a clearing element, all contained within a parent element that has a background color or image set. If the clearing element touches the floated element, the nonfloated elements in-between seem to disappear behind the parent element’s background color or image, only to reappear when the page is refreshed (see Figure Below).

Figure Above: Demonstration of IE 6’s peek-a-boo bug

Luckily, there are a number of ways you can combat this bug. The easiest way is probably to remove the background color or image on the parent element. However, this is often not practical. Another way is to stop the clearing element from touching the floated element. The bug doesn’t seem to manifest itself if the container element has specific dimensions applied. The bug also doesn’t manifest itself if the container is given a line height. Lastly, setting the position property of the float and the container to relative also seems to alleviate the problem.

Absolute positioning in a relative container

The last major browser bug I am going to cover involves absolutely positioned elements within a relatively positioned container. You learned in earlier chapters how useful nesting an absolutely positioned element in a relative container can be. However, IE 6 and below has a number of bugs when you use this technique.

These bugs arise from the fact that relatively positioned elements don’t gain IE/Win’s internal hasLayout property. As such, they don’t create a new positioning context and all of the positioned elements get positioned relative to the viewport instead (see Figure Below).

To get IE 6 and below on Windows to behave correctly, you need to force the relatively positioned container to have layout. One way to do this is to explicitly set a width and height on the container. However, you will often want to use this technique when you don’t know the width and height of the container, or when you want one or both of these properties to be flexible.

Instead, you can use the Holly hack to supply an arbitrary height to the container. This will give the container layout, but because elements in IE 6 and below incorrectly expand to fit their contents, the actual height won’t be affected.

/* Hides from IE-Mac */ * html .container { height: 1%; } /* End hide from IE-Mac */

Stop picking on Internet Explorer

Internet Explorer isn’t the only buggy browser around, so you may wonder why I have been focusing my attentions on IE bugs. Don’t worry, it’s not another case of Microsoft bashing; there are good reasons for this focus.

First, IE has by far the biggest browser market share. With so many copies in circulation, IE bugs tend to get found and documented pretty quickly. When a major CSS bug gets discovered in IE, scores of developers will be on the case trying to find a fix or a workaround. Because of this popularity, there are more well-documented bugs and fixes for IE than any other browser.

The other major issue is the pace of development. Browsers such as Firefox, Safari, and Opera are constantly being updated, with new builds appearing with remarkable frequency. Almost as soon as a bug is discovered, it is fixed and a new version of the browser released. Because of this, any Firefox or Safari bug I talk about now will probably have been fixed by the next revision.

This pace of development is excellent, but it does have its own problems. Rather than having two or three versions of a browser to deal with, you may have 20 or 30. You can never be sure if your users have the latest version, and this makes testing extremely difficult. IE, on the other hand, didn’t see a major revision for about 5 years. As such, there has been much more time for bugs to surface and much more impetus to find a fix.

Luckily, IE 7 promises to be a much more compliant browser. Many of the better known IE bugs have been addressed, along with increased support for advanced CSS 2.1 selectors such as the child and attribute selectors. As with all browsers, new bugs will surface, and IE 7 will be far from perfect. However, the faster people can be convinced to upgrade to modern browsers such as IE 7 and Firefox, the quicker older browsers such as IE 5.0 can be retired.

In the interim, it is worth exploring Dean Edwards’ excellent IE 7 patch. This series of JavaScript files aims to bring IE 5-6/Win up to speed with IE 7. This includes improved selector implementation and numerous bug fixes. For more information about this patch, visit http://dean.edwards.name/IE7/.

Summary

In this chapter, you have learned some important techniques for tracking down and squashing CSS bugs. You have learned about IE on Windows internal hasLayout property and how this is the root of many IE/Win browser bugs. Finally, you have learned about some of the most common browser bugs and how to fix them.

Next you will see how all of this information can be put together, through two stunning case studies created by two of the best CSS designers and developers of our time.

IE Haslayout 详解

CSS XHTML 相关资源整合

XHTML CSS Tools collection

Safari/Chorme/Webkit-based Browsers CSS hack redux

拥有布局 IE haslayout

拥有布局 IE haslayout

不一样的蚊子 — Sun, 29 Mar 2009 17:09:21 +0000

找们那知道浏览器有bug，而且Windows上的lE的bug 似乎比太多数浏览器都多。IE/Win的衣现与其他浏览器不同的原因之一是，显示引擎使用一个称为布局(layout)的内部概念。因为布均是一个专门针对显示引擎内部工作方式的概念，所以一般悄况下不需要了解它。但是，布局问题是许多IE/Win显示bug的根源，所以理解这个概念以及它如何影响CSS是有捂助的。

什么是布局

Windows 上的IE 使用布局概念来控制元素的尺寸和定位。那些称为拥有布局(have layout)的元素负责本身及其子元素的尺寸和定位。如果一个元旦在没有拥有布局，那么它的尺寸和位置由最近的拥有布局的祖先元素控制。

IE 显示引擎利用布局概念减少它的处理开销。在理想悄况下，所有元素都控制自己的尺寸和定位。但是，这会在IE中导致很大的性能问题。因此，IE/Win 开发团队决定只将布局应用于实际需要它的那些元素，这样就可以充分地减少性能开销。

在默认情况下拥有布局的元素包括:

body
标准模式中的 html
table
tr, td
img
hr
input, select, textarea, button
iframe, embed, object, applet
marquee

布局概念是Windows 上的I E 特有的，而且它不是CS S 属性.尽管某些CSS 属性会使元ffi拥有布局，但是在CSS 巾无法显式地设宣布局.可以使用JavaScript 函数hasLayout 查看一个元亲是否拥有布局.如果元素拥有布局，这个函数就返回true ; 否则返回falseo hasLayout 是一个只读属性，所以无法使用JavaScript 选行设置.

设宜以下CSS 属性会自动地使元亲拥有布局·

position: absolute
float: left or right
display: inline-block
width: any value
height: any value
zoom: any value (Microsoft property—doesn’t validate)
writing-mode: tb-rl (Microsoft property—doesn’t validate)

布局有什么效果?

布局是许多IElWin 显示bug 的根源。例如，如果一个文本段落靠谷一个浮动元索，那么期望文本围绕这个元索。但是，在Windows 上的1E 6 和更低版本巾，如果段落拥有布局(例如，由于设置了高度).那么它就被限制为矩形，因此阻止文本国绕浮动元素〈见图9-5).

Figure Above: 期望文本围绕相邻的浮动元素，但是，在IE/Win上，如果文本元素拥有布局，就不会这样显示。

这会导致浮动布间的各种问题更糟的是，许多人使用IE 作为主浏览器，他们会俯误地认为这才是正确的表现，在其他浏览器以不同方式处理泞-动元素时，他们反而会这必不解.

另-个问题涉及拥有布局的元素如何确定自己的尺，如果元亲的内容变得比元素本身大，那么期望元素流出到元素外.但是，在Windows 上的IE 6 和更低版本中，拥有布局的元素会销误地扩展以便适应内容的尺寸(见圈9-6).

Figure Above: 拥有布局的错误的扩展以便适应内容

这意味IE/Win中的width 实际上更像min-width. 这种行为也是在IE/Win中许多浮动布局被破坏的原因。当浮动框的内容错误地迫使框的宽度增加时，框对于可用空间来说太大了，因此下降到其他浮动元素在下面.

其他问题包括:

拥有布局的元素不进行收缩。
布局元亲对浮动进行自动消理。
相对定位的元素不获得布局。
在拥有布局的元素之间空白地不叠加。
在不拥有布局的块级链接上，单击区域只覆盖文本。

在下一节中，我们将讨论一些最常见的浏览器bug. 你会注意到对于Windows 上的IE的许多修复方法都涉及通过设置属性迫使元素拥有布局。实际上，如果遇到一个IE/Wi n bug，首先应该做的事情之一就是尝试通过应用规则迫使元崇拥有布局。看看这是否可以修复问题。

如果希忘进一步了解IE的内部hasLayout属性，我建议阅读http://tinyurl.com/acg78上的”On Having Layout”。【我的翻译文章在这里IE Haslayout 详解】

常见bug及其修复方法

CSS 开发人员最重要的技能之一是发现常见浏览器bug的能力。通过了解导致这些bug 的各种元索，可以在它们造成问题之前发现并且修复它们。

双空白边浮动bug

最常见且最容易发现的bug 之一是IE6和更低版本中的双空白边浮动bug。顾名思义，这个Windows bug使任何浮动元素上的空白边加倍(见图9-7)。

Figure Above: IE/Win 的双空白浮动bug示意阁

这个bug 很容易修复，将元素的display 属性设置为inline 就行了.因为元素是浮动的，将display 属性设置为inline 实际上不会影响显示方式。但是，这似乎会阻止Windows 上的IE6和更低版本将所有空白地加倍。这是一个非常容易发现和修复的bug : 每当对具有水平空白边的元素进行浮动时，都应该很自然地将display 属性设置为inline。

3像素文本偏移bug

另一个非常常见的I E 5-61Win bug 是3像素文本偏移bug。当文本与二个浮动元示相邻时，这个bug 就会表现出来。例如，假设将-个元素向左浮动，并且不希望相邻段落中的文本围绕浮动元素。你可能会在段落上应用一个左空白边，其宽度等于浮动元素的宽度:

.myFloat { float: left; width: 200px; } p { margin-left: 200px; }

如果这么做，在文本和浮动元素之间就会出现一个莫名其妙的3像素间隙。(见图9-8) 。

Figure Above: IE 5-6/Win 的3像素文本偏移bug示意图

修复这个bug 需要双管齐下。首先，给包含文本的元素设置任意的高度。这会迫使元素拥有布局，这在表面上会消除文本偏移。因为Windows 上的IE6和更低版本将height作为min-height那样对待，所以设置一个小的高度并不会影响元素在这些浏览器巾的实际尺寸。但是，这会影响其他浏览器，所以要使用Holly招数对除了Windows 上的IE6 和更低版本之外的所有其他浏览器隐藏这个规则，

/* Hide from IE5-Mac. Only IE-Win sees this. \*/ * html p { height: 1%; } /* End hide from IE5/Mac */

不幸的是，这么做会导致另一个问题。正如在前面学到的，拥有布局的元素被限制为矩形的，并且出现在浮动元索的旁边而不是它们的下面。添加200像素的空白边实际上会在IE 5-6/Win 中在浮动元素和段落之间产生200像素的间隙。为了边免这个问隙，需要将IE 5-6/Win 上的空白边重新设置为零:

/* Hide from IE5-Mac. Only IE-Win sees this. \*/ * html p { height: 1%; margin-left: 0; } /* End hide from IE5/Mac */

文本偏移被修复了，但是现在另一个3像亲间隙出现了，这一次是在浮动元素上。为了去掉这个问隙，需要在浮动元素上设置一个负值的3像素右空白边：

/* Hide from IE5-Mac. Only IE-Win sees this. \*/ * html p { height: 1%; margin-left: 0; } * html .myFloat { margin-right: -3px; } /* End hide from IE5/Mac */

如果浮动元素是除了图像之外的任何其他东西，那么这个问题己经修复了。但是，如果浮动元旦在是图像，那么还有放后一个问题需要解决。 IE 5.x/Win在图像的左右都添加3像亲的间隙。而IE6不改变图像的空白边。因此，需要用另一个招术在IE 5.x/Win 上去掉3 像素的问隙:

/* Hide from IE5-Mac. Only IE-Win sees this. \*/ * html p { height: 1%; margin-left: 0; } * html img.myFloat { margin: 0 -3px; ma\rgin: 0; } /* End hide from IE5/Mac */

这会解决问题，但是采用的方式很难看而且太复杂。因此，如果可能的话，最好将这些规则分别放进单独的浏览器特定的样式表中。如果这样做，用于Windows 上的lE 5.x的样式表如下：

p { height: 1%; margin-left: 0; } img.myFloat { margin: 0 -3px; }

用于IE 6的样式表如下:

p { height: 1%; margin-left: 0; } img.myFloat { margin: 0; }

IE 6躲躲猫bug

另一个奇怪而且很烦人的 bug 是IE6 的躲躲猫(peek-a-boo) bug，之所以起这个名称是因为在某些条件下文本看起来消失了，只有在前新装载页面时才再度出现。出现这个bug 的条件是:一个浮动元素后面跟着一些非浮动元素，然后是一个清理元素，所有这些元素都包含在一个设置了背景颜色或阅像的父元束中。如果清理元素碰到了浮动元素，那么中间的作浮动元素看起来消失了，隐藏到了父元素的背景颜色或图像后面，只有在刷新页面时才重新出现(见图9-10)。

Figure Above:IE 6的躲躲猫bug示意图

相对容器中的绝对定位

我要讨论的段后一个主要浏览器bug涉及相对定位容器中的绝对定位元素。在前面的章节中你学到将绝对定位的元素嵌套在相对容器中是多么有用。但是，IE 6和更低版本在使用这种技术时有许多bug。

这些bug 的原因在于相对定位的元素没有获得IE/Win 的内部hasLayout 属性。因此，它们不创建新的定位上下文，所有绝对定位元素相对于窗口进行定位(见图9-11)。

Figure Above:IE5.x对相对容器中的绝对定位元素的定位方式不正确

为了使Windows 上的IE 6和更低版本的表现正确。需要迫使相对应位的容器拥有布局。一种方法是在容器上显式地设置width 和height。但是，常常希望在不知道容器的width 和height的况下，或者在需要这些属性保持灵活的情况下使用这种技术。

可以使用Holly 招数为容器提供一个的高度。这会让容器拥有布局。但是因为IE 6和更低版本中的元素会不正确地扩展以适应它们的内容，所以设置小的高度不会影响实际高度。

/* Hides from IE-Mac \*/ * html .container { height: 1%; } /* End hide from IE-Mac */

停止对IE 的批评

IE 并不足惟一一种有bug 的浏览器，所以你可能会奇怪我为什么只关注IE bug。不必担心，我找并不是专门和微软过不去，这么做是有理由的。

首先， IE 目前占有最大的浏览器市场份额。因为有许多人在使用IE，IE bug 往往很快被发现而且很好地记录下来。当在IE中发现一个重大的CSS bug时，许多开发人员会尝试寻找修复方法或解决方案。由于IE的流行程度，被记录并修复的IE bug比其他任何浏览器都要多.

另一个主要问题是开发的节奏。Firefox、Safari和Opera等浏器不断地进行更新，新版本以非常高的频率出现。 bug 几乎一经发现就被修复了，并且发布浏览器的新版本.因此，现在讨论的任何Firefox或Safari bug 可能已经被下一个修订版修复了。

如此高的开发节奏确实很棒，但是也有自己的问题。开发人员要应付的浏览器版本不是两三个，而是20或30个。你无法确定用户是否使用最新的版本，这使测试变得极其困难。另一方面，IE差不多5年没有发布主要修订版了。因此，bug 有更多的时间可以暴露出来，开发人员也有更强的寻找修复方法的动力。

幸运的是，IE 7承诺将成为更符合标准的浏览器。许多著名的IE bug 已经被解决，而且对高级CSS 2.1 选择器（比如子选择器和属性选择器）的支持也在增加。与所有浏览器一样，新的bug也会出现，IE 7远不是完美的。但是，人们越快地升级到IE 7和Firefox 等现代浏览器，IE 5.0等老式浏览器就会越快地退役。

在这个过渡时期，可以考虑使用Dean Edwards 的IE 7 补丁。这是一系列JavaScript 文件，它们使IE 5-6/Win 能够接近IE 7的水平.这包括改进的选择器实现和许多bug 修复。关与这个补丁的更多信息，请访问http://dean.edwards.name/IE7/。

IE Haslayout 详解

CSS XHTML 相关资源整合

XHTML CSS Tools collection

Safari/Chorme/Webkit-based Browsers CSS hack redux

Having “layout”

交互设计

不一样的蚊子 — Thu, 26 Mar 2009 02:16:43 +0000

本文转自语凝的UI-交互设计。

什么是交互设计？淘宝面试的时候提出的这个问题，没能答出来。从基本做起，一点点的学习，把交互设计的基本功夯实。

交互设计的定义

交互设计是指设计人和产品或服务互动的一种机制 , 以用户体验为基础进行的人机交互设计是要考虑用户的背景、使用经验以及在操作过程中的感受，从而设计符合最终用户的产品，使得最终用户在使用产品时愉悦、符合自己的逻辑、有效完成并且是高效使用产品。

交互设计可以划分为纵向和横向（动态的和静态的）：

纵向太深，用户会在一层一层挖掘后，感觉焦躁，同时也容易迷失。横向太宽，信息量多了，用户会觉得复杂，找不到自己想要的东西。

相同的宽度，不同的布局，会带来不同的交互结果

交互设计的目的

为了产品有效易用，为了让客户对产品产生依赖，为了让客户使用产品愉悦。当客户想要设计或者改进一个交互式系统，使用户与其交互的过程更加有效、易用， ETU 可以为其提供交互设计服务，比如：

某个交互系统，用户通过它来进行日常的工作，通过执行一系列的步骤来完成某项任务。交互设计可以系统变得简单易用，用户使用其工作的效率大大提高。
某购物系统，流量很大，但是在生成订单的过程中，用户却大量流失。交互设计帮助该系统找到用户流失，不能完成购买的原因，进行改进，让用户获得良好的购买体验。
某电子产品，技术先进，但其人机界面的设计可能由研发技术人员来完成，用户觉得产品的使用方法比较费解。交互设计可以帮助其存在的可用性问题，帮助改进，让用户很容易学会使用它。

交互设计的价值

通过改进设计，使得产品的使用者可以很好的学习、快速有效的完成任务、访问到所需的信息、购买到所需的产品，并且在使用的过程中获得独特的体验，情感上的满足。
交互设计的好坏会影响用户对产品的印象，同时也会影响用户对品牌的看法。好的交互设计会给市场带来增值、会提高用户对品牌的忠诚度、会促进销量，从而使公司业务带来良性循环。

交互设计展开的时间

新产品研发过程中，新的用户界面的产生可以引入交互设计。已有的产品，对产品的人机界面的交互部分需要改进，可以引入交互设计。

交互设计的方法

交互设计一般从标识需求开始，不管是新产品还是改进产品。在这之后，进行任务分析 / 功能分析 , 提出满足需求的概念设计，提出候选设计方案，接着制作原型的交互式版本，并进行评估，根据评估结果可能进行重新发掘需求、修改需求，也可能直接进入重设计。交互设计中使用的方法包括角色设定，情景设定，故事版，认知走查，用户可用性测试，眼动仪分析等等。

交互设计花费的时间

根据用户研究内容和项目大小作调整。

交互设计的文档

最终原型设计
UI 设计规格说明书

网页可用性设计指导思路总结

CRM平台项目的交互模式库总结（持续更新）

交互设计师-让世界因你而不同（1）总述

Designing Interactions 交互设计读书笔记整理以及下载

互联网产品的交互设计方法（UPA2008讲稿）

信心膨胀-分析自己的淘宝之行

不一样的蚊子 — Tue, 24 Mar 2009 07:31:32 +0000

感谢老包、娟姐！感谢淘宝 UED的青云、玄度、语凝、小马。到北京之后，反思了一下自己的杭州之行：自己太不成熟，许许多多的缺点也暴露出来了，学会了很多，长大了很多。

拜读了一篇文章：信心膨胀

记得那次怀着激动的心情租了《龙虎門》回来看。刚开始看到谢霆锋和甄子丹的出场那场打斗，的确譲人激动了一下。而看完老感觉没有《杀破狼》好看，什么原因自己也说不上来！过了几天上网遇到同学，和同学聊到这部影片.我问他看了感觉咋样？他说一般。我问为什么？他说动作场面精彩著，但甄子丹演的不真！我说你咋能那样说啊？（我算是甄子丹迷啊）他只说了一句一部成功的《杀破狼》譲甄子丹自信心高度膨胀…

他一句话譲我找到了《龙》为什么没有《杀》好看的原因！自信心高度膨胀！不只有甄子丹是这样，成龙在《神话》＆《新警察故事》中都多多少少演的不是很真，和他早期的像《A计划》＆《警察故事》等影片比起来，是差很多！李连杰在《霍元甲》中也是那样的，都给人一种不是在演戏一样，倒像是在做娱乐节目！

特别是中间那句话

一部成功的《杀破狼》譲甄子丹自信心高度膨胀…

与自己的情况好像，我只是在学校里的一点点可以忽略的成就，就以为自己多了不起了——其实这是坐井观天。经历了第一次正式的面试，淘宝UED的面试之后，发现自己许多缺点：骄傲，沉不住气，自以为是……工作前接受了这一次教训，让我在将来的工作中少走弯路。

向淘宝的语凝、玄度道歉，对我面试时候的态度表示诚挚的歉意！如果我是语凝、玄度，我也不会选择自己的。现在的我像极了文章里的主角，不同的是他有实力，而我的实力呢？

务实，务实。罔了自己多推崇中庸，现在的自己很浮躁、骄傲。

静以修身，简以养性。休息1天——反思，理性的思考，以一个旁人的眼光，看清自己，给自己一个正确的定位，不再自我陶醉，不在自欺欺人。学习，充电，摆正心态，认认真真面对下一次面试！

踏踏实实做事，实实在在做人。

朝朝暮暮朝朝，期期盼盼期期-我的大学毕业

淘宝旺旺公仔涂鸦大赛作品

在海之南

毛哥和他的宗羲观片会（转）

飞机一落地，与你零距离——北纬18°

Designing Interactions 交互设计读书笔记整理以及下载

不一样的蚊子 — Mon, 23 Mar 2009 22:33:26 +0000

本文整理自UI乐园的《Designing Interactions》全书 PDF，和N2A的designing interactions读书笔记

新增所有文件打包下载地址：Design Interactions PDF (1567)

《Designing Interactions》目前只有英文版本。很久就下载了，但一直没有仔细翻阅。具体到哪下载的我也忘记了。共享出来大家一起研磨。并这里有一篇pemiamos做的相关读书笔记。还有些由Stanford HCI 交互设计工作室推荐阅读内容。

Bill Moggridge，著名的设计公司 IDEO 的创始人之一。这本书里更是颇采访了不少重要人物，比如 Google 的两名创始人、世界上最伟大的 PC 游戏设计师之一 Will Wright，以及 Macintosh 团队重要成员之一 Bill Atkinson、Palm 的创始人 Jeff Hawkins……

内容分为10个章节，并配有DVD的视频。我这里先上传了各章节的PDF提供大家下载。至于DVD视频，这里就没有空间放上来了，有机会再找地方共享。

Forword: What is Interaction Design? 前言：什么是交互设计？

这一章，是书的核心总览，很多东西都在这一章点到，在后续章节展开。Bill一上来就隆重推出了Gillian Crampton Smith阿姨，也许称其“交互设计之母”也不过分。1968从剑桥大学修完哲学和艺术史毕业，从事了十年设计师的生涯。很奇怪，专业不太对口的样子，但是后面就更神，1981这个阿姨竟然写了个排版的程序，以帮助她的杂志设计工作。这个经历让她相信：

designers have an important role to play in creating information technologies.

设计师能在创建信息技术上扮演更重要的角色。于是Smith阿姨就开始她的交互设计教学生涯。对了，那时还没有交互设计，1983年她在圣马丁搞了个叫做 a graduate program in graphic design and computers图形设计与计算机的研究生课程；1989年，在RCA创立了the Computer Related Design Department “与计算机有关的设计”，也就是现在的RCA interaction design department. 这里提下，在RCA的工作也有Bill老伯的功劳，首先这个建议就是他提的，他还是这个系的external assessor外部顾问。RCA也就很幸运的成为世界上第一个设立的专门课程培养设计师学习创造交互产品与系统的院校。2001年，我们可爱的Smith阿姨又跑到意大利北部阿尔陴斯山脚下的Ivrea，创立了Interaction Design Institute Ivrea艾丽维尔交互设计学院。

我想所谓向大师学习，我们通过现在的互联网，google一下这些人和地方，我想对于更深入了解交互设计的发展，技术和趋势是很有用的。有了网络可以让我们少走很多弯路。

列下RCA的交互设计主页，有多作品并且常更新的，看看他们的作业，我觉得咱们的想象力和胆识实在有点贫乏了。而且人家真的在玩闹中有所思考的。http://www.interaction.rca.ac.uk/

这是艾丽维尔交互设计学院http://www.interaction-ivrea.it/en/index.asp

几段觉得很重要的话：

If I were to sum up interaction design in a sentence, I would say that it’s about shaping our everyday life through digital artifacts—for work, for play, and for entertainment.－－Gillian Crampton Smith, interview of January 30, 2002 2

交互设计就是通过数字人造物来描绘我们的日常生活，如：工作，娱乐等。

We’ve come to a stage when computer technology needs to be designed as part of everyday culture,so that it’s beautiful and intriguing,so that it has emotive as well as functional qualities.

我们进入了这么个时期，计算机技术需要被设计，以作为我们日常生活中的一部分。使他们变得美丽和迷人，使他们像我们的家具一样具有让我们感动的品质。

在前言部分有四个很重要的概念被提了出来。

三个技术使用的阶段 Three Stages of Technology Use
从可用性到社交性 From Usability to Sociability
好的交互设计 Good Interaction Design
交互设计的语言 Languages of Interaction Design

Three Stages of Technology Use

这个观点是设计star图形用户界面的David Liddle提出来的，（纵观全书，其实Bill引用了很多在交互领域有着杰出贡献的bigman的话，就像他在最后第十章说的，这本书的框架中包含着交互设计会是什么的图景和许多有着不同学科背景的专家们对于交互设计的思考，学习他们的贡献而不要仅仅跟随我对于交互学科的个人观点。

This book is structured around this inclusive vision of what interaction design can be and has presented the thinking of many experts in the field from very varied backgrounds, chosen for their contributions rather than their closeness to my personal view of the discipline. ）

David把一个技术的应用划分为三个阶段：狂热爱好者阶段enthusiast stage，专业用户阶段professional stage，和消费普及阶段consumer stage。

一般来讲，一个技术刚出来时顶它的都是非常喜欢这个技术的人。狂热爱好者们不在乎技术的难易，他们醉心于技术本身。他们就是这么热衷于此，不在乎它有多难用。

Enthusiasts don’t care if the technology is easy or hard to use because they’re so excited by the technology itself or by what it will do for them.They want it,however difficult it is to use.

而在专业用户阶段，使用这些技术的人，并不是购买他们的人，购买设备的决策者并不关心用户体验，他们关心的是价格、技术规格和售后，而使用这些技术的人往往也希望技术难一些掌握，已显示出他们才是专家。呵呵~~原文这样的:

At this stage, indeed, some people even have a vested interest in the technology being difficult because they’re selling their ability to use it;the harder it is,the more valuable their skills.

极具讽刺意味！最后一个阶段就是所谓的consumer stage，这正是我们交互设计师要发力的地方。David认为普通人对于技术本身并不感兴趣，人们关心的只是技术能为他们做什么；人们不太愿意去花时间学习使用技术产品并且讨厌被技术作弄让自己感到愚蠢。

People now are less interested in the technology in itself than in what it can do for them.They don’t want to spend much time learning how to use it and hate being made to feel stupid.

所以在这个阶段使用计算机和通讯技术的是大量没有专业背景的普通人，相比于计算机而言他们性急，有破坏性，容易开小差。

针对这些广泛的人性所要展开的设计相比于为技术专家们设计特定工具而言绝对更带有挑战性。用户不一定使用我们的产品，如果他们不能使它动起来，他们就会把他们送回商店。

if they can’t make them work,they take them back to the store.

从可用性到社交性 From Usability to Sociability

这个标题觉得可以这样理解:

物本身（有用性to可用姓）－>人的心理（拥有的意义包括对己对人两方面）－> 社会性影响（交流的意义：是更丰富还是更贫乏，技术的双刃剑性质）

这是我对于这节的理解，可能还没有理解透，欢迎网友批评指正。

下面是具体展开的一些有意思的文字。

本节Moggridge首先针对当前usability一词泛滥提出，useful有用性问题，并引用Mitch Kapor，Lotus 1-2-3电子表格软件的设计者，在1990年发表了一个宣言“Software Design Manifesoto”——“我们必须首先思考设计的东西是否对人们有益，而不是先去想着如何构建它。 we must start by thinking about designing things so that they’re right for people, rather than by thinking first about how to build it.” “…要弄清什么才是人们需要的。…making sure that this was what people needed.”

在这种用的功利性层面之上，Morggridge指出，在计算机开始日益勾画我们的日常生活时，我们感兴趣的不仅仅是技术能为我们做什么，还有我们拥有它们的意义。 As computers begin to shape everyday life, we’re interested not only in what this technology can do for us,but also in what owning it means for us.这里还举了个土司机的例子:我们选择那玩意时不仅是能烤面包，我们还会很在意它看上去，摸上去，听上去如何, 等等很多心理方面的要求。不光我们自己的感觉，还有给别人的感觉（这里很自然地开始引申到社会性层面）And of course we choose the things we surround ourselves with not just because of what they mean to us,but also because of what they mean to other people.

接着Moggridge谈到设计地含蓄性，这里有段很经典地话：

Artists and designers are trained to use the language of implicit meanings to add a rich communicative element over and above direct functional communication.If we only design the function of something,not what it also communicates, we risk our design being misinterpreted. Worse, we waste an opportunity to enhance everyday life.

我的译文：艺术家与设计师被训练以含蓄的语言增加交流与沟通的丰富性，而不仅仅是直接地功能性地交流。如果我们仅仅解决某物的功能，而忽视交流，那么我们的设计将有被误解的风险，更糟的是，我们浪费了增进与改善我们日常生活的机会。

说得实在是好，这本书真是时不时冒点这类让人择服的语言。

这里我以为再加上“优雅”就更完美了。书里后面也多次提到graceful一词。

在这小节的后面，总结了5个要考虑的东西：

usability, utility, satisfaction, communicative qualities, and sociability

可用、有用、满意、交流的品质及社会性

好的交互设计 Good Interaction Design

这节讲了好的交互设计的一些原则，如果说上节是在说些观念的话，这节的东西就很技术层面，更有可操作性。

概括一下5个：

清晰的心理模型 clear mental model；例子：HyperCard，在早期mac上的超文本程序，google一下可以知道更多。
使人安心的反馈reassuring feedback；比如我们敲键盘的恰恰声。
良好的导航navigability；告诉我们在哪，能做什么，能去哪，还有怎么回去。
前后一致consistency；在系统的不同部分中相同的命令应保持一致的有效性。
依赖直觉的交互intuitive interaction；别让人想太多，这个可以看看 Don’t Make Me Think中文版。那里讲得更细，更具操作价值。

这一节还有一些值得推敲的语言，敲一下：

When we design a computer-based system or device, we’re designing not just what it looks like but how it behaves.We’re designing the quality of how we and it interact.This is the skill of the interaction designer.

当我们设计基于计算机的系统与设备时，我们设计的不仅是它的样子，还有它的举止。我们要设计我们和它之间交互的品质。这是交互设计师要掌握的技巧。

It’s partly responsiveness:when you move your mouse, for instance, does it feel sluggish, or nippy and sprightly? When you manipulate your iPod dial,the combination of sound and feel, as well as telling you what you’re doing, is subtle and satisfying.

比如：我们移动鼠标时，鼠标的反应是迟缓还是灵敏的；我们玩转ipod时，声音和触感的综合体验告诉我们我们在做什么,这是很精妙且让人感到满意的。

We can design those qualities of interaction, relating what we see to what we hear or feel with the same refinement with which typographers adjust the spacing of type,or product designers the radius of a curve.

我们能设计这些交互的品质，它们涉及到我们的所见，所听及所感。我们涉及它们，就像版面设计师调校字与字之间的空间，就像产品设计师推敲一根曲线一样。

交互设计的语言 Languages of Interaction Design

Moggridge认为，交互设计还刚刚起步，还远远没有发展出自己的语言来。这节开始他举了电影发展的例子，交互设计要想发展出如艾森斯坦在电影艺术上独特的蒙太奇手法来还有很长的路要走。

他认为我们现在可以先大致讲交互设计的语言大致划分为4类。

It may help to categorize these languages according to their “dimensions”:1-D,2-D,3-D,and 4-D.

1-D includes words and poetry.
2-D languages that interaction design can borrow from include painting, typography, diagrams, and icons.
3-D languages are those of physical, sculptural form.
4-D languages include sound, film, and animation.

Introduction

这一部分主要讲了两个Moggridge自己的两个小故事。正是这两件事上的体验让他开始探索现在叫做“交互设计”的新领域。一个是给儿子买了难用到死的电子表，最后被神经衰弱的老婆用锤子砸掉；另外就帮助John Ellenby设计第一台笔记本电脑的经历，让他从造型到界面一直到沉浸在虚拟世界里，而萌生“softface”的概念，最后在Bill Verplank的建议下确定为“交互设计”这个名词。

这部分讲故事为主，细节我就不展开了。还是自己读比较饶有趣味。这里只节选我感兴趣的几段话：

designers needed to face new challenges,as electronics started to replace mechanical control systems. In order to create products that are enjoyable, satisfying to use, and aesthetically pleasing in behavior as well as shape, designers would need to learn how to design hardware and software as well as physical objects.

设计师面临新的挑战，当电子技术取代机械来控制系统，为了创造有趣味的产品，在交互中获得如外观一样的审美享受，设计师需要去学习如何设计硬件与软件，如同设计实物一样。

I felt that there was an opportunity to create a new design discipline, dedicated to creating imaginative and attractive solutions in a virtual world, where one could design behaviors, animations, and sounds as well as shapes.

我感到这将是创建一个新的设计学科的机会，专注于在一个虚拟的世界里创造富于想象力与魅力的解决方案，去设计它们的举止、表现与音调如同设计它们的形状。

10 People and Prototypes

因为之前大体翻翻觉得本书越到后面越精彩，而且这一章和我的研究方向最接近，所以是从后念起的。

觉得这一章把很多ideo内幕的设计思想提出来了。之前也看过大卫.凯利的《Ideo物语》，读起来很爽，但是可操作性和实际指导意义都没有Moggridge的这章好。

本章从设计的本质开始展开延伸到交互设计的定位，再到IEDO的人（用户）研究和原型构建，最后还介绍一般的设计流程。所以我觉得这章是整本书含金量最大的一章。

概述部分

及早地并且时常地构建原型，使每一个交互的步骤更加清晰，有些观点或更倾向于体验“Ah ha”这样突然蹦越而出的灵感，但是这仅仅是一个暗示，说明你正专注的这个设计的细节呈现在方向上还是正确的，要想知道一个设计是否是优秀的，那你只能动手把它做出来，让人们使用它，并且人们对于这个设计的态度是高兴的，积极的和感到舒适的。

Prototype early and often, making each iterative step a little more realistic. At some point you are likely to experience that wonderful “Ah ha!” feeling that comes with a creative leap, but that is only an indication that you have moved forward in the detail of the aspect of the design that you are focusing on right then. You will only know that the design is good when you have tried it out with the people who will use it and found that they are pleased, excited, motivated, and satisfied with the result.

我相信如果我们把人放到第一位并且不断不断地构建原型，我们将有很好的机会得到创造性地解决方案，从而使人们得到价值与欣喜。

I believe that if we think first about people and then try, try, and try again to prototype our designs,we stand a good chance of creating innovative solutions that people will value and enjoy.

关于Jane Fulton Suri，IDEO的人因交互专家。

她帮助我阐明这种方法，我们发展创立的研究人（用户）并通过这些知识来激发设计灵感的方法，她还一直在探索原型的使用，包括了解已存在了的经验，调查研究设计创意和设计概念的沟通。

She helps me explain the methods that we have developed to learn about people and derive insights from that knowledge to inspire design. She also explores the use of prototypes for understanding existing experiences, investigating design ideas,and communicating design concepts.

关于Duane Bray，IDEO交互设计部门的头。

如何构建原型以适应各个设计流程，解释不同类别的原型对于各种类型交互设计的作用，并且尝试那些对未来设计实践产生影响的预测。

how prototyping fits into the design process,explain the different sorts of prototypes that are useful for the various categories of interaction design, and try to predict how that will change the practice of design in the future.

What Is Design?

什么是设计？一个常谈常新的问题

这里moggridge引用了依姆斯夫妇和Madame Amic（不知道是哪路神仙）的一段谈话:

Q. What is your definition of “Design?”

A. A plan for arranging elements in such a way as to best accomplish a particular purpose.

Q. Is design an expression of art (an art form)?设计是一种艺术表现或者形式么？

A. The design is an expression of the purpose. It may (if it is good enough) later be judged as art. 设计是一个意图的表达，它可能（如果它足够好的话）最后由艺术来衡量。

Q. Is design a craft for industrial purposes?

A. No—but design may be a solution to some industrial problems.

不，但是设计可以是许多工业化（产业化）问题的解决方案。

Q. What are the boundaries of design?

A. What are the boundaries of problems?

Q. Does the creation of design admit constraint? 设计创造会有约束么？

A. Design depends largely on constraints. 设计非常依赖于约束条件。

Q. What constraints?

A. The sum of all constraints. Here is one of the few effective keys to the design problem—the ability of the designer to recognize as many of the constraints as possible—his willingness and enthusiasm for working within these constraints—the constraints of price, of size, of strength, balance, of surface, of time etc.; each problem has its own peculiar list.

Q. Does design obey laws?

A. Aren’t constraints enough?

生动幽默，相比于追求全面的学术性解释要更能赢得设计师的心。“constraints”一个以前我们都在潜意识中回避的问题，成了主角。用艺术的角度去化解“constraints”。

Core Skills of Design

科学学科依赖于实践者在一个很窄的范围内成为专家，并且在越来越小的范围内知道得越来越多。而好的设计来源于成功的综合方案，在透析所有相关的限制与约束后。而约束的不同又定义了不同的设计学科。

5个设计的核心技巧：

To synthesize a solution from all of the relevant constraints, understanding everything that will make a difference to the result 从各种有关的约束限制中综合一个解决方案，了解每样东西会使结果产生变化
To frame,or reframe,the problem and objective 对问题和客观构建框架，或重构之
To create and envision alternatives 去创造并构建选择
To select from those alternatives,knowing intuitively how to choose the best approach
在选项中，直觉地感觉到如何选择一个最佳方案
To visualize and prototype the intended solution 将解决方案视觉化并构建原型

而且设计地过程是迭代进行地，并不按照线性发展，也不需要遵循固定地法则，如同玩弹子机一样整个过程有许多不可预料的方向。

The process does not look like a linear system diagram, nor even a revolving wheel of iterations, but is more like playing with a pinball machine, where one bounces rapidly in unexpected directions

“潜知识”和“做中学”

Tacit knowledge & Learn by Doing

我搞不太清Tacitknowledge的确切解释，暂时译做“潜知识”。

Designers operate at a level of complexity in the synthesis of constraints where it is more effective to learn by doing, allowing the subconscious mind to inform intuitions that guide actions.

This is the reason that design education relies on a projectbased approach of “learning by doing.”

这就是设计教育依赖于以项目为基础的“做中学”的教育方法的原因。

When a problem is complex,with lots of constrains,it is much easier to recognize a good solution than to explain it.

当问题复杂，有许多的约束，那么识别一个好的设计方案对比于尝试去解释它更容易得多。

典型学生设计项目评价尺度：

Creativity/innovation 创造性与想象力
Aesthetics/quality 美学与品质
Human factors/values 人因与价值
Performance/technology 表达与技术
Completeness/presentation 完成度与展示

A Hierarchy of Complexity 复杂性的梯度

每个设计中所涉及的限制与制约条件是很复杂的，为了让我们更清楚得了解交互设计在整个设计中的位置，Moggridge特别写了这节内容和上面这张图表。下面把关于心理学的这两段翻译一下：

Cognitive psychology—the way the mind works 认知心理学

For the design of human-computer interactions

Enter the chip! Electronics started with computers, gradually invaded everyday things and places, and are now almost everywhere.This is where we pick up on my stories of designing
the laptop and the digital watch, as it is more and more difficult for the designer to understand intuitively about people and what they need and want, as the context is no longer just physical and biomechanical.

进入芯片！电子学开始于计算机，逐渐渗透到生活的方方面面，如像我所列举的自己设计笔记本电脑与使用电子闹钟的故事；现在设计师已经越来越难于只凭借直觉来了解人们和他们想的要的是什么？正如我们的生活中不再仅仅只有生物机械学层面的东西一样。

When you are concerned about the constraints that will matter to people when you are designing computers and things that are enhanced by electronic behaviors, you need a much more rigorous understanding of the way the mind works. When the design context includes machine intelligence as well as human intelligence, the design team will benefit from the expertise of a cognitive psychologist and will also need designers who are skilled at designing interactions. At this point in the hierarchy, we have arrived at the contents covered in the first five chapters.

当你考虑这些对于人们非常重要的约束时，当你设计计算机以及一切由电子行为增强的东西时，你需要更多对于思维的严格认真的了解，当设计场景中包含有机器智能，以及人工智能时，设计团队需要来自认知心理学家的意见以及需要有交互设计技能的设计师加入。

Where Does Interaction Design Fit? 交互设计的落脚点

上面这张图还是很清晰地反映了交互设计在物理世界与数字世界、主观世界（人）与客观世界（技术）中的位置。黄的都是设计，红的是着眼于人的技术，蓝的是偏重于客观世界的技术与工程，最后绿的是我们用来探索宇宙的科学。

这里我觉得奇怪的是网络设计比交互设计更趋于物理世界？在我看来，交互设计往往是物理世界与电子的数字世界间的桥梁，interface。

可能我还是比较关注带芯片的物的缘故吧。

在p661，有段Nicholas Negroponte很凶悍的话：

Even if you doubt that we are already in a digital age, it is clear that we are marching relentlessly toward a condition where everything that can be digital will be digital.What does thismean for interaction design?

无论你有没有做好进入数字化时代的准备，有一点是很清楚的，我们正以飞快的速度进入它，我们身边所有能被数字化的东西都将被数字化。这对于交互设计意味着什么？

因为我是下载的一章章电子版，所以书上所有的注释都没有。很可惜，不然可以查查老尼这段话的出处。

这章里还有几段很有意思的文字，一段写Moggridge去看RCA的学生毕业展览，他看的是交互设计系的作品，但是不知不觉走到了工业设计系的展台前。

Suddenly I looked up at the whole room, and
discovered to my surprise that I had drifted into the area occupied by the projects from the industrial design department, never noticing a difference in the nature of the work.

原因是交互设计的学生们设计的是聪明的东西，而工业设计的学生设计的东西也很聪明。（我翻译的不好，还是看原文比较幽默）

Just as the interaction designers were designing smart objects, the industrial designers were designing objects that were smart, finding it natural to include electronically enabled behaviors.

这里就又有了一个交互设计的地位问题了。它该是属于工业设计么？

Moggridge举了个例子，但是他好像没有给出定论，交互设计本身就还在发展之中。

Computer science emerged first and gave rise to new disciplines for the design of hardware and software. Eventually every engineer expected to use electronics and software in the natural course of development, so engineering education included learning about circuits and programming languages.However, this did not mean that the new disciplines of hardware and software design merged back into the traditional engineering design disciplines, but rather that all aspects of engineering design make use of technology, and all engineering designers can operate to some extent in the digital realm. It seems likely that a parallel to this will exist in the human disciplines, with all designers thinking it natural to include digital solutions as aspects of their designs, accepting the constraints and opportunities offered by new
technologies. At the same time there will continue to be interaction designers who have a more in-depth knowledge and expertise about designing interactions and remain the experts in the field. I think interaction design is here to stay.

计算机科学首先呈现并发展成为一个新学科是在硬件与软件的设计方面开始的。最后每个工程师都预料到在他们开发的核心领域将会应用到电子学与软件，所以工程学教育包括了学习电子电路和程序语言。然而，这并不意味着这个关于软硬件的新学科将吞并传统的工程设计学科，而只是说搜游的工程设计中会运用到这些技术，所有的工程师都会被要求在数字化领域有两把刷子而已。这种相似的情况也出现在人文学科中，所有的设计师都认为在他们的设计解决方案中会包含数字化的解决方案，他们接受这种约束，并视其为新的机会点。同时他们也将慢慢成为交互设计师，在他们有了更多更深入的相关知识和得到更深入的交互领域的专门技术并成为该领域的专家之后，我想这就是交互设计之所在。

Suri为ideo的用户研究做了很多扎实的工作，这张图表显示了不同类别的研究方法，横轴从左（明确）到右（潜在）表示了设计机会与用户需求的特征。纵轴指示了从上（宏观，统计层面）到下（微观，解释性层面）的不同研究技术。

传统的市场研究方法通过问卷海量调查或深度聚焦人群，以发现人们想要的，这些方法能够很好地找出人们嘴上想要的东西。

但是如果你的目标是创新设计，你的产品或服务并没有被想到过，所以很难被参与开发的用户所理解。这里就需要发现潜在需要与渴望的方法，以帮助设计团队确定潜在的机会。

The diagram lays out different kinds of research methods, showing a horizontal scale that characterizes design opportunities and user needs, from explicit (left) to latent (right). The vertical scale indicates the difference in techniques from macro (top) to micro (bottom).Traditionally, market research was developed to find out what people want by asking them directly through large-scale surveys or more in-depth focus groups; these methods work very well to find out what people say they want. If your goal is innovative design, your product or service has not even been thought of, so by definition it cannot be explained to research participants.This is where methods are needed to discover latent needs and desires that will help the members of the design team define potential opportunities. The examples on the diagram are video ethnography techniques on the macro scale, where stop frame video is set up to watch a space or task to reveal patterns of use. On the micro scale, the example is observational techniques, where members of the design team go to wherever the design context exists to see what people really do, as opposed to what they say they do.

People

交互设计成功的核心是设计者能找到理解最终用户的洞察力，生活环境，习惯，需求和渴望的方法。

It is essential to the success of interaction design that designers find a way to understand the perceptions, circumstances, habits, needs, and desires of the ultimate users. Jane Fulton Suri, 2005

在介绍ideo的51种研究用户的方法前，suri讲述了自己和ideo的思想演进：

在80年代中期，我努力想搞清楚交互设计会是什么，以及我们如何将我们的专长带入到电子学领域。在设计中，第一重要的是思考设计中人的这部分因素：谁是用户？他们的经验会让他们要什么？什么将给他们安全与快乐？

My first principle in design is to think first about the people part of the design:Who are the users? What do they want from the experience? What will give them satisfaction and enjoyment?

我传统的方法就是去观——在每一个现实的设计问题场景中发生了什么？

“观察”是在特别设计问题的场景中学习理解人们的最好方法。你需要观察在真实的情况下人们都做了些什么，这远比使用常规的问卷技术了解他们的想法与行为更有用。

在这些第一手的体验中，你会得到清晰而又鲜明的知识。

51 Ways of Learning about People

在1986年Moggridge遇见Suri前，Suri已经在英国从事了十年人因工程的研究，专注于消费产品的安全。但是让Suri一直很郁闷的是，她那时是的工作性质是基于事故的分析，而不是避免事故的设计工作。因为Moggridge的远见I thought this was a chance to integrate human factors expertise into my specialist team of designers，Suri被邀请加入IDEO。1991年以后在Suri的努力下，人因工程的考量渗透到每个IDEO的设计项目中去了。

在IDEO人因专家的主导下，结合大量商业项目的实践，IDEO总结了超过50种研究用户方方面面信息的方法，并将其归纳为四大类:学习、观察、提问以及尝试。

Learn,Look,Ask,and Try:“Learn”from the facts you gather,“Look”at what users do,“Ask”them to help, and “Try”it for yourself.

因为在国内没法买到这套卡片，我通过各个方法收集到了其中的大多数方法的照片，放在我的Picasa在线相册上。http://picasaweb.google.com/pemiamos/IDEOMethodCards02供有兴趣的同好参考，期待有朋友能帮我一起补齐.(因为我还是研究生，所以这种收集仅供我研究参考之用，希望不会侵害到IDEO的商业利益，其实国内有的话，我还是很愿意购置一套的，不是么？)

书上列举了几种卡片的例子以及一个媒体报道设计团队使用卡片的例子，比较好玩！念念着实开怀，能这样做设计是我们很多人的梦想，呵呵～～；－）

通过使用方法卡，我们可以抵制以自我为中心的想当然，及更好地引导我们的直觉力。让一个好的设计师没有一个大的自我意识是十分困难的，我们需要充分相信我们有能力依靠直觉的整合找到正确的解决方案，同时承认我们不太容易能找出清晰的逻辑依据。这就是为什么我们为自己做设计比为别人设计更容易。

51方法卡的使用价值在于让我们能聚焦于其他人（了解用户，他们的习惯以及场景），并在这个工程中获得灵感，是我们不陷入到我们自以为是的世界中去。如果设计师一天到晚在办公室面对电脑，那么他们做出的东西只是能让自己陶醉而已。设计师需要离开办公室，勇敢地开放自己的眼睛，去观察、去感受、去思考！

Remember the extremes

人的很多变化的特征影响到我们的设计；如兴趣、经验、学习速度、生活形态、财产、工作状态、生活环境等。要使我们的设计尽可能成功，那么就需要考虑到我们所设计对象的方方面面。

很多情况像上面这张正态分布曲线图所示，相对大多数人都集中在平均值上，只有少数人属于两端。当我们想要研究了解人的时候，很重要的是把那些在两头的人们考虑进去，不然我们的设计智能是个公约数。

举个简单的例子，我们设计ATM的密码输入的交互过程，我们发现有整整百分之五十的人需要比平均数更多的时间，这是个让人为难的问题！但是比较好的设计是包容全部的用户的，除了那最慢的百分之二的人。

网页可用性设计指导思路总结

CRM平台项目的交互模式库总结（持续更新）

交互设计师-让世界因你而不同（1）总述

互联网产品的交互设计方法（UPA2008讲稿）

交互设计

恭喜，恭喜！Diigo从LookSmart公司手上收购Furl! Diigo Buys Web Page Clipping Service Furl Away From LookSmart

不一样的蚊子 — Thu, 12 Mar 2009 08:11:01 +0000

by Robin Wauters on March 9, 2009

Social bookmarking and annotation service provider Diigo has acquired web page clipping and archiving service Furl from publicly listed search advertising network company LookSmart in exchange for equity. The deal is being pitched as a partnership but looks more like a smart decision from LookSmart to offload a property that had little to do with its core business and Diigo jumping on a relevant opportunity without having to spend any cash.

Either way, Diigo has now bought a service that in many ways can be compared to its own product. Both offer a way for website visitors to save entire web pages or just parts as well as annotate and share with others what they consider interesting on the web. Diigo doesn’t refer to its service as social bookmarking but rather as a research and knowledge-sharing tool, but in reality it isn’t all that different from Delicious and the likes, including Furl. You might as well say Diigo bought a rival as it is readying the launch of the upcoming Diigo 4.0 platform, which is said to be taking social bookmarking and annotation ‘to new heights’.

Furl, besides being one of the very first web services profiled by Mike Arrington when he started TechCrunch, was acquired by LookSmart back in September 2004. Although it was one of the first startups to focus on leveraging new technologies to add a social layer to site bookmarking, it never really quite took off the way Delicious did and according to the press release attracted only 1 million users for its service since its inception 6 years ago.

在海之南

绍兴游记

五一.在上海.2010

毛哥和他的宗羲观片会（转）

网页可用性设计指导思路总结

不一样的蚊子 — Tue, 10 Mar 2009 19:44:19 +0000

猛然在文档里翻到了，2年前看《点石成金 / Don’t make me think》做的笔记。

整体设计

核心思想：为扫描而设计，不为阅读而设计

理清层次 每个页面的层次关系应该是很清楚的
采用习惯 尽量利用我们已经习惯的用法
划分区域 把页面划分成明确定义的区域
明确提示 可点击，可操作的地方，给用户明显的标识
减少干扰 最大限度降低其他非重要元素产生的干扰

理清层次

越重要部分越突出，可以参考：页面重要区域划分
语义逻辑上相关的部分在视觉层次上也相关
进行合理的视觉上嵌套

主页设计

核心思想：能快速的让用户找到需要的东西，以及告诉用户如何开始。

主页需要展现的东西

标识站点
展示站点层次
导读
内容更新
友情链接
快速链接

网页可用性测试方法

快速扫描网页，然后回答如下问题：
这个网站是做什么的？
应该从什么地方开始？

CRM平台项目的交互模式库总结（持续更新）

交互设计师-让世界因你而不同（1）总述

Designing Interactions 交互设计读书笔记整理以及下载

互联网产品的交互设计方法（UPA2008讲稿）

交互设计

DELL F992 显示器模糊

不一样的蚊子 — Wed, 04 Mar 2009 08:36:24 +0000

DELL F992，CRT显示器。文字显示不清晰，是聚焦问题。打开后盖把高压包中间的旋钮调一下就好了，PS：不需要打开静电罩。

现在双显1440×900 + 1600×1200，上图了

朝朝暮暮朝朝，期期盼盼期期-我的大学毕业

绍兴游记

毛哥和他的宗羲观片会（转）

信心膨胀-分析自己的淘宝之行

万万在杭州的新家

mdsfd木马临时解决方案

不一样的蚊子 — Wed, 04 Mar 2009 07:07:59 +0000

服务器1月份就中马了，项目太紧，人太懒，又无关紧要，就一直没搭理它。小昭的BLOG纠结中，龚浩的BLOG纠结中……唉，没办法，小昭可乐都给我买了，不得不出山了。服务器上网站太多，不知是哪有漏洞，索性弄了一招治标不治本的，暂时顶着先。

症状：

网页被挂马，多了一句，挂的恶意网站有如下等等：www.51jcjy.com www.rr88rr.cn，所有的JS文件均被添加了

document.writeln ("

删除之后过一段时间文件又被修改。排除ARP病毒，IIS配置文件被改的可能性，具体步骤不做讲解。查找木马的根源，无奈服务器上网站太多，没法子下手。遂先解决当前问题……

现在采用了以下方案：

首先下载文本替换专家 2.6，将恶意代码全部清除。
登录www.websafeguard.cn 下载网站安全卫士-服务器版
配置一下就OK了。详细的设置查帮助文档。

后话

还有一哥们提供了方案，买他们的mdcsoft-ips软件，貌似可以从根源上防止问题。只不过这网站的名字 Mdcsoft（中国）研究院，Mdcsoft（中国）研发集团，够山寨

Wordpress更换服务器遇到的问题

ISAPI Rewrite 介绍及相关应用

FPort 查看端口报错 ”You must have administrator privileges to run fport – exiting… “的解决方法

mysql 10055 错误解决方案

UTF-8 BOM 引发的显示问题

Phoenix Nirvana

不一样的蚊子 — Wed, 04 Feb 2009 10:02:08 +0000

This illustration during my first summer vocation of my university life in 2006. With deeply love of vender, use Microsoft Expression Design to draw her.

And this was sent to Emmy.Xiao as a gift.

凤凰涅磐

Logo Design for Raina

Logo 微软技术俱乐部

logo design 英语经贸系

发一帮朋友做的LOGO

凤凰涅磐

不一样的蚊子 — Wed, 04 Feb 2009 09:58:11 +0000

晒晒旧图：大学第一个暑假做的图，那时起就迷恋矢量。用的Microsoft Expression Design。参照一本杂志中的画做的，送给了XO姐姐。

Phoenix Nirvana

Logo Design for Raina

Logo 微软技术俱乐部

logo design 英语经贸系

发一帮朋友做的LOGO

Illustration collection of Alistapart

不一样的蚊子 — Mon, 02 Feb 2009 10:48:24 +0000

Can not manage myself with the illustration of alistapart for its clear and funny style, since the first time i saw her.

So create A Illustration Collection Of Alistapart, almost all illustration included. If anyone miss, a message to me would be great appreciate! Hope it will help.

The illustrations below is updated: Issue 276 January 20, 2009

Download:illustration-collection-of-alistapart (414)(images and index files included)

Brighter Horizons for Web Education

Elevate Web Design at the University Level

Return of the Mobile Style Sheet

Semantics in HTML 5

Content-tious Strategy

The Discipline of Content Strategy

Flexible Fuel: Educating the Client on IA

Getting Real About Agile Design

This is How the Web Gets Regulated

A More Useful 404

Writing Content that Works for a Living

Progressive Enhancement with JavaScript

Progressive Enhancement with CSS

Working From Home: The Readers Respond

Understanding Progressive Enhancement

Ten Years

Web Standards 2008: Three Circles of Hell

Test-Driven Progressive Enhancement

Look at it Another Way

Zebra Striping: More Data for the Case

Mapping Memory: Web Designer as Information Cartographer

CSS Sprites2 – It’s JavaScript Time

Putting Our Hot Heads Together

Deafness and the User Experience

Walking the Line When You Work from Home

How Do You Walk the Line Between Work and Home? Share Your Best Practices With ALA

Collaborate and Connect with Subversion

Getting Out of Binding Situations in JavaScript

Faux Absolute Positioning

Sketching in Code: the Magic of Prototyping

Writing an Interface Style Guide

Saving the Spark: Developing Creative Ideas

The Cure for Content-Delay Syndrome

Why Did You Hire Me?

Zebra Striping: Does it Really Help?

Community: From Little Things, Big Things Grow

Creating More Using Less Effort with Ruby on Rails

Getting Started with Ruby on Rails

Accessible Data Visualization with Web Standards

Take Control of Your Maps

Findability, Orphan of the Web Design Industry

Sign Up Forms Must Die

On Creativity

Design is in the Details

Version Targeting: Threat or Menace?

They Shoot Browsers, Don’t They?

The Rules of Digital Engagement

Keeping Your Elements’ Kids in Line with Offspring

Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8

From Switches to Targets: A Standardista’s Journey

A Preview of HTML 5

Designing For Flow

How to Size Text in CSS

Understanding Web Design

Graceful E-Mail Obfuscation

Greatest Copy Shot Ever Written

If I Told You You Had a Beautiful Figure…

Hat Heads vs. Bed Heads

Get Out from Behind the Curtain

Put Your Content in my Pocket, Part II

CSS @ Ten: The Next Big Thing

Put Your Content in My Pocket

Staying Motivated

Design by Metaphor

Better Writing Through Design

Reviving Anorexic Web Writing

Never Use a Warning When you Mean Undo

Conflicting Absolute Positions

Testability Costs Too Much

Human-to-Human Design

You Are Not a Robot

Frameworks for Designers

Evangelizing Outside the Box: Web Standards and Large Companies

Who Needs Headlines?

Stand and Deliver

Educate Your Stakeholders!

The Long Hallway

Contrast and Meaning

Accessible Web 2.0 Applications with WAI-ARIA

Setting Type on the Web to a Baseline Grid

Ruining the User Experience

Inside Your Users’ Minds: The Cultural Probe

Semantic Flash: Slippery When Wet

Where Our Standards Went Wrong

Flash Embedding Cage Match

Multi-Column Layouts Climb Out of the Box

Paper Prototyping

Quick CSS Mockups with Photoshop

How to Grok Web Standards

Whitespace

Making Compact Forms More Accessible

Switchy McLayout: An Adaptive Layout Technique

User-Proofing Ajax

Avoid Edge Cases by Designing Up Front

In Defense of Difficult Clients

Super-Easy Blendy Backgrounds

How to Be a Great Host

Print to Preview

Working with Others: Accessibility and User Research

The ALA Primer Part Two: Resources For Beginners

12 Lessons for Those Afraid of CSS and Standards

Long Live the Q Tag

Text-Resize Detection

The ALA Primer: A Guide for New Readers

Your About Page Is a Robot

Sliced and Diced Sandbags

Where Am I?

Gentle Reader, Stay Awhile; I Will Be Faithful

I Wonder What This Button Does

Designing Through the Storm

Automatic Magazine Layout

Bye Bye Embed

Prettier Accessible Forms

Behavioral Separation

How to Plan Manpower on a Web Team

World Grows Small: Open Standards for the Global Web

To Hell with WCAG 2

Calling All Designers: Learn to Write!

The Four-Day Week Challenge

Community Creators, Secure Your Code!

Anonymity and Online Community: Identity Matters

Flywheels, Kinetic Energy, and Friction

Valentine’s Day Massacre

Valentines to the Web

In Search of the Holy Grail

Home Page Goals

Web 3.0

The Accessibility Hat Trick: Getting Abbreviations Right

Sensible Forms: A Form Usability Checklist

Thinking Outside the Grid

Printing a Book with CSS: Boom!

Power to the People

High Accessibility Is Effective Search Engine Optimization

Design Choices Can Cripple a Website

Good Designers Redesign, Great Designers Realign

Attack of the Zombie Copy

Never Get Involved in a Land War in Asia (or Build a Website for No Reason)

Introducing the CSS3 Multi-Column Module

CSS Swag: Multi-Column Lists

Improving Link Display for Print

High-Resolution Image Printing

Facts and Opinions About PDF Accessibility

When You Are Your Own Client, Who Are You Going To Make Fun Of At The Bar?

Alistapart 插画收集

Phoenix Nirvana

Logo Design for Raina

logo design 英语经贸系

发一帮朋友做的LOGO

Alistapart 插画收集

不一样的蚊子 — Mon, 02 Feb 2009 10:47:42 +0000

一直都特喜欢alistapart的插画，太安逸了，简直无法自拔……那简洁的风格，犀利的思想……哈哈，扯远了。

赶紧整理出来，弄出一个 Alistapart插画收集。囊括了所有文章中的插画，若不慎遗漏，请指出，在下立即添上。

谢谢大家支持，希望这些东西对大家有用。

最近更新插画时间 Issue 276 January 20, 2009

下载：illustration-collection-of-alistapart (414)（图片和目录都有）

Brighter Horizons for Web Education

Elevate Web Design at the University Level

Return of the Mobile Style Sheet

Semantics in HTML 5

Content-tious Strategy

The Discipline of Content Strategy

Flexible Fuel: Educating the Client on IA

Getting Real About Agile Design

This is How the Web Gets Regulated

A More Useful 404

Writing Content that Works for a Living

Progressive Enhancement with JavaScript

Progressive Enhancement with CSS

Working From Home: The Readers Respond

Understanding Progressive Enhancement

Ten Years

Web Standards 2008: Three Circles of Hell

Test-Driven Progressive Enhancement

Look at it Another Way

Zebra Striping: More Data for the Case

Mapping Memory: Web Designer as Information Cartographer

CSS Sprites2 – It’s JavaScript Time

Putting Our Hot Heads Together

Deafness and the User Experience

Walking the Line When You Work from Home

How Do You Walk the Line Between Work and Home? Share Your Best Practices With ALA

Collaborate and Connect with Subversion

Getting Out of Binding Situations in JavaScript

Faux Absolute Positioning

Sketching in Code: the Magic of Prototyping

Writing an Interface Style Guide

Saving the Spark: Developing Creative Ideas

The Cure for Content-Delay Syndrome

Why Did You Hire Me?

Zebra Striping: Does it Really Help?

Community: From Little Things, Big Things Grow

Creating More Using Less Effort with Ruby on Rails

Getting Started with Ruby on Rails

Accessible Data Visualization with Web Standards

Take Control of Your Maps

Findability, Orphan of the Web Design Industry

Sign Up Forms Must Die

On Creativity

Design is in the Details

Version Targeting: Threat or Menace?

They Shoot Browsers, Don’t They?

The Rules of Digital Engagement

Keeping Your Elements’ Kids in Line with Offspring

Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8

From Switches to Targets: A Standardista’s Journey

A Preview of HTML 5

Designing For Flow

How to Size Text in CSS

Understanding Web Design

Graceful E-Mail Obfuscation

Greatest Copy Shot Ever Written

If I Told You You Had a Beautiful Figure…

Hat Heads vs. Bed Heads

Get Out from Behind the Curtain

Put Your Content in my Pocket, Part II

CSS @ Ten: The Next Big Thing

Put Your Content in My Pocket

Staying Motivated

Design by Metaphor

Better Writing Through Design

Reviving Anorexic Web Writing

Never Use a Warning When you Mean Undo

Conflicting Absolute Positions

Testability Costs Too Much

Human-to-Human Design

You Are Not a Robot

Frameworks for Designers

Evangelizing Outside the Box: Web Standards and Large Companies

Who Needs Headlines?

Stand and Deliver

Educate Your Stakeholders!

The Long Hallway

Contrast and Meaning

Accessible Web 2.0 Applications with WAI-ARIA

Setting Type on the Web to a Baseline Grid

Ruining the User Experience

Inside Your Users’ Minds: The Cultural Probe

Semantic Flash: Slippery When Wet

Where Our Standards Went Wrong

Flash Embedding Cage Match

Multi-Column Layouts Climb Out of the Box

Paper Prototyping

Quick CSS Mockups with Photoshop

How to Grok Web Standards

Whitespace

Making Compact Forms More Accessible

Switchy McLayout: An Adaptive Layout Technique

User-Proofing Ajax

Avoid Edge Cases by Designing Up Front

In Defense of Difficult Clients

Super-Easy Blendy Backgrounds

How to Be a Great Host

Print to Preview

Working with Others: Accessibility and User Research

The ALA Primer Part Two: Resources For Beginners

12 Lessons for Those Afraid of CSS and Standards

Long Live the Q Tag

Text-Resize Detection

The ALA Primer: A Guide for New Readers

Your About Page Is a Robot

Sliced and Diced Sandbags

Where Am I?

Gentle Reader, Stay Awhile; I Will Be Faithful

I Wonder What This Button Does

Designing Through the Storm

Automatic Magazine Layout

Bye Bye Embed

Prettier Accessible Forms

Behavioral Separation

How to Plan Manpower on a Web Team

World Grows Small: Open Standards for the Global Web

To Hell with WCAG 2

Calling All Designers: Learn to Write!

The Four-Day Week Challenge

Community Creators, Secure Your Code!

Anonymity and Online Community: Identity Matters

Flywheels, Kinetic Energy, and Friction

Valentine’s Day Massacre

Valentines to the Web

In Search of the Holy Grail

Home Page Goals

Web 3.0

The Accessibility Hat Trick: Getting Abbreviations Right

Sensible Forms: A Form Usability Checklist

Thinking Outside the Grid

Printing a Book with CSS: Boom!

Power to the People

High Accessibility Is Effective Search Engine Optimization

Design Choices Can Cripple a Website

Good Designers Redesign, Great Designers Realign

Attack of the Zombie Copy

Never Get Involved in a Land War in Asia (or Build a Website for No Reason)

Introducing the CSS3 Multi-Column Module

CSS Swag: Multi-Column Lists

Improving Link Display for Print

High-Resolution Image Printing

Facts and Opinions About PDF Accessibility

When You Are Your Own Client, Who Are You Going To Make Fun Of At The Bar?

Illustration collection of Alistapart

Logo Design for Raina

Logo 微软技术俱乐部

logo design 英语经贸系

发一帮朋友做的LOGO

XHTML CSS Tools collection

不一样的蚊子 — Wed, 21 Jan 2009 16:16:33 +0000

organize tools of xhtml and css from the web, in order to use it as i like.

css filters (css hacks)，css filters for different browsers
tests: text-decoration

css filters (css hacks)，css filters for different browsers

HTML demo:css filters (css hacks)

original article:css filters (css hacks)

download source:css-filters (409)

tests: text-decoration

HTML demo:tests: text-decoration

original article:RichInStyle.com tests: text-decoration

CSS XHTML 相关资源整合

Safari/Chorme/Webkit-based Browsers CSS hack redux

Having “layout”

拥有布局 IE haslayout

(X)HTML Strict 下的嵌套规则

CSS XHTML 相关资源整合

不一样的蚊子 — Wed, 21 Jan 2009 16:12:32 +0000

本文为慢慢整合，日积月累就多了。

css 过滤器，CSS 浏览器兼容表
text-decoration属性详解

css 过滤器，CSS 浏览器兼容表

HTML：css filters (css hacks)

原文：css filters (css hacks)

下载：

text-decoration属性详解

HTML: tests: text-decoration

原文：RichInStyle.com tests: text-decoration

XHTML CSS Tools collection

Safari/Chorme/Webkit-based Browsers CSS hack redux

Having “layout”

拥有布局 IE haslayout

(X)HTML Strict 下的嵌套规则

iTunes无法从同步服务中载入数据类信息请重新连接或稍后再试一次

不一样的蚊子 — Tue, 13 Jan 2009 10:52:59 +0000

iTunes无法从同步服务中载入数据类信息请重新连接或稍后再试一次，查了资料，这个最靠谱：iTunes无法从同步服务中载入数据类信息请重新连接或稍后再试一次

我用的方法：

问题出在杀毒软件上,准确的说是"瑞星卡卡上网助手",

把"木马行为判断与拦截""IE防漏墙""木马下载拦截"三项关闭后问题解决,

可能有些朋友未装"卡卡",如出现上述问题,我分析还是跟杀毒软件有关,把关于"木马拦截"或修复浏览器漏洞的所有软件关掉应该能解决问题.根据以上分析,可以确定"ITUNES8"应该包含木马.

原文整理得蛮好，转一下：

iTunes无法从同步服务中载入数据类信息请重新连接或稍后再试一次
刚重新刷2.1系统，破解并越狱后连接iTunes 8却提示：iTunes无法从"同步服务"中载入数据类信息,请重新连接或稍后再试一次。

网络上搜索了一下，貌似需要完全卸载8.0后重新安装iTunes，估计是数据库错误。

===============================================

对“itunes无法从"同步服务"…信息”问题的猜测 1

我有两台1代iPhone，固件版本一台是2.0.2，另一台是2.1。昨天2.1的iPhone连接iTunes8.0都一切正常，今天用同一台电脑进行2.0.2的升级2.1工作，PWN破解后连接出现题目中的问题，重刷3次，包括降级回到2.0.2都没有办法解决。之后连接今天早晨还可以正常连接的 2.1固件的iPhone，同样出现这个问题，但是在点击确定按钮后iPhone可以同步，而准备升级的2.1那个iPhone在点击“itunes无法从"同步服务"中载入数据类信息”弹出框里面的确定按钮后，显示的iPhone设备里面什么都不出来，摘要信息铃声广播音乐软件全都不出来，连同步按钮都没有。

根据以上的情况，可以推测是iTunes8.0出了问题，最有可能的是那个genius出了问题，因为今天早晨还连接正常的2.1固件的iPhone 现在连接电脑的时候windowsXP弹出的用什么软件打开APPLE相机的提示里面现在也没有了内容，以前会有准备用word 扫描仪 windows图片库打开等提示内容。
因此不排除iTunes8.0的某些插件/部件和windows有冲突，不知道使用mac系统的朋友出现同样的问题的

对“itunes无法从"同步服务"…信息”问题的猜测 2

刚才试了一下我的台式PC安装iTunes7.7连接恢复过的2.0.2iPhone一切正常，之后，将2.0.2iPhone连回我的笔记本电脑使用 iTunes8.0进行连接，虽然开始出现 “itunes无法从"同步服务"…信息” 但是在点了确定按钮后，iTunes8.0提示有新的固件2.1可用，这次直接点击更新继续试验

对“itunes无法从"同步服务"…信息”问题的猜测 3

问题基本解决，用台式PC上的iTunes7.7引导2.0.2版，然后回到出问题的笔记本电脑上的iTunes8.0点击“更新”升级成固件2.1，虽然在破解完毕后仍会出现“itunes无法从"同步服务"…信息” 的提示，但是并不影响使用，可以同步，音乐，照片，视频，软件全部OK

最后，我换到后机箱接口就可以同步了，音乐，视频等。可以

========================================================

itunes数据库的问题，彻底删除itunes（所有相关文件都删除，包括但不限于My Music下面的itunes文件夹），换个目录重新安装itunes。

删除手机

/private/var/mobile/Media/iTunes_Control/iTunes下的iTunesDB文件。

========================================================

经过反复测试,发现问题还是出有杀毒软件上,准确的说是"瑞星卡卡上网助手",把"木马行为判断与拦截"IE防漏墙"""木马下载拦截"三项关闭后问题解决,可能有些朋友未装"卡卡",如出现上述问题,我分析还是跟杀毒软件有关,把关于"木马拦截"或修复浏览器漏洞的所有软件关掉应该能解决问题.根据以上分析,可以确定"ITUNES8"应该包含木马.

========================================================

很多朋友因部分原因而需要重新安装iTunes,但简单地使用 iTunes官方的卸载功能并不能完全卸载软件,那如何知道没有完全卸载呢?很简单,只要打开iTunes+QuickTime安装主程序 iTunes801Setup.exe,你就会发现在安装选项卡内少一项"自动更新iTunes和APPLE软件"所以请依照以下办法进行卸载:
1.请使用QuickTime Player自带软件卸载QuickTime Player
2.打开主程序iTunes801Setup.exe进行iTunes卸载
3.打开-我的电脑-控制面板-添加或删除程序-卸载Apple Software Update、Apple Mobile Device Support
4.找到?:\My Documents\My Music\iTunes (我的文档-我的音乐-iTunes)将其删除,注意同步用户请备份文件夹内资料.如资料容量较大可以直接删除?\My Documents\My Music\iTunes\iTunes Library.itl
5.上诉问题也是解决大多用户关于升级到iTunes 8.0后无法使用破解相关软件的解决办法.

========================================================

用pwntool 或者quickpwn重新刷一次即可

mdsfd木马临时解决方案

Wordpress更换服务器遇到的问题

Itunes was unble to load dataclass information from sync services reconnect or try again.

mysql 10055 错误解决方案

UTF-8 BOM 引发的显示问题

Itunes was unble to load dataclass information from sync services reconnect or try again.

不一样的蚊子 — Tue, 13 Jan 2009 10:51:53 +0000

Problems

Itunes was unble to load dataclass information from sync services reconnect or try again.

Environment: Windows xp sp3, itunes 8, iphone 2.2

solution

itune 8 was considered to have the virus or Trojan horse behavior, simply turn off your antivirus software the following functions: Trojan acts judged and interception, IE leakproof wall, Trojan download intercept. Then everything work well

This was what works to my situation, hopes it can help you!

Setup My Team’s Adobe Version Cue

Wordpress更换服务器遇到的问题

Solution of “The mobile phone has not responded” for my nokia E51

iTunes无法从同步服务中载入数据类信息请重新连接或稍后再试一次

WordPress API Endpoint Problem

Photo Collection

不一样的蚊子 — Tue, 23 Dec 2008 05:24:00 +0000

Organize my photos, view it in my photo gallery.

Chengdu, China, By CellPhone Nokia E51, Sky of Chengdu while evenfall, taken with JiaJia while having TOEFL classes.

Afterglow

The Rainbow hard to see

Chengdu, China, By CellPhone Nokia E51, Chengdu’s Building。

Chunxi Road

Near by Chunxi Road

Chengdu, China, By CellPhone Nokia E51, Toys, taken while Bobby came Chengdu.

Hello Kitty

Toy

Chongqing, China, By CellPhone Nokia E51, Sence of Chongqing, taken while having TOEFL contest in Chongqing.

Chongqing Great Hall of People

Jialing River at Chaotianmen

Technorati : Chengdu, China, Chongqing, Photo
Del.icio.us : Chengdu, China, Chongqing, Photo
Zooomr : Chengdu, China, Chongqing, Photo
Flickr : Chengdu, China, Chongqing, Photo

貳零零玖北京之行剪影『壹，故宮』，Photo collection of Palace Museum in Beijing 2009

貳零零玖北京之行剪影『貳，天安門』，Photo collection of Tian An Men in Beijing 2009

貳零零玖北京之行剪影『叁，北京大學』，Photo collection of Beijing University in Beijing 2009

随性整理一下照片

万万在杭州的新家

随性整理一下照片

不一样的蚊子 — Tue, 23 Dec 2008 03:23:21 +0000

整理下照片，在我的相册中有放。

成都；手机Nokia E51，成都傍晚天空，和贾贾一起上TOEFL辅导班时候拍的。

晚霞

成都难得一见的彩虹

成都；手机Nokia E51，楼影重重。

春熙路

春熙路旁

成都；手机Nokia E51，店里的小玩具，阿门来成都时候拍的。

Hello Kitty

挺乖，就是不知道名字

重庆；手机Nokia E51，重庆市景，去重庆考TOEFL时拍的。

重庆人民大礼堂一

重庆人民大礼堂二

朝天门观嘉陵江

Technorati : photo, 成都, 重庆
Del.icio.us : photo, 成都, 重庆
Zooomr : photo, 成都, 重庆
Flickr : photo, 成都, 重庆

照片集-2009.12-2010.2

照片.淘宝年会2010

绍兴游记

Photo Collection

万万在杭州的新家

flash 在浏览器中大小

不一样的蚊子 — Sun, 21 Dec 2008 00:48:07 +0000

ie(lte IE 8)渲染出的大小由object标签中的width以及height确定。

其他浏览器，如firefox, opera, chorme, safari渲染大小由embed确定。

Technorati : flash size in browsers
Del.icio.us : flash size in browsers
Zooomr : flash size in browsers
Flickr : flash size in browsers

CSS 框架结构

IE Haslayout 详解

XHTML CSS Tools collection

Safari/Chorme/Webkit-based Browsers CSS hack redux

Having “layout”

XP IE8, Visita IE, CHM文件显示不正常

不一样的蚊子 — Thu, 18 Dec 2008 14:03:28 +0000

描述：

XP+IE8或者VISITA+IE下，CHM只能显示目录，不能显示内容。

解决方案：

CHM文件-属性-解除锁定

Technorati : CHM, IE8
Del.icio.us : CHM, IE8
Zooomr : CHM, IE8
Flickr : CHM, IE8

mdsfd木马临时解决方案

Setup My Team’s Adobe Version Cue

FPort 查看端口报错 ”You must have administrator privileges to run fport – exiting… “的解决方法

mysql 10055 错误解决方案

UTF-8 BOM 引发的显示问题

logo design 英语经贸系

不一样的蚊子 — Wed, 17 Dec 2008 04:37:19 +0000

前几天弄的一LOGO，帮外表深沉、内心活泼的PNY童鞋弄的。预祝她参加比赛获奖哦！

下载点此：logo-sisu (354)

Technorati : design, photoshop
Del.icio.us : design, photoshop
Zooomr : design, photoshop
Flickr : design, photoshop

Logo Design for Raina

Logo 微软技术俱乐部

Flash动画机械齿轮，矢量机械齿轮

梦飞工作室招新海报2008.09.11

发一帮朋友做的LOGO

Flash动画机械齿轮，矢量机械齿轮

不一样的蚊子 — Sun, 14 Dec 2008 04:28:28 +0000

做项目，需要齿轮，做了一堆矢量的齿轮，哥们们用得着的就拿去用哈，不用客气！

flash由梦飞工作室刚学AS的董文奕同学完成，现学现用～赞一个！

第二版（综合）下载：gear-psd-ai-flash (801) PSD下载：wheel-psd Flash下载：wheel-flash

Technorati : photoshop
Del.icio.us : photoshop
Zooomr : photoshop
Flickr : photoshop

Logo Design for Raina

Logo 微软技术俱乐部

logo design 英语经贸系

梦飞工作室招新海报2008.09.11

发一帮朋友做的LOGO

Logo 微软技术俱乐部

不一样的蚊子 — Sun, 14 Dec 2008 04:07:01 +0000

2，3年前做的LOGO了，电子科技大学微软技术俱乐部的哈。

当时PS出了个smart object，哇，好东西，就狂用了……

现在看起来那东西很嫩呢，

放图(PNG,IE6下头不正常，闲麻烦，不管他了)，下载：logo-mstc (364)

Technorati : design, logo, photoshop
Del.icio.us : design, logo, photoshop
Zooomr : design, logo, photoshop
Flickr : design, logo, photoshop

Logo Design for Raina

Flash动画机械齿轮，矢量机械齿轮

logo design 英语经贸系

梦飞工作室招新海报2008.09.11

发一帮朋友做的LOGO

IE Haslayout 详解

不一样的蚊子 — Tue, 09 Dec 2008 19:21:20 +0000

IE的haslayout是个很纠结的东西，掌握好CSS就得掌握好它。初学CSS时走了很多弯路，以下几篇文章在我的学习中起了很大的作用，希望能让大家受益。

此文是和老包共同弄的，参考了On have layout 。

另外两篇文章摘自CSS Mastery【精通CSS】，与此文相互补充，希望对大家有帮助

拥有layout概述

Internet Explorer 中有很多奇怪的渲染问题可以通过赋予其”layout”得到解决。John Gallant 和 Holly Bergevin 把这些问题归类为”尺寸臭虫(dimensional bugs)”[32]，意思是这些臭虫可以通过赋予相应元素某个宽度或高度解决。

“Layout”是一个 Internet Explorer for Windows的私有概念，它决定了一个元素如何显示以及约束其包含的内容、如何与其他元素交互和建立联系、如何响应和传递应用程序事件、用户事件等。这种渲染特性可以通过某些 CSS 属性被不可逆转地触发。而有些 HTML 元素则默认就具有”layout”。

微软的开发者们认为元素都应该可以拥有一个”属性(property)”(这是面向对象编程中的一个概念)，于是他们便使用了 hasLayout，这种渲染特性生效时也就是将 hasLayout 设成了 true 之时。了解hasLayout将对IE的臭虫会有更多深入的体会甚至解决方案。

拥有layout的定义

一个元素”得到 layout”，或者说一个元素”拥有 layout” 的时候，是指它的微软专有属性 hasLayout 为此被设为了 true 。一个”layout元素”可以是一个默认就拥有 layout 的元素或者是一个通过设置某些 CSS 属性得到 layout 的元素。
而”无layout元素”，是指 hasLayout 未被触发的元素，比如一个未设定宽高尺寸的干净 div 元素就可以做为一个”无layout祖先”。

给一个默认没有 layout 的元素赋予 layout 的方法包括设置可触发 hasLayout = true 的 CSS 属性。参考默认 layout 元素以及这些属性列表。没有办法设置 hasLayout = false ，除非把一开始那些触发 hasLayout = true 的 CSS 属性去除或重置。

拥有layout的各种问题

Layout 在显示盒模型时有着不同寻常而且难以预料的效果，而且有时甚至会牵连到他们的子元素。

一个元素是否具有”layout”可能会引发如下的一些问题（包括但不限于）：

IE 很多常见的浮动臭虫。
元素本身对一些基本属性的异常处理问题。
容器和其子孙之间的空白边重叠问题。
使用列表时遇到的诸多问题。
背景图像的定位偏差问题。
使用脚本时遇到的浏览器之间处理不一致的问题。

Layout 的由来

不同于标准属性，也不像某些浏览器的私有 CSS 属性，layout 无法通过某一个 CSS 声明直接设定。也就是说没有”layout属性”这么一个东西，元素要么本身自动拥有 layout，要么借助一些 CSS 声明悄悄地获得 layout。

下列元素应该是默认具有 layout 的：

, ,

,	,

不一样的蚊子

飞机一落地，与你零距离——北纬18°

相关文章:

淘宝2010半年会剪影

相关文章:

【招聘】TaobaoUED招聘交互设计实习生

相关文章:

数据与理论结合，让交互设计更专业【碳酸饮料会】

1.如何利用数据指导交互设计

1.1前期数据

1.2上线后数据

1.3用户反馈数据

2.良好的团队协作，提升UED话语权

2.1从非UED的角度去分析问题（与非UED同事协作）

2.2与UED同事协作

3.总结……

相关文章:

在海之南

若云

若轻轻的清清云

顷雪

赶

海的天空

天在天边，云在云上

芒果

相关文章:

五一.在上海.2010

相关文章:

毛哥和他的宗羲观片会（转）

相关文章:

杭州九溪十八涧踏春

相关文章:

绍兴游记

鲁迅故里·百草园

鲁迅故里·三味书屋

沈园

东湖

兰亭·曲水流觞

时间太短，以下几个地方没去成：

会稽山大禹陵

戒珠寺

八字桥

相关文章:

浙江东阳横店影视城

相关文章:

乌镇

相关文章:

照片.淘宝年会2010

相关文章:

照片集-2009.12-2010.2

相关文章:

求婚 The Proposal

相关文章:

淘宝旺旺公仔涂鸦大赛作品

下面，是公司同事们的涂鸦公仔，

相关站外文章

相关文章:

交互设计师-成功有效的团体沟通（3）

本文主要涉及三个部分内容：

有利演说的基本要素

增进信心

快捷方法

演讲、演讲人、听众

有力演说的挑战

相关文章:

交互设计师-让世界因你而不同（1）总述

Web交互设计师的定义

交互设计师的特点

对交互设计师的要求

web交互设计师的工作内容

如何进行一个产品的交互设计?

第一步.信息构架设计

第二步.界面细节设计

如何成为一名交互世界师？

最近五年的交互设计

交互设计师的一天

气质

培训

经验

自我展示