超越起点 追随自由 我想故我所有

学习、应用Web标准一路走来……（为了方便朋友们浏览特此整理）

作者：郑旻（爆牙齿）
邮件地址：zhengminlive at gmail dot com

2006 3 25 Create

CSS3 Gradients

CSS3 Transforms

CSS3 Transitions

CSS3 3D Transforms

QQ和360的战斗大升级，中国互联网从软件共存竞争进入鱼死网破新时代。

也许是良性的，国内企业的信任建立将上升到全新高度。

也许是恶性的，用户将因无所可信而转向外企产品。

至少现在，QQ和360，我谁都不信！

至少现在，我信任GTalk或MSN。

有没有人想听爆牙齿的意见？

少说多做。

随便汇报一下工作情况：

我已经开始全面应用SVG了，整个人比较鸡血，我发现我总是能找到鸡血然后自己注射。其实关于SVG半年前我就研究过其实用性，8月份我很想写一篇文章，就是对比PNG、CSS3和SVG，以及指出当时SVG最大弊端所在：当时SVG只能in Background或link，这意味着SVG就像iframe一样独立于HTML，这样一来关于SVG的技术也就独立了进不了队伍中，无法和HTML/CSS/JS等相互协同，并肩作战。这是我半年前怀着巨大兴奋研究后的巨大失落，然后我就放弃了。

大概一个月前一次例行查看，意外发现列表中出现了inline SVG in HTML5，接着发现IE9、FF4、Chrome 7都支持。SVG可以inline了！OMG！你们不知道当时我立刻就惊声尖叫了！挽起袖子我就开始筹划直接实用，通过这段时间在真实环境下的实用，我又有了新的心得和与PNG、CSS3的对比，我仍在不断的思考中，弊端和限制依旧很多，前天为了一个通用和简洁的设计，对着一个小小图标的编码实现我从下午想到凌晨，用了各种存储方式试验了无数种抽取方式还去把SVG教程查了又翻依旧找不到完美的解决办法，最后只好无奈的选择了折中。即便这样，也将实现同等视觉效果的字节数从>>40K降到了3K，而且是实时渲染瞬间显示。只可惜追求不到完美，我仍然耿耿于怀，因为完美的情况只需要1K左右。

前天晚上，我又去试验了SVG effects for HTML elements，自然的，你懂得，不好意思又尖叫了。尽管还非常的单薄而且不实用，但是它指出了一个未来：你可以对HTML进行PS那样的各种滤镜渲染，所不同的是PS是“CG动画”，而SVG是“实时渲染”！比如用高斯模糊让页面产生景深！这是我多年前设计弹窗的时候一直所向往的效果，在如今普及的层次化设计下，从来就没有过景深。你自己说，该还是不该尖叫？？？！！！

有损JPG—>无损PNG—>有限矢量CSS3—>原生矢量SVG—>莫名其妙Canvas。Canvas是啥东东，我还没接触，目前的认知，SVG适合处理小元素，而Canvas是更大更自由的画布。无论如何，没关系，一条路慢慢慢慢滴，我就走过去鸟，慢慢慢慢滴，你就看不见我鸟。

随便哪条路，只要功夫深，铁棒磨成针。

当然啦，我也不假装客观和客套了，我的观点向来像鲜血一样灿烂：如果只从宏观上来看，Adobe的Flash和MS的Sliverlight，甚至包括红遍大江南北的Apple的Object C，面对开放的HTML5，哪儿来出路嘛！

五点第一觉醒来，看到Apple4us上的一篇访谈《［独家］与周鸿祎谈乔布斯》，通读下来，甚是喜欢。周鸿祎的每一个回答我都非常认同，也想到了一些自己正在做的事，错误与正确。同时，这让我对周鸿祎这个人有全新的认识，不错，我立刻Follow了他的微博。

在观点中我做了一些个人的批注和笔记。

十一之前，我有机会和周鸿祎坐下来聊聊乔布斯。

这是奇特的一对。两人一中一洋，未曾谋面；两人分属消费电子和互联网两个领域；两人中一个执掌着市值近 3000 亿美元的公司，另一个还从未打造过一家上市公司⋯⋯但他们在某些方面又是类似的：充满争议性、富攻击性、与众不同。我无意标榜周鸿祎，但与他长叹三小时的过程的确酣畅，周心思敏捷，又富商界经验，便不乏有趣的见解。比如，周说从乔布斯身上他学到「企业的战略是可以来自于细节」，他追求像乔布斯一样提供「优雅的解决方案」，以及他认为自己在互联网电视革命方面比乔布斯想的更远。

以下为访谈摘要。

张亮：这次跟您来聊乔布斯，是因为乔布斯已经成为杰克·韦尔奇之后中国商界的一门「显学」，大家都想从他身上学点东西。不过这后面有几个问题：乔布斯什么可学之处？这个人是可以复制的吗？外界对于乔布斯的推崇之中，有没有什么南辕北辙之处？……不过所有问题之前，先来回答一个最基础的问题：你觉得乔布斯是怎样的一个人？

