手機(jī)網(wǎng)頁(yè)設(shè)計(jì)制作簡(jiǎn)明指南

本教程適用于有一定傳統(tǒng)網(wǎng)頁(yè)設(shè)計(jì)和開(kāi)發(fā)經(jīng)驗(yàn)的用戶(hù)。
現(xiàn)在越來(lái)越多的人通過(guò)手機(jī)上網(wǎng)，未來(lái)移動(dòng)互聯(lián)網(wǎng)市場(chǎng)會(huì)越來(lái)越大，但是現(xiàn)在很多手機(jī)網(wǎng)頁(yè)設(shè)計(jì)制作大多不如人意。
手機(jī)網(wǎng)頁(yè)制作比想象的要容易，本教程將介紹手機(jī)網(wǎng)頁(yè)設(shè)計(jì)和制作的七個(gè)方面的知識(shí)，讓你避免走一些現(xiàn)在的手機(jī)網(wǎng)頁(yè)的彎路，學(xué)完本教程后，你就能對(duì)手機(jī)網(wǎng)頁(yè)的制作和設(shè)計(jì)有大概的了解，然后有針對(duì)性地學(xué)相應(yīng)知識(shí)。

1.手機(jī)網(wǎng)頁(yè)的標(biāo)記語(yǔ)言

WML

WML（無(wú)線(xiàn)標(biāo)記語(yǔ)言，Wireless Markup Language），早期的手機(jī)上網(wǎng)只能通過(guò)wap網(wǎng)站，而WML是用來(lái)制作手機(jī)wap網(wǎng)站的主要標(biāo)記語(yǔ)言，它能夠比html消耗更少內(nèi)存和cpu。

因?yàn)閃ML大部分針對(duì)早期和低端的手機(jī)，現(xiàn)在已經(jīng)逐步被其他的技術(shù)取代了，現(xiàn)在學(xué)習(xí)手機(jī)網(wǎng)頁(yè)設(shè)計(jì)制作完全可以忽略WML。

但是仍然有一部分手機(jī)，如諾基亞1100這種超便宜和低端的手機(jī)，有著200萬(wàn)左右的用戶(hù)，假如手機(jī)網(wǎng)頁(yè)的受眾是這部分人，還是應(yīng)該用WML。

XHTML

未來(lái)智能手機(jī)的市場(chǎng)份額會(huì)越來(lái)越大，考慮到這點(diǎn)，現(xiàn)在進(jìn)行手機(jī)網(wǎng)頁(yè)設(shè)計(jì)制作時(shí)，我們會(huì)用到更加熟悉的標(biāo)記語(yǔ)言Xhtml。

現(xiàn)在大部分智能手機(jī)的瀏覽器都能正確處理Xhtml，它會(huì)識(shí)別兩種類(lèi)型的Html。

① Xhtml：基礎(chǔ)的，和桌面瀏覽器相同的Xhtml

② Xhtml-MP：針對(duì)智能手機(jī)的Xhtml

這兩種類(lèi)型的不同之處，Xhtml-MP包含比較少的要素和相對(duì)寬松的限制，能適合手機(jī)平臺(tái)的渲染，

其實(shí)在手機(jī)網(wǎng)頁(yè)設(shè)計(jì)制作時(shí)，很多都直接用Xhtml，也沒(méi)什么大問(wèn)題。

2.手機(jī)類(lèi)型

分辨率問(wèn)題：這個(gè)問(wèn)題已經(jīng)開(kāi)始在視頻制作領(lǐng)域出現(xiàn)了，因?yàn)橹昂芏嚯娨暦直媛识际?:3，而現(xiàn)在更多的是寬屏幕，很多視頻制作者不知道如何去放置標(biāo)志和信息。這也是網(wǎng)頁(yè)設(shè)計(jì)者和開(kāi)發(fā)者經(jīng)常會(huì)遇見(jiàn)的難題。

