本文來自SocialBeta內(nèi)容貢獻(xiàn)者wisp，原文譯自Mobile Web Design: Best Practices，更多移動(dòng)產(chǎn)品設(shè)計(jì)方面的資料，請查看SocialBeta移動(dòng)互聯(lián)網(wǎng)欄目。

移動(dòng)設(shè)備的興起正在給互聯(lián)網(wǎng)帶來一場新的革命，雖然說移動(dòng)網(wǎng)頁設(shè)計(jì)原則不會(huì)有多大變化，但是卻有著明顯的區(qū)別。

至少有一點(diǎn)是截然不同的，目前移動(dòng)設(shè)備的網(wǎng)絡(luò)速度可比不上寬帶，另外移動(dòng)網(wǎng)頁呈現(xiàn)方式也是多樣的，有觸摸屏，有上網(wǎng)本，這些小屏幕卻貌似巨人！

可能有些人會(huì)認(rèn)為移動(dòng)化其實(shí)根本沒必要，但是幾乎所有人都得承認(rèn)這是一個(gè)不可避免的趨勢。

如果你正在研究移動(dòng)網(wǎng)頁設(shè)計(jì)（或者正在將一個(gè)網(wǎng)站搬到移動(dòng)設(shè)備上），這篇文章或許可以幫助你了解到目前移動(dòng)設(shè)計(jì)的發(fā)展趨勢。

呈現(xiàn)方式

在設(shè)計(jì)對移動(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è)備，不過卻在其他的移動(dòng)設(shè)備上，情況未必如此好，而跨設(shè)備移動(dòng)設(shè)計(jì)卻又難以獲得成功。

如果你認(rèn)為開發(fā)出在IE/Firefox/Chrome/Safari等瀏覽器的網(wǎng)站很艱難，其實(shí)可以不妨試試開發(fā)專門針對iPhone/BlackBerrys/Palm Pres/Androids/Motorola/Nokia的網(wǎng)站，不過你很快就會(huì)發(fā)現(xiàn)這些硬件設(shè)備真是太多了。

在桌面網(wǎng)絡(luò)設(shè)計(jì)中，你只有一種語言:HTML,但是在移動(dòng)網(wǎng)絡(luò)上，可能是WML，平臺(tái)也可能是蘋果的iOS，或者是Android。

雖然WML曾一直限制著我們的設(shè)計(jì)創(chuàng)意，但是如今我們所擁有的方式變得更加靈活了！

NO1:采用支持移動(dòng)設(shè)備的網(wǎng)頁設(shè)計(jì)

在移動(dòng)網(wǎng)頁設(shè)計(jì)上，一個(gè)簡單的處理方法就是對現(xiàn)存的桌面網(wǎng)頁代碼和設(shè)計(jì)進(jìn)行調(diào)整，以適用于移動(dòng)設(shè)備，還有就是從草圖做起，一步步的設(shè)計(jì)。例如，通過CSS3，你可以根據(jù)用戶的移動(dòng)設(shè)備來調(diào)整網(wǎng)頁布局等等。

但你想想看，問題在于并不是所有移動(dòng)設(shè)備都支持CSS3，所以你得求助于服務(wù)器設(shè)備偵查或者JavaScript（例如調(diào)整DOM來改變頁面布局）。不過問題又來了，有些設(shè)備又不支持這些技術(shù)?。ㄗg者：糾結(jié)?。?/p>

依據(jù)窗口來決定布局大小，或許只需幾行CSS3

NO2:將移動(dòng)用戶轉(zhuǎn)向手機(jī)版網(wǎng)站

移動(dòng)設(shè)計(jì)呈現(xiàn)的另一種方式就是專門針對手持設(shè)備而優(yōu)化的布局，你可以利用Mobify等網(wǎng)絡(luò)服務(wù)來做到這點(diǎn)。

與第一種方法相比（采用支持移動(dòng)設(shè)備的網(wǎng)頁設(shè)計(jì)），這種呈現(xiàn)格式更加優(yōu)秀，因?yàn)轶w驗(yàn)設(shè)計(jì)是專門針對移動(dòng)用戶的，不考慮桌面用戶。

這種情況下，你的流量取決于用戶的瀏覽器代理。例如，如果一個(gè)移動(dòng)設(shè)備用戶訪問你的網(wǎng)站（yousitename.com）,然后他們會(huì)比自動(dòng)轉(zhuǎn)向至mobile.yoursitename.com或者m.yoursitesname.com等之類的。

獨(dú)立的手機(jī)網(wǎng)站會(huì)獲得那些喜歡更快的速度的用戶所帶來的流量。

NO3:用戶引導(dǎo)要點(diǎn):

無論你使用何種方式，下面兩點(diǎn)是很重要的：

