1. 對移動(dòng)web設計的思考

       我們已經(jīng)對移動(dòng)WEB設計的趨勢和挑戰進(jìn)行了初步的了解，下面我們來(lái)重點(diǎn)檢查一下設計師在過(guò)程中應該考慮的幾個(gè)要點(diǎn)。

1. 簡(jiǎn)明的語(yǔ)義標記

如果你想為- -個(gè)優(yōu)秀的移動(dòng)網(wǎng)頁(yè)打下穩固的基礎，你最先要做的事情就是設立一套適用于網(wǎng)頁(yè)的、簡(jiǎn)明的語(yǔ)義標記。這樣在你設計移動(dòng)網(wǎng)頁(yè)的時(shí)候才會(huì )避免重復傳統互聯(lián)網(wǎng)設計中存在的重大問(wèn)題。簡(jiǎn)明的標記能有效幫助瀏覽器正確顯示網(wǎng)頁(yè)頁(yè)面。同樣，由于避免了不必要的環(huán)節，簡(jiǎn)明的語(yǔ)義標記還將給用戶(hù)帶來(lái)愉快的體驗經(jīng)歷。

2. CSS下內容與顯示的分離

除了簡(jiǎn)明的語(yǔ)義標記，內容與顯示的分離也是非常重要的。與桌面用戶(hù)相比，手機網(wǎng)頁(yè)用戶(hù)更喜歡訪(fǎng)問(wèn)沒(méi)有圖片和禁用CSS的網(wǎng)頁(yè)。手機網(wǎng)頁(yè)用戶(hù)更希望順利地訪(fǎng)問(wèn)頁(yè)面內容和鏈接一而不是看到華麗的頁(yè)面顯示。作為移動(dòng)互聯(lián)網(wǎng)網(wǎng)站，當其開(kāi)始大量使用簡(jiǎn)明的語(yǔ)義標記，并用CSS實(shí)現內容與顯示的分離時(shí)，這就是一個(gè)具有非凡意義的偉大的開(kāi)端。

3. ALT標簽

出于部分用戶(hù)由于某些原因不能瀏覽網(wǎng)頁(yè)上圖片的考慮（或者用戶(hù)選擇屏蔽圖片），ALT標簽對于可用性來(lái)說(shuō)顯得非常重要。無(wú)論如何ALT標簽在互聯(lián)網(wǎng)中都有所運用，只是對手機互聯(lián)網(wǎng)用戶(hù)來(lái)說(shuō)它更加重要而已。

4. 表單域的分類(lèi)

像ALT標簽一樣，表單域分類(lèi)使得移動(dòng)互聯(lián)網(wǎng)變得更加實(shí)用。試想一下，如果沒(méi)有對其進(jìn)行了解就加以使用，那么一定不會(huì )得到你理想的效果。而處理好像ALT標簽和表單域分類(lèi)這樣的細節問(wèn)題就可以使你事半功倍。

5. 標題的作用

由于移動(dòng)WEB瀏覽器所顯示的內容文本格式常常是受限制和不協(xié)調的，以標題在此處就顯得格外重要。移動(dòng)Web瀏覽器并不能將文字顯示為你想讓它呈現的那種效果，但是類(lèi)似標題一、標題二、 標題三這樣的標簽能幫助頁(yè)面構造一個(gè)合理的用戶(hù)視圖，并凸顯出頁(yè)面的某些重點(diǎn)內容。

6. 禁用漂浮鏈接

盡管移動(dòng)Web瀏覽器也能通過(guò)使用漂浮鏈接來(lái)進(jìn)行整個(gè)網(wǎng)頁(yè)頁(yè)面的布局，但是在小屏幕上恐怕并不會(huì )收到很好的效果。通常情況下，沒(méi)有漂浮鏈接會(huì )使內容簡(jiǎn)單排列的網(wǎng)頁(yè)整體看起來(lái)更舒服，用戶(hù)也能得到更好的使用體驗。

7. 減少頁(yè)邊距和填充

一般情況下，和傳統的網(wǎng)站相比，移動(dòng)設備上的網(wǎng)頁(yè)最好減少頁(yè)邊距和其他的填充。當然，這取決于你所設計的網(wǎng)站頁(yè)面填充的實(shí)際情況和網(wǎng)頁(yè)頁(yè)邊距的大小，但是過(guò)多的頁(yè)面填充和過(guò)大的頁(yè)邊距并不能提升用戶(hù)體驗。

8. 做好頁(yè)面導航