在手機(jī)網(wǎng)頁(yè)的設(shè)計(jì)制作中，這個(gè)問(wèn)題更加棘手，不僅要考慮分辨率、尺寸大小的兼容，而且設(shè)計(jì)制作還要考慮不同的手機(jī)屏幕的形狀，下圖顯示了手機(jī)的不同分辨率，屏幕形狀從接近正方形到長(zhǎng)方形都有，這在設(shè)計(jì)制作手機(jī)網(wǎng)頁(yè)時(shí)，幾乎令人抓狂。

可以把手機(jī)根據(jù)屏幕尺寸分成幾種常見(jiàn)的類(lèi)型，如：

• 128 x 160 pixels*
• 176 x 220 pixels*
• 240 x 320 pixels（以上幾個(gè)已不常用）
• 320 x 480 pixels
• 480 x 600 pixels

這樣在設(shè)計(jì)制作手機(jī)網(wǎng)頁(yè)時(shí)，就可以比較有針對(duì)性。注意要盡量把手機(jī)網(wǎng)頁(yè)制作成簡(jiǎn)潔的風(fēng)格，因?yàn)槭謾C(jī)沒(méi)有鼠標(biāo)，只能向上和向下，用戶(hù)不能方便地切換頁(yè)面。

手機(jī)市場(chǎng)上既有非常高端的iPhone手機(jī)和谷歌的Android手機(jī)，也有諾基亞一些單色點(diǎn)陣顯示的低端機(jī)。這些低端機(jī)在瀏覽手機(jī)網(wǎng)頁(yè)時(shí)有很多的限制，如屏幕分辨率、渲染Xhtml的性能等，因此如果你的手機(jī)網(wǎng)頁(yè)是針對(duì)這部分用戶(hù)，最好還是用WML。

另一方面，類(lèi)似于iPhone和Nexus One這種高端智能機(jī)，擁有可以和桌面瀏覽器相媲美的渲染網(wǎng)頁(yè)的性能。對(duì)這部分用戶(hù)而言，良好的用戶(hù)體驗(yàn)是很重要的，受限于手機(jī)的傳輸速度，如果直接用一般的電腦上瀏覽的網(wǎng)頁(yè)來(lái)代替手機(jī)網(wǎng)頁(yè)，對(duì)手機(jī)網(wǎng)頁(yè)的目標(biāo)客戶(hù)來(lái)說(shuō)，并非明智之舉。

3.手機(jī)網(wǎng)頁(yè)的目標(biāo)群體

任何網(wǎng)站設(shè)計(jì)網(wǎng)頁(yè)時(shí)都應(yīng)該明白自己的目標(biāo)群體，以便向他們傳輸最合適的信息。

這點(diǎn)在進(jìn)行手機(jī)網(wǎng)頁(yè)設(shè)計(jì)制作時(shí)更為重要。因?yàn)槟悴粌H要知道你的目標(biāo)群體，還要知道他們?yōu)g覽手機(jī)網(wǎng)頁(yè)時(shí)的情景。

瀏覽傳統(tǒng)的網(wǎng)站，訪(fǎng)客會(huì)坐在桌上，有著大分辨率的屏幕。手機(jī)網(wǎng)頁(yè)的訪(fǎng)客則有可能是在排隊(duì)、等交車(chē)、坐在地鐵等。

如何區(qū)分？這點(diǎn)我們可以向谷歌學(xué)習(xí)。谷歌花了很多功夫在讓網(wǎng)頁(yè)應(yīng)用程序適合手機(jī)使用上，谷歌的開(kāi)發(fā)者將看手機(jī)網(wǎng)頁(yè)人群分為三大類(lèi)，這對(duì)我們進(jìn)行手機(jī)網(wǎng)頁(yè)的設(shè)計(jì)和制作，很有參考意義。

A：一般手機(jī)用戶(hù)

一般用戶(hù)訪(fǎng)問(wèn)手機(jī)網(wǎng)頁(yè)時(shí)和用電腦訪(fǎng)問(wèn)網(wǎng)頁(yè)差不多，他們沒(méi)有特別熱衷于哪個(gè)領(lǐng)域，他們只是利用空閑時(shí)間瀏覽網(wǎng)頁(yè)。