周鸿祎：我看过几乎能找到的所有乔布斯的传记，网上关于他的资料也看过不少，恐怕中国比我更熟悉苹果的历史的人不多。最开始我觉得他是个很桀骜不驯、有创造力的创业者，后来佩服他的是他能东山再起。不过呢，最近三年有一个全新的感觉。乔布斯从1975年出道到今天，干了35年——最近这三年仿佛是把35年的功力一掌击出——他用一款iPhone干掉了诺基亚，再回过身来用iPad对微软和英特尔发起很大冲击，如果算上之前用iPod超越索尼。这几个产品只是孤立的看，也不觉得别人想不出来，但乔布斯就好像进入了「飞花摘叶，即可伤人」的境界。那现在我觉得，乔布斯太伟大了，跟他的这些创新比，我们现在做事的格局都还不够。

爆牙齿：很多人往往看重结果而忽视过程，喜欢泛泛讨论一些大而化之的东西而忽视点滴的积累。因为积累是个极其痛苦的过程，是个你看不见的过程。帮主的35年，一台电脑，一个系统，一个播放器，一个手机，一个平板。35年5个成功产品，用平均的算法，帮主这么勇猛的人也是7年做成功1件产品。想想自己的英来网也才2年半，即便算上海词的先行经验积累，也不过3年半，就算是帮主也还得积累一倍的时间，何况我何以和帮主相提并论，所以还鲜嫩得很，必须耐心！

张亮：大概是这些成就让乔布斯俨然一种成功学。你怎么看这个热潮？

周鸿祎：学乔布斯比较容易陷入两个误区。第一个是把乔布斯神化。我们都是人，就他是个神，那还有什么可以学的？其实乔布斯也是一个有七情六欲、缺点很明显的人。比如他对员工比较粗暴，比如他早年的合伙人沃兹尼亚克也被他骗过，再比如他跟女朋友生了个私生女不承认。这些都应该让你感觉乔布斯是个有血有肉的人，不是一个神，这才能去研究。第二个，你知道事后分析最大的问题是什么吗？因为事后分析总是很功利的看做一件事儿对自己的好处，没有看到完整的过程。不看来龙去脉只看孤立的成功，这就会让你得出很多奇奇怪怪的结论。只看iPhone、iPad和App Store的成功，就好像说你看到所有的成功公司都有一栋独立办公楼，那你就得出了结论说「有独立的办公楼是成为伟大公司的必要条件之一」。这种把不是成功真正的原因上升为经验，是非常害人的。现在有一些公司认为苹果不过如此，不去学它的DNA，只抄它的产品，这肯定是错的。

张亮：你觉得应该怎么学习乔布斯？

周鸿祎：我一直在想，究竟乔布斯为什么能想到iPhone这么一款产品？

首先我觉得这肯定不是一个造化于密室，然后用几年时间去实现的灵感。我甚至可以说乔布斯一开始是没有战略的。为什么呢？因为其实战略就是四句话：我是谁？我在哪儿？我做什么？我不做什么？像麦肯锡帮一些公司做的战略规划，往往是在成熟的行业去做同行分析，比如微软也会请专家说你看Google是怎么做的，但这种战略总是对一个已有的成熟套路的总结和改良。但是苹果这种创新是颠覆，是走向一个未知领域。你对什么都是未知的，刚开始一定是摸着石头过河，但乔布斯不断的把握好每一步，再加上他很多年的各种积累——这些积累我相信一开始是存在你脑海里某一个地方，并不起作用，但是你走到这一步的时候它就开始发挥作用了——最后才有一个从自发到自觉的过程。

你回想一下当初的苹果（注：2001年），它也是没办法，它做电脑实在是卖不过戴尔，做操作系统也打不过Windows，就先做了一个外形很时尚的音乐播放器。

我想第一版iPod出来时比尔·盖茨肯定在偷笑，说这兄弟肯定昏了头了，做了一个在中国珠海已经烂大街，随便几十块钱可以买一个的MP3播放器。

但其实乔布斯非常尊重用户的需求。我相信他当时也受到了外界的启发，比如当时已经有了Napster这样的产品，证明年轻人非常欢迎这种东西——其实我们都知道音乐对青少年的重要性，当年我们上大学时谁没一个随身听？说是学英文，主要还是听歌，这是最本质的需求。可如果你不是非常重视用户的需求，你就会忽略它。

大公司忽视这个需求，那些做MP3播放器的小公司知道这个需求又没有能力把事情做好。正是这样一个中间地带，就给了乔布斯一个机会：他能做操作系统，能做硬件，应用软件也能做。这些事儿都能自己干，做个MP3播放器，就像「杀鸡用牛刀」。

我猜做iPod的时候也没想到日后的iPhone和iPad，只是它基于iPod做了很多探索。你看，他先把iPod从黑白屏幕变成一个很小的彩色屏幕，一开始只能看照片，然后这个屏幕再扩大，能看视频。这个时候你再加一个通话模块是不难想到的。等有了iPhone，你再想到把屏幕再放大变成iPad，也是顺理成章的——乔布斯的战略都不是大跨步的战略，而是一步一步的，他每一步都是在不断地捕捉当前的用户需求和市场状况，然后再往前走一步。

