10个国内优秀的移动端网页设计案例分析理论文摘

移动互联网时代的悄然袭来改变着我们的生活方式，同时也有大批的设计力量涌入移动端设计领域。在web2.0时代背景下孕育成长起来的设计师们，在进入这样一个新鲜的领域时多少有些”水土不服”。希望通过本文能给大家带来一些新的探索方向及尝试。

通过案例我们能清晰了解到在各种移动终端层出不穷的今天，响应式设计的强大兼容性得到了巨大的体现。同时建立在强大的兼容性基础上，由于全终端共用一个网站，那么在开发、运营和维护上会更节省成本，而在网站建设前期会给设计以及重构加重任务;对于产品包装而言在不同终端会有更一致更完整的品牌形象。而在实际使用过程中发现，响应式设计在不同移动终端上能获得兼容度较高的视觉呈现同时会有部分功能性不够完善(如按钮点击区域过小);而在PC端部分浏览器会出现错位等不兼容情况;我们还发现在硬件性能较差的终端下，网站的流畅程度并不高(动态展示特效会出现卡顿);而在移动终端上网站的载入过程受到网速的很大影响。所以使用响应式设计的同时对设计师在交互设计、视觉设计，性能优化和重构方面会有更高的要求。尽管此去任重道远，但是在国内外众多设计师的努力下依旧涌现许许多多的优秀案例。[Page:]霍比特人

该站有着喜人的矢量插画设计风格，清晰的用户引导，生动流畅的动态展示，使得枯燥的介绍也变得让人容易接受起来，这不也正体现了设计的价值吗[Page:]腾讯互动娱乐UP2014发布会邀请函

Html5动画设计，Svg格式文件优化，更简约新潮的视觉展示，更流畅的用户体验，让一个内容简约的页面立马上流了起来~!腾讯移动游戏大奖赛

流畅的动画效果，简单有趣的小游戏，清晰的用户引导。好用、好看和有趣三个都有了~![Page:]陈赫个人移动网站

企业型网站，制作严谨，专题有创意，但对导航的设计不统一略显遗憾，跳转不顺畅也导致用户体验较差。宜家PS2014新品发布移动站

情感化场景设计，针对用户群的痛点表达到位，但产品展示不够清晰，未开通在线购买功能十分可惜。[Page:]小米移动商城

脱胎于PC的平台站，布局合理，展示清晰，体验流畅，同时也较平淡规矩。[Page:]优衣库牛仔系列页面

视觉上延续优衣库一贯的简约，响应式设计在多个终端上获得了比较完整的视觉效果。不足的是在手机端上，按钮过小，给操作带来一定困难。总结看完案例回归到实际的项目中我们会发现：设计师在执行前期的各纬度沟通十分重要，特别是和重构工程师的提前沟通，对于页面的还原度以及用户体验会有很大的帮助;由于有着兼容度较高的浏览器为基础，尝试一些新颖动画特效会让你的网站看起来更生动新潮;跳开PC端页面设计的固定思维，更多的运用移动端特有的交互方式，会带来更酷用户体验，比如对重力感应的应用等。本文粗浅的分析希望给设计师们带来一些思考和帮助，有不足之处欢迎指正，也与诸君共勉。