译自：
A Beginner's Guide to Perceived Performance: 4 Ways to Make Your Mobile Site Feel Like a Native App
原作者：Kyle leads
译者： TAT.sheran
注：该文章大约 3000 字。它覆盖了移动端网页交互体验优化的很多不同方面的实际解决方案，用来优化你的网页运行速度。注意不是让你的站点运行的有多快，而是让你的用户感觉有多快。
当下在移动端构建一个优秀的网站逐渐变得越来越简单。无论是响应式设计还是自适应式，只要清楚你要做的样式，精心制作一个好看的站点就不是什么问题。
一、启程
7 号下午 4 点左右，小小的飞机降落到黎平小小的机场，11 月的黔东冷了起来，地面温度 11 度伴有小雨。接机的是教育局主任江哥来支援的车辆，从黎平到铜关一个小时的车程，一路的聊天打消了我们之前的所有顾虑。孩子们和学校对我们的到来都有很强烈的期待，最初孩子们是不愿意和 “外人” 交流的，但几期的支教过后，他们很希望和我们交流，听我们讲平时上课讲不到的知识，我觉得这是我们此行的最大意义。
【腾讯公益慈善基金会 - 筑梦新乡村，讲师公益行】 人物 采访记
2012 年 11 月 11 日凌晨 4:30，为了去看米粉的制作过程，我和队友们早早的起床，洗簌完毕后就匆忙往陈阿姨家的米粉店赶，生怕到了那儿米粉都做好了-白赶一遭。米粉店其实就是陈阿姨家的厨房而已，摆着一张桌子自用兼供客人用，可见米粉并不是她的主要经济源。我们住的地方距离那儿有几分钟的路程，贵州黎平的初冬又是出乎意料的阴冷，走在昏暗的路上禁不住寒颤，时不时的能听见鸡鸣，响彻村落，我忽然想起祖逖 “闻鸡起舞”，陈阿姨则是闻鸡起作。
作为一个混迹互联网的 IT 人士，如果想各方面都了解点得话，那么设计 gif 动画也是个不错的学习方向哦！
下面就 step by step 教大家如何设计一个 loading.gif 的加载动画图：
先看效果图：
.gif)
由于小女子有幸参加第一届@腾讯编程马拉松，让师姐这个名字被更多的人所熟知。在此，真心谢谢大家的关注和支持，对于在这次活动中取得的成就，就像一首歌所写的那样：“没有人能随随便便成功”，而机会是留给有准备的人。这篇文章主要和大家分享一下我参加这次活动的感受和经历，希望对以后参加马拉松的同学们有所帮助，以及和大家一起分享，一起学习。
一、赛前充分准备
1. 策划灵感源于平时的积累
工作中，我最喜欢做的一件事就是： 我的领导 Jet 让我收集 CSS3 和 HTML5 的 demo 库（http://CSS3Lib.AlloyTeam.com/，腾讯内网网址哦），当我收集了来自全世界优秀的 demo 的同时，也同时迷上了那些 demo 里面炫丽的交互和完美的 UI，不禁佩服充满了无限才华和创意的无私程序员们，因为由于他们伟大的创意和设想才让我有了无限的发散空间。就拿 《疯狂的吃货》策划案来说，我是根据一个 CSS3 demo（http://lab.simurai.com/monster/）而突发灵感想象出来的，所以说不要小瞧网上那些有趣的 demo，因为他们就是集优秀创意、交互、UI 为一体的代表。而我们只要做一个善于思考和积累的人，机会就会时刻为你准备着。
2. 勇于拿出自己的策划案让别人点评
我的策划案写好之后，又拿给了我的同事们看，感谢我的同事们，他们给我提了很多建议，包括风险预估，技术评估，创意性等等都给我了很大的建议。让我对策划修改了很多次，就像 tealin 说的，师姐的策划版本是经历了最初版——修改版——定稿——删减版（由于策划案过多，所以我很心痛的撤掉了一个）4 个过程才最终上场的，所以说要勇于拿出来。
3) 做两手准备
考虑到设计师资源很稀少，怕到时候没有设计师的支持，所以我做了 3 个假设准备：
- a 、有设计师的情况下，界面就让设计师负责
- b、 有设计师，但是设计师精力不够的情况下，先让设计师设计最主要的需求界面，其他的界面做降级处理
- c、 没有设计师的情况下，预先找好界面素材，顺便推荐一个好的网站
http://findicons.com/search/sister 这里可以找到很多你想要的 icon，而且还是 png 透明的，《疯狂的吃货》里面的食物就是在这里找到的素材。
二、赛中——和队友们共同奋斗
在和组员们一起的时光，是最快乐，也是最不舍的时光。
1. 组队——有爱的团队
首先，谢谢队友们选择了我的策划案，在组队的时候，lib 同学就说对我的策划案 《疯狂的吃货》特别感兴趣，还有昊哥的那份激情也非常让我钦佩，以及从千里之外的广州赶来的广研同学们，还有只为我的策划案才举手的同学太阳、栗子还有 pel，这些都说明了兴趣是最好的老师，一定要选择自己喜欢的策划案，这样组出来的团队才会非常有爱，有凝聚力，有激情。
2. 严格控制风险，分工明确
为了让这两个策划案顺利完成，队友们都进行了认真的分析。拿玩鸟队这个队伍来说，有 3 个开发人员，选了 pel 作为技术队长（因为 pel 和我是一个部门的，人熟）。pel、太阳、栗子了解需求后，开始了非常认真的技术和风险评估，最后确定出了技术方案和划分好了详细的模块，大家迅速开始分工合作。《吃货队》的队长昊哥也是非常的睿智，他作为一个后台的技术人员，和队友们很快就分析好了技术和风险，也顺利完成评估工作和模块的划分，然后我心里暗自庆幸：选择昊哥作为吃货队长真是明智的选择\(^o^)/~。
3. 激发团队激情
和队友胡乱的八卦和玩笑后，大家很快从陌生变得熟悉再到最后的亲密无间。于是，我们就开始畅谈起了我们的策划案，大家一致说出了策划案的很多亮点和创意还有想法，并且对策划案非常有信心。整个过程中，大家的激情和斗志都非常高。
吃货队的队友们在那里一边试玩自己开发的游戏，一边调试，简直 high 得不行了，lib 说，他觉得和大家在一起开发 《疯狂的吃货》非常的有意思。
而 《伴奏乐队-we play birds》简称玩鸟队，也不甘寂寞，尤其当太阳看到自己的想法被实现后，激动的说：“第一次感觉作为程序员是一样多么幸福的事”。还有设计师 MM beki 说：“看到自己设计的小鸟就像看到自己的孩子一样”。 当大家都这样认为时，其实我内心也是非常激动的，因为这才是一个真正充满快乐充满激情充满斗志的团队。
4. 队友们胡思乱想，开始头脑风暴
作为一个程序员，我坚信我们的思维那是相当活跃的。先拿《疯狂的吃货》这个游戏策划案来说，最初定位是在 PC 上，但是队友们实现了最基本的 demo 后，开始在 ipad、iphone 上面调试，发现能完美支持终端。于是，大家又开始了下一轮的头脑风暴，从支持 2 人对战又上升到支持多人对战，到后来又加入彪叔这个杀伤级的道具在里面等等，队友们就这样一点一点的壮大了自己的产品。
而玩鸟队的同学们也是这样，太阳同学提出了 ‘我玩你猜’ 的功能，然后我们就非常赞同了他的观点，大家都积极支持他的想法。就像彪叔所说 “需求简单的团队开始做迭代优化，是彻底的乾坤大挪移”。再简单的需求，在经过一轮又一轮的头脑风暴后都会变成一个很完美的作品。
5. 队长服务面面俱到
为了让队友们全心全意投入到开发工作中去，我和昊哥也充当了打杂的角色，为队友们端茶送水，还时不时的给他们揉肩捶背。他们有任何需要我和昊哥就速度去搞定。热了把空调温度调低，冷了给他们加衣，饿了给他们送上零食，困了就给大家放起《最炫名族风》，然后大家齐唱 “留下来”，神一下就回来了\(^o^)/~，到了晚上 2 点，恳求大家去休息，大家都丝毫没有休息的欲望，都坚决要把事情做完了才休息，看来我们这些打杂队长还是必不可少哦！
三、评比——真诚交流，拉近和其他组员的距离
最后的环节就是评比，其实这也是我和队友们压力最大的时候，毕竟我们全心全意的奋斗了两天，看到自己的作品顺利完成，大家脸上都洋溢着自豪感。为了让评委们和其他队友们多留意到我们的产品，我和昊哥首先主动积极去了解别人的成果，真诚去和他们交流，因为只有去关心了别人、了解了别人的劳动成果，大家才会主动积极的来了解你的产品。我们就——试玩了其他队友的作品，发现他们的作品也很优秀，这样子投票的时候心里就有数了。其实，了解别人的作品既学习了，又增加了和他们的交流沟通。这个过程中，我们一同分享乐趣，分享成功，一起成长，谢谢那些可爱的队友们。
四、最后感恩
无论是谁参加这次编程马拉松大赛的收获都太多了，就像加颗心同学说的：“赶脚 2 天学到的东西比在腾讯快 1 年学到的东西都多”。而这些都要感谢 NPC 的队员和领导们以及 Tony 的大力支持，没有他们的组织，我们就不可能欢聚在 24 楼，没有他们的细心的关怀，我们也不可能那么高效的完成我们的作品。谢谢你们给我们提供了这么好的一个展现自己的平台，让我们重新认识自己，让我们再次成长，让我们可以肆意的头脑风暴。
HTML5 梦工场
推荐使用 Coding.net