iPod卖了一亿部之后再做iPhone，你不感觉水到渠成吗？可如果没有这些每一步的积累，没有用户的基础，如果第一步出来就是iPad，会怎么样？

其实盖茨很早就有了平板电脑的想法，也早就做了智能手机。但盖茨犯了一个什么错误呢？就是盖茨手里有一个榔头，他把所有东西都当钉子。盖茨有Windows，而桌面上的Windows是针对鼠标和键盘的，它做手机操作系统时也是这么搞。其实平板电脑明明是用手触控的，你非要像用鼠标一样使用「开始」按钮去点开里面的程序，这不是很傻吗？这就是不考虑用户。

但乔布斯非常的关注细节。你看乔布斯会趴在电脑上一个像素一个像素的看那些按钮的设计，像他曾经跟他的员工说，你要把图标做到让我想用舌头去舔一下。只有像乔布斯这么关注细节的CEO，才能真正去了解用户的需求。所以我不认为他做的所有事情都是一开始就从大方向上想好。相反你看英特尔、诺基亚这些公司做的战略，你会觉得所有的东西都很好，但就是离消费者太远，所以结果要么就是发现不了真实需求，要么就是已经在市场上被证明的马后炮的需求。

所以我从乔布斯这里学到的一个很重要的事情就是：企业的战略是可以来自于细节的。

爆牙齿：做什么不做什么，这看起来很简单的问题，在实际操作中却是很棘手的问题，是最复杂的问题，因为诱惑太多。

09我就属于没有抵抗住SNS的诱惑，做了一大堆社区相关的产品。宏观上来说，浪费了时间浪费了资源我也白发了很多工资白花了很多钱，不过我也想得开，做决策就是要承担失败的全部责任，最直接的就是经济责任。当然事情也有好的两面，一是正因为全部失败，我才逼出了核心产品找准了核心方向，而之后的一切思路甚至包括商业模式的建立就都属于水到渠成的延续。二是虽然SNS产品全部失败了，但是仍然获得了很多积累，产品设计的积累、用户数据的积累、底层技术的积累，这些都深刻的影响着一年后的现在和未来，仍发挥着巨大的作用。

上周金山词霸产品复制了QQ，我表示激动不已。我激动是因为金山词霸在“做什么不做什么”上，已经彻底的写下四个大字：茫然无措。英来网正式版上线后，一定会狠狠的赏金山词霸无数个天旋地转的耳光。

当然，这只是源于我自己的信心。上周，天使来杭州，在我给他全面演示了即将成型的正式版并讲解了未来的发展思路后，他表示无论商业模式、产品等各方面都非常的靠谱，大大出乎他的意料和预期，非常的期待，我想，他应该也有雷同的信心了。他非常关心什么时候上线，我摊摊双手吐吐舌头表示无可奈何无可奉告无法预期，因为我们做的是一个没有过的产品，一个一切未知的领域。甚至不仅是产品和商业模式，还有技术，全是未知的，每一点都要海量的思考和探索。

至于企业战略，对我而言，全是来自于细节，全是基于细节而产生的。大概是因为我还不具备从宏观去思考战略的资源和条件吧，完全是被逼向细节的。所以前段时候一个英孚教育的朋友和我在教育行业的宏观战略上沟通，我想也许他会觉得是在对牛弹琴，因为我始终只有一句话：大公司就是一坨屎一个屁，英来网如果将来变成大公司也是一坨屎一个屁。

张亮：这就是你最近努力倡导的「微创新」。

周鸿祎：创新不是大家想的那种，一个人特别牛逼，构思出一切。我认为创新就是一种思维方式，或者分散，或者逆向，或者组合。它一定是有基础的。创新应该像我们玩游戏似的，走到某一步的时候突然出现一些新的线索。

比如呢，从iPhone到iPad的过程中，最牛的一件事是打造App Store。但即使App Store，也不是一个伟大到别人想不到的东西。

你自己想一想，如果你是一个真正的用户，不是一个手机发烧友，你今天拿到一款诺基亚手机，装软件的话，需要懂什么叫证书，什么叫签名，还得知道去哪儿下载，怎么装。这些东西就连我这样一个一个熟悉PC的人都不搞不懂。你不觉得其实这个需求已经放在那儿已经很多年了，只不过诺基亚从来把它忽视了吗？所以苹果做一个统一的、很方便的平台让你下载软件，这个想法难吗？不难。至于说这里的许多软件不是苹果做的，是别人做的跟它分账，这套商业模式也不难做。苹果之前已经有了iTunes，有了音乐和视频商店，已经解决了0.99美元卖一首歌的问题，那它再卖1.99美元、2.99美元的东西，没有任何问题。所以过去iTunes的很多实践到一定时候就成熟了，就会结出这个果实。

张亮：所以你的结论是，学习乔布斯关注产品细节的一面？

