我拿什么来吸引你——Mobile Web Design
- Han - 所有文章 - UCD大社区各式或华丽，或炫目，或让人迷惑，或让人叹服的Web Design已经愉悦我们很长很长的日子了. 可是，当有一天我们发现了一个新事物——用手机上网，在手机上看网页，我们看到了一种不一样Web，这种网页大家通常叫他们Wap页面，这种页面形式用简洁的视觉效果，清晰的页面架构和小分量的页面体积第一次满足了我们手机上网的需求.
我拿什么来吸引你——Mobile Web Design
标签：
mobile
web
design
| 发表时间：2011-06-16 13:05 | 作者：Evelyn Han
出处：http://ucdchina.com/rss/all
各式或华丽，或炫目，或让人迷惑，或让人叹服的Web Design已经愉悦我们很长很长的日子了。 可是，当有一天我们发现了一个新事物——用手机上网，在手机上看网页，我们看到了一种不一样Web，这种网页大家通常叫他们Wap页面，这种页面形式用简洁的视觉效果，清晰的页面架构和小分量的页面体积第一次满足了我们手机上网的需求。
但到了人类历史的某一天，铺天盖地的Iphone 某某 和Android谁谁都出现了，硕大的屏幕尺寸，华丽的界面展现，用手指头去完成各式的操作，手机的的历史使命再也不是打电话发短信，人们大呼“我们要上网！”我们需要给予用户手机上网合理的体验，丰富的内容和交互。又由于Html5的“说是快，那是及”的出现，时势造英雄Mobile Web 华丽登场了。
（一） 我是一种延续——Mobile Web承接Web的视觉体验
以www.deviantart.com为例，她已经是无数设计师生活的一部分，在个人电脑上我们拥有她，在手机上我们也需要她。
Mobile Web的任务很重要的就是要满足用户们从个人电脑到手机的延续，用户在个人电脑上看，在手机上也看，对于像”www.deviantart.com”这样的有很久时间积累的产品，她的视觉风格在用户的脑子里早已形成了一个具象的画面，在移动设备上我们的”m. deviantart.com”同样需要延续这样的品牌视觉风格。
从例子里我们看到好的品牌视觉延续，帮助用户在使用移动设备访问该网站时立刻建立起亲切的视觉初体验和品牌认知。更重要的是，好的视觉设计的延续可以很好的帮助用户在使用Mobile Web时快速的定位自己在个人电脑上使用Web产品时已经熟悉的各种功能，使得用户在Mobile Web上快速上手完成自己的交互需求。
（二）我是一种重生——Mobile Web视觉设计的创新
作为Mobile Web的舞台，Iphone 某某 和Android谁谁都有着各自，各式各样的“规章制度”，而且各自特立独行，我行我素。Mobile Web的舞蹈要与他们浑然天成，就需求穿上他们提供的舞衣才能与君共舞。
www.yahoo.com 的页面效果 与m.yahoo.com的页面效果
www.baidu.com的页面效果与m.baidu.com的页面效果
在上图中我们分别看到门户产品yahoo和搜索引擎产品baidu分别在个人电脑端和移动设备端的Web与Mobile Web的视觉呈现有很大的差异。
一个优秀的Mobile Web设计在延续了自身品牌的一致性后，与移动设备本身的品牌视觉特性相结合是成功的重要因素之一。一致性能帮助用户得到与设备本身和谐的流畅体验。
在上图中我们分别看到门户产品yahoo和搜索引擎产品baidu分别在个人电脑端和移动设备端的Web与Mobile Web的视觉呈现有很大的差异。一个优秀的Mobile Web设计在延续了自身品牌的一致性后，与移动设备本身的品牌视觉特性相结合是成功的重要因素之一。一致性能帮助用户得到与设备本身和谐的流畅体验。
www.naver.com的页面效果与m.naver.com的页面效果
m.naver.com的众多带有移动终端特点的视觉设计
在naver的Mobile Web视觉设计中使用了大量移动终端本身的视觉特点，如产品的链接采用app icon的方式，各级页面中导航的设计等等。
我们可以发现好的品牌再设计，也会给品牌本身带来更多的视觉展现的可能，也迎来了味道更纯正的Mobile Web，真的为Mobile 而设计——“为了用户感受的一致而不一致的去做设计”。
（三）我是Mobile Web——新的物种
曾经我是 Web的一个化身，但我在Mobile 的星球生活，我开始变化，我有了自己更多的特性，有一天我终于意识到我成为一种新的物种。
www.baidu.com 的首页与m.baidu.com的首页
用户在使用个人电脑上网与使用移动设备上网时的需求，因为使用场景，使用时间 ，使用群体等等的不同，以及移动设备本身的反推可能有着越来越大的差异。所以我们看到在个人电脑端的baidu首页没有“小说”链接，但在移动终端的baidu首页上拥有独立的“小说”频道。
Baidu小说频道
这样的差异衍生出一批批Mobile Web自有产品，这样的产品为满足用户在移动设备上的强需求而设计，这样的设计不再有过去为人们所熟悉的个人电脑Web设计的影子，成为真正的Mobile Web。
www.google.com.hk的首页与m.google.com.hk首页
Google移动端周边搜索
（四）我是云端的App—— Mobile Web App视觉设计
随着网络的不断发展，Mobile Web又迎来了Mobile Web App，不需要下载，将我添加到桌面，就成了一个App应用。
Naver Mobile Web App
Mobile Web 的视觉设计进入到全面的客户端化视觉设计， Mobile Web 与Mobile Web App的视觉设计真是老虎老鼠傻傻分不清楚。
Mobile Web 的序幕刚刚拉开，我们都抢座等着慢慢看下去。
相关 [mobile web design] 推荐：
Mobile Web调试工具Weinre
- - 移动开发 - ITeye博客现在、将来，用移动设备上网越来越成为主流. 但对于开发者们来说，移动web的调试一直是个难题，前期可以使用模拟器来协助调试，但到了真机调试阶段就让人非常头痛. 而Weinre就是解决这难题的利器. Weinre的本意是Web Inspector Remote，它是一种远程调试工具. 功能与Firebug、Webkit inspector类似，可以帮助我们即时更改页面元素、样式，调试JS等，下面就简单介绍下如何使用.
自适应网页设计（Responsive Web Design）
- - 阮一峰的网络日志随着3G的普及，越来越多的人使用手机上网. 移动设备正超过桌面设备，成为访问互联网的最常见终端. 于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页. 手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素.
Mobile Web App发展现状及展望
- - 技术改变世界 创新驱动中国 - 《程序员》官网在计算机的发展过程中，目前移动设备的时代可谓是潜力最大，发展最为迅猛，也是竞争最为激烈的一个时代. 硬件的发展速度令所有的消费者惊叹，如果2008年给你一部主频528MHz，内存192M，屏幕3.2寸，分辨率320*480的手机，你可能会觉得非常前卫，因为CPU和分辨率足够高. 而放到三年之后的今天，这部机器已经沦落到无人问津，成为古董机型的地步.
Responsive Web Design 的一些技巧和想法
- - Blog.XDite.net昨天在 Happy Designer 5 上，有聊起了做 Responsive Web Design (特別是 mobile 版)的一些狀況. 在這裡我提供一些自己的經驗和技巧：. Mobile First：如果你要做 Desktop / Mobile 雙版本的網站. 先設計 Mobile 版的，而且要從最小的尺寸開始做.
Web 前端优化最佳实践之 Mobile(iPhone) 篇
- - 可咔酷 | 网络杂货铺Web 前端优化最佳实践最后一部分是针对移动应用的，其实只是针对 iPhone 的，目前只有两条规则. 单个数据对象小于 25K (Keep Components under 25K). 这个似乎只是 针对 iPhone 研究的. 建议保持单个 Web 数据对象在 25 K 以下. Apple 官方信息指出可缓存到内存中的 Web 对象最大支持到 10M，但经过测试，发现也就是 25K 左右.
雷锋学堂：谈谈Mobile Web App的设计
- - 雷锋网【编者按】本文作者：邓腾（ @千年牛皮糖），百度无线交互设计师. 在本文中，作者将给大家谈谈Mobile Web App的设计方法，内容包括：Web App定义、Web App的特点、发展现状及设计等等. Native App与Web App的争论从未停息过，尽管很多人在批判Web App的各种不是，但也阻止不了各种各样的Web App如雨后春笋般出现，尤其是伴随智能手机的普及而受到重视的Mobile Web App.
mobilebone.js-mobile移动web APP单页切换骨架
- - 张鑫旭-鑫空间-鑫生活本文地址： http://www.zhangxinxu.com/wordpress/?p=4381. 一、mobilebone.js吹牛不打草稿. mobilebone.js是鄙人2014下半年个人开源项目代表作. 先容我吹嘘一番，反正吹牛又不要交税. 跟传统网页浏览的差别仅仅在于无刷新. 例如，我们浏览首页，首页上有个如下HTML链接：.
CSS3 Media Queries 详细介绍与使用方法，Responsive Web Design 必备技术
- - Web前端 - ITeye博客上一篇我们介绍了 Responsive Web Design之后，这次要来详细介绍CSS3 Media Queries了. 在上一篇中，我们提到 Responsive Web Desig n的实作方式有大半都是利用CSS3 Media Queries来达成. 而顾名思义Media Queries 就是要在支援CSS3 的浏览器中才能正常工作，IE8 以下不支援.
使用 Dojo Mobile 为 iOS 智能终端开发 Native-like Web 应用
- jiaosq - IBM developerWorks 中国 : 文档库随着 iOS 智能终端的流行，基于 iOS 开发 Native-like Web 应用变得越来越流行. 本文着重介绍基于 Dojo Mobile 开发 Native-like Web 应用的方法，并分享一些开发经验和技巧.