移動Web界面設(shè)計(jì)正越來越流行，51CTO今天介紹了移動Web界面構(gòu)建***實(shí)踐?，F(xiàn)在幾乎每個主流網(wǎng)站或者網(wǎng)絡(luò)服務(wù)提供商或者web app都會有手機(jī)應(yīng)用版。因此從業(yè)人員迫切需要學(xué)習(xí)移動網(wǎng)頁設(shè)計(jì)的相關(guān)知識。本文不僅會介紹移動網(wǎng)頁設(shè)計(jì)的趨勢，還提供一些優(yōu)秀的設(shè)計(jì)案例，從中讓讀者得到一些啟發(fā)。

什么是移動Web（mobile web）設(shè)計(jì)？

在開始設(shè)計(jì)移動網(wǎng)頁之前，你應(yīng)該先對手機(jī)網(wǎng)絡(luò)非常熟悉。你會高興地發(fā)現(xiàn)這里不需要學(xué)習(xí) 一些新技術(shù)，不過由于屏幕小以及操作系統(tǒng)繁多，你需要改變自己的設(shè)計(jì)風(fēng)格。

按照Cameron Chapman的調(diào)查，目前***的操作系統(tǒng)是：

而手機(jī)網(wǎng)絡(luò)上***的瀏覽器是：

移動Web（mobile web）設(shè)計(jì)簡史

下面的圖片簡單地展示了移動Web設(shè)計(jì)語言的發(fā)展，也許你對有些詞匯不了解，下面我們給出了專門的解釋：

移動Web（mobile web）設(shè)計(jì)簡史

Standard Generalized Markup Language-簡稱SGML，1986年出版發(fā)布的一個信息管理方面的國際標(biāo)準(zhǔn)，主要用于印刷出版行業(yè)。該標(biāo)準(zhǔn)定義獨(dú)立于平臺和應(yīng)用的文本文檔的格式、索引和鏈接信息，為用戶提供一種類似于語法的機(jī)制，用來定義文檔的結(jié)構(gòu)和指示文檔結(jié)構(gòu)的標(biāo)簽。其中Markup的含義是指插入到文檔中的標(biāo)記。標(biāo)記分為兩種：一種稱為procedardmarkup，用來描述文檔顯示的樣式；另一種稱為descriptive markup，用來描述文檔中的文字的用途。制定SGML的基本思想是把文檔的內(nèi)容與樣式分開。

Handheld Device Markup Language-簡稱 HDML（手持裝置標(biāo)示語言），通常與WML（無線標(biāo)示語言）進(jìn)行對比。是一種能夠讓手機(jī)或PDA可以上網(wǎng)瀏覽信息的一種語言。Unwired Planet（無線星球）公司設(shè)計(jì)了這種語言，并將其定位為免費(fèi)的開源語言。任何具備HTML，CGI以及SQL編程經(jīng)驗(yàn)的程序員都可以利用HDML語言來編寫代碼。HDML與WML的一個主要區(qū)別在于WML是基于XML的，而HDML不是。另外，HDML不支持腳本，而WML擁有自己的JavaScript腳本語言，稱為WMLScript。

Wireless Markup Language- 簡稱WML(無線標(biāo)記語言)。它是一種從 HTML 繼承而來的標(biāo)記語言，但是 WML 基于 XML，因此它較 HTML 更嚴(yán)格。WML 被用來創(chuàng)建可顯示在 WAP 瀏覽器中的頁面。用WML編寫的頁面被稱為 DECKS。DECKS 是作為一套 CARDS 被構(gòu)造的。這種描述語言同我們常聽說的HTML語言同出一家，都屬于XML語言這一大家族。WML的語法跟XML一樣，WML是XML的子集。HTML語言寫出的內(nèi)容，我們可以在我們的PC機(jī)上用IE或是Netscape等瀏覽器進(jìn)行閱讀，而WML語言寫出的文件則是專門用來在手機(jī)等的一些無線終端顯示屏上顯示，供人們閱讀的，并且同樣也可以向使用者提供人機(jī)交互界面，接受使用者輸入的查詢等信息，然后向使用者返回他所想要獲得的最終信息。

Compact HTML –緊縮 HTML ，壓縮（形式）的 HTML 。面向移動電話的頁面記述語言，是在對 HTML 4.0 的功能壓縮后得到的子集。日本 NTT DoCoMo 的i-mode 采用這種語言。

XHTML Mobile Profile –2001年發(fā)布，基于XHTML，針對移動電話的語言，被認(rèn)為是目前***秀的語言。#p#

移動Web設(shè)計(jì)的優(yōu)勢與劣勢

[[17215]]
移動Web設(shè)計(jì)