周鸿祎：我觉得他有一个特点，我是学到了。当然我看产品的时候，我就跟跳大神似的，灵魂出窍了。怎么说呢？就是我当时好像变成了一个「没有任何耐心、很急躁、对计算机对很多东西了解不多，甚至用东西很粗鲁的最小白的用户」。所以很多产品到我这儿一用，用不了几分钟我就找出毛病。其实你说，我是一个工程师，再难用的产品能难得住我吗？但恰恰我在用产品的时候变成一个最普通的用户，变得很挑剔。

张亮：不过乔布斯很著名的一个习惯就是从来不做用户调查。

周鸿祎：乔布斯其实只是不喜欢做焦点小组（Focus Group）。焦点小组的问题是，它太假。你把用户拉到一个语境里，问他很多问题，这一定会误导用户。

但是我相信，乔布斯一定花很多时间在琢磨用户是怎么想的，我不相信说这东西都是在他心里一个人憋出来的。我相信乔布斯会在生活中问很多朋友，没准儿他会跟很多人去聊天，他也会有很大的阅读量，包括他会上网去看。比如说他做iPhone的时候不就说吗，每个人都有手机，但都觉得很难用，他自己也觉得很难用，因此就问为什么不能做一部不一样的手机。这就是他在了解用户的需求和想法。

张亮：你是怎么了解用户需求和想法的？

周鸿祎：我了解用户的方式很简单，我会经常会变成一个普通用户，去使用外面的公用电脑，这才是最真实的环境。我也会去看普通人的电脑，因为你可能不是安全专家，所以我在你的电脑上去用我们的软件，或者我问你的意见，比问专家的意见更可靠。我看《电脑报》、《中国电脑教育》这样的报纸，我很喜欢看上面的读者来信，这里面聚集了大量的用户反馈。

这跟我的经历有关，我读书时就创立过公司，后来在方正我想的也是要把我的东西卖出去。所以很多时候我不是以技术人员的角度看我的产品，而是我会带着产品去听普通用户为什么不用它，或者为什么人家骂它。这种东西经历多了，你就慢慢地能从普通用户的角度去理解问题。

爆牙齿：关于用户需求和用户体验的把握来说，我略有不同看法，无法展开。简而言之，一方面我完全认同设计产品就不可能成为纯粹的普通用户，另一方面我信奉那句经典：汽车被发明之前，用户只会想要一匹更快的马。所以我认为，如果你真正做到了100%站在普通用户的角度去设计产品，那就是一个平庸的产品。所以我喜欢创造需求，比满足需求更有趣更好玩更充满成就感，当然风险更大啰，赌博嘛！

当然，我加粗的那句话，所有的创造都源于积累逐步形成而非凭空想象。马到汽车，何其漫长。所以从这个角度，创造挺麻烦的，因为作为用户会对创造新鲜，而作为创造者，由于一点一点的改变和创造历程中，新鲜感在不断的被消耗直到麻木，创造者的新鲜感实际上是很难维持的。我对乔布斯的一个佩服就是在他经历了琐碎工作完成创造后，仍能非常鸡血狗血的把他的创造讲给世界听，在理论上他应该已经失去了新鲜感的情况下，他仍能在台上“不可思议”“不可想象”等鸡飞狗跳的乱叫。说实话，这真的是个能力，很重要的保持新鲜感保持激情的能力。我给天使演示交互的时候，天使觉得很震撼，但我却不能100%的找到当初开发时的兴奋感，因为作为创造者我已经看了用了半年多了，而我们团队的人估计比我更麻木和更没有新鲜感。

通常厨师都没好的食欲，而如何在做了一桌满汉全席的美味后仍能口水涟涟狼吞虎咽，我还需要努力，我保持激情的能力还远远不够，我的鸡血还远远不够，远远不够～～～

张亮：你刚才讲到乔布斯从iPod到iPad，并不是基于战略，而是摸着石头过河闯出来的。其实你自己也是在奇虎做了很多事情，最后在安全领域做出了成绩。这两件事，都是有偶然性的，甚至是盲打误撞。但平时你也能看到很多创业者，他们有很多奇思妙想，但就是选错了方向，而且调整不过来。为什么你们能闯对领域，他们闯不对领域？

周鸿祎：你别忘了，我进入安全领域时，已经36、7岁了。乔布斯回苹果时也42岁了，iPod又是在那几年之后了。我们的之前的经历和积累是很丰富的。我认为你看到的那些不靠谱的人，他一定没有经验，基本上什么都没干过，只是凭想象。其实有的时候你也会看到有的人闯对了领域，但是做不起来。

我举个例子，很多人说我做浏览器，是从2004年就投资了世界之窗，当时我就踌躇满志。错了。当时是我的老部下要走了，他在我这儿干了几年，我把他培养起来，他说他要去做个浏览器，你要帮我。其实我当时对做浏览器不太看好，因为那时候我还不敢做浏览器，所以我做浏览器插件去控制浏览器。这是3721的思路。而且我也知道，国内做的浏览器没有核心技术，就是IE加一个外壳。但是他说这么多年我也替你做了很多事，从情理上我当然说，我就会支持你。这件事没有那么功利。

