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

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

1. 簡明的語義標(biāo)記

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

2. CSS下內(nèi)容與顯示的分離

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

3. ALT標(biāo)簽

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

4. 表單域的分類

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

5. 標(biāo)題的作用

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

6. 禁用漂浮鏈接

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

7. 減少頁邊距和填充

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

8. 做好頁面導(dǎo)航

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

9. 注重頁面顏色對比

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

1. Sitepoint(設(shè)計(jì)團(tuán)隊(duì))的移動(dòng)web設(shè)計(jì)作品

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

1. 不要混淆標(biāo)記

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

2. 了解你的手機(jī)

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

3. 找準(zhǔn)目標(biāo)客戶

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

4. 謹(jǐn)慎發(fā)布

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

5. 選定響亮的域名

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

6. 驗(yàn)證你的標(biāo)記

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

7. 除了測試，還是測試

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