ilMilk.com

网页设计留白的艺术

ilmilk — Thu, 26 Aug 2010 12:36:04 +0800

提升到艺术的高度来看待留白是通过视觉上的手段，留白也可以给人带来心理上的轻松与快乐，也可以给人带来紧张与节奏，通过这种手段可以向使用者表达出设计者的心理感觉，设计者在设计网页的同时也在同自己的使用对象在作一种交流，好的设计者能够达到同自己的使用对象进行心理对话的程度。不光通过页面上的文字、图片、动画的组合和排列，同时借助留白进行表达。可以达到非常好的效果，例如一个休闲的网站，设计者要传达给使用者的一个信息就是要是让他们轻松随意，无拘无束，光通过网页上的图片和文字的表达是干巴巴的，没有感情色彩的。如果能通过网页设计反映出这种感情色彩，显然这样的设计是较为高明的设计。能实现吗？当然可以，借助网页上的留白就可以，让留白更多的显示出自己的特色，在联系图片和文字的中间架起一道桥梁！

　　如何在空间中突出留白的作用，在审美的观点上，我们知道要是做的网页更加的漂亮，有很多的形式美的要素，这里要强调的是页面的均衡、节奏和韵律，因为通过网页的排版布局，在很大程度上是借助于留白的作用，也许在设计的时候没有留意，在不知不觉中在利用它，试想在一个页面上充满了图片和文字，一点空隙都没有那是根本谈不上节奏感和韵律感的，有了这个要素（这里可以这样认为），就可以合理的调剂它和其它的网页上的其它要素之间的关系，使之安排更加的合理。可以这样来设计，利用留白的体量感来使页面的达到平衡，最好是在一种不平衡中营造出平衡的感觉，这样就会使页面更生动，更富有光彩，假如左右的两个部分有文字，可以适当的将它们的大小调整，是一边很大，文本内容很多，可以放得靠上一些，空出一小部分；另一边小，内容少一些，放在下角，上面的留白很多。这样就会赢得均衡，不会那么死板。当然这只是一个简单的例子，实际的运用中很多时候是多个形式美的要素的综合。在网页中通过留白的桥梁作用，是整个页面上的要素排布的松紧呈现出高低错落，跌宕起伏，这样浏览起来就会富有极强的节奏感，象是在听一首好听的歌曲。毕竟生活不只是按部就班的生活，有时候感觉只是生活，或者是工作，没有艺术，没有美。这是设计者的责任，在网页设计的时候要能体现出来，不是很好吗？当然不是说每个网站都设计出来象音乐或者是艺术网站一样具有那样的节奏感，在不同种类的网站中体现得要不同，这是一个需要设计者把握的问题。把握得不好就会出现和设计者的意图不一致或者甚至是相反的效果。

　　再者，利用网页留白，我们可以不用太多的说明就可以表现出它的网站的特征，这是主要从网页的功能性的方面来看的。例如新闻性网站的信息性、快速性。体育网站的充满激情。商业网站的商业味……，运用得好就如同其它的商业上的运作一样可获得成功。我们知道快餐店利用强烈的刺激性的红色作为它的墙面或者是座椅的色彩，这样让人在这样的环境里感觉到一种紧张感，由此不愿在里面呆很长时间，由此腾出更多的空间给后来的人用，所以通过这种手段使快餐店的生意更加的好。反之在医院里通常是用一些象征安静的蓝色或者是白色，可以使人心情更平静。同样在网页上我们可以利用空间的运用，借助留白来达到一定的效果，有时候得到的效果是使人意想不到的。例如在新闻类的网站上，可以将文字设置得更加的紧密一些，从而是页面上的内容更多，给使用者的一个影响是很值得看的，不用看内容就知道有很多东西，内容的设置尽量集中一些，不要给人的感觉是杂乱无章的。不要设置得太散，尽管可以是通过下拉菜单来看，但是给人的感觉就是内容少，太空。这也是人的心理因素的作用。在一些休闲的网页里就不一样了，留出的空间就要多一些，使页面显出更加轻松的特征，使人一上这个网就能感觉到一种放松的心情，符合休闲的特征。而目前很多这类网站是没有这样做的，他们的目标是尽量使更多的人能够访问这个网站，所以就放尽量多的内容在主页上，使更广泛的人能够在这个网站上找到自己感兴趣的内容。这样就进入了一个误区，就是页面上分布得密密麻麻，让人感觉到一种急促感，紧迫感。给上网的人带来压力，是上这种网站的人所不愿意的。