后来为什么突然要收购世界之窗呢？外面有很多分析，但是我告诉你最真实的原因。我们做360的时候，越做越发现说大部分安全入侵是从浏览器开始的，用户浏览网页就被挂马了，我们当然会很自然的想到要解决浏览器的安全。那你说这次我为什么不做个插件来干这事呢？你知道我干3721插件让我吃够了骨头了，所以我肯定就不会再想干插件了。所以这时候我就会自然想到世界之窗。

我一直在说，一个人一定是复合的，当你做一个决策，它是来自许多方面的。所以你的经验不足，你的积累不足，你是做不出某个决策的。

我们做安全做到那程度了，因为我做的那个投资，对浏览器的理解也越来越深入，浏览器市场的变化被我意识到了，我的经验跟原来不一样，已经超越原来做插件的时候，这个决策很自然就出来了。

我再举个例子，今天很多人说Foursquare，都在琢磨如何抄。你们知道它的诞生经历吗？他的创始人很早前就在做城市信息搜索（city search），不太成功，后来又做一个基于定位的酒吧交友，也不太成功就卖给了Google。到最后，他把城市信息搜索加上定位交友加上一些游戏性，变成了Foursquare。就像做火药，你把硫磺加木炭不行，把木炭加硝酸也不行，但把这三样东西按一定比例掺在一起就变成一个大炸弹了。变成炸弹之后，大家就会说，只要你同时研究硫磺、硝酸和木炭，你就能做炸弹了，但这是不行的，没有东西是这么研究出来的。

总的来说，人在年轻的时候做事不能太功利，你如果踏踏实实把每一件事把握好，即使当时没收获，它也在你的DNA里埋了一个东西，未来很多东西会被串在一起，发挥作用。

爆牙齿：不断地，不断地强调积累强调经验强调过程，而不是结果或成功。这我很喜欢，因为结果和成功是无所事事的人茶余饭后的闲聊话题，男人之间聊这些和女人之间拉家常没啥本质区别，属于生活娱乐。真刀实枪的实力还是学习、积累、沉淀，然后成长。成长！！！

张亮：外界看来，乔布斯是前互联网时代的产品经理，他用很长时间打磨一款产品，近乎独断的决定要什么功能不要什么功能，比如iPhone刚出来时没有很多用户觉得最重要的拷贝粘贴功能。对于互联网时代的产品经理们，这是不是不可复制的？

周鸿祎：我觉得不是这样的。做产品，一定要做优雅方案，不要做完美方案。比如iPad，很多人列出来iPad的20个缺点，我觉得这个思考点就错了。iPad用于工作肯定不方便，它不能多任务、输入也不方便。但人家没有设计成那个样子。如果它的定位是去击败笔记本，那它到处都是缺点，它就死了。但iPad的定位就是一个娱乐工具——能够满足所有人需求的东西是没有个性，而且你越追求完美，方案就越复杂，周期就越长。而创新追求的就是在一个点上打动人。

这个东西很复杂，我刚说使用产品时我能模拟主流用户，但同时你不能被用户牵着鼻子走，你要学会过滤用户的声音。因为每个用户有每个用户的想法，有的能代表一类需求，但有的你一看就只能说对不起，这个我做不了。

这是一个需要很长时间积累的事情。有的用户需求你一看就觉得很重要，有的表面看觉得没什么，但挖掘下去，能否看到用户都没有意识到的需求。

作为产品负责人，你永远要想办法去进球，而不是关注于不漏球，光想着怎么不漏球，也进不了球。

张亮：你说做产品要追求优雅，但优雅这个概念很难定义的。

周鸿祎：谁说的？优雅就是用你最少的资源、最合适的方法去满足用户的需求，不要过度去解决。

张亮：相信很多创业公司都在思考一个问题：该不该像乔布斯一样精益求精再发布产品？

周鸿祎：不要等到产品很精益求精了再发布。事实上，我认为互联网时代发布产品有点像参加聚会，你自己先说一个想法，别人再给你补充。20年前你做一款产品，要先做市场调查，天天要做计划做预测，也不知道怎么获得用户反馈。但互联网给我们提供了机会，你的产品今天发布，明天就能看到反馈，要充分利用这个优势持续不断的改进。所以要有精益求精的精神，但想清楚没有产品会做到完美。

爆牙齿：略有不同的看法，举个不靠谱的例子：美国就是靠两颗原子弹结束了混乱的二战，如果把原子弹拆成子弹还成么？So，这是一个阶段性的选择问题，没有万能的定理。

张亮：在乔布斯的诸多决策中，有没有什么是你认为明显错误或看不懂的？

周鸿祎：他的AppleTV就很不成功，我觉得在这个问题上他想的还没我想的明白。

当年我看陈天桥同志和他的盒子战略不成功，就一直在思考这个问题。后来我也买了好几台Wii，好几台PS3，好几台Xbox 360，有的送人，有的就当蓝光播放机用。后来我发现，通过电视控制客厅是一个很大的战略，绝对不能用做电脑的思路去做。就像微软用Windows的思路去做手机和平板电脑失败了，苹果做AppleTV时也用的电脑思路：你要通过无线把你电脑里的视频转到电视上看。我觉得这个思路是极端错误的，普通人用遥控器连PC，立马就不会操作了——我觉得电视是世界上要做到最简单的电子产品，因为普通老头老太太都得会用。

