本文由SocialBeta內(nèi)容貢獻(xiàn)者wisp譯自Mobile Web Design: Overview, Examples and Tips，由于專業(yè)所限，翻譯中難免有一些錯(cuò)誤，請(qǐng)廣大讀者指正，謝謝。

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

什么是移動(dòng)網(wǎng)頁(yè)（mobile web）設(shè)計(jì)？

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

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

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

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

• Safari for the iPhone
• Android browser
• Opera Mobile
• WebOS browser (on Palm devices)
• BlackBerry browser
• Internet Explorer Mobile (on Windows Mobile devices)
  
  

移動(dòng)網(wǎng)頁(yè)（mobile web）設(shè)計(jì)簡(jiǎn)史

下面的圖片簡(jiǎn)單地展示了移動(dòng)網(wǎng)站設(shè)計(jì)語(yǔ)言的發(fā)展，也許你對(duì)有些詞匯不了解，下面我們給出了專門的解釋：

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

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

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

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

XHTML Mobile Profile –2001年發(fā)布，基于XHTML，針對(duì)移動(dòng)電話的語(yǔ)言，被認(rèn)為是目前最優(yōu)秀的語(yǔ)言。

移動(dòng)網(wǎng)頁(yè)設(shè)計(jì)的優(yōu)勢(shì)與劣勢(shì)

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

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

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

劣勢(shì)：

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

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

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

• 2.34+億美國(guó)人擁有手機(jī)（占美國(guó)總?cè)丝诘?5%）
• 2009年11月至2010年1月期間，4270萬(wàn)美國(guó)人中，18%是智能手機(jī)的活躍用戶

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

移動(dòng)網(wǎng)頁(yè)設(shè)計(jì)從哪開(kāi)始？

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

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

屏幕尺寸

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

網(wǎng)站測(cè)試

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

移動(dòng)網(wǎng)頁(yè)設(shè)計(jì)范例

Mobile Awesomeness是一個(gè)移動(dòng)網(wǎng)站設(shè)計(jì)作品資源庫(kù)，展示不同行業(yè)的移動(dòng)網(wǎng)頁(yè)設(shè)計(jì)。 這是網(wǎng)站地址：http://www.mobileawesomeness.com/

01.?Facebook

Official Link

02.?Nclud

Official Link

03.?Mail Chimp

Official Link

04.?Mixx

Official Link

05.?Mashable

Official Link

06.?Smashing Magazine

Official Link

07.?Deviant Art

Official Link

08.?Cnet

Official Link

09.?Walmart

Official Link

10.?Viget Labs

Official Link

11.?Coosh

Official Link

12.?Intel

Official Link

13.?United Airlines

Official Link

14.?H&M

Official Link

15.?Tabo Bell

Official Link

16.?McDonald

Official Link

17.?Ars Technica

Official Link

18.?iWeathr

Official Link

19.?Amazon

Official Link

20.?eBay

Official Link

Conclusion!結(jié)論！

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

更多參考內(nèi)容：

• MobileAwesomeness | Mobile Website Showcase
• 38 Mobile (iPhone) Sites
• Designing for the Mobile Web
• Mobile Web Design: Tips & Techniques
• 10 Tips to Create a More Usable Web

本文鏈接：http://www.instantshift.com/2010/04/09/mobile-web-design-overview-examples-and-tips/
原文鏈接：http://www.socialbeta.cn/articles/mobile-web-design-overview-examples-and-tips.html/
譯者：wisp