　　当然留白是留空，有时候需要突破这个层面，这样会发现很多的地方都有发挥的余地，某种程度上留空就是留白，在这里颜色的作用是不可忽视的，因为颜色本身具有体量感，具有感情色彩。所以利用有颜色的留空可以给页面带来均衡，也可以使页面更加的丰富。例如不同的位置的留出的色块之间的相互对比，相互呼应。以及本身大小带来的重量感，同时同网页上的文本和图片之间的结合，可以是页面呈现出整体上的协调。同时借助于颜色的冷淡，加重页面给人的感情色彩。目前很多网站都在采用这种手段，网页上看不到一点纯粹的留出的白色的地方，都是一些色块，这样原理是同留白一样的，通过这些色块（多说是融合于文本或者是图片在一起的），然后来看待它们之间的关系，在一个整体的美感作为标准的条件下，综合运用这些留空来进行制作，这里就要考虑颜色的轻重和大小是相关联的，不能只看到空间的大小来进行对比，同时也要抓住颜色多少的搭配，不能以为追求对比调和或者是单纯的追求节奏而滥用颜色，页面华而不实，给使用者带来极大的不方便。这是应用上的失败。研究网页上的留白就要扩展它的意义，掌握它的变化有利于我们在制作网页的时候，灵活的采用，从而给我们的设计带来极大的方便，给我们每一个设计者的设计意图的传达带来更加广阔的空间。

　　留白的处理是非常重要的手段，每一个网页设计者都要有这种意识，在设计时有意识的将自己一些感受恰如其分的通过这些手段传达出去，会收到事半功倍的效果，“计白当黑”给了我们很大的启示，在网页的构成中，空白同样占有自己不可替代的作用。

No related posts.

拥抱明天

ilmilk — Mon, 09 Aug 2010 13:27:47 +0800

8月3日，离职了，有些不舍，有些失望。锦全胸告诉我，我们不是同时进公司，但是是同时离开公司的也算是缘分了~的确，我们俩成了派对群里最后离开公司的了。原本一个偌大的团队，现在全都各奔东西了，不过大家都相信，在不久之后，我们会是一个更强大的团队。

8月4日，7点起床，吃了半个梨子~骑着可怜的小毛驴，赶赴考场。有惊无险，考过了科目二。那天晚上，锦全胸一个电话，就去他家吃饭了。赞下他和她老婆的厨艺，色香味俱全~真下酒~嘿嘿，羡慕他俩，看得出锦全胸对他老婆非常体贴，我要能有他一半，我就内牛满面了。

8月5日，该干嘛干嘛了，也不知道是干嘛了。

8月6日，那天晚上，请了教练出来吃饭，也算是谢师宴吧~教练平时和我们吹嘘自己多会喝酒多会喝酒，结果一桌人，他第一个倒下了~那晚我也喝了很多，都是敢敢地下~结果知道自己又错了。酒品越来越差了。

8月7日，难受了一天，也算是大半年来最不如意的一天。上午肚子难受，酒喝多了的缘故吧。下午心情难受，种种原因吧~原本还想去踢球，希望心情能好些，没想到更晦气了。出门还是大太阳的，中途天色变暗，然后毛毛雨，心想没事吧，还能踢的~等到快到足球场了，倾盆大雨，&*……**（%#￥%（文明用语）。结果在路旁的公交站点等了半个小时，雨小了，想想算了，回家吧。到了途中，没雨了，快到家，出太阳了。&*……**（%#￥%（还是文明用语）。很晦气，算了不说了。那天晚上，BB生日，请大家吃饭。芳姐没去，分手去了，也不知道有没分成，说是12点之后让我们出来陪他喝酒，结果也没消息了~~

