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

各式或华丽,或炫目,或让人迷惑,或让人叹服的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 AppMobile Web 的视觉设计进入到全面的客户端化视觉设计, Mobile Web 与Mobile Web App的视觉设计真是老虎老鼠傻傻分不清楚。Mobile Web 的序幕
刚刚拉开,我们都抢座等着慢慢看下去。

来源:http://mux.baidu.com/2011/06/898/

时间: 2024-08-22 14:54:58

我拿什么来吸引你——Mobile Web Design的相关文章

移动手机界面视觉设计:Mobile Web视觉设计的创新

文章描述:我拿什么来吸引你--Mobile Web Design. 各式或华丽,或炫目,或让人迷惑,或让人叹服的Web Design已经愉悦我们很长很长的日子了. 可是,当有一天我们发现了一个新事物--用手机上网,在手机上看网页,我们看到了一种不一样Web,这种网页大家通常叫他们Wap页面,这种页面形式用简洁的视觉效果,清晰的页面架构和小分量的页面体积第一次满足了我们手机上网的需求. 但到了人类历史的某一天,铺天盖地的Iphone 某某 和Android谁谁都出现了,硕大的屏幕尺寸,华丽的界面展

移动Web设计:Mobile Web设计中的建议和禁忌

文章描述:如果你正准备为你的网站制作一个移动设备版本,那这篇文章将会对你相当有用,在本文中,将探索移动Web网页编码设计的各种技巧和注意事项. 如果你正准备为你的网站制作一个移动设备版本,那这篇文章将会对你相当有用,在本文中,将探索移动Web网页编码设计的各种技巧和注意事项: 为了移动设备上的用户体验可以被接受,代码得怎么设计. "Mobile Web"与普通网站的不同之处? 可以让网站成功运行在移动设备和桌面浏览器上的基本技巧 一些Mobile Web设计中的建议和禁忌.以及大量资源

Mobile Web设计中的建议和禁忌

在这篇文章中,我将努力揭开Mobile Web开发的神秘面纱,换句话说,也就是为了移动设备上的用户体验可以被接受,代码得怎么设计.我将阐述"Mobile Web"与普通网站的不同之处.可以让网站成功运行在移动设备和桌面浏览器上的基本技巧.一些Mobile Web设计中的建议和禁忌.以及大量资源 – 你可以去找到更多有用的信息. Mobile Web和普通网站到底有何不同呢? 这是个很好的问题 – 首先,也许我们应该从"什么是Mobile Web"的问题开始.毕竟,用

Mobile Web中URL设计问题

自 己虽然也注册了CSDN账号,但是没有在上面发表过博客等内容.不过经常在Google里面搜索相关内容时,会显示csdn的结果.这也说明国内很多IT 人员都会在CSDN发表博客,记录解决问题过程或者想法.因为之前在学校主要学习是.NET技术,所以自己的博文基本都是在博客园上.   CSDN博客有桌面版和移动版,2个版本.今天搜索到是一个移动版吗,搜索出来的地址:http://m.blog.csdn.net/blog/jinzheng069/8783370 截图如下: 第一次用户体验:[失败] 因

让jQuery Tools Scrollable控件在Mobile Web里面支持resize功能

项目中有两份代码,一份是Main Site,一份是Mobile Site.Main Site里面主页使用到jQuery Tools Scrollable功能,让多张图片循环显示.但是这个功能移植到Mobile Site中,出现了一些问题.   因为本身要实现scrollable功能,必须有特定的html结构和css.然后调用scrollable()方法才能实现这个功能.一个基本scrollable实现代码可以参考jQuery Tools的官方文档.参考地址:http://jquerytools.

自适应网页设计(Responsive Web Design)

随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通常在600像素以下:PC的屏幕宽度,一般都在1000像素以上(目前主流宽度是1366×768),有的还达到了2000像素.同样的内容,要在大小迥异的屏幕上,都呈现出满意的效果,并不是一件容易的事. 很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个mobile版本,或者iPhone

响应式设计(Response Web Design)浅谈

响应式Web设计,这个话题可能是当下Web设计领域里讨论和应用比较多的话题了,为什么要响应式Web设计?什么是响应式Web设计? Web发展迅速,各种应用和服务层出不穷,现在打开电脑,可能使用最多的程序应该是浏览器了,访问不同的网站,可以满足人们购物,社交,获取新闻资讯,娱乐,等等需求.然而近几年内,移动设备快速崛起,移动互联网慢慢进入人们的生活,预计未来5年内移动设备的使用度会超过桌面计算机.所以需要您的网站不仅要在桌面计算机大尺寸屏幕上可以为用户提供友好的UI和用户体验,同时在小尺寸屏幕上也

网页设计(Web Design)空格处理方法

文章描述:相信认真做过网页设计(Web Design),或者关注过页面设计的同行都对"空格"不陌生."空格"属于一类细节,很容易被忽略,但又比较影响效果,更麻烦是很不好控制.此问题总结的想法,来自"知乎"上梁海的提问,以及对他提供专业答案的反思和总结. 相信认真做过网页设计(Web Design),或者关注过页面设计的同行都对"空格"不陌生."空格"属于一类细节,很容易被忽略,但又比较影响效果,更麻烦是很不

Mobile UI Design Patterns: 10+ Sites for Inspiration

原文:http://sixrevisions.com/user-interface/mobile-ui-design-patterns-inspiration/ User interface design patterns are solutions to common design challenges, such as navigating around an app, listing data or providing feedback to users. Mobile apps and