我投资了一家机顶盒公司，非常简单，只要连上网，另一头连上电源，网上所有的P2P的视频资源你都可以看，没有所谓的下载的概念。你设想下，你拿到一个盒子再接上电视，你的期望当然是五分钟就能看电影，如果告诉你今天晚上看不了，明天早上再看，你就立马没有心情了。所以苹果做AppleTV，还欠缺一件事，就是一张P2P网络。

这次Google TV做的也不对，为什么呢？里面做了太多的功能，太复杂。我应该给施密特写封信。

爆牙齿：观点靠谱。确实啊，在我们年轻人为Apple TV和Google TV折腾的时候，没想过电视是什么电子产品。真正是最简单的电子产品，要把世界上最复杂的电子产品电脑移植到世界上最简单的电子产品电视，虽然一字之差，实在是千里之遥，路漫漫。客厅这个战场看来还很未来。

张亮：严格的说，苹果并非互联网公司。它有音乐业务和广告业务，大家也在猜测他会进入搜索、社交市场，你怎么看苹果的网络战略部署？

周鸿祎：每家公司都有自己的DNA。苹果也有它的DNA，Google做硬件一定做不过它，但也许苹果做搜索引擎就是做不过Google。我感觉他们对互联网、对社区的理解还是差距很大的。现在它手里这么多现金，应该收购一些公司。

不过我个人认为有些东西是个命，就像苹果能做高端市场，这种气质学别人不来，这就跟你身上可以穿满名牌但你的气质就是不像一个英国三代的贵族。还是做最好的自己比较好。

张亮：最后的问题：你心目中乔布斯的接班人应该是什么样的？

周鸿祎：再找一个乔布斯是不太可能了，应该是萧规曹随吧，他制定的方向和战略，继任者追随，依然会是很大的公司，不过未来的机会可能抓不到了。

叮叮叮，铛铛铛，上课了上课了，同学们挨个坐好，爆老师要点名啦！

额，在上课之前先说一下，本套课程所有图例或示例包括以后涉及到的动画，我都将使用CSS3来设计，不采用一张图片，所以请使用Chrome浏览器。否则你看到乱七八糟的东西或一片空白，I Don't Care！

一、Gradient是什么东西？

这个问题比较初级，不过初级也能有高级的说法和理解，且听我的忽悠～

我记得曾经在读《硅谷革命》的时候，乔帮主说圆角矩形无处不在，然后在那个技术尚不成熟的年代，追求完美的帮主定义下圆角矩形，并运用到了苹果的所有设计上。是的，圆角确实很普及，但是直角矩形的设计依然存在，且不说1%幅度的视觉直角矩形，就是0幅度的纯直角矩形也是大量存在的，而且还不少，随便就能找出例子来，比如书本。比如，三角形，额，你能给三角形加一点圆角上去么？

但是色彩，却是没有纯色的存在。也许你会说纯色的设计无处不在。是，纯色设计确实普遍，但是真正进入你的眼睛，你看见的，你感受到的，你体验到的，却不会是纯色，为什么？？？

光啊！你生活在一个漫射光的世界里，只要有光，色彩就不会纯净，最多无限的接近纯净。如果你要说没有光的时候就是纯色了，纯黑。呵呵，是这样吗？真正没有光的时候，你根本都不存在对色彩的感知。没有白色，何为黑色？

所以，我要说：真正无处不在的，是渐变，因为，光，无处不在。

网页设计，我们经常使用到光使用到渐变，长久以来这些都处理为图片，而图片天生的弊端使得我们非常小心谨慎的使用。我们大量使用水平或垂直的规则渐变而回避掉圆形的斜线的合成的不规则渐变，因为只有规则渐变才能平铺，因为不规则渐变存为8bit的png会产生色阶，存为24bit的png文件很大，而存为jpg则因失去精度而模糊，找不到平衡点。于是充斥在页面上的是大量的垂直的规则的渐变，但这显然和真实情况下光的漫射、叠加、混合相去甚远。

而CSS3的Gradient，就是这个平衡点，尽管它仍不够完美。

二、Linear Gradient【线性渐变——点到点的渐变】

这很简单也很容易理解，就是从起点到终点的直线渐变。在这条线上你可以加入色彩的断点。代码为：

-webkit-gradient(linear,0% 0%,0% 100%,from(#FFF),color-stop(0.5,#999),to(#000));

绿色为起点坐标，蓝色为终点坐标，橙色为断点位置（0.5表示50%）与色彩。以下为几种线性渐变示例：

左上（0% 0%）到右上（0% 100%）即从左到右水平渐变：
background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));