對(duì)于電腦瀏覽網(wǎng)頁(yè)的用戶(hù)而言，這些空閑時(shí)間可能是休息時(shí)間。但是對(duì)用手機(jī)瀏覽網(wǎng)頁(yè)的用戶(hù)而言，則可能是在等待朋友或上下班路程，這意味這他們隨時(shí)可能中斷網(wǎng)頁(yè)的瀏覽。如果你的目標(biāo)群體是這些人，在制作設(shè)計(jì)手機(jī)網(wǎng)頁(yè)時(shí)要特別注意這些手機(jī)用戶(hù)的屏幕尺寸和時(shí)間上的限制。

因此設(shè)計(jì)制作手機(jī)網(wǎng)頁(yè)要“記住”用戶(hù)看的內(nèi)容的位置，以便他們隨時(shí)返回瀏覽。最好不要使用大段的內(nèi)容，相反，要把手機(jī)網(wǎng)頁(yè)的內(nèi)容制作成幾個(gè)小的部分，引起他們的關(guān)注。記住，這些手機(jī)用戶(hù)沒(méi)有時(shí)間去瀏覽大段的內(nèi)容。

B：回訪(fǎng)者

回訪(fǎng)者是一些會(huì)時(shí)?；卦L(fǎng)網(wǎng)頁(yè)，以便獲取他們感興趣的內(nèi)容的人群。

如果你的手機(jī)網(wǎng)頁(yè)提供的是一些諸如天氣預(yù)報(bào)、股票資訊、比賽運(yùn)動(dòng)的信息，那么目標(biāo)群體就會(huì)有相當(dāng)多這部分的人。因?yàn)槭謾C(jī)屏幕提供的信息是有限的，所以針對(duì)這部分手機(jī)用戶(hù)設(shè)計(jì)制作網(wǎng)頁(yè)，要考慮到這些人需要哪些信息，將這些信息放在手機(jī)網(wǎng)頁(yè)的重要位置，避免這些人在手機(jī)執(zhí)行了很多操作才在網(wǎng)頁(yè)上找到需要的內(nèi)容。

另一點(diǎn)是關(guān)于為手機(jī)網(wǎng)頁(yè)用戶(hù)提供定制服務(wù)的問(wèn)題，如制作手機(jī)網(wǎng)頁(yè)論壇。因?yàn)槭謾C(jī)用戶(hù)登錄不是那么方便，所以如能避免則盡量避免。

有一些專(zhuān)業(yè)的網(wǎng)站允許手機(jī)用戶(hù)通過(guò)電腦訪(fǎng)問(wèn)他們的網(wǎng)站，然后定制相應(yīng)的手機(jī)網(wǎng)頁(yè)的頁(yè)面，這樣會(huì)生成一個(gè)專(zhuān)門(mén)適用該用戶(hù)的網(wǎng)址，下次這個(gè)用戶(hù)用手機(jī)訪(fǎng)問(wèn)時(shí)，就能直接適用自己定制的界面。

C：特殊手機(jī)用戶(hù)

根據(jù)你的手機(jī)網(wǎng)頁(yè)所要提供服務(wù)的不同，這部分用戶(hù)也會(huì)不同。

比如電子商務(wù)用戶(hù)可能會(huì)通過(guò)手機(jī)網(wǎng)頁(yè)向你發(fā)送一些比如“未收到貨物”的通知，或者一些航班公司會(huì)收到用戶(hù)從手機(jī)發(fā)送的“搭機(jī)遲到希望立即退票”的通知。對(duì)于這些特殊用戶(hù)，設(shè)計(jì)制作手機(jī)網(wǎng)頁(yè)時(shí)要讓他們很方便的地迅速地實(shí)現(xiàn)這些要求。

4.根據(jù)具體需要提供網(wǎng)站內(nèi)容

