小屏,你好!10大移动端网站案例激情赏析.pdfVIP

小屏，你好！10 大移动端网站案例激 情赏析 移动互联网时代的悄然袭来改变着我们的生活方式，同时也有大批的设计力量涌 入移动端设计领域。在web2.0 时代背景下孕育成长起来的设计师们，在进入这样一个 新鲜的领域时多少有些”水土不服”。希望通过本文能给大家带来一些新的探索方向 及尝试。 网络环境研究 根据 CNNIC 第 32 次互联网络发展状况调查,截至2013 年 6 月,中国手机网民 的总规模达 4.64 亿。其中,手机浏览器用户规模为3.69 亿，同比增长21.0%,在手机 网民中的渗透率为79.5%。 用户使用手机浏览器的频率稳步提升，75.6%的用户每天都使用，其中63.3%的用 户每天使用多次。同时，从使用时长上看，手机上网开始挤占电脑上网时间，成为我 国网民的一种主流上网方式。 手机浏览器作为移动互联网的入口地位将进一步稳定提升同时也成为网民接入移 动互联网的首要入口。在这样的局势下面仅在PC 端建立网站已经开始无法满足用户的 需求。移动端网站建立的必要性十分凸显。 如图所示，3G4G 网络的普及率以及WIFI 覆盖率正快速增长，而相对占比也不断 的提升。良好的网络环境将为移动端网站设计开拓更大的空间。这为网站的视觉展示 以及流畅体验带来更多可能性，同时因为低速网络仍有比较大的占比，所以网站的性 能优化仍然是每位设计师需要迫切关注的要点。 平台支持 浏览器作为网站的承载基础，上图数据体现智能移动设备的市场占有量十分高， 而普遍智能移动设备系统的自带浏览器以及第三方浏览器基本都是采用webkit 内核， 对网站都有较高的兼容度，这为设计带来更多可控性。(相较于IE6 用户使用率仍高达 24% 的PC 端 【2013 年6 月微软数据：IE6 最新市场份额，中国大陆】，webkit 内核 浏览器对ccs3 以及html5 的网站支持率达到的93.5%以上。) 交互差异性 不同的终端有着不同的交互方式。PC 与移动设备的交互方式有着天壤之别，在PC 上良好的页面交互方式放到移动端页面已然不完全合适。移动端有着更丰富的交互方 式，比如利用手机陀螺仪的重力感应来实现一些交互(如 利用重力感应实现视差的js 特效、旋转屏幕进行转跳、”摇一摇”实现页面切换等等)，比如长按保存图片……同 时移动端交互已经慢慢有一套完善成熟的交互体系。设计师在这方面可以更多的去学 习借鉴移动产品的优秀交互方式应用到移动端网站设计中去，也应多纬度去沟通了解 其在网页上实现的可行性。 响应式设计 而说到移动端网站不得不提响应式设计。什么是响应式?简而言之，就是一个网站 能够兼容多个终端——而不是为每个终端做一个特定的版本。面对繁杂的移动设备分 辨率，这听起来非常美好，我们接下来了通过一个案例来了解一下。 NEWTON RUNNING 扫描二维码浏览(此网站在PC 与移动端皆可体验) 通过案例我们能清晰了解到在各种移动终端层出不穷的今天，响应式设计的强大 兼容性得到了巨大的体现。同时建立在强大的兼容性基础上，由于全终端共用一个网 站，那么在开发、运营和维护上会更节省成本，而在网站建设前期会给设计以及重构 加重任务;对于产品包装而言在不同终端会有更一致更完整的品牌形象。而在实际使用 过程中发现，响应式设计在不同移动终端上能获得兼容度较高的视觉呈现同时会有部 分功能性不够完善(如按钮点击区域过小);而在PC 端部分浏览器会出现错位等不兼容 情况;我们还发现在硬件性能较差的终端下，网站的流畅程度并不高(动态展示特效会 出现卡顿);而在移动终端上网站的载入过程受到网速的很大影响。所以使用响应式设 计的同时对设计师在交互设计、视觉设计，性能优化和重构方面会有更高的要求。 尽管此去任重道远，但是在国内外众多设计师的努力下依旧涌现许许多多的优秀 案例。 霍比特人 扫描二维码浏览(此网站在PC 与移动端皆可体验，PC 端推荐chrome 浏览) 该站针对PC 端与移动端做不同的细致优化，出色的视觉呈现以及顺畅的交互体验 让其有着浓烈的带入氛围与浑厚的史诗感，同时清晰的用户引导，有趣的深入探索以 及巧妙的互动小游戏让其成为一个难得的佳作。由于承载的内容十分丰富，所以消耗 网络资源较为巨大，载入时间略长。 Maker your money 扫描二维码浏览(此网站在PC 与移动端皆可体验) 该站有着喜人的矢量插画设计风