任何事物都有好有壞，移動網(wǎng)頁設(shè)計(jì)也不例外：

優(yōu)點(diǎn)：

優(yōu)點(diǎn)就在于移動性。在家里用電腦上網(wǎng)的時間是很長的，不過任何人都可以通過手機(jī)來上網(wǎng)，其狀態(tài)可以是在做公交車、火車或者在一個百貨店里，用戶可以隨時查找在其周圍的相關(guān)信息、：所以你的移動網(wǎng)頁必須保證在“走”的狀態(tài)。

劣勢：

主要體現(xiàn)在2個方面：屏幕小，裝載時間長?；谶@2點(diǎn)，你需要思考如何在一個小空間設(shè)計(jì)一個能吸引人注意力的網(wǎng)頁，同時還能提供受眾需要的信息。

為什么你不能忽視移動網(wǎng)頁設(shè)計(jì)？

[[17216]]
為什么做移動Web設(shè)計(jì)

隨著手機(jī)的不斷增加，移動網(wǎng)頁設(shè)計(jì)正漸趨重要。RipRoad的調(diào)查顯示：

另外，按照Pewinternet的調(diào)查，“83%的成年擁有手機(jī)或者智能手機(jī)，在這些人中，35%的人通過手機(jī)上網(wǎng)”。另外Ericsson還發(fā)現(xiàn)：“2009年12月份期間，全世界手機(jī)數(shù)據(jù)傳輸量***超過語音數(shù)據(jù)量，雖然這大多歸功于社交媒體和視頻的使用，但是這一現(xiàn)象將會普遍出現(xiàn)。”

移動網(wǎng)頁設(shè)計(jì)從哪開始？

首先要決定是給一個網(wǎng)站做手機(jī)版還是完全設(shè)計(jì)出一個新的網(wǎng)站，雖然兩個都可以做，但是目前流行的是還是給一個主流網(wǎng)站做一個手機(jī)版，以作為網(wǎng)站的分支。

然后決定內(nèi)容的布局以及什么內(nèi)容。另外由于通過手機(jī)瀏覽網(wǎng)頁，用戶通常沒有很長的等待時間，所以要確保裝載時間短，所以簡潔設(shè)計(jì)要起到更好的效果。

屏幕尺寸

一定要記住你不再是在電腦桌面上做設(shè)計(jì)了，你的頁面是要在更小的手機(jī)屏幕上顯示，另外IPhone的用戶可以縱橫向翻轉(zhuǎn)屏幕，所以你可以使用百分比和EMS來是你的網(wǎng)站適用于不同尺寸的手機(jī)屏幕，另外你也可以使用META properties來限制界面的放大和屏幕尺寸。

網(wǎng)站測試

移動網(wǎng)頁的測試主要是測試其在智能手機(jī)和非智能手機(jī)上網(wǎng)站的外觀、導(dǎo)航以及加載是什么情況，有時甚至在不同的手機(jī)瀏覽器，其效果都會有所不同。盡可能在更多的手機(jī)設(shè)備上進(jìn)行測試，這樣才能保證更多的用戶有著很好的體驗(yàn)。#p#

移動Web設(shè)計(jì)范例

Mobile Awesomeness是一個移動網(wǎng)站設(shè)計(jì)作品資源庫，展示不同行業(yè)的移動網(wǎng)頁設(shè)計(jì)。

01. Facebook

02. Nclud

03. Mail Chimp

04. Mixx

05. Mashable

06. Smashing Magazine

07. Deviant Art

08. Cnet

09. Walmart

10. Viget Labs

11. Coosh

12. Intel

13. United Airlines

14. H&M

15. Tabo Bell

16. McDonald

17. Ars Technica

18. iWeathr

19. Amazon

20. eBay

Conclusion!結(jié)論！

大部分設(shè)計(jì)是簡單簡潔的，直接切入要點(diǎn)，同時還要有圖片和Logo，可以把移動網(wǎng)頁設(shè)計(jì)想象成傳統(tǒng)網(wǎng)站的簡潔版，所以你不需要拋棄之前的網(wǎng)絡(luò)設(shè)計(jì)知識，就是要削減網(wǎng)站規(guī)模與裝載時間，做到這些，你的設(shè)計(jì)肯定會得到客戶的喜愛。

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

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

【編輯推薦】

1. 移動Web界面構(gòu)建***實(shí)踐
2. 移動設(shè)備界面UI設(shè)計(jì)注意事項(xiàng)全解析
3. Windows Phone 7開發(fā)工具UI設(shè)計(jì)新特性
4. 如何設(shè)計(jì)一個簡結(jié)的移動互聯(lián)網(wǎng)站
5. 移動產(chǎn)品設(shè)計(jì)的信息架構(gòu)