手機網頁設計制作簡明指南

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

1.手機網頁的標記語言

WML

WML（無線標記語言，Wireless Markup Language），早期的手機上網只能通過wap網站，而WML是用來制作手機wap網站的主要標記語言，它能夠比html消耗更少內存和cpu。

因為WML大部分針對早期和低端的手機，現(xiàn)在已經逐步被其他的技術取代了，現(xiàn)在學習手機網頁設計制作完全可以忽略WML。

但是仍然有一部分手機，如諾基亞1100這種超便宜和低端的手機，有著200萬左右的用戶，假如手機網頁的受眾是這部分人，還是應該用WML。

XHTML

未來智能手機的市場份額會越來越大，考慮到這點，現(xiàn)在進行手機網頁設計制作時，我們會用到更加熟悉的標記語言Xhtml。

現(xiàn)在大部分智能手機的瀏覽器都能正確處理Xhtml，它會識別兩種類型的Html。

① Xhtml：基礎的，和桌面瀏覽器相同的Xhtml

② Xhtml-MP：針對智能手機的Xhtml

這兩種類型的不同之處，Xhtml-MP包含比較少的要素和相對寬松的限制，能適合手機平臺的渲染，

其實在手機網頁設計制作時，很多都直接用Xhtml，也沒什么大問題。

2.手機類型

分辨率問題：這個問題已經開始在視頻制作領域出現(xiàn)了，因為之前很多電視分辨率都是4:3，而現(xiàn)在更多的是寬屏幕，很多視頻制作者不知道如何去放置標志和信息。這也是網頁設計者和開發(fā)者經常會遇見的難題。

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

可以把手機根據(jù)屏幕尺寸分成幾種常見的類型，如：

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

這樣在設計制作手機網頁時，就可以比較有針對性。注意要盡量把手機網頁制作成簡潔的風格，因為手機沒有鼠標，只能向上和向下，用戶不能方便地切換頁面。

手機市場上既有非常高端的iPhone手機和谷歌的Android手機，也有諾基亞一些單色點陣顯示的低端機。這些低端機在瀏覽手機網頁時有很多的限制，如屏幕分辨率、渲染Xhtml的性能等，因此如果你的手機網頁是針對這部分用戶，最好還是用WML。

另一方面，類似于iPhone和Nexus One這種高端智能機，擁有可以和桌面瀏覽器相媲美的渲染網頁的性能。對這部分用戶而言，良好的用戶體驗是很重要的，受限于手機的傳輸速度，如果直接用一般的電腦上瀏覽的網頁來代替手機網頁，對手機網頁的目標客戶來說，并非明智之舉。

3.手機網頁的目標群體

任何網站設計網頁時都應該明白自己的目標群體，以便向他們傳輸最合適的信息。

這點在進行手機網頁設計制作時更為重要。因為你不僅要知道你的目標群體，還要知道他們?yōu)g覽手機網頁時的情景。

瀏覽傳統(tǒng)的網站，訪客會坐在桌上，有著大分辨率的屏幕。手機網頁的訪客則有可能是在排隊、等交車、坐在地鐵等。

如何區(qū)分？這點我們可以向谷歌學習。谷歌花了很多功夫在讓網頁應用程序適合手機使用上，谷歌的開發(fā)者將看手機網頁人群分為三大類，這對我們進行手機網頁的設計和制作，很有參考意義。

A：一般手機用戶

一般用戶訪問手機網頁時和用電腦訪問網頁差不多，他們沒有特別熱衷于哪個領域，他們只是利用空閑時間瀏覽網頁。

對于電腦瀏覽網頁的用戶而言，這些空閑時間可能是休息時間。但是對用手機瀏覽網頁的用戶而言，則可能是在等待朋友或上下班路程，這意味這他們隨時可能中斷網頁的瀏覽。如果你的目標群體是這些人，在制作設計手機網頁時要特別注意這些手機用戶的屏幕尺寸和時間上的限制。

因此設計制作手機網頁要“記住”用戶看的內容的位置，以便他們隨時返回瀏覽。最好不要使用大段的內容，相反，要把手機網頁的內容制作成幾個小的部分，引起他們的關注。記住，這些手機用戶沒有時間去瀏覽大段的內容。

B：回訪者

回訪者是一些會時?；卦L網頁，以便獲取他們感興趣的內容的人群。

如果你的手機網頁提供的是一些諸如天氣預報、股票資訊、比賽運動的信息，那么目標群體就會有相當多這部分的人。因為手機屏幕提供的信息是有限的，所以針對這部分手機用戶設計制作網頁，要考慮到這些人需要哪些信息，將這些信息放在手機網頁的重要位置，避免這些人在手機執(zhí)行了很多操作才在網頁上找到需要的內容。

另一點是關于為手機網頁用戶提供定制服務的問題，如制作手機網頁論壇。因為手機用戶登錄不是那么方便，所以如能避免則盡量避免。

有一些專業(yè)的網站允許手機用戶通過電腦訪問他們的網站，然后定制相應的手機網頁的頁面，這樣會生成一個專門適用該用戶的網址，下次這個用戶用手機訪問時，就能直接適用自己定制的界面。

C：特殊手機用戶

根據(jù)你的手機網頁所要提供服務的不同，這部分用戶也會不同。

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

4.根據(jù)具體需要提供網站內容

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

這是錯誤的想法。