8月8日，睡不着，很早就起来了，琢磨刚到手的PSP~玩了一上午，没想到昨天下午，棒子出问题了，问淘宝卖家，他说棒子坏了，让我寄回去给我换。好吧，哥命苦。昨天下午，跑去踢球了，结果脚被踢到了，肿了。MD，能多倒霉就有多倒霉。昨晚，去文辉家吃饭，他刚搬了房子。文辉叔厨艺也不错，小黄瓜、自己卤的鸡爪，牛肉等等、还有几个菜也不知道叫什么~特别是那辉记勾魂汤（阿晟说的，配料是洋参、瘦肉、白芍再加些虾仁清蒸出来的），辉叔说那喝了，特别好睡。结果，考虑到这几天的种种症状，我也不知道自己喝了几碗。果然昨晚一觉睡到天亮~

8月9日，啰嗦地写了一堆。

这段时间的状态，有些说不清道不明的感觉，有些东西自己知道就好了。希望一切会越来越好吧！再过半个月，可能就去厦门了，喜欢现在的生活，没事三两朋友出来坐坐，喝喝小酒，小城市的感觉。不过也憧憬去厦门后的生活，新的期待。但愿那个城市能够有我的小小容身之处。还有，我们的未来！

利用CSS突出显示不同类型的链接

ilmilk — Wed, 04 Aug 2010 17:06:21 +0800

最近在看《精通CSS-高级Web标准解决方案》，发现有些笔记是必须记下的，以备不时之需~

我们在浏览网站的过程中，不会刻意地去观察要点击的链接是指向本站点上的另一个页面，还是指向另一个站点。或许我们都有过这样的经历：单击一个链接，期望浏览器转到当前站点上的另一个页面，但是不经意间却点击的这个链接却指向了其他站点。

当然，为了避免这么做也有有效的解决方法，例如采取在新窗口中打开链接。今天要说的是另外种解决方法。比如说，我们能够让外部链接看上去和本站的链接不太一样，为此，我们可以在外部链接旁边加上一个小图标，让他与众不同~

实现这种效果最容易的方法只要在所有的外部链接上加上一个类，然后将图标作为背景图像应用。这个方法可以实现我们想要的效果，但是如果页面多了，那将变得非常繁琐。（因为我们必须要有足够的耐心去在每个外部链接上添加类）。除此之外，我们可以利用属性选择器让CSS判断链接是否是外部链接。

点击我先看Demo

经过测试，可以发现除了IE6以外的其他主流浏览器都可以完美支持。下面来分析下网页源码。

CSS3 扩展了属性选择器的功能，提供了子字符串匹配属性选择器，这些选择器允许通过对属性值的一部分和指定的文本进行匹配来寻找元素。

这种技术的工作方式是使用 [att^=val] 属性选择器寻找以文本 http: 开头的所有链接：

a[href^="http:"]{
background: url(images/externalLink.gif) no-repeat right top;
padding-right:10px;
}

这应该会突出显示所有的外部链接，但也会选中使用绝对 URL 而不是相对 URL 的内部链接，为了避免这个问题，需要重新设置指向自己站点的所有链接。

a[href^="http://yoursite.com"],a[href^="http://www.yoursite.com"]{
background-image:none;
padding-right:0;
}

当然，我们还可以扩展这种技术，如对邮件也进行突出显示。

a[href^="mailto:"]{
background: url(images/email.png) no-repeat right top;
padding-right:10px;
}

我们还可以用 CSS 选择器来区分一些下载链接，如一个 PDF 或 Word 文档。这要使用 [att$=val] 属性选择器，它寻找以特定值结尾的属性：

a[href$=".pdf"]{
background: url(images/pdfLink.png) no-repeat right top;
padding-right:10px;
}

a[href$=".doc"]{
background: url(images/pdfLink.png) no-repeat right top;
padding-right:10px;
}

类似的还有 RSS(feec) 链接：

a[href$=".rss"], a[href$=".rdf"]{
background: url(images/feedLink.png) no-repeat right top;
padding-right:10px;
}

这些技术都有助于改进用户在站点上的浏览体验，让用户明确地了解单击链接时会发生的情况，避免不必要的取消操作和烦恼。

但本方法对 IE6 没有效果，而且并没有实现自动让外部链接在新窗口打开。如果想实现这样的效果，就必须用到 JavaScript 和 DOM 。

皇马，再见！

ilmilk — Mon, 26 Jul 2010 17:34:09 +0800

16年，740场比赛，323个进球。