• 訪問者知道你的手機(jī)版網(wǎng)站是可以登錄的
• 訪問者可以選擇是登陸手機(jī)版網(wǎng)站還是普通版網(wǎng)站（譯者：就是PC版網(wǎng)站）

雖然強(qiáng)行為用戶轉(zhuǎn)向或者改變布局聽起來似乎是個(gè)好主意，但是結(jié)果往往會(huì)令人沮喪，所以最好還是讓用戶可以選擇。

簡單的技巧就是有這兩個(gè)版本的網(wǎng)站的鏈接。例如，Six Revisions，你會(huì)發(fā)現(xiàn)在該網(wǎng)站的地段會(huì)有手機(jī)版網(wǎng)站的鏈接（m.sixrevisions.com），這樣無論是手機(jī)用戶還是電腦用戶都有了選擇。

結(jié)構(gòu)和代碼

另外一件需要考慮的事情就是結(jié)構(gòu)代碼（markup和styles）：

• 你知道WML或者XHTML mobile profiles？(百科：WML(Wireless Markup Language –?無線標(biāo)記語言)。它是一種從 HTML 繼承而來的標(biāo)記語言，但是 WML 基于 XML，因此它較 HTML 更嚴(yán)格。WML 被用來創(chuàng)建可顯示在 WAP 瀏覽器中的頁面。用WML編寫的頁面被稱為 DECKS。DECKS 是作為一套 CARDS 被構(gòu)造的。這種描述語言同我們常聽說的HTML語言同出一家，都屬于XML語言這一大家族。WML的語法跟XML一樣，WML是XML的子集。HTML語言寫出的內(nèi)容，我們可以在我們的PC機(jī)上用IE或是Netscape等瀏覽器進(jìn)行閱讀，而WML語言寫出的文件則是專門用來在手機(jī)等的一些無線終端顯示屏上顯示，供人們閱讀的，并且同樣也可以向使用者提供人機(jī)交互界面，接受使用者輸入的查詢等信息，然后向使用者返回他所想要獲得的最終信息。XHTML Mobile Profile –2001年發(fā)布，基于XHTML，針對移動(dòng)電話的語言，被認(rèn)為是目前最優(yōu)秀的語言)
• 你所設(shè)計(jì)的app是應(yīng)用于iPhone還是Android？
• 你在設(shè)計(jì)時(shí)有沒有考慮到移動(dòng)設(shè)備瀏覽器的成本和速度？
• 什么是HTML5和CSS3?（百科：HTML5提供了一些新的元素和屬性，例如<nav>（網(wǎng)站導(dǎo)航塊）和<footer>。這種標(biāo)簽將有利于搜索引擎的索引整理，同時(shí)更好的幫助小屏幕裝置和視障人士使用，除此之外，還為其他瀏覽要素提供了新的功能，如<audio>和<video>標(biāo)記。些過時(shí)的HTML4標(biāo)記將被取消。其中包括純粹顯示效果的標(biāo)記，如<font>和<center>，它們已經(jīng)被CSS取代。CSS3是CSS技術(shù)的升級(jí)版本，CSS3語言開發(fā)是朝著模塊化發(fā)展的。以前的規(guī)范作為一個(gè)模塊實(shí)在是太龐大而且比較復(fù)雜，所以，把它分解為一些小的模塊，更多新的模塊也被加入進(jìn)來。CSS就是一種叫做樣式表（stylesheet）的技術(shù)。也有的人稱之為層疊樣式表（CascadingStylesheet）。CSS3提供了非常多新途徑去改善你的設(shè)計(jì)工作，且做了不少重要的變化。）

這些問題還不夠全面，有些問題也正處于研發(fā)階段。

新設(shè)備所支持的代碼可能不同于舊的移動(dòng)設(shè)備。

選擇

設(shè)計(jì)一個(gè)對移動(dòng)用戶友好的網(wǎng)站，最重要的事情就是選對語言。在智能手機(jī)出現(xiàn)之前，舊的手機(jī)只支持WML（最基本的語言），隨后W3C推出了更加友好的XHTML（XHTML Mobile Profiles檔案）。

幸運(yùn)的是，移動(dòng)設(shè)備產(chǎn)生的更新速度是的網(wǎng)頁體驗(yàn)更加完整和健全，如果你不懂mobile profiles或者WML，你可以使用正常的HTML或者XHTML。

不過，仍要強(qiáng)調(diào)的一點(diǎn)是，WML仍是要考慮的，你的用戶也許使用的是普通手機(jī)（非智能手機(jī)）。當(dāng)然現(xiàn)在我們要處理更多的web zombies（網(wǎng)頁劫持）。

同樣你的決定必須基于網(wǎng)站數(shù)據(jù)和大量的網(wǎng)站分析。

