移动Web设计 我拿什么来拯救你?

移动开发 移动应用
当有一天我们发现了一个新事物——用手机上网,在手机上看网页,我们看到了一种不一样Web,这种移动Web大家通常叫他们Wap页面:他不华丽、不炫目、也不让人迷惑,这种移动Web形式用简洁的视觉效果,清晰的移动Web架构和小分量的页面体积第一次满足了我们手机上网的需求。

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

各式或华丽,或炫目,或让人迷惑,或让人叹服的Web设计已经愉悦我们很长很长的日子了。 可是,当有一天我们发现了一个新事物——用手机上网,在手机上看网页,我们看到了一种不一样Web,这种网页大家通常叫他们Wap页面,这种页面形式用简洁的视觉效果,清晰的页面架构和小分量的页面体积第一次满足了我们手机上网的需求。

 

移动设备

但到了人类历史的某一天,铺天盖地的iPhone 某某 和Android谁谁都出现了,硕大的屏幕尺寸,华丽的界面展现,用手指头去完成各式的操作,手机的的历史使命再也不是打电话发短信,人们大呼“我们要上网!”我们需要给予用户手机上网合理的体验,丰富的内容和交互。又由于Html5的“说是快,那是及”的出现,时势造英雄移动Web 华丽登场了。

iPhone与Android

(一) 我是一种延续——移动Web承接Web的视觉体验

以www.deviantart.com为例,她已经是无数设计师生活的一部分,在个人电脑上我们拥有她,在手机上我们也需要她。

Mobile Web承接Web的视觉体验

移动Web的任务很重要的就是要满足用户们从个人电脑到手机的延续,用户在个人电脑上看,在手机上也看,对于像”www.deviantart.com”这样的有很久时间积累的产品,她的视觉风格在用户的脑子里早已形成了一个具象的画面,在移动设备上我们的”m. deviantart.com”同样需要延续这样的品牌视觉风格。

Mobile Web承接Web的视觉体验

从例子里我们看到好的品牌视觉延续,帮助用户在使用移动设备访问该网站时立刻建立起亲切的视觉初体验和品牌认知。更重要的是,好的视觉设计的延续可以很好的帮助用户在使用移动Web时快速的定位自己在个人电脑上使用Web产品时已经熟悉的各种功能,使得用户在移动Web上快速上手完成自己的交互需求。

(二)我是一种重生——移动Web视觉设计的创新

作为移动Web的舞台,iPhone 某某 和Android谁谁都有着各自,各式各样的“规章制度”,而且各自特立独行,我行我素。移动Web的舞蹈要与他们浑然天成,就需求穿上他们提供的舞衣才能与君共舞。

www.yahoo.com 的页面效果 与m.yahoo.com的页面效果

www.yahoo.com 的页面效果 与m.yahoo.com的页面效果

www.baidu.com的页面效果与m.baidu.com的页面效果移动Web视觉设计的创新

www.baidu.com的页面效果与m.baidu.com的页面效果

在上图中我们分别看到门户产品yahoo和搜索引擎产品baidu分别在个人电脑端和移动设备端的Web与移动Web的视觉呈现有很大的差异。

一个优秀的移动Web设计在延续了自身品牌的一致性后,与移动设备本身的品牌视觉特性相结合是成功的重要因素之一。一致性能帮助用户得到与设备本身和谐的流畅体验。

在上图中我们分别看到门户产品yahoo和搜索引擎产品baidu分别在个人电脑端和移动设备端的Web与移动Web的视觉呈现有很大的差异。一个优秀的移动Web设计在延续了自身品牌的一致性后,与移动设备本身的品牌视觉特性相结合是成功的重要因素之一。一致性能帮助用户得到与设备本身和谐的流畅体验。

www.naver.com的页面效果与m.naver.com的页面效果

www.naver.com的页面效果与m.naver.com的页面效果

m.naver.com的众多带有移动终端特点的视觉设计

m.naver.com的众多带有移动终端特点的视觉设计

在naver的移动Web视觉设计中使用了大量移动终端本身的视觉特点,如产品的链接采用app icon的方式,各级页面中导航的设计等等。

我们可以发现好的品牌再设计,也会给品牌本身带来更多的视觉展现的可能,也迎来了味道更纯正的移动Web,真的为Mobile 而设计——“为了用户感受的一致而不一致的去做设计”。

(三)我是移动Web——新的物种

曾经我是 Web的一个化身,但我在Mobile 的星球生活,我开始变化,我有了自己更多的特性,有一天我终于意识到我成为一种新的物种。

www.baidu.com 的首页与m.baidu.com的首页

www.baidu.com 的首页与m.baidu.com的首页

用户在使用个人电脑上网与使用移动设备上网时的需求,因为使用场景,使用时间 ,使用群体等等的不同,以及移动设备本身的反推可能有着越来越大的差异。所以我们看到在个人电脑端的baidu首页没有“小时”链接,但在移动终端的baidu首页上拥有独立的“小说”频道。

Baidu小说频道

Baidu小说频道

这样的差异衍生出一批批移动Web自有产品,这样的产品为满足用户在移动设备上的强需求而设计,这样的设计不再有过去为人们所熟悉的个人电脑Web设计的影子,成为真正的移动Web。

www.google.com.hk的首页与m.google.com.hk首页

www.google.com.hk的首页与m.google.com.hk首页

谷歌移动端周边搜索

谷歌移动端周边搜索

(四)我是云端的App—— 移动Web App视觉设计

随着网络的不断发展,移动Web又迎来了移动Web App,不需要下载,将我添加到桌面,就成了一个App应用。

Naver 移动Web App

Naver Mobile Web App

移动Web 的视觉设计进入到全面的客户端化视觉设计, 移动Web 与移动Web App的视觉设计真是老虎老鼠傻傻分不清楚。

移动Web 的序幕刚刚拉开,我们都抢座等着慢慢看下去。

责任编辑:佚名 来源: Mux.baidu
相关推荐

2015-10-28 17:35:35

自动化运维Ansible配置管理

2017-08-31 16:17:23

2018-10-17 10:19:34

网络安全网络病毒信息泄露

2012-08-21 14:30:46

2011-03-31 14:21:42

保存数据

2012-07-24 09:16:19

邮箱技巧

2015-07-20 11:19:43

互联网失败案例

2012-08-27 15:10:02

技术人员

2012-05-13 13:01:56

安卓

2013-05-10 09:40:16

移动Nokia移动市场

2010-03-21 16:27:22

UNIX系统x86服务器大型机

2017-07-14 10:51:20

DIY硬件市场

2014-11-28 11:02:22

云智慧

2011-03-24 15:00:48

2013-06-03 10:54:42

2018-06-03 15:57:05

2016-09-16 22:58:10

2016-04-27 15:21:01

2022-04-29 08:00:36

web3区块链比特币
点赞
收藏

51CTO技术栈公众号