雖然針對手機用戶變更網頁的CSS可以過濾一部分的內容，或者一些CMS網頁也提供了相應的轉換插件。但這些方案并不完善。

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

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

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

5.選擇域名

為手機網頁選擇什么域名取決于你的目標群體是如何進入網站的。這里有三種域名可供選擇：

A：為手機網頁使用獨立域名（如：www.mobile-example.com）

這是不推薦的方式，沒有必要為你的手機網頁用一個獨立的域名。

多個域名不僅降低你的網站的品牌度，而且會給用戶造成混亂。用戶不愿意多記住一個專為手機網頁而設的網址，并且這樣也很難選擇哪個域名用來做宣傳推廣。

B:為手機網頁使用子域名（如：m.example.com）

這是最流行的方式。

使用子域名可以讓手機網頁成為你的品牌的一部分，也不會給用戶造成混亂。如果覺得在前面加一個“m”表示手機網頁的方式不好，也可以考慮放置URL后面的方式，如：example.com/mobile/。

而且你要考慮用戶輸入錯誤網址的情況，所以盡可能為手機網頁設置幾個名稱接近的子域名，并將它們重定向一個單獨的子域名，這和將不帶www的網址重定向帶www的網址一樣。

C：為手機網頁注冊.mobi的頂級域名（如：example.mobi）

自從.mobi可以使用之后，就引發(fā)了手機網頁開發(fā)者的熱烈爭論。

不過圖趣不太建議使用.mobi設計制作手機網頁，一不便于記憶，二還是不便于記憶，呵呵。

D：判斷客戶端，并自動顯示對應內容

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

優(yōu)點：只使用一個網址，不論電腦還是手機都能接收到正確的內容。

缺點：因為服務器會自動為客戶端選擇相應版本的網頁，所以用戶不能自己選擇想看到的內容，比如一些iPhone用戶可能不希望看到簡陋版的手機網頁。解決這個缺點可以通過為一些手機設置例外。

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

6.為手機網頁驗證標記語言

電腦的網頁瀏覽器對錯誤比較寬容，一些html標記的忘記書寫或者沒有正確嵌套在電腦瀏覽器都會正確顯示，當然容錯率高意味著消耗更高的cpu和內存。

手機瀏覽器的性能還無法和電腦相提并論，所以手機瀏覽器對手機網頁的錯誤要嚴格一些。所以在設計和制作手機網頁時，你必須不斷進行檢查、驗證和糾錯。

驗證手機網頁和驗證一般傳統(tǒng)的網頁沒什么區(qū)別，如果你使用Xhtml編寫，可以使用相同的工具。

• W3C驗證器可以驗證一些簡單的錯誤，當然這里有一個更適合驗證手機網頁的版本。
• Ready.mobi site有一些專為驗證手機網頁的選項。

7.為手機網頁不斷測試

當通過了手機網頁的驗證之后，就要針對幾種不同的手機進行各種測試了。

用電腦的瀏覽器雖然可以進行模擬測試，但是并不完善。這種方式通過的手機網頁不能適用于某些手機。

有些手機文件尺寸的限制可能會很小，所以你制作的手機網頁在這些設備上甚至無法顯示。另外瀏覽器支持的文件類型也會不同，支持的圖像格式也會不同。

測試時候手機網頁當然不可能擁有所有手機，所以制作網頁時可以使用一些替代手段。

A：為手機網頁使用模擬器

有很多在線模擬器和離線模擬器，這些工具允許你快速預覽手機網頁的圖像和布局，但這些畢竟不是真正是手機，還是存在一些潛在的問題，所以只能作為手機網頁第一次的快速測試。

B：為手機網頁購買測試服務

有一些公司為手機網頁的設計制作提供測試服務，可以上傳文件到這些公司，然后遠程操縱，實時觀察不同手機瀏覽網頁的表現(xiàn)。一般為付費服務（中國這類公司很少）。

C：購買一些手機測試手機網頁

如果你想專業(yè)設計制作手機網頁，可以考慮購買一小些有代表性的手機，可能需要購買5-6臺，以便覆蓋市面手機的主要類型和品牌。

• 基于Windows平臺的，如HTC Mogul PPS-6800，在windowCE使用IE瀏覽器。
• 基于塞班平臺的，如諾基亞的6600，使用內置瀏覽器或者opera瀏覽器。
• 基于蘋果OS的iphone，使用Safari瀏覽器。
• 基于谷歌的Android平臺的，使用默認瀏覽器或第三方瀏覽器。
• 最后，選擇目標客戶常用的手機，如中國用戶可以測試UC瀏覽器。

D：借朋友手機幫忙測試手機網頁

通過模擬器，你應該完成了手機網頁的大部分測試，這時候可以找身邊的朋友借一些手機測試網頁，記下Bug，再進行不斷測試。

測試手機網頁時，可根據(jù)預算，選擇以上的測試方式。然后整理出一些手機網頁上容易出錯的html、css、JavaScript的代碼，以方便以后設計制作手機網頁進行調試。

總結

本教程覆蓋手機網頁設計制作的七個關鍵點。只要注意這些要點，再結合一般的網頁開發(fā)的知識以及對手機網頁的不斷測試，你就可以應付制作手機網頁的挑戰(zhàn)，設計制作出一個成功的手機網頁。

原文鏈接：Designing for the Mobile Web