很多頁(yè)面的網(wǎng)站導航都設計在頁(yè)面的最上方。這樣的設計對于移動(dòng)網(wǎng)頁(yè)同樣有用，但是值得注意的是，手機.上的導航選項是按比例縮小的。在手機網(wǎng)頁(yè)中，最好只提供最常用、最有用的鏈接選項，同時(shí)在設計時(shí)盡量讓用戶(hù)能夠更加方便地接入其他的導航鏈接。

9. 注重頁(yè)面顏色對比

由于使用手機屏幕不能擁有電腦或筆記本屏幕-樣的使用體驗，所以在設計手機Web頁(yè)面的顏色時(shí)，為了確保用戶(hù)能夠有良好的閱讀體驗，設計師們一定要注意頁(yè) 面背景顏色和文字顏色的協(xié)調搭配。

1. Sitepoint(設計團隊)的移動(dòng)web設計作品

Sitepoint出版了由布萊恩.蘇塔撰寫(xiě)的<移動(dòng)Web設計)，這篇文章對于學(xué)習移動(dòng)Web設計的朋友來(lái)說(shuō)很值得參考和學(xué)習。在文章中，布萊恩將移動(dòng)Web設計分解為7個(gè)簡(jiǎn)要易懂的步驟。這篇文章的內容對于重申本人上述的Web設計要點(diǎn)非常有用。

1. 不要混淆標記

大多數網(wǎng)站都會(huì )忽視WML，而是用大家更熟悉的所以在進(jìn)行設計時(shí)一定要使用適合的編輯語(yǔ)言,并建立簡(jiǎn)明的語(yǔ)義標記。

2. 了解你的手機

我們不僅要滿(mǎn)足手機不同屏幕尺寸和分辨率的需求，還要滿(mǎn)足其變化多端的外觀(guān)需求。從早期的時(shí)短時(shí)長(cháng)的長(cháng)方形到后來(lái)的“大哥大”個(gè)頭發(fā)展到完美比例的方形，手機豐富多彩、日新月異的變化簡(jiǎn)直讓人抓狂！

3. 找準目標客戶(hù)

傳統的互聯(lián)網(wǎng)用戶(hù)大多是坐在電腦桌前面對著(zhù)-臺高分辨率大顯示器。而移動(dòng)Web用戶(hù)的使用環(huán)境卻大大不同。他們在瀏覽網(wǎng)頁(yè)時(shí)可能正在等地鐵、正在公交車(chē)或火車(chē)上，或是剛剛走出家門(mén)，又或是在深夜迷失在一一個(gè)陌生的城市，任何情況都可能發(fā)生。

4. 謹慎發(fā)布

雖然只有一個(gè)網(wǎng)站的概念，但是用戶(hù)所使用的瀏覽介質(zhì)很大程度上決定著(zhù)網(wǎng)站的風(fēng)格和形態(tài)，如今業(yè)內也流行著(zhù)很多種不同的設計標準，但是-個(gè)獨立的移動(dòng)網(wǎng)頁(yè)必須滿(mǎn)足的一個(gè)條件，那就是要為用戶(hù)提供優(yōu)越的瀏覽體驗。

5. 選定響亮的域名

當你準備為一-個(gè)移動(dòng)選定-一個(gè)域名的時(shí)候，我曾經(jīng)工作過(guò)的公司和同事總是會(huì )選用子域名。創(chuàng )建一個(gè)子域名是設立- -個(gè)網(wǎng)站時(shí)最簡(jiǎn)單的辦法(前提是你擁有該域名),這意味著(zhù)你不用把大把的時(shí)間花在改進(jìn)和修改服務(wù)器上(而且還很有可能影響正常的Web設計進(jìn)度)。

6. 驗證你的標記

移動(dòng)web瀏覽器的運行速度和容錯性都大大低于電腦瀏覽器。在移動(dòng)設備上運行的瀏覽器，并沒(méi)有奢侈的電腦瀏覽器所擁有的2GHz處理器和高達200GB的存儲空間。因此，你必須一次又一次地檢查、驗證、重復檢查你的標記。

7. 除了測試，還是測試

雖然在臺式電腦上能夠使用Web瀏覽器來(lái)測試你的移動(dòng)網(wǎng)站，但是在其得到實(shí)際運用之前，它仍然只是一個(gè)模擬的移動(dòng)體驗。不容忽視的是，用這種方式還是無(wú)法精確地復制許多移動(dòng)設備的使用感受。布萊恩的文章對于移動(dòng)Web設計與開(kāi)發(fā)新手來(lái)說(shuō)是一個(gè)非常好的開(kāi)端。當你在檢查、測試你的作品時(shí)能夠正確運用文章中的知識點(diǎn)以確保你用正確的方式來(lái)完成工作，這是一個(gè)非常好的學(xué)習資源。