一個(gè)很常見(jiàn)的誤區(qū)是很多網(wǎng)頁(yè)開(kāi)發(fā)者認(rèn)為只需要簡(jiǎn)單的設(shè)置，就可以將一個(gè)傳統(tǒng)的網(wǎng)頁(yè)變成可以適應(yīng)手機(jī)瀏覽的網(wǎng)頁(yè)，他們認(rèn)為只需要在CSS樣式表將media=”screen”變成media=”handheld”就能使網(wǎng)頁(yè)神奇般地適用于手機(jī)。

這是錯(cuò)誤的想法。

雖然針對(duì)手機(jī)用戶(hù)變更網(wǎng)頁(yè)的CSS可以過(guò)濾一部分的內(nèi)容，或者一些CMS網(wǎng)頁(yè)也提供了相應(yīng)的轉(zhuǎn)換插件。但這些方案并不完善。

W3c定義了“一個(gè)網(wǎng)站”的概念，意思是手機(jī)網(wǎng)頁(yè)不一定要提供和傳統(tǒng)網(wǎng)站完全一樣的內(nèi)容和設(shè)計(jì)，而是要根據(jù)手機(jī)的性能、帶寬等方面的不同提供一些差異化服務(wù)。

根據(jù)這個(gè)定義，一些傳統(tǒng)網(wǎng)頁(yè)的內(nèi)容和功能不能在手機(jī)上實(shí)現(xiàn)是很合理的。不同手機(jī)能處理的內(nèi)容和功能也都是不一樣的。所以也可以根據(jù)這些手機(jī)進(jìn)行相應(yīng)的網(wǎng)頁(yè)制作。

下圖的手機(jī)網(wǎng)頁(yè)，設(shè)計(jì)制作時(shí)僅僅保留了搜索產(chǎn)品和尋找商店的功能，這和它的傳統(tǒng)網(wǎng)頁(yè)版本簡(jiǎn)直天差地別。但這樣是合理的。

5.選擇域名

為手機(jī)網(wǎng)頁(yè)選擇什么域名取決于你的目標(biāo)群體是如何進(jìn)入網(wǎng)站的。這里有三種域名可供選擇：

A：為手機(jī)網(wǎng)頁(yè)使用獨(dú)立域名（如：www.mobile-example.com）

這是不推薦的方式，沒(méi)有必要為你的手機(jī)網(wǎng)頁(yè)用一個(gè)獨(dú)立的域名。

多個(gè)域名不僅降低你的網(wǎng)站的品牌度，而且會(huì)給用戶(hù)造成混亂。用戶(hù)不愿意多記住一個(gè)專(zhuān)為手機(jī)網(wǎng)頁(yè)而設(shè)的網(wǎng)址，并且這樣也很難選擇哪個(gè)域名用來(lái)做宣傳推廣。

B:為手機(jī)網(wǎng)頁(yè)使用子域名（如：m.example.com）

這是最流行的方式。

使用子域名可以讓手機(jī)網(wǎng)頁(yè)成為你的品牌的一部分，也不會(huì)給用戶(hù)造成混亂。如果覺(jué)得在前面加一個(gè)“m”表示手機(jī)網(wǎng)頁(yè)的方式不好，也可以考慮放置URL后面的方式，如：example.com/mobile/。

而且你要考慮用戶(hù)輸入錯(cuò)誤網(wǎng)址的情況，所以盡可能為手機(jī)網(wǎng)頁(yè)設(shè)置幾個(gè)名稱(chēng)接近的子域名，并將它們重定向一個(gè)單獨(dú)的子域名，這和將不帶www的網(wǎng)址重定向帶www的網(wǎng)址一樣。

C：為手機(jī)網(wǎng)頁(yè)注冊(cè).mobi的頂級(jí)域名（如：example.mobi）

自從.mobi可以使用之后，就引發(fā)了手機(jī)網(wǎng)頁(yè)開(kāi)發(fā)者的熱烈爭(zhēng)論。