2001年，那个夏天爱上了足球，那个夏天我13岁，什么都还不懂。那个夏天，买了第一本足球杂志，一本往期的《足球俱乐部》。当时那本《足俱》的封面人物就是劳尔，穿着西班牙的球衣，深邃而又忧郁的眼神。不由自主的慢慢就开始喜欢上劳尔~因为喜欢劳尔，开始喜欢皇马，理所当然的讨厌皇马的死对头–巴萨。

这个夏天，劳尔即将告别伯纳乌。10年来，从未想过，劳尔会离开皇马，一直以来都希望劳尔能够终老伯纳乌。也从未想过，会因为劳尔的离开，而去关注和支持皇马以外的球队。或许，在未来没有劳尔的皇马，不会再让我激动，让我悲伤了。而巴萨，嘿嘿，那个就不说了。

10年来，见证了劳尔的巅峰，劳尔的低迷。无论如何，在我心目中他都是这个星球上最好的球员，没有之一。

下个赛季，劳尔将成为沙尔克04的一员，而我是不是应该和拜仁划清界线了呢？HOHO~但愿，下个赛季，拥有了劳尔的沙尔克04，能够一路凯歌，捧起德甲冠军沙盘。而劳尔，也将在沙尔克续写辉煌~

没文笔，不会写，词穷了~

支持劳尔的选择，但愿他在德国过得开心。而我，也开始不用那样熬夜看西甲了，哥已经做好看德甲的准备了。

附上劳尔在皇马的几个数字

3 劳尔代表皇马赢得3座欧洲冠军杯奖杯。1998、2000、2002

6 劳尔代表皇马赢得6次西甲冠军。1994/95、1996/97、2000/01、2002/03、2006/07 、2007/08

7 劳尔在皇马的号码，代表了他在皇马的一切。

10 劳尔在国家队效力10年，1996-2006.

16 截至目前为止，劳尔在皇马度过了16个年头，1994-2010.

17 劳尔在皇马经历的教练人次，16人，17次。巴尔达诺、阿塞尼奥、卡佩罗、博斯克、海因克斯、希丁克、图沙克、奎罗斯、卡马乔、雷蒙、卢森伯格、卡罗、舒斯特尔、拉莫斯、佩莱格里尼、穆里尼奥。其中，卡佩罗执教皇马2次，而穆里尼奥很难有机会在正式比赛中指挥劳尔。

31 劳尔单赛季进球最高纪录出现在2000-2001赛季，那年他在各项赛事中攻入31粒进球。

323 劳尔代表皇马进球323个。（数据来源《马卡报》）

740 劳尔代表皇马出场740次。（数据来源《马卡报》）

Raúl, Go!

CSS样式指南：提高CSS的可读性

ilmilk — Mon, 05 Jul 2010 15:55:45 +0800

　当完成一项前端的工作之后，许多人都会忘记该项目的结构与细节。然而代码并不是马上就能完全定型，在余下的时间里还有不断的维护工作，而这些工作也许不会是你自己完成。所以，结构优良的代码能很大程度上优化它的可维护性。下面列出五种提高CSS文件可维护性的方法，也就是一种较好的CSS样式指南。

1.分解你的样式

对于小项目，在写代码之前，按页面结构或页面内容将代码分为几块并给予注释。例如，可以分别将全局样式、布局、字体样式、表单、评论和其他分为几个不同的块来继续工作。

而对于较大的工程，这样显然不会有什么效果。此时，就需要将样式分解到几个不同的样式表文件。下面的master stylesheet 就是这一方法的例子，它的工作主要是导入其他样式文件。使用这一方法不仅能优化样式结构，而且有利于减少一些不必要的服务器请求。而分解文件的方法就有许多种，master stylesheet 使用了最常见的一种。
/*——————————————————————
[Master Stylesheet]
Project:       Smashing Magazine
Version:       1.1
Last change:       05/02/08 [fixed Float bug, vf]
Assigned to:       Vitaly Friedman (vf), Sven Lennartz (sl)
Primary use:       Magazine
——————————————————————-*/
@import “reset.css”;
@import “layout.css”;
@import “colors.css”;
@import “typography.css”;
@import “flash.css”;
/* @import “debugging.css”; */
同时对于大型项目，你也可以加上CSS文件的升级标志或者一些诊断措施，这里不再详述。

