多图详解移动Web界面设计概要、技巧和案例

移动开发 移动应用
移动Web界面设计正越来越流行,本文不仅会介绍移动网页设计的趋势,还提供一些优秀的设计案例,希望本文的一些介绍能让读者得到一些启发。

移动Web界面设计正越来越流行,51CTO今天介绍了移动Web界面构建***实践。现在几乎每个主流网站或者网络服务提供商或者web app都会有手机应用版。因此从业人员迫切需要学习移动网页设计的相关知识。本文不仅会介绍移动网页设计的趋势,还提供一些优秀的设计案例,从中让读者得到一些启发。

什么是移动Web(mobile web)设计?

在开始设计移动网页之前,你应该先对手机网络非常熟悉。你会高兴地发现这里不需要学习 一些新技术,不过由于屏幕小以及操作系统繁多,你需要改变自己的设计风格。

按照Cameron Chapman的调查,目前***的操作系统是:

***的操作系统

Windows Mobile
The iPhone platform
Palm OS
Mobile Linux
Symbian OS
The BlackBerry platform
Android

而手机网络上***的浏览器是:

***的浏览器
Safari for the iPhone
Android browser
Opera Mobile
WebOS browser (on Palm devices)
BlackBerry browser
Internet Explorer Mobile (on Windows Mobile devices)

移动Web(mobile web)设计简史

下面的图片简单地展示了移动Web设计语言的发展,也许你对有些词汇不了解,下面我们给出了专门的解释:

instantShift - Mobile Web Design
移动Web(mobile web)设计简史

Standard Generalized Markup Language-简称SGML,1986年出版发布的一个信息管理方面的国际标准,主要用于印刷出版行业。该标准定义独立于平台和应用的文本文档的格式、索引和链接信息,为用户提供一种类似于语法的机制,用来定义文档的结构和指示文档结构的标签。其中Markup的含义是指插入到文档中的标记。标记分为两种:一种称为procedardmarkup,用来描述文档显示的样式;另一种称为descriptive markup,用来描述文档中的文字的用途。制定SGML的基本思想是把文档的内容与样式分开。

Handheld Device Markup Language-简称 HDML(手持装置标示语言),通常与WML(无线标示语言)进行对比。是一种能够让手机或PDA可以上网浏览信息的一种语言。Unwired Planet(无线星球)公司设计了这种语言,并将其定位为免费的开源语言。任何具备HTML,CGI以及SQL编程经验的程序员都可以利用HDML语言来编写代码。HDML与WML的一个主要区别在于WML是基于XML的,而HDML不是。另外,HDML不支持脚本,而WML拥有自己的JavaScript脚本语言,称为WMLScript。

Wireless Markup Language- 简称WML(无线标记语言)。它是一种从 HTML 继承而来的标记语言,但是 WML 基于 XML,因此它较 HTML 更严格。WML 被用来创建可显示在 WAP 浏览器中的页面。用WML编写的页面被称为 DECKS。DECKS 是作为一套 CARDS 被构造的。这种描述语言同我们常听说的HTML语言同出一家,都属于XML语言这一大家族。WML的语法跟XML一样,WML是XML的子集。HTML语言写出的内容,我们可以在我们的PC机上用IE或是Netscape等浏览器进行阅读,而WML语言写出的文件则是专门用来在手机等的一些无线终端显示屏上显示,供人们阅读的,并且同样也可以向使用者提供人机交互界面,接受使用者输入的查询等信息,然后向使用者返回他所想要获得的最终信息。

Compact HTML –紧缩 HTML ,压缩(形式)的 HTML 。面向移动电话的页面记述语言,是在对 HTML 4.0 的功能压缩后得到的子集。日本 NTT DoCoMo 的i-mode 采用这种语言。

XHTML Mobile Profile –2001年发布,基于XHTML,针对移动电话的语言,被认为是目前***秀的语言。#p#

移动Web设计的优势与劣势

[[17215]]
移动Web设计

任何事物都有好有坏,移动网页设计也不例外:

优点:

优点就在于移动性。在家里用电脑上网的时间是很长的,不过任何人都可以通过手机来上网,其状态可以是在做公交车、火车或者在一个百货店里,用户可以随时查找在其周围的相关信息、:所以你的移动网页必须保证在“走”的状态。

劣势:

主要体现在2个方面:屏幕小,装载时间长。基于这2点,你需要思考如何在一个小空间设计一个能吸引人注意力的网页,同时还能提供受众需要的信息。