不過(guò)圖趣不太建議使用.mobi設(shè)計(jì)制作手機(jī)網(wǎng)頁(yè)，一不便于記憶，二還是不便于記憶，呵呵。

D：判斷客戶(hù)端，并自動(dòng)顯示對(duì)應(yīng)內(nèi)容

這是一種有趣的方式：制作手機(jī)網(wǎng)頁(yè)后，讓服務(wù)器判斷客戶(hù)端是電腦還是手機(jī)，然后根據(jù)顯示相對(duì)應(yīng)的內(nèi)容。

優(yōu)點(diǎn)：只使用一個(gè)網(wǎng)址，不論電腦還是手機(jī)都能接收到正確的內(nèi)容。

缺點(diǎn)：因?yàn)榉?wù)器會(huì)自動(dòng)為客戶(hù)端選擇相應(yīng)版本的網(wǎng)頁(yè)，所以用戶(hù)不能自己選擇想看到的內(nèi)容，比如一些iPhone用戶(hù)可能不希望看到簡(jiǎn)陋版的手機(jī)網(wǎng)頁(yè)。解決這個(gè)缺點(diǎn)可以通過(guò)為一些手機(jī)設(shè)置例外。

總結(jié)：現(xiàn)在制作手機(jī)網(wǎng)頁(yè)的公司大都使用第二種方式，即使用子域名，這是最簡(jiǎn)單也是最廉價(jià)的方式，也省去了很多服務(wù)器設(shè)置的麻煩，而且這種方式也很靈活，一旦手機(jī)網(wǎng)頁(yè)流量沒(méi)有達(dá)到預(yù)期的效果，對(duì)子域名進(jìn)行處理也不會(huì)影響到傳統(tǒng)的網(wǎng)頁(yè)。

6.為手機(jī)網(wǎng)頁(yè)驗(yàn)證標(biāo)記語(yǔ)言

電腦的網(wǎng)頁(yè)瀏覽器對(duì)錯(cuò)誤比較寬容，一些html標(biāo)記的忘記書(shū)寫(xiě)或者沒(méi)有正確嵌套在電腦瀏覽器都會(huì)正確顯示，當(dāng)然容錯(cuò)率高意味著消耗更高的cpu和內(nèi)存。

手機(jī)瀏覽器的性能還無(wú)法和電腦相提并論，所以手機(jī)瀏覽器對(duì)手機(jī)網(wǎng)頁(yè)的錯(cuò)誤要嚴(yán)格一些。所以在設(shè)計(jì)和制作手機(jī)網(wǎng)頁(yè)時(shí)，你必須不斷進(jìn)行檢查、驗(yàn)證和糾錯(cuò)。

驗(yàn)證手機(jī)網(wǎng)頁(yè)和驗(yàn)證一般傳統(tǒng)的網(wǎng)頁(yè)沒(méi)什么區(qū)別，如果你使用Xhtml編寫(xiě)，可以使用相同的工具。

• W3C驗(yàn)證器可以驗(yàn)證一些簡(jiǎn)單的錯(cuò)誤，當(dāng)然這里有一個(gè)更適合驗(yàn)證手機(jī)網(wǎng)頁(yè)的版本。
• Ready.mobi site有一些專(zhuān)為驗(yàn)證手機(jī)網(wǎng)頁(yè)的選項(xiàng)。

7.為手機(jī)網(wǎng)頁(yè)不斷測(cè)試

當(dāng)通過(guò)了手機(jī)網(wǎng)頁(yè)的驗(yàn)證之后，就要針對(duì)幾種不同的手機(jī)進(jìn)行各種測(cè)試了。

用電腦的瀏覽器雖然可以進(jìn)行模擬測(cè)試，但是并不完善。這種方式通過(guò)的手機(jī)網(wǎng)頁(yè)不能適用于某些手機(jī)。