速度和成本（對用戶而言）

無論你采用哪種語言，接下來要考慮的首要因素就是速度和用戶成本。

移動(dòng)互聯(lián)網(wǎng)運(yùn)營限制流量，進(jìn)而使帶寬成了一個(gè)有限而寶貴的資源，而且漫游收費(fèi)還很貴！

考慮到流量、成本和速度，所以必須保證markup（編程語言）盡可能的簡潔、小且標(biāo)準(zhǔn)。

得記住一點(diǎn)，移動(dòng)網(wǎng)絡(luò)運(yùn)營商收取的漫游費(fèi)是很多的！

由于新技術(shù)更新和采用速度很快，未來肯定是HTML5和CSS3的天下，所以要考慮適當(dāng)?shù)厣?jí)你的代碼。

像Apple等都提供固件升級(jí)，這樣很多老設(shè)備也可以支持新標(biāo)準(zhǔn)了。但是也許會(huì)發(fā)生類似的情況：IE6用戶拒絕升級(jí)到IE8，因此在決策之前，都要做好研究，測試、測試、再測試！

布局要素

移動(dòng)網(wǎng)頁布局會(huì)很麻煩：

• 移動(dòng)設(shè)備形狀尺寸不一；
• 移動(dòng)設(shè)備質(zhì)量和解決方案不一；
• 移動(dòng)設(shè)備或許支持放大滾動(dòng)，但也可能不支持；
• 屏幕小，所以頁面滾動(dòng)會(huì)更加困難。

移動(dòng)頁面設(shè)計(jì)布局的終極目的就是：盡可能地讓用戶快速地找到所尋找的東西，減少這一過程的用戶負(fù)擔(dān)。

布局對你的移動(dòng)網(wǎng)站成功與否起著本質(zhì)性的作用。

由于空間少，single column designs（單欄設(shè)計(jì)）是必須的！

簡潔

有效的移動(dòng)網(wǎng)頁布局的理念之一就是簡潔。內(nèi)容越繁雜，讀起來越困難，需要滾動(dòng)的地方越多！

空間小致使多欄設(shè)計(jì)并不適用，內(nèi)容布局不能超越屏幕，除非是被動(dòng)放大等。

因此，單欄設(shè)計(jì)顯得更加實(shí)用。

避免滾動(dòng)

iPhone和iPad等移動(dòng)設(shè)備可根據(jù)設(shè)備中心來調(diào)整頁面，這些也減少了滾動(dòng)需求，不過并不是所有移動(dòng)設(shè)備都有這功能。

在手機(jī)上需要滾動(dòng)的內(nèi)容頁面不具有良好的體驗(yàn)。

橫向滾動(dòng)也不是個(gè)好主意，特別iPad上，滾動(dòng)條只有在用戶嘗試滾動(dòng)的時(shí)候才會(huì)出現(xiàn)，所以多數(shù)情況下，移動(dòng)網(wǎng)頁設(shè)計(jì)都要避免滾動(dòng)。

一個(gè)好的移動(dòng)網(wǎng)頁設(shè)計(jì)具有清晰地布局以及簡潔的導(dǎo)航選項(xiàng)。

導(dǎo)航和按鈕的大小

另外一個(gè)關(guān)鍵成分就是導(dǎo)航和按鈕了！這也是觸摸移動(dòng)設(shè)備的一個(gè)重要問題。

我不確定你的手有多大，我想你肯定遇到過要點(diǎn)下那么小的按鈕，更該死的他還沒有放大功能。

所以說，一個(gè)好的體驗(yàn)要有什么？一個(gè)大小恰當(dāng)，按起來爽的鏈接和按鈕?。。?/p>

減少點(diǎn)擊次數(shù)也是個(gè)好主意，在移動(dòng)網(wǎng)頁設(shè)計(jì)中這也是重要的一點(diǎn)??！

內(nèi)容設(shè)計(jì)

內(nèi)容是網(wǎng)站的核心，不過也要考慮到流量等成本問題，如何減少過大的圖片、文本和多媒體也是門學(xué)問，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)行簡單的調(diào)整（也就是第一個(gè)辦法NO1:采用支持移動(dòng)設(shè)備的網(wǎng)頁設(shè)計(jì)），你需要對一些不必要的文本、圖片或者多媒體進(jìn)行刪減（就算是提供下載，也會(huì)增加可讀性）。而獨(dú)立的手機(jī)網(wǎng)站設(shè)計(jì)的好處就是可以清除多余的內(nèi)容。

圖片

屏幕小決定著CSS格式的圖片或者大容量的infographics會(huì)有問題。雖然有些手持設(shè)備屏幕大，問題不會(huì)明顯。IPhone等設(shè)備的放大縮小功能仍舊有限，所以一些視覺美化功能肯定需要剔除！

