<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom"><title type="text">博客园_超越起点 追随自由 我想故我所有</title><subtitle type="text">我看不见，我的明天，但今天，绝不重复昨天；顺风是滑翔，逆风才是飞翔，火烧过才能化凤凰！总想对你表白，我的心情是多么豪迈总想对你倾诉，我对生活是多么热爱</subtitle><id>http://feed.cnblogs.com/blog/u/6262/rss</id><updated>2012-02-11T09:20:51Z</updated><author><name>爆牙齿</name><uri>http://www.cnblogs.com/yuntian/</uri></author><generator>CNBlogs BlogServer</generator><link rel="alternate" type="text/html" href="http://www.cnblogs.com/yuntian/"/><link rel="self" type="application/atom+xml" href="http://feed.cnblogs.com/blog/u/6262/rss"/><entry><id>http://www.cnblogs.com/yuntian/archive/2011/04/13/2014343.html</id><title type="text">IE 10 终于走向完美了。</title><summary type="text">CSS3 GradientsCSS3 TransformsCSS3 TransitionsCSS3 3D Transforms</summary><published>2011-04-12T17:25:00Z</published><updated>2011-04-12T17:25:00Z</updated><author><name>爆牙齿</name><uri>http://www.cnblogs.com/yuntian/</uri></author><link rel="alternate" href="http://www.cnblogs.com/yuntian/archive/2011/04/13/2014343.html"/><link rel="alternate" type="text/html" href="http://www.cnblogs.com/yuntian/archive/2011/04/13/2014343.html"/><content type="html">&lt;p&gt;&lt;b&gt;CSS3 Gradients&lt;/b&gt;&lt;/p&gt;&#xD;
&lt;p&gt;&lt;b&gt;CSS3 Transforms&lt;/b&gt;&lt;/p&gt;&#xD;
&lt;p&gt;&lt;b&gt;CSS3 Transitions&lt;/b&gt;&lt;/p&gt;&#xD;
&lt;p&gt;&lt;b&gt;CSS3 3D Transforms&lt;/b&gt;&lt;/p&gt;&#xD;
&lt;img src="http://www.cnblogs.com/yuntian/aggbug/2014343.html?type=1" width="1" height="1" alt=""/&gt;&lt;p&gt;&lt;a href="http://www.cnblogs.com/yuntian/archive/2011/04/13/2014343.html" target="_blank"&gt;本文链接&lt;/a&gt;&lt;/p&gt;</content></entry><entry><id>http://www.cnblogs.com/yuntian/archive/2010/11/03/1868374.html</id><title type="text">中国互联网的鱼死网破新时代。</title><summary type="text">QQ和360的战斗大升级，中国互联网从软件共存竞争进入鱼死网破新时代。也许是良性的，国内企业的信任建立将上升到全新高度。也许是恶性的，用户将因无所可信而转向外企产品。至少现在，QQ和360，我谁都不信！至少现在，我信任GTalk或MSN。</summary><published>2010-11-03T11:44:00Z</published><updated>2010-11-03T11:44:00Z</updated><author><name>爆牙齿</name><uri>http://www.cnblogs.com/yuntian/</uri></author><link rel="alternate" href="http://www.cnblogs.com/yuntian/archive/2010/11/03/1868374.html"/><link rel="alternate" type="text/html" href="http://www.cnblogs.com/yuntian/archive/2010/11/03/1868374.html"/><content type="html">&lt;p&gt;QQ和360的战斗大升级，中国互联网从软件共存竞争进入鱼死网破新时代。&lt;/p&gt;&#xD;
&lt;p&gt;也许是良性的，国内企业的信任建立将上升到全新高度。&lt;/p&gt;&#xD;
&lt;p&gt;也许是恶性的，用户将因无所可信而转向外企产品。&lt;/p&gt;&#xD;
&lt;p&gt;至少现在，QQ和360，我谁都不信！&lt;/p&gt;&#xD;
&lt;p&gt;至少现在，我信任GTalk或MSN。&lt;/p&gt;&lt;img src="http://www.cnblogs.com/yuntian/aggbug/1868374.html?type=1" width="1" height="1" alt=""/&gt;&lt;p&gt;&lt;a href="http://www.cnblogs.com/yuntian/archive/2010/11/03/1868374.html" target="_blank"&gt;本文链接&lt;/a&gt;&lt;/p&gt;</content></entry><entry><id>http://www.cnblogs.com/yuntian/archive/2010/11/01/1865875.html</id><title type="text">前段时间是Flash大战HTML5，现在是SliverLight“被遗弃”，我啊羡慕你们的热闹。</title><summary type="text">有没有人想听爆牙齿的意见？少说多做。随便汇报一下工作情况：我已经开始全面应用SVG了，整个人比较鸡血，我发现我总是能找到鸡血然后自己注射。其实关于SVG半年前我就研究过其实用性，8月份我很想写一篇文章，就是对比PNG、CSS3和SVG，以及指出当时SVG最大弊端所在：当时SVG只能in Background或link，这意味着SVG就像iframe一样独立于HTML，这样一来关于SVG的技术也就独...</summary><published>2010-10-31T18:11:00Z</published><updated>2010-10-31T18:11:00Z</updated><author><name>爆牙齿</name><uri>http://www.cnblogs.com/yuntian/</uri></author><link rel="alternate" href="http://www.cnblogs.com/yuntian/archive/2010/11/01/1865875.html"/><link rel="alternate" type="text/html" href="http://www.cnblogs.com/yuntian/archive/2010/11/01/1865875.html"/><content type="html">&lt;p&gt;有没有人想听爆牙齿的意见？&lt;/p&gt;&#xD;
&lt;p&gt;&lt;strong&gt;少说多做。&lt;/strong&gt;&lt;/p&gt;&#xD;
&lt;hr /&gt;&#xD;
&lt;p&gt;随便汇报一下工作情况：&lt;/p&gt;&#xD;
&lt;p&gt;我已经开始全面应用SVG了，整个人比较鸡血，我发现我总是能找到鸡血然后自己注射。其实关于SVG半年前我就研究过其实用性，8月份我很想写一篇文章，就是对比PNG、CSS3和SVG，以及指出当时SVG最大弊端所在：当时SVG只能in Background或link，这意味着SVG就像iframe一样独立于HTML，这样一来关于SVG的技术也就独立了进不了队伍中，无法和HTML/CSS/JS等相互协同，并肩作战。这是我半年前怀着巨大兴奋研究后的巨大失落，然后我就放弃了。&lt;/p&gt;&#xD;
&lt;p&gt;大概一个月前一次例行查看，意外发现列表中出现了inline SVG in HTML5，接着发现IE9、FF4、Chrome 7都支持。SVG可以inline了！OMG！你们不知道当时我立刻就惊声尖叫了！挽起袖子我就开始筹划直接实用，通过这段时间在真实环境下的实用，我又有了新的心得和与PNG、CSS3的对比，我仍在不断的思考中，弊端和限制依旧很多，前天为了一个通用和简洁的设计，对着一个小小图标的编码实现我从下午想到凌晨，用了各种存储方式试验了无数种抽取方式还去把SVG教程查了又翻依旧找不到完美的解决办法，最后只好无奈的选择了折中。即便这样，也将实现同等视觉效果的字节数从&gt;&gt;40K降到了3K，而且是实时渲染瞬间显示。只可惜追求不到完美，我仍然耿耿于怀，因为完美的情况只需要1K左右。&lt;/p&gt;&#xD;
&lt;p&gt;前天晚上，我又去试验了SVG effects for HTML elements，自然的，你懂得，不好意思又尖叫了。尽管还非常的单薄而且不实用，但是它指出了一个未来：你可以对HTML进行PS那样的各种滤镜渲染，所不同的是PS是“CG动画”，而SVG是“实时渲染”！比如用高斯模糊让页面产生景深！这是我多年前设计弹窗的时候一直所向往的效果，在如今普及的层次化设计下，从来就没有过景深。你自己说，该还是不该尖叫？？？！！！&lt;/p&gt;&#xD;
&lt;p&gt;&lt;strong&gt;有损JPG—&gt;无损PNG—&gt;有限矢量CSS3—&gt;原生矢量SVG—&gt;莫名其妙Canvas。&lt;/strong&gt;Canvas是啥东东，我还没接触，目前的认知，SVG适合处理小元素，而Canvas是更大更自由的画布。无论如何，没关系，一条路慢慢慢慢滴，我就走过去鸟，慢慢慢慢滴，你就看不见我鸟。&lt;/p&gt;&#xD;
&lt;p&gt;随便哪条路，只要功夫深，铁棒磨成针。&lt;/p&gt;&#xD;
&lt;p&gt;当然啦，我也不假装客观和客套了，我的观点向来像鲜血一样灿烂：如果只从宏观上来看，Adobe的Flash和MS的Sliverlight，甚至包括红遍大江南北的Apple的Object C，面对开放的HTML5，哪儿来出路嘛！&lt;/p&gt;&lt;img src="http://www.cnblogs.com/yuntian/aggbug/1865875.html?type=1" width="1" height="1" alt=""/&gt;&lt;p&gt;&lt;a href="http://www.cnblogs.com/yuntian/archive/2010/11/01/1865875.html" target="_blank"&gt;本文链接&lt;/a&gt;&lt;/p&gt;</content></entry><entry><id>http://www.cnblogs.com/yuntian/archive/2010/10/18/1853939.html</id><title type="text">收藏一篇访谈并做笔记：《［独家］与周鸿祎谈乔布斯》</title><summary type="text">五点第一觉醒来，看到Apple4us上的一篇访谈《［独家］与周鸿祎谈乔布斯》，通读下来，甚是喜欢。周鸿祎的每一个回答我都非常认同，也想到了一些自己正在做的事，错误与正确。同时，这让我对周鸿祎这个人有全新的认识，不错，我立刻Follow了他的微博。在观点中我做了一些个人的批注和笔记。</summary><published>2010-10-18T00:39:00Z</published><updated>2010-10-18T00:39:00Z</updated><author><name>爆牙齿</name><uri>http://www.cnblogs.com/yuntian/</uri></author><link rel="alternate" href="http://www.cnblogs.com/yuntian/archive/2010/10/18/1853939.html"/><link rel="alternate" type="text/html" href="http://www.cnblogs.com/yuntian/archive/2010/10/18/1853939.html"/><content type="html">&lt;p&gt;五点第一觉醒来，看到Apple4us上的一篇访谈&lt;a href="http://apple4.us/2010/10/zhouhongyi-on-jobs.html"&gt;《［独家］与周鸿祎谈乔布斯》&lt;/a&gt;，通读下来，甚是喜欢。周鸿祎的每一个回答我都非常认同，也想到了一些自己正在做的事，错误与正确。同时，这让我对周鸿祎这个人有全新的认识，不错，我立刻Follow了他的微博。&lt;/p&gt;&#xD;
&lt;p&gt;在观点中我做了一些个人的批注和笔记。&lt;/p&gt;&#xD;
&lt;hr /&gt;&#xD;
&lt;pre &gt;十一之前，我有机会和周鸿祎坐下来聊聊乔布斯。&#xD;
&#xD;
这是奇特的一对。两人一中一洋，未曾谋面；两人分属消费电子和互联网两个领域；两人中一个执掌着市值近 3000 亿美元的公司，另一个还从未打造过一家上市公司⋯⋯但他们在某些方面又是类似的：充满争议性、富攻击性、与众不同。我无意标榜周鸿祎，但与他长叹三小时的过程的确酣畅，周心思敏捷，又富商界经验，便不乏有趣的见解。比如，周说从乔布斯身上他学到「企业的战略是可以来自于细节」，他追求像乔布斯一样提供「优雅的解决方案」，以及他认为自己在互联网电视革命方面比乔布斯想的更远。&#xD;
&#xD;
以下为访谈摘要。&#xD;
&#xD;
张亮：这次跟您来聊乔布斯，是因为乔布斯已经成为杰克·韦尔奇之后中国商界的一门「显学」，大家都想从他身上学点东西。不过这后面有几个问题：乔布斯什么可学之处？这个人是可以复制的吗？外界对于乔布斯的推崇之中，有没有什么南辕北辙之处？……不过所有问题之前，先来回答一个最基础的问题：你觉得乔布斯是怎样的一个人？&#xD;
&#xD;
周鸿祎：我看过几乎能找到的所有乔布斯的传记，网上关于他的资料也看过不少，恐怕中国比我更熟悉苹果的历史的人不多。最开始我觉得他是个很桀骜不驯、有创造力的创业者，后来佩服他的是他能东山再起。不过呢，最近三年有一个全新的感觉。&lt;b&gt;乔布斯从1975年出道到今天，干了35年——最近这三年仿佛是把35年的功力一掌击出&lt;/b&gt;——他用一款iPhone干掉了诺基亚，再回过身来用iPad对微软和英特尔发起很大冲击，如果算上之前用iPod超越索尼。这几个产品只是孤立的看，也不觉得别人想不出来，但乔布斯就好像进入了「飞花摘叶，即可伤人」的境界。那现在我觉得，乔布斯太伟大了，跟他的这些创新比，我们现在做事的格局都还不够。&#xD;
&#xD;
&lt;u style="color:#2A8BBE;text-decoration:none;"&gt;爆牙齿：很多人往往看重结果而忽视过程，喜欢泛泛讨论一些大而化之的东西而忽视点滴的积累。因为积累是个极其痛苦的过程，是个你看不见的过程。帮主的35年，一台电脑，一个系统，一个播放器，一个手机，一个平板。35年5个成功产品，用平均的算法，帮主这么勇猛的人也是7年做成功1件产品。想想自己的英来网也才2年半，即便算上海词的先行经验积累，也不过3年半，就算是帮主也还得积累一倍的时间，何况我何以和帮主相提并论，所以还鲜嫩得很，必须耐心！&lt;/u&gt;&#xD;
&#xD;
张亮：大概是这些成就让乔布斯俨然一种成功学。你怎么看这个热潮？&#xD;
&#xD;
周鸿祎：学乔布斯比较容易陷入两个误区。第一个是把乔布斯神化。我们都是人，就他是个神，那还有什么可以学的？其实乔布斯也是一个有七情六欲、缺点很明显的人。比如他对员工比较粗暴，比如他早年的合伙人沃兹尼亚克也被他骗过，再比如他跟女朋友生了个私生女不承认。这些都应该让你感觉乔布斯是个有血有肉的人，不是一个神，这才能去研究。第二个，你知道事后分析最大的问题是什么吗？因为事后分析总是很功利的看做一件事儿对自己的好处，没有看到完整的过程。不看来龙去脉只看孤立的成功，这就会让你得出很多奇奇怪怪的结论。只看iPhone、iPad和App Store的成功，就好像说你看到所有的成功公司都有一栋独立办公楼，那你就得出了结论说「有独立的办公楼是成为伟大公司的必要条件之一」。这种把不是成功真正的原因上升为经验，是非常害人的。现在有一些公司认为苹果不过如此，不去学它的DNA，只抄它的产品，这肯定是错的。&#xD;
&#xD;
张亮：你觉得应该怎么学习乔布斯？&#xD;
&#xD;
周鸿祎：我一直在想，究竟乔布斯为什么能想到iPhone这么一款产品？&#xD;
&#xD;
首先我觉得这肯定不是一个造化于密室，然后用几年时间去实现的灵感。我甚至可以说乔布斯一开始是没有战略的。为什么呢？&lt;b&gt;因为其实战略就是四句话：我是谁？我在哪儿？我做什么？我不做什么？&lt;/b&gt;像麦肯锡帮一些公司做的战略规划，往往是在成熟的行业去做同行分析，比如微软也会请专家说你看Google是怎么做的，但这种战略总是对一个已有的成熟套路的总结和改良。&lt;b&gt;但是苹果这种创新是颠覆，是走向一个未知领域。&lt;/b&gt;你对什么都是未知的，刚开始一定是摸着石头过河，但乔布斯不断的把握好每一步，再加上他很多年的各种积累——&lt;b&gt;这些积累我相信一开始是存在你脑海里某一个地方，并不起作用，但是你走到这一步的时候它就开始发挥作用了——最后才有一个从自发到自觉的过程。&lt;/b&gt;&#xD;
&#xD;
你回想一下当初的苹果（注：2001年），它也是没办法，它做电脑实在是卖不过戴尔，做操作系统也打不过Windows，就先做了一个外形很时尚的音乐播放器。&#xD;
&#xD;
我想第一版iPod出来时比尔·盖茨肯定在偷笑，说这兄弟肯定昏了头了，做了一个在中国珠海已经烂大街，随便几十块钱可以买一个的MP3播放器。&#xD;
&#xD;
但其实乔布斯非常尊重用户的需求。我相信他当时也受到了外界的启发，比如当时已经有了Napster这样的产品，证明年轻人非常欢迎这种东西——其实我们都知道音乐对青少年的重要性，当年我们上大学时谁没一个随身听？说是学英文，主要还是听歌，这是最本质的需求。可如果你不是非常重视用户的需求，你就会忽略它。&#xD;
&#xD;
大公司忽视这个需求，那些做MP3播放器的小公司知道这个需求又没有能力把事情做好。正是这样一个中间地带，就给了乔布斯一个机会：他能做操作系统，能做硬件，应用软件也能做。这些事儿都能自己干，做个MP3播放器，就像「杀鸡用牛刀」。&#xD;
&#xD;
我猜做iPod的时候也没想到日后的iPhone和iPad，只是它基于iPod做了很多探索。你看，他先把iPod从黑白屏幕变成一个很小的彩色屏幕，一开始只能看照片，然后这个屏幕再扩大，能看视频。这个时候你再加一个通话模块是不难想到的。等有了iPhone，你再想到把屏幕再放大变成iPad，也是顺理成章的——乔布斯的战略都不是大跨步的战略，而是一步一步的，他每一步都是在不断地捕捉当前的用户需求和市场状况，然后再往前走一步。&#xD;
&#xD;
iPod卖了一亿部之后再做iPhone，你不感觉水到渠成吗？可如果没有这些每一步的积累，没有用户的基础，如果第一步出来就是iPad，会怎么样？&#xD;
&#xD;
其实盖茨很早就有了平板电脑的想法，也早就做了智能手机。但盖茨犯了一个什么错误呢？就是盖茨手里有一个榔头，他把所有东西都当钉子。盖茨有Windows，而桌面上的Windows是针对鼠标和键盘的，它做手机操作系统时也是这么搞。其实平板电脑明明是用手触控的，你非要像用鼠标一样使用「开始」按钮去点开里面的程序，这不是很傻吗？这就是不考虑用户。&#xD;
&#xD;
但乔布斯非常的关注细节。你看乔布斯会趴在电脑上一个像素一个像素的看那些按钮的设计，像他曾经跟他的员工说，你要把图标做到让我想用舌头去舔一下。只有像乔布斯这么关注细节的CEO，才能真正去了解用户的需求。所以我不认为他做的所有事情都是一开始就从大方向上想好。相反你看英特尔、诺基亚这些公司做的战略，你会觉得所有的东西都很好，但就是离消费者太远，所以结果要么就是发现不了真实需求，要么就是已经在市场上被证明的马后炮的需求。&#xD;
&#xD;
所以我从乔布斯这里学到的一个很重要的事情就是：&lt;b&gt;企业的战略是可以来自于细节的。&lt;/b&gt;&#xD;
&#xD;
&lt;u style="color:#2A8BBE;text-decoration:none;"&gt;爆牙齿：做什么不做什么，这看起来很简单的问题，在实际操作中却是很棘手的问题，是最复杂的问题，因为诱惑太多。&#xD;
&#xD;
09我就属于没有抵抗住SNS的诱惑，做了一大堆社区相关的产品。宏观上来说，浪费了时间浪费了资源我也白发了很多工资白花了很多钱，不过我也想得开，做决策就是要承担失败的全部责任，最直接的就是经济责任。当然事情也有好的两面，一是正因为全部失败，我才逼出了核心产品找准了核心方向，而之后的一切思路甚至包括商业模式的建立就都属于水到渠成的延续。二是虽然SNS产品全部失败了，但是仍然获得了很多积累，产品设计的积累、用户数据的积累、底层技术的积累，这些都深刻的影响着一年后的现在和未来，仍发挥着巨大的作用。&#xD;
&#xD;
上周金山词霸产品复制了QQ，我表示激动不已。我激动是因为金山词霸在“做什么不做什么”上，已经彻底的写下四个大字：茫然无措。&lt;a href="http://www.englive.cn"&gt;英来网&lt;/a&gt;正式版上线后，一定会狠狠的赏金山词霸无数个天旋地转的耳光。&#xD;
&#xD;
当然，这只是源于我自己的信心。上周，天使来杭州，在我给他全面演示了即将成型的正式版并讲解了未来的发展思路后，他表示无论商业模式、产品等各方面都非常的靠谱，大大出乎他的意料和预期，非常的期待，我想，他应该也有雷同的信心了。他非常关心什么时候上线，我摊摊双手吐吐舌头表示无可奈何无可奉告无法预期，因为我们做的是一个没有过的产品，一个一切未知的领域。甚至不仅是产品和商业模式，还有技术，全是未知的，每一点都要海量的思考和探索。&#xD;
&#xD;
至于企业战略，对我而言，全是来自于细节，全是基于细节而产生的。大概是因为我还不具备从宏观去思考战略的资源和条件吧，完全是被逼向细节的。所以前段时候一个英孚教育的朋友和我在教育行业的宏观战略上沟通，我想也许他会觉得是在对牛弹琴，因为我始终只有一句话：大公司就是一坨屎一个屁，英来网如果将来变成大公司也是一坨屎一个屁。&lt;/u&gt;&#xD;
&#xD;
张亮：这就是你最近努力倡导的「微创新」。&#xD;
&#xD;
周鸿祎：创新不是大家想的那种，一个人特别牛逼，构思出一切。&lt;b&gt;我认为创新就是一种思维方式，或者分散，或者逆向，或者组合。它一定是有基础的。创新应该像我们玩游戏似的，走到某一步的时候突然出现一些新的线索。&lt;/b&gt;&#xD;
&#xD;
比如呢，从iPhone到iPad的过程中，最牛的一件事是打造App Store。但即使App Store，也不是一个伟大到别人想不到的东西。&#xD;
&#xD;
你自己想一想，如果你是一个真正的用户，不是一个手机发烧友，你今天拿到一款诺基亚手机，装软件的话，需要懂什么叫证书，什么叫签名，还得知道去哪儿下载，怎么装。这些东西就连我这样一个一个熟悉PC的人都不搞不懂。你不觉得其实这个需求已经放在那儿已经很多年了，只不过诺基亚从来把它忽视了吗？所以苹果做一个统一的、很方便的平台让你下载软件，这个想法难吗？不难。至于说这里的许多软件不是苹果做的，是别人做的跟它分账，这套商业模式也不难做。苹果之前已经有了iTunes，有了音乐和视频商店，已经解决了0.99美元卖一首歌的问题，那它再卖1.99美元、2.99美元的东西，没有任何问题。所以过去iTunes的很多实践到一定时候就成熟了，就会结出这个果实。&#xD;
&#xD;
张亮：所以你的结论是，学习乔布斯关注产品细节的一面？&#xD;
&#xD;
周鸿祎：我觉得他有一个特点，我是学到了。当然我看产品的时候，我就跟跳大神似的，灵魂出窍了。怎么说呢？就是我当时好像变成了一个「没有任何耐心、很急躁、对计算机对很多东西了解不多，甚至用东西很粗鲁的最小白的用户」。所以很多产品到我这儿一用，用不了几分钟我就找出毛病。其实你说，我是一个工程师，再难用的产品能难得住我吗？但恰恰我在用产品的时候变成一个最普通的用户，变得很挑剔。&#xD;
&#xD;
张亮：不过乔布斯很著名的一个习惯就是从来不做用户调查。&#xD;
&#xD;
周鸿祎：乔布斯其实只是不喜欢做焦点小组（Focus Group）。焦点小组的问题是，它太假。你把用户拉到一个语境里，问他很多问题，这一定会误导用户。&#xD;
&#xD;
但是我相信，乔布斯一定花很多时间在琢磨用户是怎么想的，我不相信说这东西都是在他心里一个人憋出来的。我相信乔布斯会在生活中问很多朋友，没准儿他会跟很多人去聊天，他也会有很大的阅读量，包括他会上网去看。比如说他做iPhone的时候不就说吗，每个人都有手机，但都觉得很难用，他自己也觉得很难用，因此就问为什么不能做一部不一样的手机。这就是他在了解用户的需求和想法。&#xD;
&#xD;
张亮：你是怎么了解用户需求和想法的？&#xD;
&#xD;
周鸿祎：我了解用户的方式很简单，我会经常会变成一个普通用户，去使用外面的公用电脑，这才是最真实的环境。我也会去看普通人的电脑，因为你可能不是安全专家，所以我在你的电脑上去用我们的软件，或者我问你的意见，比问专家的意见更可靠。我看《电脑报》、《中国电脑教育》这样的报纸，我很喜欢看上面的读者来信，这里面聚集了大量的用户反馈。&#xD;
&#xD;
这跟我的经历有关，我读书时就创立过公司，后来在方正我想的也是要把我的东西卖出去。所以很多时候我不是以技术人员的角度看我的产品，而是我会带着产品去听普通用户为什么不用它，或者为什么人家骂它。这种东西经历多了，你就慢慢地能从普通用户的角度去理解问题。&#xD;
&#xD;
&lt;u style="color:#2A8BBE;text-decoration:none;"&gt;爆牙齿：关于用户需求和用户体验的把握来说，我略有不同看法，无法展开。简而言之，一方面我完全认同设计产品就不可能成为纯粹的普通用户，另一方面我信奉那句经典：汽车被发明之前，用户只会想要一匹更快的马。所以我认为，如果你真正做到了100%站在普通用户的角度去设计产品，那就是一个平庸的产品。所以我喜欢创造需求，比满足需求更有趣更好玩更充满成就感，当然风险更大啰，赌博嘛！&#xD;
&#xD;
当然，我加粗的那句话，所有的创造都源于积累逐步形成而非凭空想象。马到汽车，何其漫长。所以从这个角度，创造挺麻烦的，因为作为用户会对创造新鲜，而作为创造者，由于一点一点的改变和创造历程中，新鲜感在不断的被消耗直到麻木，创造者的新鲜感实际上是很难维持的。我对乔布斯的一个佩服就是在他经历了琐碎工作完成创造后，仍能非常鸡血狗血的把他的创造讲给世界听，在理论上他应该已经失去了新鲜感的情况下，他仍能在台上“不可思议”“不可想象”等鸡飞狗跳的乱叫。说实话，这真的是个能力，很重要的保持新鲜感保持激情的能力。我给天使演示交互的时候，天使觉得很震撼，但我却不能100%的找到当初开发时的兴奋感，因为作为创造者我已经看了用了半年多了，而我们团队的人估计比我更麻木和更没有新鲜感。&#xD;
&#xD;
通常厨师都没好的食欲，而如何在做了一桌满汉全席的美味后仍能口水涟涟狼吞虎咽，我还需要努力，我保持激情的能力还远远不够，我的鸡血还远远不够，远远不够～～～&lt;/u&gt;&#xD;
&#xD;
张亮：你刚才讲到乔布斯从iPod到iPad，并不是基于战略，而是摸着石头过河闯出来的。其实你自己也是在奇虎做了很多事情，最后在安全领域做出了成绩。这两件事，都是有偶然性的，甚至是盲打误撞。但平时你也能看到很多创业者，他们有很多奇思妙想，但就是选错了方向，而且调整不过来。为什么你们能闯对领域，他们闯不对领域？&#xD;
&#xD;
周鸿祎：你别忘了，我进入安全领域时，已经36、7岁了。乔布斯回苹果时也42岁了，iPod又是在那几年之后了。我们的之前的经历和积累是很丰富的。&lt;b&gt;我认为你看到的那些不靠谱的人，他一定没有经验，基本上什么都没干过，只是凭想象。其实有的时候你也会看到有的人闯对了领域，但是做不起来。&lt;/b&gt;&#xD;
&#xD;
我举个例子，很多人说我做浏览器，是从2004年就投资了世界之窗，当时我就踌躇满志。错了。当时是我的老部下要走了，他在我这儿干了几年，我把他培养起来，他说他要去做个浏览器，你要帮我。其实我当时对做浏览器不太看好，因为那时候我还不敢做浏览器，所以我做浏览器插件去控制浏览器。这是3721的思路。而且我也知道，国内做的浏览器没有核心技术，就是IE加一个外壳。但是他说这么多年我也替你做了很多事，从情理上我当然说，我就会支持你。这件事没有那么功利。&#xD;
&#xD;
后来为什么突然要收购世界之窗呢？外面有很多分析，但是我告诉你最真实的原因。我们做360的时候，越做越发现说大部分安全入侵是从浏览器开始的，用户浏览网页就被挂马了，我们当然会很自然的想到要解决浏览器的安全。那你说这次我为什么不做个插件来干这事呢？你知道我干3721插件让我吃够了骨头了，所以我肯定就不会再想干插件了。所以这时候我就会自然想到世界之窗。&#xD;
&#xD;
&lt;b&gt;我一直在说，一个人一定是复合的，当你做一个决策，它是来自许多方面的。所以你的经验不足，你的积累不足，你是做不出某个决策的。&lt;/b&gt;&#xD;
&#xD;
我们做安全做到那程度了，因为我做的那个投资，对浏览器的理解也越来越深入，浏览器市场的变化被我意识到了，我的经验跟原来不一样，已经超越原来做插件的时候，这个决策很自然就出来了。&#xD;
&#xD;
我再举个例子，今天很多人说Foursquare，都在琢磨如何抄。你们知道它的诞生经历吗？他的创始人很早前就在做城市信息搜索（city search），不太成功，后来又做一个基于定位的酒吧交友，也不太成功就卖给了Google。到最后，他把城市信息搜索加上定位交友加上一些游戏性，变成了Foursquare。就像做火药，你把硫磺加木炭不行，把木炭加硝酸也不行，但把这三样东西按一定比例掺在一起就变成一个大炸弹了。变成炸弹之后，大家就会说，只要你同时研究硫磺、硝酸和木炭，你就能做炸弹了，但这是不行的，没有东西是这么研究出来的。&#xD;
&#xD;
总的来说，人在年轻的时候做事不能太功利，你如果踏踏实实把每一件事把握好，即使当时没收获，它也在你的DNA里埋了一个东西，未来很多东西会被串在一起，发挥作用。&#xD;
&#xD;
&lt;u style="color:#2A8BBE;text-decoration:none;"&gt;爆牙齿：不断地，不断地强调积累强调经验强调过程，而不是结果或成功。这我很喜欢，因为结果和成功是无所事事的人茶余饭后的闲聊话题，男人之间聊这些和女人之间拉家常没啥本质区别，属于生活娱乐。真刀实枪的实力还是学习、积累、沉淀，然后成长。&lt;b&gt;成长！！！&lt;/b&gt;&lt;/u&gt;&#xD;
&#xD;
张亮：外界看来，乔布斯是前互联网时代的产品经理，他用很长时间打磨一款产品，近乎独断的决定要什么功能不要什么功能，比如iPhone刚出来时没有很多用户觉得最重要的拷贝粘贴功能。对于互联网时代的产品经理们，这是不是不可复制的？&#xD;
&#xD;
周鸿祎：我觉得不是这样的。做产品，一定要做优雅方案，不要做完美方案。比如iPad，很多人列出来iPad的20个缺点，我觉得这个思考点就错了。iPad用于工作肯定不方便，它不能多任务、输入也不方便。但人家没有设计成那个样子。如果它的定位是去击败笔记本，那它到处都是缺点，它就死了。但iPad的定位就是一个娱乐工具——能够满足所有人需求的东西是没有个性，而且你越追求完美，方案就越复杂，周期就越长。而创新追求的就是在一个点上打动人。&#xD;
&#xD;
这个东西很复杂，我刚说使用产品时我能模拟主流用户，但同时你不能被用户牵着鼻子走，你要学会过滤用户的声音。因为每个用户有每个用户的想法，有的能代表一类需求，但有的你一看就只能说对不起，这个我做不了。&#xD;
&#xD;
这是一个需要很长时间积累的事情。有的用户需求你一看就觉得很重要，有的表面看觉得没什么，但挖掘下去，能否看到用户都没有意识到的需求。&#xD;
&#xD;
作为产品负责人，你永远要想办法去进球，而不是关注于不漏球，光想着怎么不漏球，也进不了球。&#xD;
&#xD;
张亮：你说做产品要追求优雅，但优雅这个概念很难定义的。&#xD;
&#xD;
周鸿祎：谁说的？优雅就是用你最少的资源、最合适的方法去满足用户的需求，不要过度去解决。&#xD;
&#xD;
张亮：相信很多创业公司都在思考一个问题：该不该像乔布斯一样精益求精再发布产品？&#xD;
&#xD;
周鸿祎：不要等到产品很精益求精了再发布。事实上，我认为互联网时代发布产品有点像参加聚会，你自己先说一个想法，别人再给你补充。20年前你做一款产品，要先做市场调查，天天要做计划做预测，也不知道怎么获得用户反馈。但互联网给我们提供了机会，你的产品今天发布，明天就能看到反馈，要充分利用这个优势持续不断的改进。所以要有精益求精的精神，但想清楚没有产品会做到完美。&#xD;
&#xD;
&lt;u style="color:#2A8BBE;text-decoration:none;"&gt;爆牙齿：略有不同的看法，举个不靠谱的例子：美国就是靠两颗原子弹结束了混乱的二战，如果把原子弹拆成子弹还成么？So，这是一个阶段性的选择问题，没有万能的定理。&lt;/u&gt;&#xD;
&#xD;
张亮：在乔布斯的诸多决策中，有没有什么是你认为明显错误或看不懂的？&#xD;
&#xD;
周鸿祎：他的AppleTV就很不成功，我觉得在这个问题上他想的还没我想的明白。&#xD;
&#xD;
当年我看陈天桥同志和他的盒子战略不成功，就一直在思考这个问题。后来我也买了好几台Wii，好几台PS3，好几台Xbox 360，有的送人，有的就当蓝光播放机用。后来我发现，通过电视控制客厅是一个很大的战略，绝对不能用做电脑的思路去做。就像微软用Windows的思路去做手机和平板电脑失败了，苹果做AppleTV时也用的电脑思路：你要通过无线把你电脑里的视频转到电视上看。我觉得这个思路是极端错误的，普通人用遥控器连PC，立马就不会操作了——我觉得电视是世界上要做到最简单的电子产品，因为普通老头老太太都得会用。&#xD;
&#xD;
我投资了一家机顶盒公司，非常简单，只要连上网，另一头连上电源，网上所有的P2P的视频资源你都可以看，没有所谓的下载的概念。你设想下，你拿到一个盒子再接上电视，你的期望当然是五分钟就能看电影，如果告诉你今天晚上看不了，明天早上再看，你就立马没有心情了。所以苹果做AppleTV，还欠缺一件事，就是一张P2P网络。&#xD;
&#xD;
这次Google TV做的也不对，为什么呢？里面做了太多的功能，太复杂。我应该给施密特写封信。&#xD;
&#xD;
&lt;u style="color:#2A8BBE;text-decoration:none;"&gt;爆牙齿：观点靠谱。确实啊，在我们年轻人为Apple TV和Google TV折腾的时候，没想过电视是什么电子产品。真正是最简单的电子产品，要把世界上最复杂的电子产品电脑移植到世界上最简单的电子产品电视，虽然一字之差，实在是千里之遥，路漫漫。客厅这个战场看来还很未来。&lt;/u&gt;&#xD;
&#xD;
张亮：严格的说，苹果并非互联网公司。它有音乐业务和广告业务，大家也在猜测他会进入搜索、社交市场，你怎么看苹果的网络战略部署？&#xD;
&#xD;
周鸿祎：每家公司都有自己的DNA。苹果也有它的DNA，Google做硬件一定做不过它，但也许苹果做搜索引擎就是做不过Google。我感觉他们对互联网、对社区的理解还是差距很大的。现在它手里这么多现金，应该收购一些公司。&#xD;
&#xD;
不过我个人认为有些东西是个命，就像苹果能做高端市场，这种气质学别人不来，这就跟你身上可以穿满名牌但你的气质就是不像一个英国三代的贵族。还是做最好的自己比较好。&#xD;
&#xD;
张亮：最后的问题：你心目中乔布斯的接班人应该是什么样的？&#xD;
&#xD;
周鸿祎：再找一个乔布斯是不太可能了，应该是萧规曹随吧，他制定的方向和战略，继任者追随，依然会是很大的公司，不过未来的机会可能抓不到了。&#xD;
&#xD;
&lt;/pre&gt;&lt;img src="http://www.cnblogs.com/yuntian/aggbug/1853939.html?type=1" width="1" height="1" alt=""/&gt;&lt;p&gt;&lt;a href="http://www.cnblogs.com/yuntian/archive/2010/10/18/1853939.html" target="_blank"&gt;本文链接&lt;/a&gt;&lt;/p&gt;</content></entry><entry><id>http://www.cnblogs.com/yuntian/archive/2010/10/08/1827993.html</id><title type="text">重构之美－浴火重生的火凤凰CSS3【前传：Gradient】</title><summary type="text">叮叮叮，铛铛铛，上课了上课了，同学们挨个坐好，爆老师要点名啦！额，在上课之前先说一下，本套课程所有图例或示例包括以后涉及到的动画，我都将使用CSS3来设计，不采用一张图片，所以请使用Chrome浏览器。否则你看到乱七八糟的东西或一片空白，I Don't Care！一、Gradient是什么东西？这个问题比较初级，不过初级也能有高级的说法和理解，且听我的忽悠～我记得曾经在读《硅谷革命》的时候，乔帮主...</summary><published>2010-10-07T19:31:00Z</published><updated>2010-10-07T19:31:00Z</updated><author><name>爆牙齿</name><uri>http://www.cnblogs.com/yuntian/</uri></author><link rel="alternate" href="http://www.cnblogs.com/yuntian/archive/2010/10/08/1827993.html"/><link rel="alternate" type="text/html" href="http://www.cnblogs.com/yuntian/archive/2010/10/08/1827993.html"/><content type="html">&lt;p&gt;叮叮叮，铛铛铛，上课了上课了，同学们挨个坐好，爆老师要点名啦！&lt;/p&gt;&#xD;
&lt;p&gt;额，在上课之前先说一下，本套课程所有图例或示例包括以后涉及到的动画，我都将使用CSS3来设计，不采用一张图片，所以请使用Chrome浏览器。否则你看到乱七八糟的东西或一片空白，&lt;b style="color:#FE280E;"&gt;I Don't Care！&lt;/b&gt;&lt;/p&gt;&#xD;
&lt;p&gt;&lt;b&gt;一、Gradient是什么东西？&lt;/b&gt;&lt;/p&gt;&#xD;
&lt;p&gt;这个问题比较初级，不过初级也能有高级的说法和理解，且听我的忽悠～&lt;/p&gt;&#xD;
&lt;p&gt;我记得曾经在读《硅谷革命》的时候，乔帮主说圆角矩形无处不在，然后在那个技术尚不成熟的年代，追求完美的帮主定义下圆角矩形，并运用到了苹果的所有设计上。是的，圆角确实很普及，但是直角矩形的设计依然存在，且不说1%幅度的视觉直角矩形，就是0幅度的纯直角矩形也是大量存在的，而且还不少，随便就能找出例子来，比如书本。比如，三角形，额，你能给三角形加一点圆角上去么？&lt;/p&gt;&#xD;
&lt;p&gt;但是色彩，却是没有纯色的存在。也许你会说纯色的设计无处不在。是，纯色设计确实普遍，但是真正进入你的眼睛，你看见的，你感受到的，你体验到的，却不会是纯色，为什么？？？&lt;/p&gt;&#xD;
&lt;p&gt;光啊！你生活在一个漫射光的世界里，只要有光，色彩就不会纯净，最多无限的接近纯净。如果你要说没有光的时候就是纯色了，纯黑。呵呵，是这样吗？真正没有光的时候，你根本都不存在对色彩的感知。没有白色，何为黑色？&lt;/p&gt;&#xD;
&lt;p&gt;所以，我要说：真正无处不在的，是渐变，因为，光，无处不在。&lt;/p&gt;&#xD;
&lt;p&gt;网页设计，我们经常使用到光使用到渐变，长久以来这些都处理为图片，而图片天生的弊端使得我们非常小心谨慎的使用。我们大量使用水平或垂直的规则渐变而回避掉圆形的斜线的合成的不规则渐变，因为只有规则渐变才能平铺，因为不规则渐变存为8bit的png会产生色阶，存为24bit的png文件很大，而存为jpg则因失去精度而模糊，找不到平衡点。于是充斥在页面上的是大量的垂直的规则的渐变，但这显然和真实情况下光的漫射、叠加、混合相去甚远。&lt;/p&gt;&#xD;
&lt;p&gt;而CSS3的Gradient，就是这个平衡点，尽管它仍不够完美。&lt;/p&gt;&#xD;
&lt;p&gt;&lt;b&gt;二、Linear Gradient【线性渐变——点到点的渐变】&lt;/b&gt;&lt;/p&gt;&#xD;
&lt;p&gt;这很简单也很容易理解，就是从起点到终点的直线渐变。在这条线上你可以加入色彩的断点。代码为：&lt;/p&gt;&#xD;
&lt;p&gt;&lt;i style="font:14px arial;"&gt;-webkit-gradient(linear,&lt;b style="color:#AAD010;font:14px arial;"&gt;&lt;u&gt;0% 0%&lt;/u&gt;&lt;/b&gt;,&lt;b style="color:#2A8BBE;font:14px arial;"&gt;&lt;u&gt;0% 100%&lt;/u&gt;&lt;/b&gt;,from(#FFF),&lt;b style="color:#ff7f00;font:14px arial;"&gt;color-stop(0.5,#999)&lt;/b&gt;,to(#000));&lt;/i&gt;&lt;/p&gt;&#xD;
&lt;p&gt;绿色为起点坐标，蓝色为终点坐标，橙色为断点位置（0.5表示50%）与色彩。以下为几种线性渐变示例：&lt;/p&gt;&#xD;
&lt;p style="color:#FFF;font:12px arial;background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));"&gt;左上（0% 0%）到右上（0% 100%）即从左到右水平渐变：&lt;br /&gt;background-image:-webkit-gradient(linear,&lt;b&gt;&lt;u&gt;0% 0%,100% 0%,&lt;/u&gt;&lt;/b&gt;from(#2A8BBE),to(#FE280E));&lt;/p&gt;&#xD;
&lt;p style="color:#FFF;font:12px arial;background-image:-webkit-gradient(linear,0% 0%,0% 100%,from(#2A8BBE),to(#FE280E));"&gt;左上到左下即从上到下垂直渐变：&lt;br /&gt;background-image:-webkit-gradient(linear,&lt;b&gt;&lt;u&gt;0% 0%,0% 100%,&lt;/u&gt;&lt;/b&gt;from(#2A8BBE),to(#FE280E));&lt;/p&gt;&#xD;
&lt;p style="color:#FFF;font:12px arial;background-image:-webkit-gradient(linear,0% 0%,100% 100%,from(#2A8BBE),to(#FE280E));"&gt;左上到右下即斜线渐变：&lt;br /&gt;background-image:-webkit-gradient(linear,&lt;b&gt;&lt;u&gt;0% 0%,100% 100%,&lt;/u&gt;&lt;/b&gt;from(#2A8BBE),to(#FE280E));&lt;/p&gt;&#xD;
&lt;p style="color:#FFF;font:12px arial;background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),color-stop(0.33,#AAD010),color-stop(0.66,#FF7F00),to(#FE280E));"&gt;水平渐变，33%处为绿色，66%处为橙色：&lt;br /&gt;background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),&lt;b&gt;&lt;u&gt;color-stop(0.33,#AAD010),color-stop(0.33,#FF7F00),&lt;/u&gt;&lt;/b&gt;to(#FE280E));&lt;/p&gt;&#xD;
&lt;p&gt;留意没？渐变是作为background-image存在，那么就可以做一些通用处理，比如同样的渐变光加不同的背景色：&lt;/p&gt;&#xD;
&lt;p style="color:#FFF;font:12px arial;border-color:#2A8BBE;background:-webkit-gradient(linear,0% 0%,0% 100%,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;"&gt;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))) &lt;b&gt;&lt;u&gt;#2A8BBE&lt;/u&gt;&lt;/b&gt;;&lt;/P&gt;&#xD;
&lt;p style="color:#FFF;font:12px arial;border-color:#AAD010;background:-webkit-gradient(linear,0% 0%,0% 100%,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;"&gt;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))) &lt;b&gt;&lt;u&gt;#AAD010&lt;/u&gt;&lt;/b&gt;;&lt;/P&gt;&#xD;
&lt;p style="color:#FFF;font:12px arial;border-color:#FF7F00;background:-webkit-gradient(linear,0% 0%,0% 100%,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;"&gt;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))) &lt;b&gt;&lt;u&gt;#FF7F00&lt;/u&gt;&lt;/b&gt;;&lt;/P&gt;&#xD;
&lt;p style="color:#FFF;font:12px arial;border-color:#FF7F00;background:-webkit-gradient(linear,0% 0%,0% 100%,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;"&gt;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))) &lt;b&gt;&lt;u&gt;#FE280E&lt;/u&gt;&lt;/b&gt;;&lt;/P&gt;&#xD;
&lt;p&gt;试试拉伸浏览器的宽度，渐变不错吧，色彩不错吧，嘿嘿，那可是英来网的CI色彩体系。&lt;/p&gt;&#xD;
&lt;p&gt;线性渐变很简单，本不打算说的，算热热身吧，今天的重头戏是接下来的硬骨头：Radial Gradient。&lt;/p&gt;&#xD;
&lt;p&gt;&lt;b&gt;三、Radial Gradient【径向渐变——圆到圆的渐变】&lt;/b&gt;&lt;/p&gt;&#xD;
&lt;p&gt;在讲解这个属性前，先要咬文嚼字一下，Radial是什么意思？这很关键！&lt;/p&gt;&#xD;
&lt;p&gt;相关的中文翻译有两种：1、径向。2、放射。我不用Photoshop，所以不清楚Photoshop中Radial是如何翻译的，又是如何设置的。在Firework中，Radial被译为放射，其设置也是放射，一根线为半径，从圆心到圆周渐变。为什么我要特意这样咬文嚼字一下？很长一段时间我都没搞清楚这种渐变该怎么设置，前天我给我们的手绘妹妹讲解这个属性的时候，在她的提示下，我才发现为什么我一直搞不清楚这种渐变是怎么实现的即便我已经使用多次了，她反过来给我上了一课，让我明白了原理。美术专业的敏感是不一样，当我给她说两个圆的渐变时，她一下就理解了。最后我发现我搞不清楚的根本原因就在于这个词的理解上，我是按照Firework的放射渐变在理解，按照圆心到圆周这样的起点终点渐变方式在理解，这是一个天大的错误。&lt;/p&gt;&#xD;
&lt;p&gt;&lt;b style="color:#FE280E;"&gt;So，记住了，这不是从一个点到一个点的渐变，而从一个圆到一个圆的渐变。不是放射渐变而是径向渐变。&lt;/b&gt;好了，下面我说说什么叫圆到圆的渐变，你现在可以先自己想象一下再接着往下看。其实只要不陷在点到点的渐变上，这个看起来复杂的属性其实很好理解的，当我从该死的点到点跳出来后一下就理解了。&lt;/p&gt;&#xD;
&lt;p&gt;首先来看代码，从一个圆到另一个圆的渐变，同样你可以在过程中加入色彩断点，代码为：&lt;/p&gt;&#xD;
&lt;p&gt;&lt;i style="font:14px arial;"&gt;-webkit-gradient(radial,&lt;b style="color:#AAD010;font:14px arial;"&gt;&lt;u&gt;50 50,50,&lt;/u&gt;&lt;/b&gt;&lt;b style="color:#2A8BBE;font:14px arial;"&gt;&lt;u&gt;50 50,0,&lt;/u&gt;&lt;/b&gt;from(black),&lt;b style="color:#ff7f00;font:14px arial;"&gt;&lt;u&gt;color-stop(0.5,red),&lt;/u&gt;&lt;/b&gt;to(blue))&lt;/i&gt;&lt;/p&gt;&#xD;
&lt;p&gt;绿色是起始圆的圆心坐标和半径，蓝色是目标圆的圆心坐标和半径，红色是断点的位置和色彩。这里我提醒一下，和放射由内至外不一样，径向由外到内的渐变，刚好相反。好了，就这段代码你能想象出来这是一个什么渐变吗？首先这是两个同心圆，外圆半径为50px，内圆半径为0，那么就是从黑色到红色再到蓝色的正圆形渐变。下面就是这段代码的效果：&lt;/p&gt;&#xD;
&lt;p style="padding-left:110px;font:12px arial;color:#FFF;height:100px;background:-webkit-gradient(radial,50 50,50,50 50,0,from(black),color-stop(0.5,red),to(blue));"&gt;backgroud:-webkit-gradient(radial,50 50,50,50 50,0,from(black),color-stop(0.5,red),to(blue));&lt;/p&gt;&#xD;
&lt;p&gt;同心圆是最简单的，也是最容易产生点到点误解，因为一看就是从黑色到红色再从红色到蓝色，一条直线。实际上不是这样的，现在我小改一下，仍是同心圆，不过内圆半径改为10px。&lt;/p&gt;&#xD;
&lt;p style="padding-left:110px;font:12px arial;color:#FFF;height:100px;background:-webkit-gradient(radial,50 50,50,50 50,10,from(black),color-stop(0.5,red),to(#blue));"&gt;backgroud:-webkit-gradient(radial,50 50,50,50 50,&lt;b&gt;&lt;u&gt;10&lt;/u&gt;&lt;/b&gt;,from(black),color-stop(0.5,red),to(blue));&lt;/p&gt;&#xD;
&lt;p&gt;有没有问题？我问一个：为什么中间有一片纯蓝色？如果你疑惑，那么你仍是用放射思路去看的。现在我用纯色来指明，渐变的范围在哪里。&lt;/p&gt;&#xD;
&lt;p style="padding-left:110px;font:12px arial;color:#FFF;height:100px;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));"&gt;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));&lt;/p&gt;&#xD;
&lt;p&gt;白色区域是Radial的渐变范围，红色断点在白色的50%间。有没有搞清楚？现在我再改变一下，不再是同心圆了，内圆圆心向右20px偏移。&lt;/p&gt;&#xD;
&lt;p style="padding-left:110px;font:12px arial;color:#FFF;height:100px;background:-webkit-gradient(radial,50 50,50,70 50,10,from(black),color-stop(0.5,red),to(#blue));"&gt;backgroud:-webkit-gradient(radial,50 50,50,&lt;b&gt;&lt;u&gt;70&lt;/u&gt;&lt;/b&gt; 50,10,from(black),color-stop(0.5,red),to(blue));&lt;/p&gt;&#xD;
&lt;p&gt;明白没？如果还没明白，回到白色示例来看：&lt;/p&gt;&#xD;
&lt;p style="padding-left:110px;font:12px arial;color:#FFF;height:100px;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));"&gt;background:-webkit-gradient(radial,50 50,50,70 50,10,from(black),&lt;b&gt;&lt;u&gt;color-stop(0.1,white),color-stop(0.5,white)&lt;/u&gt;&lt;/b&gt;,color-stop(0.5,red),&lt;b&gt;&lt;u&gt;color-stop(0.6,white),color-stop(0.9,white),&lt;/u&gt;&lt;/b&gt;to(blue));&lt;/p&gt;&#xD;
&lt;p&gt;再不明白，我就没辙啦！&lt;b style="color:#FE280E;"&gt;一句话总结：所谓径向渐变，所谓圆到圆的渐变，就是指外圆周到内圆周的渐变。&lt;/b&gt;如果这个明白了，那么下面这个图就应该明白为什么会产生了：&lt;/p&gt;&#xD;
&lt;p style="padding-left:110px;font:12px arial;color:#FFF;height:100px;background:-webkit-gradient(radial,50 50,50,89 50,10,from(black),color-stop(0.5,red),to(#blue));"&gt;backgroud:-webkit-gradient(radial,50 50,50,&lt;b&gt;&lt;u&gt;89&lt;/u&gt;&lt;/b&gt; 50,10,from(black),color-stop(0.5,red),to(blue));&lt;br /&gt;外圆与内圆几乎内切，1px。&lt;/p&gt;&#xD;
&lt;p style="padding-left:110px;font:12px arial;color:#FFF;height:100px;background:-webkit-gradient(radial,50 50,50,90 50,10,from(black),color-stop(0.5,red),to(#blue));"&gt;backgroud:-webkit-gradient(radial,50 50,50,&lt;b&gt;&lt;u&gt;90&lt;/u&gt;&lt;/b&gt; 50,10,from(black),color-stop(0.5,red),to(blue));&lt;br /&gt;外圆与内圆内切。&lt;/p&gt;&#xD;
&lt;p style="padding-left:110px;font:12px arial;color:#FFF;height:100px;background:-webkit-gradient(radial,50 50,50,91 50,10,from(black),color-stop(0.5,red),to(#blue));"&gt;backgroud:-webkit-gradient(radial,50 50,50,&lt;b&gt;&lt;u&gt;91&lt;/u&gt;&lt;/b&gt; 50,10,from(black),color-stop(0.5,red),to(blue));&lt;br /&gt;内圆刚刚超出外圆1px，产生了两个交点和切线。&lt;/p&gt;&#xD;
&lt;p style="padding-left:110px;font:12px arial;color:#FFF;height:100px;background:-webkit-gradient(radial,50 50,50,150 50,10,from(black),color-stop(0.5,red),to(#blue));"&gt;backgroud:-webkit-gradient(radial,50 50,50,&lt;b&gt;&lt;u&gt;150&lt;/u&gt;&lt;/b&gt; 50,10,from(black),color-stop(0.5,red),to(blue));&lt;br /&gt;内圆已经离开外圆。&lt;/p&gt;&#xD;
&lt;p&gt;看看当内圆离开外圆时的白色范围：&lt;/p&gt;&#xD;
&lt;p style="padding-left:110px;font:12px arial;color:#FFF;height:100px;background:-webkit-gradient(radial,50 50,50,150 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));"&gt;background:-webkit-gradient(radial,50 50,50,70 50,10,from(black),&lt;b&gt;&lt;u&gt;color-stop(0.1,white),color-stop(0.5,white)&lt;/u&gt;&lt;/b&gt;,color-stop(0.5,red),&lt;b&gt;&lt;u&gt;color-stop(0.6,white),color-stop(0.9,white),&lt;/u&gt;&lt;/b&gt;to(blue));&lt;/p&gt;&#xD;
&lt;p&gt;好了，更多的情况我就不继续了，自己可以去试验。&lt;/p&gt;&#xD;
&lt;p&gt;了解了原理，我们来做一个来自顶部的漫射光，开盏灯，嘿嘿：&lt;/p&gt;&#xD;
&lt;p style="padding-left:110px;font:12px arial;color:#FFF;height:100px;background:-webkit-gradient(radial,50 50,50,50 1,0,from(black),to(white));"&gt;backgroud:-webkit-gradient(radial,50 50,50,50 1,0,from(black),to(white));&lt;/p&gt;&#xD;
&lt;p&gt;贴一张我的设计，你懂得，只有一个div，没有任何图片，一个月前做的，当时还是稀里糊涂，效果现在看来并不好：&lt;/p&gt;&#xD;
&lt;p&gt;&lt;img src="http://images.cnblogs.com/cnblogs_com/yuntian/49141/o_2010100802.png" /&gt;&lt;/p&gt;&#xD;
&lt;p&gt;再贴一个实际应用场所，半个月前做的，有很多进步了：&lt;/p&gt;&#xD;
&lt;p&gt;&lt;img src="http://images.cnblogs.com/cnblogs_com/yuntian/49141/o_2010100801.png" /&gt;&lt;/p&gt;&#xD;
&lt;p&gt;额，绝密的&lt;a href="http://www.englive.cn"&gt;英来网&lt;/a&gt;正式版界面发生泄漏事件鸟……So，不能继续了，下课下课！&lt;/p&gt;&#xD;
&lt;p&gt;稍等，下课前还有两件事：1、布置家庭作业。2、口水不能忘了喷。&lt;/p&gt;&#xD;
&lt;p&gt;&lt;b&gt;四、家庭作业&lt;/b&gt;&lt;/p&gt;&#xD;
&lt;p&gt;实现一个椭圆形的径向渐变。&lt;/p&gt;&#xD;
&lt;p&gt;&lt;b&gt;五、口水话&lt;/b&gt;&lt;/p&gt;&#xD;
&lt;p&gt;目前渐变还没有完全成熟，最麻烦的是Firefox和Webkit的实现写法差别太大，IE9 Beta也尚未提供支持。渐变类型也仅仅限于线性和径向，且径向渐变不能使用百分比来定义。还有一个问题，在没有GPU的情况下，大面积径向渐变（比如500X500）对渲染性能的影响极其大，甚至大过多个页面内容的叠加！这是我国庆节才发现的，当大面积使用径向渐变的时候，我们的所有交互动画都变得不流畅了。但是当GPU打开的时候，就没任何问题，这也从另外一个角度说明了GPU的重要性和它在可见的未来里所拥有的地位：那是必须的！但是目前Chrome的GPU在渲染上问题相当多，我正在就GPU的各种CSS3渲染问题和Chrome团队联系和沟通。&lt;/p&gt;&#xD;
&lt;p&gt;虽然还有很多很多问题，还有很多很多不足，还有很多很多限制，但是它已经可以解决很多问题了，尤其在减少图片的使用下，尤其在显示速度上，没有等待图片下载的过程，没有闪烁，直接渲染呈现，体验相当好。而且代码矢量，维护性通用性那根本不是图片能比拟的。&lt;/p&gt;&#xD;
&lt;p&gt;由于忙于&lt;a href="http://www.englive.cn"&gt;英来网&lt;/a&gt;正式版的开发，所以根本没有时间来对自己围绕在HTML5上的技术应用和探索和经验心得进行整理成文。国庆期间花了一天时间把这篇文章整理出来了，算是个先行版，所谓前传。之后我又将扑到产品的开发上，离上线不远了，而&lt;a href="http://www.englive.cn"&gt;英来网&lt;/a&gt;正式版上线之时就是《重构之美》第四部正式提笔连载之时。&lt;/p&gt;&#xD;
&lt;p&gt;下课！&lt;/p&gt;&#xD;
&lt;hr /&gt;&#xD;
&lt;p&gt;贴个招聘：英来网招聘HTML5 JS交互开发两名，一名偏前端，一名偏后端。&lt;br /&gt;&lt;br /&gt;&#xD;
工作方式：兼职。&lt;br /&gt;&#xD;
工作内容：基于JQuery进行纯JS交互开发。&lt;br /&gt;&#xD;
工作地点：杭州。（最好城西）&lt;br /&gt;&#xD;
其他要求：&lt;br /&gt;&#xD;
1、善于沟通，你主要是和我打交道。&lt;br /&gt;&#xD;
2、对新技术要敏感，你发现没，我很前卫的，如果我说一起攻克web worker，你都不知web worker为何物，那搞个铲铲。&lt;br /&gt;&#xD;
3、技术能力要过硬，最好三年以上JS开发经验，比如我说一起攻克web socket，结果你一个泡都冒不出来，那搞个铲铲。&lt;br /&gt;&#xD;
4、偏前端的JS交互开发要熟悉Web标准，对结构和样式敏感，要不我们道不同不相为谋。&lt;br /&gt;&#xD;
5、偏后端的JS交互开发要熟悉Java和数据库设计。&lt;br /&gt;&#xD;
你将面对的是：&lt;br /&gt;&#xD;
1、一个高尚而伟大的行业：教育。（真的，我一直很高兴自己选择了这样绝对昂首挺胸的行业，我做了一件正确的事，剩下的就是找到正确的方法，当一个好老师！想到这点，我就神经质的激动万分然后努力工作。）&lt;br /&gt;&#xD;
2、一个追求自由和完美，神经质的领导：爆牙我。&lt;br /&gt;&#xD;
3、一个激情四射的团队。&lt;br /&gt;&#xD;
4、一个不排斥并最大限度拥抱新技术拥抱未来的项目。&lt;br /&gt;&#xD;
5、一个匪夷所思的产品。&lt;br /&gt;&lt;br /&gt;&#xD;
&#xD;
和我一起体验创业，一起打造一个惊心动魄的应用，把未来带入现在，把梦想照进现实。&lt;br /&gt;&lt;br /&gt;&#xD;
&#xD;
待遇及回报：面议。&lt;br /&gt;&#xD;
联系方式：zhengminlive@gmail.com（请附简历，欢迎畅谈）&#xD;
&lt;/p&gt;&#xD;
&#xD;
&#xD;
&#xD;
&#xD;
&lt;img src="http://www.cnblogs.com/yuntian/aggbug/1827993.html?type=1" width="1" height="1" alt=""/&gt;&lt;p&gt;&lt;a href="http://www.cnblogs.com/yuntian/archive/2010/10/08/1827993.html" target="_blank"&gt;本文链接&lt;/a&gt;&lt;/p&gt;</content></entry><entry><id>http://www.cnblogs.com/yuntian/archive/2010/10/04/1842055.html</id><title type="text">OMG！我居然把新首页设计出来了！</title><summary type="text">几乎快一年了，我一直在不断的更改正式版的内部设计，不厌其烦。每一次都在前一次的基础上进行改进，还没发布，每个应用的界面都进行了无数次版本的升级。终于在前段时间，整个UI框架稳定下来了，统一下来了，每个应用都几乎完美无缺：漂亮、易用、高扩展性、完全基于全程动画交互的UI框架设计。万事俱备，只欠东风，这个东风就是首页。或者说我们建好了一座宫殿却没有设计一道门，龙画出来了却没有点睛。我一直都不敢下手进行...</summary><published>2010-10-04T10:19:00Z</published><updated>2010-10-04T10:19:00Z</updated><author><name>爆牙齿</name><uri>http://www.cnblogs.com/yuntian/</uri></author><link rel="alternate" href="http://www.cnblogs.com/yuntian/archive/2010/10/04/1842055.html"/><link rel="alternate" type="text/html" href="http://www.cnblogs.com/yuntian/archive/2010/10/04/1842055.html"/><content type="html">&lt;p&gt;几乎快一年了，我一直在不断的更改正式版的内部设计，不厌其烦。每一次都在前一次的基础上进行改进，还没发布，每个应用的界面都进行了无数次版本的升级。终于在前段时间，整个UI框架稳定下来了，统一下来了，每个应用都几乎完美无缺：漂亮、易用、高扩展性、完全基于全程动画交互的UI框架设计。&lt;/p&gt;&#xD;
&lt;p&gt;万事俱备，只欠东风，这个东风就是首页。或者说我们建好了一座宫殿却没有设计一道门，龙画出来了却没有点睛。我一直都不敢下手进行设计，一直在躲，尤其在宫殿内部走向完美的时候，门的设计难度就变得越来越大，我真害怕搞不好一颗耗子屎坏了一锅汤。因为它将统领所有完美，更重要的是它需要传达出所有我想传达的理念和信息。现在，内部UI稳定下来了，随便增加什么，都不需要过多的思考直接套用即可，于是首页躲不过了，必须面对了。&lt;/p&gt;&#xD;
&lt;p&gt;国庆头三天，我哪儿都没去，窝在家里看电影，思考产品，睡觉，做好吃的东西。今天阳光明媚，我骑车沿着北山路而下，大口的呼吸这满城的桂花香，心旷神怡。坐进了两岸，打开Firework，开始设计首页，此时据上个新首页（Beta 3.0），已经过去一年零三个月了。MMD，Beta 3这版首页，也就是目前线上的首页，是英来网上线以来我设计得最丑陋最不易用的一版首页，结果一直没办法枪毙它，于是它成了生命周期最长的一版首页。&lt;/p&gt;&#xD;
&lt;p&gt;十分钟，仅仅十分钟我就完成了正式版首页，虽然只有10%成型在Firework里，而90%还在脑袋里，但是它，已经完成了！完美的完成了！我眯着眼睛盯着屏幕Firework里的几根线条和几个色块，脑袋快速翻腾和冥想，每个角度（界面、动画、信息传达、易用性、扩展性、整合性……），最终，我觉得我又一次完成了自我超越，我睁开眼睛，捶桌子蹬腿手舞足蹈。&lt;/p&gt;&#xD;
&lt;p&gt;服务员递来一个眼神：这小子发什么神经啊。&lt;/p&gt;&#xD;
&lt;p&gt;根据我的Buzz记录，我对目前这套今年2月21日在张鹰那违章建筑房中诞生的UI体系相当满意，当时我说：&lt;/p&gt;&#xD;
&lt;p style="color:#2A8BBE"&gt;“终于完成了英来网正式版的UI/UE主框架设计。嗯，谦虚的说，我会引爆应用网站的设计潮流。这套UI/UE的主框架，我想，至少三年内我不会再换了。简洁、美观、易用、扩展性极强、还基于用户非常熟悉的操作模式无需学习，并从各个角度解决了好多我一直平衡不好的内容信息和功能模块的组织呈现问题。设计了快两年，我终于有得道升仙的感觉。”&lt;/p&gt;&#xD;
&lt;p&gt;对于我这样一个三天两头就会冒出一个新想法，然后用一个新设计推翻旧设计的家伙，如今已过去半年了，在这半年里旧产品移植新产品加入各项功能扩张，它都全部合情合理的包容进去，而我居然一直找不到更好的设计思路进行代替，时间验证了它的成熟度。我给这套你从来没有在任何网站上体验过的UI取了一个名字：&lt;strong&gt;Englive Flexible UI（灵动界面）&lt;/strong&gt;&lt;/p&gt;&#xD;
&lt;p&gt;现在，我干首页去鸟，把脑袋里那90%成型出来，完成最后的点睛之笔！&lt;/p&gt;&lt;img src="http://www.cnblogs.com/yuntian/aggbug/1842055.html?type=1" width="1" height="1" alt=""/&gt;&lt;p&gt;&lt;a href="http://www.cnblogs.com/yuntian/archive/2010/10/04/1842055.html" target="_blank"&gt;本文链接&lt;/a&gt;&lt;/p&gt;</content></entry><entry><id>http://www.cnblogs.com/yuntian/archive/2010/09/16/1827796.html</id><title type="text">玩得了星际2的电脑，用不了IE9。</title><summary type="text">我用不了IE9，因为我T60的显卡X1400是DX9.0C，只支持WDDM1.0，而IE9的硬件加速要求支持WDDM1.1的显卡，也就是DX10显卡。最悲剧的是如果不支持硬件加速，IE9会启动软件加速来代替，而这软件加速一个hover都能让CPU飙到100%，电脑都没法用了，还没法去掉设置中的勾勾，于是乎，玩得了星际2的电脑，用不了IE9。更惨烈的是，我怎么回到IE8呢？偶尔还是要用一下IE……I...</summary><published>2010-09-16T01:35:00Z</published><updated>2010-09-16T01:35:00Z</updated><author><name>爆牙齿</name><uri>http://www.cnblogs.com/yuntian/</uri></author><link rel="alternate" href="http://www.cnblogs.com/yuntian/archive/2010/09/16/1827796.html"/><link rel="alternate" type="text/html" href="http://www.cnblogs.com/yuntian/archive/2010/09/16/1827796.html"/><content type="html">&lt;p&gt;我用不了IE9，因为我T60的显卡X1400是DX9.0C，只支持WDDM1.0，而IE9的硬件加速要求支持WDDM1.1的显卡，也就是DX10显卡。最悲剧的是如果不支持硬件加速，IE9会启动软件加速来代替，而这软件加速一个hover都能让CPU飙到100%，电脑都没法用了，还没法去掉设置中的勾勾，于是乎，玩得了星际2的电脑，用不了IE9。更惨烈的是，我怎么回到IE8呢？偶尔还是要用一下IE……&lt;/p&gt;&#xD;
&lt;p&gt;IE9的普及又成问题了，不仅仅要WIN7，还必须支持WDDM1.1的DX10显卡才行，对于祖国辛勤的劳动人民来说，要求挺高。妈妈的，难道我的X1400就不算GPU？为个浏览器换显卡？DX10显卡倒不贵，但笔记本咋办，T60都宣布玩完了。喂，我说，好歹让我可以把你炫耀的硬件加速关掉嘛……&lt;/p&gt;&#xD;
&lt;p&gt;还是Chrome厚道，他的GPU加速看起来并不是完全依赖于什么狗屁WDDM1.1。人家的GPU硬件加速是要跨平台的，不得啥受限于WIN7，还DX10，还WDDM，还1.1，那MAC上的GPU就不叫GPU啦，那移动设备的GPU就不叫GPU啦！这么一看，IE9要站到WP7上去又是猴年马月的事了。&lt;/p&gt;&#xD;
&lt;p&gt;IE9还有很多很奇怪的设计，比如建个应用可以前进可以后退可以新建页TMD和开个浏览器有什么区别？应用图标有什么存在意义？还有，地址栏和标签放在一起，那么这两者什么关系呢？设计的理由何在呢？既不传统也不现代。就像拉坨屎，传统浏览器是肚子里憋着一坨屎出门，Chrome表示我们要把屎拉了再出门，然后FF也表示了赞同，Safari先拉了一点出来觉得算了还是憋着习惯些。微软一看，憋着自己不爽，拉了有跟风嫌疑，于是半截在里面半截在外面，高高兴兴的出了门，觉得倍儿有面子。&lt;/p&gt;&#xD;
&lt;p&gt;反正总觉很多地方不伦不类，前面又是SVG又是Canvas的炫耀硬件加速，结果到头来做主题炫耀站，动画是js处理的，各种渐变是图片拉的，不知道关了GPU多大的事，更不知道关了HTML5多大的事。这样的，封闭在Win7上的，WDDM还得是1.1的，动画js做，渐变图片拉，这样的Web微软就打上Beauty了？你丫就忽悠嘛～～～&lt;/p&gt;&#xD;
&lt;p&gt;HTML5，微软啊你还差得远。&lt;/p&gt;&#xD;
&lt;p&gt;跟紧Google脚步，坚持Chrome方针，一百年不变。&lt;/p&gt;&#xD;
&#xD;
&lt;hr /&gt;&#xD;
&lt;p style="color:#2a8bbe"&gt;我发现很多人只看标题不看文章直接就喷，如果我把标题改为《IE9的问题浅析》，又或者《冷眼旁观IE9》，再或者《恨铁不成钢的IE9》，估计就没那么多喷子了。但是你不思考不看文章关我屁事，就这个标题了。爱喷，签上名您就喷吧。&lt;/p&gt;&lt;img src="http://www.cnblogs.com/yuntian/aggbug/1827796.html?type=1" width="1" height="1" alt=""/&gt;&lt;p&gt;&lt;a href="http://www.cnblogs.com/yuntian/archive/2010/09/16/1827796.html" target="_blank"&gt;本文链接&lt;/a&gt;&lt;/p&gt;</content></entry><entry><id>http://www.cnblogs.com/yuntian/archive/2010/09/16/1827766.html</id><title type="text">微软的 IE9 BOTW 主题站炫吧，在英来网正式版面前，那就是浮云。</title><summary type="text">不解释。嗯，他忽悠他的，你热闹你的，我安安心心精雕细琢收好尾，离上线不远鸟……</summary><published>2010-09-16T01:01:00Z</published><updated>2010-09-16T01:01:00Z</updated><author><name>爆牙齿</name><uri>http://www.cnblogs.com/yuntian/</uri></author><link rel="alternate" href="http://www.cnblogs.com/yuntian/archive/2010/09/16/1827766.html"/><link rel="alternate" type="text/html" href="http://www.cnblogs.com/yuntian/archive/2010/09/16/1827766.html"/><content type="html">&lt;p&gt;不解释。&lt;/p&gt;&#xD;
&lt;p&gt;嗯，他忽悠他的，你热闹你的，我安安心心精雕细琢收好尾，离上线不远鸟……&lt;/p&gt;&#xD;
&#xD;
&#xD;
&#xD;
&lt;img src="http://www.cnblogs.com/yuntian/aggbug/1827766.html?type=1" width="1" height="1" alt=""/&gt;&lt;p&gt;&lt;a href="http://www.cnblogs.com/yuntian/archive/2010/09/16/1827766.html" target="_blank"&gt;本文链接&lt;/a&gt;&lt;/p&gt;</content></entry><entry><id>http://www.cnblogs.com/yuntian/archive/2010/09/15/1826386.html</id><title type="text">和《盗梦空间》无关。</title><summary type="text">本打算上周去看《盗梦空间》，但是上周内外都在给我打鸡血，于是时间全部给了工作，本周稍有喘息，立刻买票去。昨天买票，今天看，两次穿城，从城西跑到遥远的城东万象城百脑汇，周二7折票80，和蓝冰两个人加上两顿饭，一共花了370，就为了第一次去体验那该死的IMAX。我很少去影院看电影，这是我看过的最贵电影了，其次就是04年平安夜《功夫》上影的时候带妹妹看的，当时全价票60。嗯，这张80的票得裱起来，等待更...</summary><published>2010-09-14T17:25:00Z</published><updated>2010-09-14T17:25:00Z</updated><author><name>爆牙齿</name><uri>http://www.cnblogs.com/yuntian/</uri></author><link rel="alternate" href="http://www.cnblogs.com/yuntian/archive/2010/09/15/1826386.html"/><link rel="alternate" type="text/html" href="http://www.cnblogs.com/yuntian/archive/2010/09/15/1826386.html"/><content type="html">&lt;p&gt;本打算上周去看《盗梦空间》，但是上周内外都在给我打鸡血，于是时间全部给了工作，本周稍有喘息，立刻买票去。&lt;/p&gt;&#xD;
&lt;p&gt;昨天买票，今天看，两次穿城，从城西跑到遥远的城东万象城百脑汇，周二7折票80，和蓝冰两个人加上两顿饭，一共花了370，就为了第一次去体验那该死的IMAX。我很少去影院看电影，这是我看过的最贵电影了，其次就是04年平安夜《功夫》上影的时候带妹妹看的，当时全价票60。嗯，这张80的票得裱起来，等待更换～～～IMAX的效果，确实比较震撼，然后我就想什么时候能在IMAX上重温一遍《阿凡达》啊。&lt;/p&gt;&#xD;
&lt;p&gt;看完《盗梦空间》，我想起了两个片子：99年的《十三层楼》和08年的《黑暗骑士》，《盗梦空间》在情节设计上接近前者，在节奏设计上则承接后者。特别在高速的，扣人心弦的快节奏上，你是否想起了黑暗骑士，梦境的瞬间切入和小丑的华丽登场何其相像。这简直就是诺兰的标志性压迫式节奏：不玩前戏，先进了再说润的问题。&lt;/p&gt;&#xD;
&lt;p&gt;但是……噢，这么快我就开始说但是了……&lt;/p&gt;&#xD;
&lt;p&gt;在看之前，《盗梦空间》简直可谓好评如潮，豆瓣上11万人有76%给了5星，超高啊，有人还对比了《黑客帝国》，这也让我毫不犹豫的把我的第一次IMAX之旅送给了它。但看完之后，却觉得没那么玄乎吧，只能说是好看，但算不上经典。蓝冰在看之前还担心看不懂，看完后说很简单的剧情嘛，一层一层的梦境嘛，莫非我们智商很高么？&lt;/p&gt;&#xD;
&lt;p&gt;是啊，我也奇怪，很简单，没什么晦涩难懂的地方，甚至，我觉得诺兰这次光顾着高速运动然后就完了，没了技巧，没了抑扬顿挫，电影目不转睛的看完总觉得少了点什么，对，高潮，高潮在哪里呢？嗯，您告诉我，高潮在哪里？&lt;/p&gt;&#xD;
&lt;p&gt;整部电影就没有起伏，没有转折，完全是线性的快节奏，向前向前再向前，坚决不转弯。直到最后转的一个弯，没让螺旋停下来，恰恰我觉得是最不该转的弯，最大的败笔，应该让它停下来。我想可能最大的高潮是醒来吧，timing的对接后，一层一层的衔接和醒来，我也大概在那个时候爽了一下，但是这是从一开始就摆明的事，就像膝腱反射一样，敲了膝盖后，就是等待小腿自己跳一下，但显然它并不是心甘情愿的去跳那么一下，是被迫的。&lt;/p&gt;&#xD;
&lt;p&gt;梦中梦式的情节设计，我第一次看是十年前的《十三层楼》，我还记得是从玉林那个租赁店租的碟，我还记得当时名称叫《异次元骇客》，而我以为是同年大火的《黑客帝国》。初次接触梦中梦情节，让当年的我很是震惊，被这张以为的“山塞”碟震得目瞪口呆。以至于后来看到了真正的《黑客帝国》三部曲后，其引以为傲的两层世界设计已经没有给我太大的惊喜感了。因为《十三层楼》里有三重世界，当一个创造并游戏于虚拟世界的人发现他自己的世界也是虚拟的时候，当他站在他自己的世界里的那个End of the world界限面前时，我舌头和他一起伸了出来。而最让人拍案叫绝的是电影在2024年这个真实世界结束时的黑屏方式居然是拔插头式的画面变成一个圆点黑掉，这暗喻了根本就没有真实，是个多重世界。&lt;/p&gt;&#xD;
&lt;p&gt;所以我说诺兰在《盗梦空间》没有让螺旋停下来是个败笔呢，这种模棱两可开放式的暗喻结尾手法在这十年间已经被多次使用了。最近我看到的一次是《禁闭岛》的结尾，通过莱昂纳多选择死亡，模糊了真实和虚拟的界限。但是对于《盗梦空间》来说，是完全没有必要的画蛇添足。当莱昂纳多扔出螺旋后，我就对蓝冰说，最后肯定是螺旋没有倒，我相信很多人都会有这样的预见，而不是诧异的看着螺旋没有倒而拍案叫绝，因为，因为十年不是一个短时间。所以，螺旋应该倒下去，它应该给个定音，无论是剧情所需还是电影发展史，它都应该倒。倒了，《盗梦空间》就脱俗了，可惜螺旋没倒，《盗梦空间》没能脱俗。&lt;/p&gt;&#xD;
&lt;p&gt;而这就引出了另外一个问题：转折和惊喜。所谓跌宕起伏，所谓出乎意料。在这点上，同为诺兰的《黑暗骑士》，就处理得非常好，每一次小丑都从大家认为的失败之处成功，哪怕最后大概观众没有意外了两船的人都平安的时候，诺兰把意外给了小丑，小丑满脸疑惑和失望的看着夜空：“我的烟花呢？”那一瞬间，多希望小丑能够成功的，他从来没失败过，而且他也没败，因为他指出了人性的丑恶，但电影需要给予希望。&lt;/p&gt;&#xD;
&lt;p&gt;电影业发展到今天，大概能用的招数都用完了，当然也不能这么说，总会有人打破固有思维，创意的站到我们面前。但至少《盗梦空间》没有做到，它有一个创意的出发点，却没有一个好的实施，当然我不能太苛刻，但至少我不会给它一颗五星。甚至从剧情而言，《禁闭岛》更好看些，莱昂纳多的演技而言，《禁闭岛》也要精湛许多。So，一颗四星，足以。&lt;/p&gt;&#xD;
&lt;p&gt;最后我给《盗梦空间》一个评价：这不是一次过山车，缓缓带到最高，加速冲下，心惊肉跳的转个圈，再来个麻花转……不不不，《盗梦空间》是把你扔进极驰之中的保时捷，然后体验一把直线高速。值得一看的大片，Over。&lt;/p&gt;&#xD;
&lt;p&gt;看完电影我对蓝冰说：哎呀，这两天因为东西长途奔波，工作时间一下断了很多，本来高速奔跑突然刹一下车很不适应始终心慌慌，明天开始得抓紧时间重新上路狂奔到中秋～～～&lt;/p&gt;&#xD;
&#xD;
&#xD;
&#xD;
&lt;img src="http://www.cnblogs.com/yuntian/aggbug/1826386.html?type=1" width="1" height="1" alt=""/&gt;&lt;p&gt;&lt;a href="http://www.cnblogs.com/yuntian/archive/2010/09/15/1826386.html" target="_blank"&gt;本文链接&lt;/a&gt;&lt;/p&gt;</content></entry><entry><id>http://www.cnblogs.com/yuntian/archive/2010/09/10/1822903.html</id><title type="text">确定：目前 Chrome 517 GPU 的存在目标就是为 3D Transform。</title><summary type="text">刚才无意间按下了Shift+Esc，打开了Chrome内存管理，然后看见了GPU Process，占领近200M内存！接下来就顺其自然了：1、结束GPU进程，英来网正式版的3D交互动画消失，回到2D效果。2、关闭浏览器重开，打开常规网站，GPU进程未启动，打开英来网正式版，GPU进程自动启动，3D交互动画呈现。结论一：3D Transform和GPU功能是绑定的，或者说当页面定义了3D Trans...</summary><published>2010-09-09T19:16:00Z</published><updated>2010-09-09T19:16:00Z</updated><author><name>爆牙齿</name><uri>http://www.cnblogs.com/yuntian/</uri></author><link rel="alternate" href="http://www.cnblogs.com/yuntian/archive/2010/09/10/1822903.html"/><link rel="alternate" type="text/html" href="http://www.cnblogs.com/yuntian/archive/2010/09/10/1822903.html"/><content type="html">&lt;p&gt;刚才无意间按下了Shift+Esc，打开了Chrome内存管理，然后看见了GPU Process，占领近200M内存！&lt;/p&gt;&#xD;
&lt;p&gt;接下来就顺其自然了：&lt;br /&gt;&#xD;
1、结束GPU进程，&lt;a href="http://www.englive.cn"&gt;英来网&lt;/a&gt;正式版的3D交互动画消失，回到2D效果。&lt;br /&gt;&#xD;
2、关闭浏览器重开，打开常规网站，GPU进程未启动，打开&lt;a href="http://www.englive.cn"&gt;英来网&lt;/a&gt;正式版，GPU进程自动启动，3D交互动画呈现。&lt;br /&gt;&#xD;
结论一：3D Transform和GPU功能是绑定的，或者说当页面定义了3D Transform，GPU进程就被触发。&lt;br /&gt;&lt;br /&gt;&#xD;
3、关闭浏览器重开，用Chrome打开IE9的SVG或Canvas测试页面，GPU进程并未被触发启动。&lt;br /&gt;&#xD;
结论二：目前Chrome GPU并不加速SVG或Canvas。&lt;br /&gt;&#xD;
&lt;/p&gt;&#xD;
&lt;p&gt;结合起来，就是本文标题。当然我相信Chrome GPU肯定会支持SVG或Canvas，但是对比微软，Google选择的是首先加速CSS3。Google脑袋和我一样清晰啊，SVG和Canvas相比CSS3，离广泛实用还差得远，我认为不是技术成熟度问题，而是如果现在就把SVG和Canvas引入前端，那将是一场革命，对整个团队前后协同流程都将带来巨大转变，更别说人才稀缺的问题。而CSS3不一样，是无缝的过渡，而且非常简单，在协同上带来的转变也是一种水到渠成的渐进改良。&lt;/p&gt;&#xD;
&lt;p&gt;比如前段时间英来网前端在交互动画设计上的纠结与挣扎，成果是我体会到，在未来肯定会有这么一个全新接口设计：前端开发工程师和动画设计师之间的接口设计。这是在前端新的分离和握手，而曾经斩不断理还乱的到底动画应该放在哪里实现，现在我觉得这个问题已经灰飞烟灭了，当然从我个人的思考，主要原因还不是因为GPU加速，而是因为开发工程师和动画设计师职位就是分离的，而且动画设计更偏向更依赖于平面设计，而且设计一个好动画非常复杂非常繁琐不但要精确控制像素还有时间和节奏，还要涉及到音频处理，所以过去一直以来Web上混编的交互动画，随着CSS3的出现，将变成交互+接口+动画。不过GPU的出现算是没争论余地的定海神针吧。哈哈，说起来我就在想，以后招个CSS3动画设计师……可是，有么？&lt;/p&gt;&#xD;
&lt;p&gt;从这点上看，IE9 至今尚未支持Transform和Transition，却又完美支持SVG和Canvas，唉，微软又错了。这丫一站起来，就想飞了，可是开发者们设计师们连跑都还没学会呢，甚至很多走路都摇摇摆摆。Google和我，那个，一样的高明^o^&lt;/p&gt;&#xD;
&lt;p&gt;Chrome GPU的效果还是很不错，把我们的复杂结构和复杂环境下的复杂效果处理得非常流畅，甚至3D效果比过去的2D效果还流畅，真的不是忽悠的装饰品，是发挥了作用的。不过目前Bug还比较多，最严重的是导致position:fixed定位的部分闪烁甚至完全消失，还有几个奇葩现象，都是在GPU启动后出现的。应该是GPU的渲染Bug问题，不会要我去对GPU做兼容设计吧，这怎么玩～～～&lt;/p&gt;&#xD;
&lt;p&gt;最后一个是关于Chrome GPU进程的恐怖内存消耗问题，不过特殊情况，我估计和我们自身设计问题有关。&lt;/p&gt;&#xD;
&lt;p&gt;嗯，&lt;a href="http://www.englive.cn"&gt;英来网&lt;/a&gt;正式版离发布上线还有段时间，有兴趣可以去webkit官方3D动画演示地址：&lt;a href="http://webkit.org/blog-files/3d-transforms/morphing-cubes.html"&gt;http://webkit.org/blog-files/3d-transforms/morphing-cubes.html&lt;/a&gt;&lt;/p&gt;&#xD;
&lt;hr /&gt;&#xD;
&lt;p&gt;本想丢到博客园首页，不过我忍，我忍者。&lt;/p&gt;&lt;img src="http://www.cnblogs.com/yuntian/aggbug/1822903.html?type=1" width="1" height="1" alt=""/&gt;&lt;p&gt;&lt;a href="http://www.cnblogs.com/yuntian/archive/2010/09/10/1822903.html" target="_blank"&gt;本文链接&lt;/a&gt;&lt;/p&gt;</content></entry></feed>