有些手機(jī)文件尺寸的限制可能會(huì)很小，所以你制作的手機(jī)網(wǎng)頁(yè)在這些設(shè)備上甚至無(wú)法顯示。另外瀏覽器支持的文件類(lèi)型也會(huì)不同，支持的圖像格式也會(huì)不同。

測(cè)試時(shí)候手機(jī)網(wǎng)頁(yè)當(dāng)然不可能擁有所有手機(jī)，所以制作網(wǎng)頁(yè)時(shí)可以使用一些替代手段。

A：為手機(jī)網(wǎng)頁(yè)使用模擬器

有很多在線(xiàn)模擬器和離線(xiàn)模擬器，這些工具允許你快速預(yù)覽手機(jī)網(wǎng)頁(yè)的圖像和布局，但這些畢竟不是真正是手機(jī)，還是存在一些潛在的問(wèn)題，所以只能作為手機(jī)網(wǎng)頁(yè)第一次的快速測(cè)試。

B：為手機(jī)網(wǎng)頁(yè)購(gòu)買(mǎi)測(cè)試服務(wù)

有一些公司為手機(jī)網(wǎng)頁(yè)的設(shè)計(jì)制作提供測(cè)試服務(wù)，可以上傳文件到這些公司，然后遠(yuǎn)程操縱，實(shí)時(shí)觀(guān)察不同手機(jī)瀏覽網(wǎng)頁(yè)的表現(xiàn)。一般為付費(fèi)服務(wù)（中國(guó)這類(lèi)公司很少）。

C：購(gòu)買(mǎi)一些手機(jī)測(cè)試手機(jī)網(wǎng)頁(yè)

如果你想專(zhuān)業(yè)設(shè)計(jì)制作手機(jī)網(wǎng)頁(yè)，可以考慮購(gòu)買(mǎi)一小些有代表性的手機(jī)，可能需要購(gòu)買(mǎi)5-6臺(tái)，以便覆蓋市面手機(jī)的主要類(lèi)型和品牌。

• 基于Windows平臺(tái)的，如HTC Mogul PPS-6800，在windowCE使用IE瀏覽器。
• 基于塞班平臺(tái)的，如諾基亞的6600，使用內(nèi)置瀏覽器或者opera瀏覽器。
• 基于蘋(píng)果OS的iphone，使用Safari瀏覽器。
• 基于谷歌的Android平臺(tái)的，使用默認(rèn)瀏覽器或第三方瀏覽器。
• 最后，選擇目標(biāo)客戶(hù)常用的手機(jī)，如中國(guó)用戶(hù)可以測(cè)試UC瀏覽器。

D：借朋友手機(jī)幫忙測(cè)試手機(jī)網(wǎng)頁(yè)

通過(guò)模擬器，你應(yīng)該完成了手機(jī)網(wǎng)頁(yè)的大部分測(cè)試，這時(shí)候可以找身邊的朋友借一些手機(jī)測(cè)試網(wǎng)頁(yè)，記下Bug，再進(jìn)行不斷測(cè)試。

測(cè)試手機(jī)網(wǎng)頁(yè)時(shí)，可根據(jù)預(yù)算，選擇以上的測(cè)試方式。然后整理出一些手機(jī)網(wǎng)頁(yè)上容易出錯(cuò)的html、css、JavaScript的代碼，以方便以后設(shè)計(jì)制作手機(jī)網(wǎng)頁(yè)進(jìn)行調(diào)試。

總結(jié)

本教程覆蓋手機(jī)網(wǎng)頁(yè)設(shè)計(jì)制作的七個(gè)關(guān)鍵點(diǎn)。只要注意這些要點(diǎn)，再結(jié)合一般的網(wǎng)頁(yè)開(kāi)發(fā)的知識(shí)以及對(duì)手機(jī)網(wǎng)頁(yè)的不斷測(cè)試，你就可以應(yīng)付制作手機(jī)網(wǎng)頁(yè)的挑戰(zhàn)，設(shè)計(jì)制作出一個(gè)成功的手機(jī)網(wǎng)頁(yè)。

原文鏈接：Designing for the Mobile Web