为什么你不能忽视移动网页设计?

[[17216]]
为什么做移动Web设计

随着手机的不断增加,移动网页设计正渐趋重要。RipRoad的调查显示:

RipRoad的调查
2.34+亿美国人拥有手机(占美国总人口的85%)
2009年11月至2010年1月期间,4270万美国人中,18%是智能手机的活跃用户

另外,按照Pewinternet的调查,“83%的成年拥有手机或者智能手机,在这些人中,35%的人通过手机上网”。另外Ericsson还发现:“2009年12月份期间,全世界手机数据传输量***超过语音数据量,虽然这大多归功于社交媒体和视频的使用,但是这一现象将会普遍出现。”

移动网页设计从哪开始?

首先要决定是给一个网站做手机版还是完全设计出一个新的网站,虽然两个都可以做,但是目前流行的是还是给一个主流网站做一个手机版,以作为网站的分支。

然后决定内容的布局以及什么内容。另外由于通过手机浏览网页,用户通常没有很长的等待时间,所以要确保装载时间短,所以简洁设计要起到更好的效果。

屏幕尺寸

一定要记住你不再是在电脑桌面上做设计了,你的页面是要在更小的手机屏幕上显示,另外IPhone的用户可以纵横向翻转屏幕,所以你可以使用百分比和EMS来是你的网站适用于不同尺寸的手机屏幕,另外你也可以使用META properties来限制界面的放大和屏幕尺寸。

网站测试

移动网页的测试主要是测试其在智能手机和非智能手机上网站的外观、导航以及加载是什么情况,有时甚至在不同的手机浏览器,其效果都会有所不同。尽可能在更多的手机设备上进行测试,这样才能保证更多的用户有着很好的体验。#p#

移动Web设计范例

Mobile Awesomeness是一个移动网站设计作品资源库,展示不同行业的移动网页设计。

01. Facebook

Facebook

02. Nclud

Nclud

03. Mail Chimp

Mail Chimp

04. Mixx

Mixx

05. Mashable

Mashable

06. Smashing Magazine

Smashing Magazine

07. Deviant Art

Deviant Art

08. Cnet

Cnet

09. Walmart

Walmart

10. Viget Labs

Viget Labs

11. Coosh

Coosh

12. Intel

Intel

13. United Airlines

United Airlines

14. H&M

H&M

15. Tabo Bell

Tabo Bell

16. McDonald

McDonald

17. Ars Technica

Ars Technica

18. iWeathr

iWeathr

19. Amazon

Amazon

20. eBay

eBay

Conclusion!结论!

大部分设计是简单简洁的,直接切入要点,同时还要有图片和Logo,可以把移动网页设计想象成传统网站的简洁版,所以你不需要抛弃之前的网络设计知识,就是要削减网站规模与装载时间,做到这些,你的设计肯定会得到客户的喜爱。

原文名称:Mobile Web Design: Overview, Examples and Tips

原文地址:http://www.instantshift.com/2010/04/09/mobile-web-design-overview-examples-and-tips/

【编辑推荐】

  1. 移动Web界面构建***实践
  2. 移动设备界面UI设计注意事项全解析
  3. Windows Phone 7开发工具UI设计新特性
  4. 如何设计一个简结的移动互联网站
  5. 移动产品设计的信息架构
责任编辑:佚名 来源: socialbeta
相关推荐

2019-09-30 07:26:13

界面设计UI设计师

2010-10-27 14:17:19

UI设计布局

2011-08-18 14:26:55

Web

2019-07-08 14:33:25

资讯类APPAPP界面设计

2011-05-24 16:07:21

UI设计移动应用

2015-05-07 09:37:56

移动开发设计

2011-06-01 09:31:46

用户界面设计

2011-09-19 10:15:10

移动界面设计

2013-09-04 11:26:41

移动应用界面设计

2014-04-03 09:49:20

设计界面设计

2012-06-04 14:45:03

儿童移动应用界面设计基础知识

2010-08-18 14:49:15

移动开发界面设计减少空间占用

2011-12-15 21:24:46

应用

2011-12-20 10:42:22

Android应用界面设计

2011-06-01 10:58:57

2017-10-31 08:33:57

微软

2011-06-01 10:30:41

用户界面

2015-07-09 10:25:45

界面设计UI设计

2016-03-16 09:41:50

移动界面设计

2011-04-12 09:25:43

用户界面设计iPhoneiOS
点赞
收藏

51CTO技术栈公众号