移動(dòng)Web開(kāi)發(fā)設(shè)計(jì)五大最佳實(shí)踐
我們?cè)o大家介紹過(guò)如何設(shè)計(jì)一個(gè)簡(jiǎn)結(jié)的移動(dòng)互聯(lián)網(wǎng)站。目前移動(dòng)設(shè)備的興起正在給互聯(lián)網(wǎng)帶來(lái)一場(chǎng)新的革命，雖然說(shuō)移動(dòng)Web設(shè)計(jì)原則不會(huì)有多大變化，但是卻有著明顯的區(qū)別。
移動(dòng)Web設(shè)計(jì)
至少有一點(diǎn)是截然不同的，目前移動(dòng)設(shè)備的網(wǎng)絡(luò)速度可比不上寬帶，另外移動(dòng)Web呈現(xiàn)方式也是多樣的，有觸摸屏，有上網(wǎng)本，這些小屏幕卻貌似巨人！
可能有些人會(huì)認(rèn)為移動(dòng)化其實(shí)根本沒(méi)必要，但是幾乎所有人都得承認(rèn)這是一個(gè)不可避免的趨勢(shì)。
如果你正在研究移動(dòng)Web設(shè)計(jì)（或者正在將一個(gè)網(wǎng)站搬到移動(dòng)設(shè)備上），這篇文章或許可以幫助你了解到目前移動(dòng)設(shè)計(jì)的發(fā)展趨勢(shì)。
呈現(xiàn)方式
在設(shè)計(jì)對(duì)移動(dòng)設(shè)備友好的網(wǎng)站時(shí)，首先要考慮的元素之一就是呈現(xiàn)方式或者用戶體驗(yàn)方式。
呈現(xiàn)方式的多樣化
理想的情況就是你現(xiàn)在的網(wǎng)站適用于所有類型的移動(dòng)設(shè)備。也許你的網(wǎng)站可以適用于iPhone等擁有內(nèi)置瀏覽器的移動(dòng)設(shè)備，不過(guò)卻在其他的移動(dòng)設(shè)備上，情況未必如此好，而跨設(shè)備移動(dòng)設(shè)計(jì)卻又難以獲得成功。
如果你認(rèn)為開(kāi)發(fā)出在IE/Firefox/Chrome/Safari等瀏覽器的網(wǎng)站很艱難，其實(shí)可以不妨試試開(kāi)發(fā)專門針對(duì)iPhone/BlackBerrys/Palm Pres/Androids/Motorola/Nokia的網(wǎng)站，不過(guò)你很快就會(huì)發(fā)現(xiàn)這些硬件設(shè)備真是太多了。
在桌面網(wǎng)絡(luò)設(shè)計(jì)中，你只有一種語(yǔ)言:HTML,但是在移動(dòng)網(wǎng)絡(luò)上，可能是WML，平臺(tái)也可能是蘋(píng)果的iOS，或者是Android。
WML已經(jīng)非常靈活
雖然WML曾一直限制著我們的設(shè)計(jì)創(chuàng)意，但是如今我們所擁有的方式變得更加靈活了！
NO1:采用支持移動(dòng)設(shè)備的Web設(shè)計(jì)
在移動(dòng)Web設(shè)計(jì)上，一個(gè)簡(jiǎn)單的處理方法就是對(duì)現(xiàn)存的桌面網(wǎng)頁(yè)代碼和設(shè)計(jì)進(jìn)行調(diào)整，以適用于移動(dòng)設(shè)備，還有就是從草圖做起，一步步的設(shè)計(jì)。例如，通過(guò)CSS3，你可以根據(jù)用戶的移動(dòng)設(shè)備來(lái)調(diào)整Web布局等等。
但你想想看，問(wèn)題在于并不是所有移動(dòng)設(shè)備都支持CSS3，所以你得求助于服務(wù)器設(shè)備偵查或者JavaScript（例如調(diào)整DOM來(lái)改變頁(yè)面布局）。不過(guò)問(wèn)題又來(lái)了，有些設(shè)備又不支持這些技術(shù)！
依據(jù)窗口來(lái)決定布局大小
依據(jù)窗口來(lái)決定布局大小，或許只需幾行CSS3
NO2:將移動(dòng)用戶轉(zhuǎn)向手機(jī)版網(wǎng)站
移動(dòng)設(shè)計(jì)呈現(xiàn)的另一種方式就是專門針對(duì)手持設(shè)備而優(yōu)化的布局，你可以利用Mobify等網(wǎng)絡(luò)服務(wù)來(lái)做到這點(diǎn)。
與第一種方法相比（采用支持移動(dòng)設(shè)備的Web設(shè)計(jì)），這種呈現(xiàn)格式更加優(yōu)秀，因?yàn)轶w驗(yàn)設(shè)計(jì)是專門針對(duì)移動(dòng)用戶的，不考慮桌面用戶。
這種情況下，你的流量取決于用戶的瀏覽器代理。例如，如果一個(gè)移動(dòng)設(shè)備用戶訪問(wèn)你的網(wǎng)站（yousitename.com）,然后他們會(huì)比自動(dòng)轉(zhuǎn)向至mobile.yoursitename.com或者m.yoursitesname.com等之類的。
網(wǎng)站也喜歡網(wǎng)絡(luò)速度快的用戶
獨(dú)立的手機(jī)網(wǎng)站會(huì)獲得那些喜歡更快的速度的用戶所帶來(lái)的流量。
NO3:用戶引導(dǎo)要點(diǎn):
無(wú)論你使用何種方式，下面兩點(diǎn)是很重要的：
| 訪問(wèn)者知道你的手機(jī)版網(wǎng)站是可以登錄的 |
| 訪問(wèn)者可以選擇是登陸手機(jī)版網(wǎng)站還是普通版網(wǎng)站 |
雖然強(qiáng)行為用戶轉(zhuǎn)向或者改變布局聽(tīng)起來(lái)似乎是個(gè)好主意，但是結(jié)果往往會(huì)令人沮喪，所以最好還是讓用戶可以選擇。
簡(jiǎn)單的技巧就是有這兩個(gè)版本的網(wǎng)站的鏈接。例如，Six Revisions，你會(huì)發(fā)現(xiàn)在該網(wǎng)站的地段會(huì)有手機(jī)版網(wǎng)站的鏈接（m.sixrevisions.com），這樣無(wú)論是手機(jī)用戶還是電腦用戶都有了選擇。
結(jié)構(gòu)和代碼
另外一件需要考慮的事情就是結(jié)構(gòu)代碼（markup和styles）：
| 你知道WML或者XHTML mobile profiles？ |
| 你所設(shè)計(jì)的app是應(yīng)用于iPhone還是Android？ |
| 你在設(shè)計(jì)時(shí)有沒(méi)有考慮到移動(dòng)設(shè)備瀏覽器的成本和速度？ |
| 什么是HTML5和CSS3? |
這些問(wèn)題還不夠全面，有些問(wèn)題也正處于研發(fā)階段。
新設(shè)備所支持的代碼可能不同于舊的移動(dòng)設(shè)備
新設(shè)備所支持的代碼可能不同于舊的移動(dòng)設(shè)備。
選擇
設(shè)計(jì)一個(gè)對(duì)移動(dòng)用戶友好的網(wǎng)站，最重要的事情就是選對(duì)語(yǔ)言。在智能手機(jī)出現(xiàn)之前，舊的手機(jī)只支持WML（最基本的語(yǔ)言），隨后W3C推出了更加友好的XHTML（XHTML Mobile Profiles檔案）。
幸運(yùn)的是，移動(dòng)設(shè)備產(chǎn)生的更新速度是的網(wǎng)頁(yè)體驗(yàn)更加完整和健全，如果你不懂mobile profiles或者WML，你可以使用正常的HTML或者XHTML。
不過(guò)，仍要強(qiáng)調(diào)的一點(diǎn)是，WML仍是要考慮的，你的用戶也許使用的是普通手機(jī)（非智能手機(jī)）。當(dāng)然現(xiàn)在我們要處理更多的web zombies（網(wǎng)頁(yè)劫持）。
同樣你的決定必須基于網(wǎng)站數(shù)據(jù)和大量的網(wǎng)站分析。
網(wǎng)站數(shù)據(jù)和大量的網(wǎng)站分析影響你的決定
速度和成本（對(duì)用戶而言）
無(wú)論你采用哪種語(yǔ)言，接下來(lái)要考慮的首要因素就是速度和用戶成本。
移動(dòng)互聯(lián)網(wǎng)運(yùn)營(yíng)限制流量，進(jìn)而使帶寬成了一個(gè)有限而寶貴的資源，而且漫游收費(fèi)還很貴！
考慮到流量、成本和速度，所以必須保證markup（編程語(yǔ)言）盡可能的簡(jiǎn)潔、小且標(biāo)準(zhǔn)。
得記住一點(diǎn)，移動(dòng)網(wǎng)絡(luò)運(yùn)營(yíng)商收取的漫游費(fèi)是很多的！
由于新技術(shù)更新和采用速度很快，未來(lái)肯定是HTML5和CSS3的天下，所以要考慮適當(dāng)?shù)厣?jí)你的代碼。
像Apple等都提供固件升級(jí)，這樣很多老設(shè)備也可以支持新標(biāo)準(zhǔn)了。但是也許會(huì)發(fā)生類似的情況：IE6用戶拒絕升級(jí)到IE8，因此在決策之前，都要做好研究，測(cè)試、測(cè)試、再測(cè)試！
布局要素
移動(dòng)Web布局會(huì)很麻煩：
| 移動(dòng)設(shè)備形狀尺寸不一； |
| 移動(dòng)設(shè)備質(zhì)量和解決方案不一； |
| 移動(dòng)設(shè)備或許支持放大滾動(dòng)，但也可能不支持； |
| 屏幕小，所以頁(yè)面滾動(dòng)會(huì)更加困難。 |
移動(dòng)頁(yè)面設(shè)計(jì)布局的終極目的就是：盡可能地讓用戶快速地找到所尋找的東西，減少這一過(guò)程的用戶負(fù)擔(dān)。
布局對(duì)你的移動(dòng)網(wǎng)站成功與否起著本質(zhì)性的作用。
單欄設(shè)計(jì)
由于空間少，single column designs（單欄設(shè)計(jì)）是必須的！
簡(jiǎn)潔
有效的移動(dòng)Web布局的理念之一就是簡(jiǎn)潔。內(nèi)容越繁雜，讀起來(lái)越困難，需要滾動(dòng)的地方越多！
空間小致使多欄設(shè)計(jì)并不適用，內(nèi)容布局不能超越屏幕，除非是被動(dòng)放大等。
因此，單欄設(shè)計(jì)顯得更加實(shí)用。
避免滾動(dòng)
iPhone和iPad等移動(dòng)設(shè)備可根據(jù)設(shè)備中心來(lái)調(diào)整頁(yè)面，這些也減少了滾動(dòng)需求，不過(guò)并不是所有移動(dòng)設(shè)備都有這功能。
在手機(jī)上需要滾動(dòng)的內(nèi)容頁(yè)面不具有良好的體驗(yàn)。
橫向滾動(dòng)也不是個(gè)好主意，特別iPad上，滾動(dòng)條只有在用戶嘗試滾動(dòng)的時(shí)候才會(huì)出現(xiàn)，所以多數(shù)情況下，移動(dòng)Web設(shè)計(jì)都要避免滾動(dòng)。
避免滾動(dòng)
一個(gè)好的移動(dòng)Web設(shè)計(jì)具有清晰地布局以及簡(jiǎn)潔的導(dǎo)航選項(xiàng)。
清晰地布局 簡(jiǎn)潔的導(dǎo)航選項(xiàng)
導(dǎo)航和按鈕的大小
另外一個(gè)關(guān)鍵成分就是導(dǎo)航和按鈕了！這也是觸摸移動(dòng)設(shè)備的一個(gè)重要問(wèn)題。
我不確定你的手有多大，我想你肯定遇到過(guò)要點(diǎn)下那么小的按鈕，更該死的他還沒(méi)有放大功能。
所以說(shuō)，一個(gè)好的體驗(yàn)要有什么？一個(gè)大小恰當(dāng)，按起來(lái)爽的鏈接和按鈕！
減少點(diǎn)擊次數(shù)也是個(gè)好主意，在移動(dòng)Web設(shè)計(jì)中這也是重要的一點(diǎn)?。?/p>
內(nèi)容設(shè)計(jì)
內(nèi)容是網(wǎng)站的核心，不過(guò)也要考慮到流量等成本問(wèn)題，如何減少過(guò)大的圖片、文本和多媒體也是門學(xué)問(wèn)，50KB和2MB有著相當(dāng)大的區(qū)別！
移動(dòng)設(shè)備更強(qiáng)調(diào)“少”，更少的內(nèi)容意味著更具可讀性！
文本內(nèi)容
一個(gè)網(wǎng)站里，最多的就是文本內(nèi)容了！
但是盡管內(nèi)容依舊是手持設(shè)備上的網(wǎng)站，但是諸如滾動(dòng)、小文件、快速閱讀以及帶寬限制等因素，這些都意味著我們必須調(diào)整文本以確保其可用性！
如果你的設(shè)計(jì)只是在現(xiàn)有網(wǎng)站布局上進(jìn)行簡(jiǎn)單的調(diào)整（也就是第一個(gè)辦法NO1:采用支持移動(dòng)設(shè)備的Web設(shè)計(jì)），你需要對(duì)一些不必要的文本、圖片或者多媒體進(jìn)行刪減（就算是提供下載，也會(huì)增加可讀性）。而獨(dú)立的手機(jī)網(wǎng)站設(shè)計(jì)的好處就是可以清除多余的內(nèi)容。
圖片
屏幕小決定著CSS格式的圖片或者大容量的infographics會(huì)有問(wèn)題。雖然有些手持設(shè)備屏幕大，問(wèn)題不會(huì)明顯。IPhone等設(shè)備的放大縮小功能仍舊有限，所以一些視覺(jué)美化功能肯定需要剔除！
大圖占據(jù)寬帶，所以要減少其大小
50KB和500KB的圖片在尺寸和解決方案上也有著明顯的區(qū)別！帶寬損耗也不同!
視音頻
視音頻幾乎是必須具備的內(nèi)容，就算是有寬帶限制，尤其是在iPhone和iPod這樣的設(shè)備。同樣的道理，適度的和明智的使用是關(guān)鍵！
如果你提供視音頻，最好有一個(gè)下載征詢！
下面是幾個(gè)建議：
| 格式：謹(jǐn)慎使用flash等一些設(shè)備上不兼容的格式； |
| 視音頻文件大?。?/strong>優(yōu)化你的文件 |
| 不要自動(dòng)下載視音頻：一定要事先征詢用戶。 |
| 不要自動(dòng)播放：這樣很讓人厭煩。 |
其他需考慮的因素
最要要考慮的因素可能還有scripting、plugins等等
知道該不要什么，該保留什么，這樣才能提高用戶體驗(yàn)，同事確保你的手機(jī)網(wǎng)站能夠適用于所有移動(dòng)設(shè)備！
移動(dòng)設(shè)備交互VS個(gè)人電腦交互
兩者交互方式如此不同在于屏幕不同；另外移動(dòng)設(shè)備中沒(méi)有鼠標(biāo)鍵盤，而是通過(guò)手指動(dòng)作來(lái)指定行動(dòng)和反映。
專屬技術(shù)和Plugin
比如，Apple就阻止flash在其移動(dòng)設(shè)備上的應(yīng)用，這真的是個(gè)問(wèn)題！從而不得不依賴于蘋(píng)果的專有技術(shù)！
Apple反對(duì)flash也許預(yù)兆著移動(dòng)設(shè)備生產(chǎn)商想保住其對(duì)第三方的優(yōu)先權(quán)。雖然很多開(kāi)發(fā)商也因此使用蘋(píng)果平臺(tái)，不過(guò)對(duì)這一問(wèn)題的最好解決辦法就是適度地對(duì)自己的手機(jī)網(wǎng)站進(jìn)行降級(jí)！
有著良好網(wǎng)絡(luò)連接的網(wǎng)絡(luò)服務(wù)
由于現(xiàn)在的移動(dòng)設(shè)備網(wǎng)絡(luò)環(huán)境，網(wǎng)絡(luò)連接仍舊是許多web app最頭疼的一個(gè)問(wèn)題！甚至還有一些手機(jī)沒(méi)信號(hào)的“死亡區(qū)”，這些都影響著用戶交互，用戶在做某一件事，不過(guò)網(wǎng)絡(luò)卻突然中斷了，體驗(yàn)自然很糟糕！所以在設(shè)計(jì)app時(shí)需要考慮到離線和在線兩種情況。（推薦閱讀this offline HTML5 iPhone app tutorial）。
移動(dòng)網(wǎng)站測(cè)試
你只要到手機(jī)店逛一逛，就會(huì)發(fā)現(xiàn)屏幕等等都是有很多不同的！
目前有很多網(wǎng)站測(cè)試模擬器。
考慮到現(xiàn)在幾個(gè)大公司都只想保住自己的競(jìng)爭(zhēng)優(yōu)勢(shì)，所以標(biāo)準(zhǔn)化似乎不太可能發(fā)生！
所以網(wǎng)站測(cè)試的范圍要盡可能廣！
移動(dòng)設(shè)備模擬器測(cè)試
毋庸置疑，你需要在盡可能多的平臺(tái)上對(duì)自己的網(wǎng)站進(jìn)行測(cè)試.
總結(jié)：3S：Simple,Small,Speedy
雖然本文提供的都是一些概要性的建議，不過(guò)仍舊有著基本的原則。
速度（speedy）仍舊是目前首要解決的問(wèn)題，我們可以利用監(jiān)視器來(lái)限制解決方案和顏色。許多ISPs仍舊限制寬帶，有時(shí)還會(huì)發(fā)生斷網(wǎng)，這些情況對(duì)于老一代開(kāi)發(fā)人員來(lái)說(shuō)似乎并不陌生！
所以在網(wǎng)絡(luò)等基礎(chǔ)設(shè)施未改善之前，simple,small,speedy就是我們要遵守的3個(gè)主要原則了！
【編輯推薦】