大圖占據(jù)寬帶，所以要減少其大??！

50KB和500KB的圖片在尺寸和解決方案上也有著明顯的區(qū)別！帶寬損耗也不同!

視音頻

視音頻幾乎是必須具備的內(nèi)容，就算是有寬帶限制，尤其是在iPhone和iPod這樣的設(shè)備。同樣的道理，適度的和明智的使用是關(guān)鍵！

如果你提供視音頻，最好有一個(gè)下載征詢！

下面是幾個(gè)建議：

• 格式：謹(jǐn)慎使用flash等一些設(shè)備上不兼容的格式；
• 視音頻文件大小：優(yōu)化你的文件
• 不要自動(dòng)下載視音頻：一定要事先征詢用戶。
• 不要自動(dòng)播放：這樣很讓人厭煩。

其他需考慮的因素

最要要考慮的因素可能還有scripting、plugins等等

知道該不要什么，該保留什么，這樣才能提高用戶體驗(yàn)，同事確保你的手機(jī)網(wǎng)站能夠適用于所有移動(dòng)設(shè)備！

移動(dòng)設(shè)備交互VS個(gè)人電腦交互

兩者交互方式如此不同在于屏幕不同；另外移動(dòng)設(shè)備中沒有鼠標(biāo)鍵盤，而是通過手指動(dòng)作來指定行動(dòng)和反映。

專屬技術(shù)和Plugin

比如，Apple就阻止flash在其移動(dòng)設(shè)備上的應(yīng)用，這真的是個(gè)問題！從而不得不依賴于蘋果的專有技術(shù)！

Apple反對flash也許預(yù)兆著移動(dòng)設(shè)備生產(chǎn)商想保住其對第三方的優(yōu)先權(quán)。雖然很多開發(fā)商也因此使用蘋果平臺(tái)，不過對這一問題的最好解決辦法就是適度地對自己的手機(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è)問題！甚至還有一些手機(jī)沒信號(hào)的“死亡區(qū)”，這些都影響著用戶交互，用戶在做某一件事，不過網(wǎng)絡(luò)卻突然中斷了，體驗(yàn)自然很糟糕！所以在設(shè)計(jì)app時(shí)需要考慮到離線和在線兩種情況。（推薦閱讀this offline HTML5 iPhone app tutorial）。

移動(dòng)網(wǎng)站測試

你只要到手機(jī)店逛一逛，就會(huì)發(fā)現(xiàn)屏幕等等都是有很多不同的！

目前有很多網(wǎng)站測試模擬器。

考慮到現(xiàn)在幾個(gè)大公司都只想保住自己的競爭優(yōu)勢，所以標(biāo)準(zhǔn)化似乎不太可能發(fā)生！

所以網(wǎng)站測試的范圍要盡可能廣！

移動(dòng)設(shè)備模擬器測試

毋庸置疑，你需要在盡可能多的平臺(tái)上對自己的網(wǎng)站進(jìn)行測試，下面我們提供了一些模擬器：

• Android emulator
• Blackberry emulator
• Dot Mobi emulator
• Firefox Mobile emulator
• iPhone / iPad / iPod Touch emulator
• Klondike WML emulator
• LG emulator
• Microsoft Devices emulator
• Motorola emulator
• Mozilla Fennec emulator
• NetFront emulator
• Nokia emulator
• OpenWave emulator (archive)
• Opera Mini emulator
• Opera Mobile emulator
• Palm emulator
• Palm Pre / iPhone emulator
• Samsung Java emulator
• Samsung Platform emulator
• Windows Mobile emulator

總結(jié)：3S：Simple,Small,Speedy

雖然本文提供的都是一些概要性的建議，不過仍舊有著基本的原則。

速度（speedy）仍舊是目前首要解決的問題，我們可以利用監(jiān)視器來限制解決方案和顏色。許多ISPs仍舊限制寬帶，有時(shí)還會(huì)發(fā)生斷網(wǎng)，這些情況對于老一代開發(fā)人員來說似乎并不陌生！

所以在網(wǎng)絡(luò)等基礎(chǔ)設(shè)施未改善之前，simple,small,speedy就是我們要遵守的3個(gè)主要原則了！

相關(guān)內(nèi)容：

• Mobile Web Design: Is it Worth It?
• A Quick Look at Mobile Web Designs
• How to Make an HTML5 iPhone App

原文：http://sixrevisions.com/web-development/mobile-web-design-best-practices/
本文鏈接：http://www.socialbeta.cn/articles/mobile-web-design-best-practices.html/
譯者：wisp
歡迎轉(zhuǎn)載，更多社會(huì)化媒體相關(guān)，請訂閱SocialBeta