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