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