左上到左下即从上到下垂直渐变：
background-image:-webkit-gradient(linear,0% 0%,0% 100%,from(#2A8BBE),to(#FE280E));

左上到右下即斜线渐变：
background-image:-webkit-gradient(linear,0% 0%,100% 100%,from(#2A8BBE),to(#FE280E));

水平渐变，33%处为绿色，66%处为橙色：
background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),color-stop(0.33,#AAD010),color-stop(0.33,#FF7F00),to(#FE280E));

留意没？渐变是作为background-image存在，那么就可以做一些通用处理，比如同样的渐变光加不同的背景色：

background:-webkit-gradient(linear,0% 0%,100% 0%,from(rgba(255,255,255,0.7)),color-stop(0.5,rgba(255,255,255,0.2),color-stop(0.5,rgba(255,255,255,0)),to(rgba(255,255,255,0.1))) #2A8BBE;

background:-webkit-gradient(linear,0% 0%,100% 0%,from(rgba(255,255,255,0.7)),color-stop(0.5,rgba(255,255,255,0.2),color-stop(0.5,rgba(255,255,255,0)),to(rgba(255,255,255,0.1))) #AAD010;

background:-webkit-gradient(linear,0% 0%,100% 0%,from(rgba(255,255,255,0.7)),color-stop(0.5,rgba(255,255,255,0.2),color-stop(0.5,rgba(255,255,255,0)),to(rgba(255,255,255,0.1))) #FF7F00;

background:-webkit-gradient(linear,0% 0%,100% 0%,from(rgba(255,255,255,0.7)),color-stop(0.5,rgba(255,255,255,0.2),color-stop(0.5,rgba(255,255,255,0)),to(rgba(255,255,255,0.1))) #FE280E;

试试拉伸浏览器的宽度，渐变不错吧，色彩不错吧，嘿嘿，那可是英来网的CI色彩体系。

线性渐变很简单，本不打算说的，算热热身吧，今天的重头戏是接下来的硬骨头：Radial Gradient。

三、Radial Gradient【径向渐变——圆到圆的渐变】

在讲解这个属性前，先要咬文嚼字一下，Radial是什么意思？这很关键！

相关的中文翻译有两种：1、径向。2、放射。我不用Photoshop，所以不清楚Photoshop中Radial是如何翻译的，又是如何设置的。在Firework中，Radial被译为放射，其设置也是放射，一根线为半径，从圆心到圆周渐变。为什么我要特意这样咬文嚼字一下？很长一段时间我都没搞清楚这种渐变该怎么设置，前天我给我们的手绘妹妹讲解这个属性的时候，在她的提示下，我才发现为什么我一直搞不清楚这种渐变是怎么实现的即便我已经使用多次了，她反过来给我上了一课，让我明白了原理。美术专业的敏感是不一样，当我给她说两个圆的渐变时，她一下就理解了。最后我发现我搞不清楚的根本原因就在于这个词的理解上，我是按照Firework的放射渐变在理解，按照圆心到圆周这样的起点终点渐变方式在理解，这是一个天大的错误。

So，记住了，这不是从一个点到一个点的渐变，而从一个圆到一个圆的渐变。不是放射渐变而是径向渐变。好了，下面我说说什么叫圆到圆的渐变，你现在可以先自己想象一下再接着往下看。其实只要不陷在点到点的渐变上，这个看起来复杂的属性其实很好理解的，当我从该死的点到点跳出来后一下就理解了。

首先来看代码，从一个圆到另一个圆的渐变，同样你可以在过程中加入色彩断点，代码为：

-webkit-gradient(radial,50 50,50,50 50,0,from(black),color-stop(0.5,red),to(blue))

绿色是起始圆的圆心坐标和半径，蓝色是目标圆的圆心坐标和半径，红色是断点的位置和色彩。这里我提醒一下，和放射由内至外不一样，径向由外到内的渐变，刚好相反。好了，就这段代码你能想象出来这是一个什么渐变吗？首先这是两个同心圆，外圆半径为50px，内圆半径为0，那么就是从黑色到红色再到蓝色的正圆形渐变。下面就是这段代码的效果：

backgroud:-webkit-gradient(radial,50 50,50,50 50,0,from(black),color-stop(0.5,red),to(blue));

同心圆是最简单的，也是最容易产生点到点误解，因为一看就是从黑色到红色再从红色到蓝色，一条直线。实际上不是这样的，现在我小改一下，仍是同心圆，不过内圆半径改为10px。

backgroud:-webkit-gradient(radial,50 50,50,50 50,10,from(black),color-stop(0.5,red),to(blue));

有没有问题？我问一个：为什么中间有一片纯蓝色？如果你疑惑，那么你仍是用放射思路去看的。现在我用纯色来指明，渐变的范围在哪里。

background:-webkit-gradient(radial,50 50,50,50 50,10,from(black),color-stop(0.1,white),color-stop(0.5,white),color-stop(0.5,red),color-stop(0.6,white),color-stop(0.9,white),to(blue));

白色区域是Radial的渐变范围，红色断点在白色的50%间。有没有搞清楚？现在我再改变一下，不再是同心圆了，内圆圆心向右20px偏移。

backgroud:-webkit-gradient(radial,50 50,50,70 50,10,from(black),color-stop(0.5,red),to(blue));

明白没？如果还没明白，回到白色示例来看：

background:-webkit-gradient(radial,50 50,50,70 50,10,from(black),color-stop(0.1,white),color-stop(0.5,white),color-stop(0.5,red),color-stop(0.6,white),color-stop(0.9,white),to(blue));

再不明白，我就没辙啦！一句话总结：所谓径向渐变，所谓圆到圆的渐变，就是指外圆周到内圆周的渐变。如果这个明白了，那么下面这个图就应该明白为什么会产生了：

backgroud:-webkit-gradient(radial,50 50,50,89 50,10,from(black),color-stop(0.5,red),to(blue));
外圆与内圆几乎内切，1px。

backgroud:-webkit-gradient(radial,50 50,50,90 50,10,from(black),color-stop(0.5,red),to(blue));
外圆与内圆内切。

backgroud:-webkit-gradient(radial,50 50,50,91 50,10,from(black),color-stop(0.5,red),to(blue));
内圆刚刚超出外圆1px，产生了两个交点和切线。

backgroud:-webkit-gradient(radial,50 50,50,150 50,10,from(black),color-stop(0.5,red),to(blue));
内圆已经离开外圆。

看看当内圆离开外圆时的白色范围：

background:-webkit-gradient(radial,50 50,50,70 50,10,from(black),color-stop(0.1,white),color-stop(0.5,white),color-stop(0.5,red),color-stop(0.6,white),color-stop(0.9,white),to(blue));

好了，更多的情况我就不继续了，自己可以去试验。

了解了原理，我们来做一个来自顶部的漫射光，开盏灯，嘿嘿：

backgroud:-webkit-gradient(radial,50 50,50,50 1,0,from(black),to(white));

贴一张我的设计，你懂得，只有一个div，没有任何图片，一个月前做的，当时还是稀里糊涂，效果现在看来并不好：

再贴一个实际应用场所，半个月前做的，有很多进步了：

额，绝密的英来网正式版界面发生泄漏事件鸟……So，不能继续了，下课下课！

稍等，下课前还有两件事：1、布置家庭作业。2、口水不能忘了喷。

四、家庭作业

实现一个椭圆形的径向渐变。

五、口水话

目前渐变还没有完全成熟，最麻烦的是Firefox和Webkit的实现写法差别太大，IE9 Beta也尚未提供支持。渐变类型也仅仅限于线性和径向，且径向渐变不能使用百分比来定义。还有一个问题，在没有GPU的情况下，大面积径向渐变（比如500X500）对渲染性能的影响极其大，甚至大过多个页面内容的叠加！这是我国庆节才发现的，当大面积使用径向渐变的时候，我们的所有交互动画都变得不流畅了。但是当GPU打开的时候，就没任何问题，这也从另外一个角度说明了GPU的重要性和它在可见的未来里所拥有的地位：那是必须的！但是目前Chrome的GPU在渲染上问题相当多，我正在就GPU的各种CSS3渲染问题和Chrome团队联系和沟通。

虽然还有很多很多问题，还有很多很多不足，还有很多很多限制，但是它已经可以解决很多问题了，尤其在减少图片的使用下，尤其在显示速度上，没有等待图片下载的过程，没有闪烁，直接渲染呈现，体验相当好。而且代码矢量，维护性通用性那根本不是图片能比拟的。

由于忙于英来网正式版的开发，所以根本没有时间来对自己围绕在HTML5上的技术应用和探索和经验心得进行整理成文。国庆期间花了一天时间把这篇文章整理出来了，算是个先行版，所谓前传。之后我又将扑到产品的开发上，离上线不远了，而英来网正式版上线之时就是《重构之美》第四部正式提笔连载之时。

下课！

贴个招聘：英来网招聘HTML5 JS交互开发两名，一名偏前端，一名偏后端。

工作方式：兼职。
工作内容：基于JQuery进行纯JS交互开发。
工作地点：杭州。（最好城西）
其他要求：
1、善于沟通，你主要是和我打交道。
2、对新技术要敏感，你发现没，我很前卫的，如果我说一起攻克web worker，你都不知web worker为何物，那搞个铲铲。
3、技术能力要过硬，最好三年以上JS开发经验，比如我说一起攻克web socket，结果你一个泡都冒不出来，那搞个铲铲。
4、偏前端的JS交互开发要熟悉Web标准，对结构和样式敏感，要不我们道不同不相为谋。
5、偏后端的JS交互开发要熟悉Java和数据库设计。
你将面对的是：
1、一个高尚而伟大的行业：教育。（真的，我一直很高兴自己选择了这样绝对昂首挺胸的行业，我做了一件正确的事，剩下的就是找到正确的方法，当一个好老师！想到这点，我就神经质的激动万分然后努力工作。）
2、一个追求自由和完美，神经质的领导：爆牙我。
3、一个激情四射的团队。
4、一个不排斥并最大限度拥抱新技术拥抱未来的项目。
5、一个匪夷所思的产品。

和我一起体验创业，一起打造一个惊心动魄的应用，把未来带入现在，把梦想照进现实。

待遇及回报：面议。
联系方式：zhengminlive@gmail.com（请附简历，欢迎畅谈）