2.建立CSS文件索引

为了能够迅速的了解整个CSS文件的结构，在文件开头建立文件索引是一个不错的选择。一种可行的方法是建立树形的索引：结构上的id 和 class 都可以成为该树的一个分支。如下：
/*——————————————————————
[Layout]
* body
      + Header / #header
      + Content / #content
            – Left column / #leftcolumn
            – Right column / #rightcolumn
            – Sidebar / #sidebar
            – RSS / #rss 54ne.com
            – Search / #search
            – Boxes / .box
            – Sideblog / #sideblog
      + Footer / #footer
Navigation         #navbar
Advertisements         .ads
Content header         h2
——————————————————————-*/[

或者也可以这样：
/*------------------------------------------------------------------
[Table of contents]
1. Body
      2. Header / #header
            2.1. Navigation / #navbar
      3. Content / #content
            3.1. Left column / #leftcolumn
            3.2. Right column / #rightcolumn
            3.3. Sidebar / #sidebar
                  3.3.1. RSS / #rss
                  3.3.2. Search / #search 网管网bitsCN.com
                  3.3.3. Boxes / .box
                  3.3.4. Sideblog / #sideblog
                  3.3.5. Advertisements / .ads
      4. Footer / #footer
——————————————————————-*/

另一种方式可以只是先简单的将内容列举出来，也不需要缩进。下面的一个例子中，如果你需要跳至RSS部分你只需要简单的搜索8.RSS。
/*——————————————————————

[Table of contents]
1. Body
2. Header / #header
3. Navigation / #navbar
4. Content / #content
5. Left column / #leftcolumn
6. Right column / #rightcolumn
7. Sidebar / #sidebar
8. RSS / #rss
9. Search / #search
10. Boxes / .box
11. Sideblog / #sideblog
12. Advertisements / .ads
13. Footer / #footer

——————————————————————-*/

<!– some CSS-code –>

/*——————————————————————
[8. RSS / #rss] 54ne.com
*/
#rss { … }
#rss img { … }

定义这样一个样式检索可以很有效的使其他人阅读学习你的代码变得容易。在制作大项目的时候，你也可以将检索打印出来从而在你阅读代码的时候方便查阅。

贺炜在英德之战终场哨吹响后的解说

ilmilk — Tue, 29 Jun 2010 20:14:35 +0800

来自乌拉圭的主裁判拉里昂达吹响了全场比赛结束的哨音！这样的话，德国队以4比1的比分击败了英格兰队，德国成为第三支进军八强的球队。　　而英格兰队，在淘汰赛的第一轮回家了。从1990年意大利世界杯开始，当时英格兰队进军4强，94年的美国世界杯他们未能入围决赛圈，98年16强，02年8强，06年8强。英格兰队在2010年的南非赛场上没能进入8强。　　我们祝贺德国人，他们在本场比赛中打得非常的出色，曾经一度形势比较危险，不过通过连续两次快速反击将胜局锁定。这场比赛，德国队以3球的优势战胜了英格兰队。胜负既分，结局也已经确定了。英格兰同德国，他们永恒的对抗在世界杯历史上继续着延续下去。历史的篇章，这一段已经写完。　　我们想想吧，此时此刻，在柏林，在慕尼黑，在汉堡，在科隆大教堂，肯定有无数的德国球迷为之欢欣鼓舞。而在伦敦，在利物浦，在曼彻斯特，在泰晤士河边的小酒馆，肯定也有无数的英格兰球迷为之黯然神伤。不过，让我内心感到温暖的是，在生命如此有意义的一个时间节点，在今天晚上，电视机前的亿万球迷能够，我们大家一起来经历，共同分享，这是我的幸福，也是大家的幸福。我是贺炜，观众朋友们，再见！ Ps：感触很深，这段话说到心坎里去了~英格兰，再见！利用CSS突出显示不同类型的链接《杜拉拉升职记》中的那些话如何摆脱职场疲倦

过程很意外，结局很变态

ilmilk — Thu, 24 Jun 2010 21:08:24 +0800

由于世界杯的缘故，好长时间没更新博客了，趁今晚意大利和slow fuck~还没开赛，抓紧时间来更新下博客~没什么原创，送上三段搞笑动画，10个字形容–过程很意外，结局很变态~嘿嘿

来自俄罗斯的超可爱短片《Pacman Vs. Mario》，当吃豆人和马里奥在游戏中相遇，棋逢对手，究竟谁更胜一筹？
PS.人声模拟出的游戏声响实在是好可爱。

《魂斗罗大战俄罗斯方块》让魂斗罗中的小人穿越进俄罗斯方块，最后，短片还破解了千古谜团——究竟是什么力量决定了俄罗斯方块下一个是啥形状的！

再来个《自由女神大战哥斯拉》自己看吧，笑喷你~

利用CSS等比例缩小图片

ilmilk — Sat, 05 Jun 2010 07:41:41 +0800

图片等比缩放不必需要后台代码的控制，前台CSS技术完全可以几句CSS代码来完成。

把一副大图片按比例缩小到某个尺寸，对于现代浏览器，直接使用max-width和max-height两条CSS属性即可。

对于IE 6.0及以下版本，以上两条CSS属性均不会被理会。之前处理这种事情，我们往往会借助Javascript，然后为图片加上onload事件。例如：

这固然能解决问题，但是对以后页面的升级会带来麻烦——随着浏览器对CSS支持的完善，我们迟早会把图片上的onload事件统统去除。该是Expression的Show Time了，既然IE支持通过Expression在CSS中放置一些脚本，而这段脚本又只是提供给IE 6.0及以下版本使用，那么把它写到Expression中再合适不过。

最终，把一副大图片按比例缩小到50px*50px以内，可以参照以下这段CSS：

.thumbImage{

max-width:50px;

max-height:50px;

}

*html.thumbImage{

width:expression(this.width>50&&this.width>this.height?50:auto);

height:expression(thhis.height>50?50:auto);

}

《杜拉拉升职记》中的那些话

ilmilk — Sun, 30 May 2010 18:49:01 +0800

今天下午，闲暇无事~看了《杜拉拉升职记》。有些语录还是挺有意思的，来分享下…

1、杜拉拉：找工作的过程，总是面试，崩溃，反复面试、反复崩溃。

2、王伟：事情我交待完了，你需要的是执行，马上，立刻。

3、麦琪：DB是全球五百强，做什么事都是有SOP的，也就是管理上我们常说的“标准作业流程”。这么举例子吧，一个人在DB想走路，先抬左脚还是右脚，每次抬多高，每步花多长的时间，都可以在SOP里找到依据。

4、伊娃对海伦：别忘了，千万别得罪女同事，说不定有一天她就会成为你的老板娘啦

5、王伟对拉拉：有些事情你自己知道就好了……

6、玫瑰对拉拉：你呢，要把每一家的优势、劣势、信誉和风险分析之后，然后给我做最终决定，你不要再给我这些没加工过的资料，让我做你该做的事情啊，你的工作分我一半吗……不是啊，别再浪费我时间。

7、销售部某员工对拉拉：我们打包，要你们行政干吗吃的，我们销售都搬家来了，你老人家来给公司赚钱去啊……我们是别的部门吗，别的部门是别的部门，销售部是销售部，你进公司没经过上岗培训啊。

8、王伟对拉拉：你以为靠你自己一个人努力就行吗，你要学会跟团队合作。

9、拉拉对王伟：女的收了刺激之后有两种方法可以减压，一种是买东西，一种就是吃东西。买东西太浪费了，太不实惠了，还是吃东西比较实惠。

10、王伟对拉拉：我觉得你的笑话可以再好笑一点，……我是觉得你讲笑话的样子很可笑，但是你的笑话的可笑水平不如你讲笑话的水平高。

11、拉拉：如何让老板重视你？不仅要做好，而且要展示的好，你不努力，你很悲惨；你很努力，但不会适当展示，你一样很悲惨。

12、王伟：有时候真的觉得好累，每天那么拼命也不知道为了什么。

13、拉拉对王伟：谁没点过去呢，何况像你这样的人……

14、海伦对拉拉：没有炒过人的HR，就不是合格的HR。

15、王伟对玫瑰：一天一天这样过，老觉得……缺了自己不行，其实，没有人是不能替代的。

NIKE《踢出传奇》南非世界杯系列预告片

ilmilk — Sun, 23 May 2010 10:36:58 +0800

在今天凌晨欧冠直播的中场休息期间，在央视体育频道看到了耐克公司最新推出的一部动感十足的长达3分钟的足球广告片——《踢出传奇》。这部影片将观众带入了一段传奇的足球旅程：一脚妙传或者一记抽射能让整个国家欣喜若狂，同时也可以使对手仰天长叹。

自北京时间5月21日凌晨1点开始，全世界的球迷就可通过nikefootball.com抢先观赏本片的3分钟完整版。本片还将通过全球合作伙伴Facebook、You Tube进行播放，并在全球32个国家的电视平台播放，供数百万的球迷共同分享。

德罗巴准备射门

卡纳瓦罗快速奔跑以进行一次扭转乾坤的解围

此片的参演球星阵容空前豪华，C罗、德罗巴、鲁尼、卡纳瓦罗、里贝里、伊涅斯塔、法布雷加斯、沃尔科特、埃夫拉、皮克、罗纳尔迪尼奥、多诺万、霍华德和蒂亚戈·席尔瓦等都将亮相。此外影片还邀请了网球传奇天王费德勒和篮球巨星科比作为特邀客串嘉宾。在这个众星云集的影片中，还出现了荷马-辛普森。

影片的开始便展现了球场上比赛的白热化时刻。足球从空中落到迪迪埃-德罗巴的前方。全世界都共同屏住呼吸，德罗巴突破了防守球员的滑铲，巧妙晃过守门员将球射向球门–整个非洲开始为之欢呼。然而在最后一刻，法比奥-卡纳瓦罗在门线上以一脚技惊四座的凌空倒勾解围，最终化险为夷。这个扭转乾坤的时刻将卡纳瓦罗推入流行文化偶像的行列，各档电视脱口秀节目争相采访他，并诞生了一首向其光辉时刻致敬的歌曲。

鲁尼望着户外里贝里的广告牌

C罗准备施展任意球绝技

韦恩-鲁尼等其他全球足球明星体验了球场上的一个瞬间对其一生的影响。在一个场景中，这位英格兰前锋的一记传球被对方的中场球员弗兰克-里贝里拦下。接下来的瞬间让整个英格兰心碎。这时我们的脑海中浮现出了这样一幕：鲁尼的职业生涯毁于一旦，从此当上一名球场管理员，在一辆大篷车里终悔余生，大篷车外一幅巨大的广告牌上里贝里的照片显得格外刺眼。影片快进回现实中，鲁尼给了我们另外一个答案：他紧追里贝里，重新赢回了球权。于是我们看到鲁尼赢回了的个人和国家荣誉，被授予爵位，报纸头条毫不吝惜对他的褒奖之辞，产房里的新生儿都被起名为小韦恩，乒乓球比赛中毫不费力地击败了罗杰-费德勒。鲁尼涟漪效应周而复始。

同样，克斯蒂亚诺-罗纳尔多在一场比赛中被对手犯规后正准备为葡萄牙主罚一个重要的任意球，这时影片中联想到他罚进任意球后产生的涟漪效应：一个运动场以他的名字命名，记录他一生的电影进行首映。

费德罗与鲁尼正在拼杀乒乓球

小白小法对今天的报纸很不满意

克斯蒂亚诺-罗纳尔多说：”你在一场比赛中的每次触球不仅能够改变90分钟的整个比赛进程，而且能够改变整个锦标赛或者赛季。每一次触球都可能为当场比赛印刻上你的荣誉，踢出你的传奇；相反，一刻的疏忽则会为你的对手及其球迷创造机会。”

与影片同时揭幕的还有耐克的超动力”精英系列”战靴，这个系列能够帮助球员提升在比赛中的表现。耐克的Mercurial Vapor SuperFly II、CTR360 Maestri、Total90 Laser III和Tiempo Legend III都采用了一种全新的高性能鞋帮，以提高在球场上的可见度，并且采用了经过重新设计的鞋底，以便为各种风格的球员提供轻量性能。”精英系列”适用于各种水平的球员，并且包含Nike Football+，凭借Nike Football+专门的会员访问权限，用户可以获得全球最佳教练、球员和球队的指导来提高整体球技。

C罗的战靴

小罗稳健的停球