2023年11月25日发(作者：vivox9图片大全)

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特效、旋转屏幕进⾏转跳、”摇⼀

摇”实现页⾯切换等等)，⽐如长按保存图⽚……同时移动端交互已经慢慢有⼀套完善成熟的交互

体系。设计师在这⽅⾯可以更多的去学习借鉴移动产品的优秀交互⽅式应⽤到移动端⽹站设计

中去，也应多纬度去沟通了解其在⽹页上实现的可⾏性。此处推荐⼀篇⽂章：《交互体验优

化：4步让移动⽹站看起来像本地应⽤》—— AlloyTeam 》

响应式设计

⽽说到移动端⽹站不得不提响应式设计。什么是响应式?简⽽⾔之，就是⼀个⽹站能够兼容多个

终端——⽽不是为每个终端做⼀个特定的版本。⾯对繁杂的移动设备分辨率，这听起来⾮常美

好，我们接下来了通过⼀个案例来了解⼀下。

NEWTON RUNNING

点击标题或者扫描⼆维码浏览(此⽹站在PC与移动端皆可体验)

通过案例我们能清晰了解到在各种移动终端层出不穷的今天，响应式设计的强⼤兼容性得到了

巨⼤的体现。同时建⽴在强⼤的兼容性基础上，由于全终端共⽤⼀个⽹站，那么在开发、运营

和维护上会更节省成本，⽽在⽹站建设前期会给设计以及重构加重任务;对于产品包装⽽⾔在不

同终端会有更⼀致更完整的品牌形象。⽽在实际使⽤过程中发现，响应式设计在不同移动终端

上能获得兼容度较⾼的视觉呈现同时会有部分功能性不够完善(如按钮点击区域过⼩);⽽在PC端

部分浏览器会出现错位等不兼容情况;我们还发现在硬件性能较差的终端下，⽹站的流畅程度并

不⾼(动态展⽰特效会出现卡顿);⽽在移动终端上⽹站的载⼊过程受到⽹速的很⼤影响。所以使⽤

响应式设计的同时对设计师在交互设计、视觉设计，性能优化和重构⽅⾯会有更⾼的要求。

尽管此去任重道远，但是在国内外众多设计师的努⼒下依旧涌现许许多多的优秀案例。

霍⽐特⼈

点击标题或者扫描⼆维码浏览(此⽹站在PC与移动端皆可体验，PC端推荐chrome浏览)

该站针对PC端与移动端做不同的细致优化，出⾊的视觉呈现以及顺畅的交互体验让其有着浓烈

的带⼊氛围与浑厚的史诗感，同时清晰的⽤户引导，有趣的深⼊探索以及巧妙的互动⼩游戏让

其成为⼀个难得的佳作。由于承载的内容⼗分丰富，所以消耗⽹络资源较为巨⼤，载⼊时间略

长。

Maker your money

点击连接或者扫描⼆维码浏览(此⽹站在PC与移动端皆可体验)

该站有着喜⼈的⽮量插画设计风格，清晰的⽤户引导，⽣动流畅的动态展⽰，使得枯燥的介绍

也变得让⼈容易接受起来，这不也正体现了设计的价值吗?

腾讯互动娱乐UP2014 发布会邀请函

点击连接或者扫描⼆维码浏览(⼿机浏览为佳)

Html5动画设计，Svg格式⽂件优化，更简约新潮的视觉展⽰，更流畅的⽤户体验，让⼀个内容

简约的页⾯⽴马上流了起来~!

腾讯移动游戏⼤奖赛

点击连接或者扫描⼆维码浏览(⼿机浏览为佳)

流畅的动画效果，简单有趣的⼩游戏，清晰的⽤户引导。好⽤、好看和有趣三个都有了~!

陈赫个⼈移动⽹站

点击连接或者扫描⼆维码浏览(⼿机浏览为佳)

以微信公众号为⼊⼝的轻度的拟APP设计的⽹站，功能按钮设计合理，跳转顺畅，⽇程、签到

等互动内容使⽤流畅。

前海公馆移动站

点击连接或者扫描⼆维码浏览(⼿机浏览为佳)

企业型⽹站，制作严谨，专题有创意，但对导航的设计不统⼀略显遗憾，跳转不顺畅也导致⽤

户体验较差。

分可惜。

⼩⽶移动商城

点击连接或者扫描⼆维码浏览(⼿机浏览为佳)

脱胎于PC的平台站，布局合理，展⽰清晰，体验流畅，同时也较平淡规矩。

优⾐库⽜仔系列页⾯

点击连接或者扫描⼆维码浏览(此⽹站在PC与移动端皆可体验)

视觉上延续优⾐库⼀贯的简约，响应式设计在多个终端上获得了⽐较完整的视觉效果。不⾜的

是在⼿机端上，按钮过⼩，给操作带来⼀定困难。

总结

看完案例回归到实际的项⽬中我们会发现：设计师在执⾏前期的各纬度沟通⼗分重要，特别是

和重构⼯程师的提前沟通，对于页⾯的还原度以及⽤户体验会有很⼤的帮助;由于有着兼容度较

⾼的浏览器为基础，尝试⼀些新颖动画特效会让你的⽹站看起来更⽣动新潮;

跳开PC端页⾯设计的固定思维，更多的运⽤移动端特有的交互⽅式，会带来更酷⽤户体验，⽐