手机互动网页项目总结(上)摘要.pdfVIP

手机互动网页项目总结(上) 一、硬件背景 二、项目欣赏 1、TGA移动游戏官网 2、UP+邀请函 3、天天酷跑里约进击版 三、技术创意点 1、CSS3动画 2、Sprite动画 3、重力感应+视差 4、字体图标 5、自适应SVG图形 6、Loading进度条 7、单屏滑动 8、游戏 9、地理定位 10、音频使用 11、手机重度新官网 䶅、登仲综施＄迹葡♀％ 易观智库的一个报告指出，2013年中国移动互联网网民规模达6.52亿，其中70.1% 的用户使用安卓手机 ，26.1%的用户使用苹果手机。高收入网民中 ，有一半以上都是用 IOS系统，这个比重在低收入群体中只占17.71%。中低收入网民多使用安卓系统的手 机，占比分别为66.67%和76.09%。 先提出中国移动互联网网民结构是为了让大家在开始项目构思的时候，就要清楚面对的 群体是什么 ，在项目的进展中遇到问题时 ，结合时间和效果 ，能够有所抉择。这个问题 很重要，就像我们在PC网页提出并且已经被广泛接受的”优雅降级”原则：在 GoogleChrome、Firefox、Safari、QQ浏览器极速模式等浏览器下，利用新技术 （HTML5、CSS3、Javascript等）给用户创造更多新鲜的体验。但是IE6、IE7、老系 统下的QQ浏览器兼容模式等浏览器，就只能查看到普通的没特效的网页。 这个问题在移动端的展现只有过之而无不及。如果说IE6是 PC浏览器的蛀虫，那安卓 低端机就是手机浏览器的蛀虫。安卓手机配置和系统可谓千千万种，CP 跟网页展示 效果卡不卡息息相关 ，安卓系统版本跟网页基础呈现也息息相关（例如安卓2.0不兼容 CSS3的圆角属性border-radius等）。（CP 中文意思是处理器，手机反应快慢，卡 不卡 ，都跟CP 息息相关。现在市面上低端机定义是CP 频率800M以下 ，800M至 1.5G属于中端机，高端机就是双核1G以上的手机。） 在理解这个问题的前提下 ，进行手机移动网页构思及重构的时候 ，就会有针对性的进行 取舍，使得项目得到最大化的效率。 下面将会以我们近期制作的比较出色的手机专题网页作为案例，来告诉亲爱的大家 ，我 们前端能做什么，希望可以对今后的创意参考有所帮助。 事、附瓜桶试 1、TGA睡务流总宗繁 TGA埃币扬劈诞 2、UP+迄襟击 3、大大酷谈迷笑足出滑 万、或晰刚忽炮 一般在制作强交互、多动画效果的网页前 ，建议产品、设计、前端一起开会探讨实现细 节。同时要求设计师有很良好的手机网页设计习惯和一定思路的展现效果，以及要求产 品有很大的包容心、懂得取舍。 1、或晰炮６CSS3务犬 适用范围：相互联系又相互独立的元素 设备要求：中高端手机 会发现UP+邀请函里用的最多的就是动画效果了 ，其实都是用CSS3写成的。CSS3动 画可以理解为一个元素的a状态，让它以逐帧展示的方式变成b状态。基本的变形有 scale（缩放）、translate（位移）、rotate（旋转）、skew（倾斜）等 ，再加上color （颜色）、opacity （透明度）等，利用transition （转换）和animation （动画）加 上延时效果，动画就出来了。听着晕吧？看看下面的例子。 ①独立元素间的互动 这块动画并不是前期就想好的。在制作过程中，发现每页的元素进入动画都差不多 ，这 样用户容易感觉无聊而没有兴趣往下翻页。为了增加末页的触达率 ，需要每翻一页都给 用户带来一个信息：下面的内容会不一样的哦，请继续往下翻。 “我是玩家”这一屏的小元素都跟游戏有关系，英雄联盟的Q版盖伦，游戏玩家必备 手柄，让他们互动起来。手柄按常规方式进场（旋转+缩放+透明度），盖伦也按照常 规方式进场（位移+透明度），但是让盖伦的位移轨迹跟手柄有少许重叠，就造成两者 相撞的效果。手柄被撞需要有反馈，就被弹开了一下（位移）。 ②单元素自我呈现 看到这一屏设计稿的时候，真的不知道从何下手，常规动画效果上面的页面都使用了 ， 这屏的元素还不多，如何不无聊？初期的想法是让小三角从圆里蹦出来（缩放+位移+ 透明度），跟首屏呼应。可是只有一个小元素蹦出来，略显单薄。换了个方向思考 ，小 三角可以自我呈现啊。利用它的形状和方向 ，模仿风筝或者飞机的动效 ，给予一个非直 线运动轨迹，最终呈现效果就出来了（缩放+位移+旋转+透明度）。 ③3D变换 这个在最开始讨论的时候产品就说了需要有门被打开的动效。实现方法很多 ，最常规的 是利用图片帧的方式，多张不同状态的门的图片进行切换，造成门在逐渐打开的效果。 优点是能制作各种动效 ，缺点是增加图片的