多圖詳解移動Web界面設計概要、技巧和案例

作者：Wisp譯 2010-11-26 13:55:34

移動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#