多圖詳解移動Web界面設計概要、技巧和案例
移動Web界面設計正越來越流行，51CTO今天介紹了移動Web界面構建***實踐?，F在幾乎每個主流網站或者網絡服務提供商或者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設計語言的發展，也許你對有些詞匯不了解，下面我們給出了專門的解釋：
移動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設計的優勢與劣勢
移動Web設計
任何事物都有好有壞，移動網頁設計也不例外：
優點：
優點就在于移動性。在家里用電腦上網的時間是很長的，不過任何人都可以通過手機來上網，其狀態可以是在做公交車、火車或者在一個百貨店里，用戶可以隨時查找在其周圍的相關信息、：所以你的移動網頁必須保證在“走”的狀態。
劣勢：
主要體現在2個方面：屏幕小，裝載時間長?；谶@2點，你需要思考如何在一個小空間設計一個能吸引人注意力的網頁，同時還能提供受眾需要的信息。
為什么你不能忽視移動網頁設計？
為什么做移動Web設計
隨著手機的不斷增加，移動網頁設計正漸趨重要。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
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!結論！
大部分設計是簡單簡潔的，直接切入要點，同時還要有圖片和Logo，可以把移動網頁設計想象成傳統網站的簡潔版，所以你不需要拋棄之前的網絡設計知識，就是要削減網站規模與裝載時間，做到這些，你的設計肯定會得到客戶的喜愛。
原文名稱：Mobile Web Design: Overview, Examples and Tips
原文地址：http://www.instantshift.com/2010/04/09/mobile-web-design-overview-examples-and-tips/
【編輯推薦】
