设计师必备网址百度MUX

http://mux.baidu.com/feed/

百度MUX

2011年6月8日，17:24:41

我拿什么来吸引你——Mobile Web Design

2011年6月1日，13:05:30| Evelyn

各式或华丽，或炫目，或让人迷惑，或让人叹服的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的页面效果

一个优秀的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 的序幕刚刚拉开，我们都抢座等着慢慢看下去。

转载于:https://blog.51cto.com/chashui/584821