移動瀏覽技術(shù)現(xiàn)狀
當(dāng)今最受歡迎的手機(jī)系統(tǒng)包括 Android,BlackBerry 與 iPhone。雖然這些手機(jī)系統(tǒng)中的瀏覽器都支持 HTML + CSS + JavaScript,但它們?nèi)匀淮嬖谀承┚窒蕖?BR>
Flash
現(xiàn)階段,用手機(jī)訪問 Flash 站點(diǎn),除了一個黑屏幕,什么都不會顯示,而且手機(jī)也不會提示說無法加載 Flash,因此,F(xiàn)lash 站點(diǎn)應(yīng)該通過瀏覽器探測技術(shù),在不支持 Flash 的客戶端上輸出替代內(nèi)容。盡管 Flash 在眾多平臺上都能輸出漂亮的內(nèi)容,但在手機(jī)上運(yùn)行 Flash 就像在 Mac 上運(yùn)行 Windows 一樣,不過,業(yè)界已經(jīng)出現(xiàn)一些技術(shù)來解決這個問題,但不要指望太多。
Silverlight
Windows Mobile 7 將支持 Silverlight,那將是唯一一款支持該技術(shù)的移動瀏覽器。不過,既然微軟已經(jīng)向 HTML 5 敞開大門,因此,也不要指望微軟在移動平臺上會為 Silverlight 做多少努力,因此,底線是,不要在你的移動站點(diǎn)中過于依賴 Silverlight。
JavaScript
過去5年,移動平臺對 JavaScript 的支持勢不可擋,其體驗(yàn)已經(jīng)接近桌面,但不能支撐過于復(fù)雜的功能,這里有一個關(guān)于這個問題的案例分析。至于那些比較老的手機(jī),雖然也支持 JavaScript,但多數(shù)都是默認(rèn)關(guān)閉的。當(dāng)你需要為移動設(shè)備編寫 JavaScript 的時候,需要對代碼進(jìn)行驗(yàn)證和檢查,以免用戶的設(shè)備崩潰,另外記住,將 JavaScript 腳本放到頁面底部,這樣,不至于在頁面還沒加載前就崩潰。
CSS 3
移動平臺對 CSS 的支持已經(jīng)很久了,如今,大量基于 Webkit 開源項(xiàng)目的手機(jī)開始支持 CSS 3,CSS3 擁有更好的視覺體驗(yàn),支持降級使用,還能加速頁面加載,你在使用 CSS3 的時候,只需要注意其中的某些屬性在舊的手機(jī)上可以降級使用。
設(shè)計感與易用性之爭
流行的 Web 技術(shù)并非都是你的最佳選擇,你需要對使用的各種技術(shù)進(jìn)行測試,事實(shí)證明,在移動瀏覽領(lǐng)域,諸如 Lightbox,視頻,鼠標(biāo)盤旋一類的技術(shù)存在問題,需要避開,我們將在這一節(jié)中對各種 Web 設(shè)計元素進(jìn)行講述。
為什么視頻不能播放?
前面提過,不同移動平臺對 Flash 和 Silverlight 的支持很不一致。目前,像 Vimeo 及 YouTube’s 一類的站點(diǎn)在移動設(shè)備上訪問還存在各種問題,YouTube 比 Vimeo 略好一些,而內(nèi)嵌視頻支持目前則好像只限于 Google Android 平臺。
移動平臺的視頻,是通過 HTML5 實(shí)現(xiàn)的,然而,到目前為止,HTML5 視頻的許可問題仍不明朗,不過 Google 一直在這個問題上走在最前面,希望他們能最終使這個問題免于重蹈 DVD 解碼器許可的覆轍。
文字縮放
希望你的文字最多使用的是相對位置而不是絕對位置,否則,Android 平臺的瀏覽器會將你頁面的文字扔到屏幕之外的某個地方。
在小屏幕上的顯示清晰度問題
在手機(jī)的小屏幕上看網(wǎng)頁,就像你隔著一個房間看電腦屏幕那樣,結(jié)果是什么看不清晰,你需要將重要的頁面元素加深對比度以便用戶能看得清楚點(diǎn)。
Lightbox 技術(shù)
Lightbox 是最受歡迎的 JavaScript 技術(shù),也是最容易讓手機(jī)用戶抓狂的地方,在很多時候,手機(jī)屏幕上的 Lightbox 只顯示一個角落,而大部分內(nèi)容則被扔到屏幕外的某個地方。另外,在某些時候,Lightbox 還讓手機(jī)的 Web 頁面崩潰,導(dǎo)致任何東西都無法點(diǎn)用。這并不意味著你不能使用 Lightbox,諸如登陸框一類的地方還是可以使用(登陸框可以做得比較小一些 - 譯者注),但不管怎樣,最好同時提供一個傳統(tǒng)的登錄方式,以免 Lightbox 顯示到屏幕之外。
瀏覽器探測
很多年前, Web 開發(fā)與設(shè)計者需要借助瀏覽器探測技術(shù),為不同瀏覽器,或者不同版本的瀏覽器輸出不同內(nèi)容,隨著 Web 標(biāo)準(zhǔn)的深入人心,為不同瀏覽器輸出不同內(nèi)容已經(jīng)不可取。瀏覽器嗅探可以通過諸如 jQuery 一類的 JavaScript 庫輕松實(shí)現(xiàn),還有一些可以嗅探 flash 支持情況的庫可以使用,然而現(xiàn)實(shí)是,除非你有大量 Flash 應(yīng)用,否則很少會用到這個,事實(shí)上,現(xiàn)在的很多移動瀏覽器在遇到不支持的內(nèi)容時會悄然掠過,而不會像 IE6 那樣彈一堆錯誤。
鼠標(biāo)盤旋
很多站點(diǎn)的導(dǎo)航使用鼠標(biāo)盤旋并下拉子菜單的方式,然而移動瀏覽器沒有鼠標(biāo)盤旋一說,雖然有的手機(jī)支持這一操作,但和桌面方式有很大的差異。應(yīng)該避免將重要的信息放到需要鼠標(biāo)盤旋才能顯示的狀態(tài)。
下拉菜單導(dǎo)航
下拉菜單需要鼠標(biāo)盤旋才能打開,前面說過,在手機(jī)上,這無法實(shí)現(xiàn),另外,下拉菜單的尺寸往往超過手機(jī)屏幕尺寸,即時用戶打開了下拉菜單,也很有可能無法完全訪問。你應(yīng)當(dāng)始終在側(cè)邊欄保留子菜單,不管是針對手機(jī)站點(diǎn)還是桌面站點(diǎn)。
緩慢的加載速度
手機(jī)瀏覽器加載速度非常慢,你需要壓縮自己的數(shù)據(jù),甚至使用 CDN 加速網(wǎng)絡(luò)。在 WordPress 一類的 CMS 中可以啟用數(shù)據(jù)壓縮,你可在在這個站點(diǎn)測試你的數(shù)據(jù)是否經(jīng)過了壓縮,如果你使用靜態(tài)設(shè)計的頁面,可以使用 Minify 對你設(shè)計的網(wǎng)頁代碼進(jìn)行凈化。
加載進(jìn)度提示
你應(yīng)當(dāng)使用加載進(jìn)度圖標(biāo),告訴用戶現(xiàn)在正在加載,對于手機(jī)瀏覽器這種 Internet 連接不很穩(wěn)定的情形尤其重要,在一些 Ajax 應(yīng)用場合,如果不顯示加載進(jìn)度,用戶會以為你的站點(diǎn)已經(jīng)失去反應(yīng)。
記憶用戶的數(shù)據(jù)
手機(jī)用戶打字很不方便,應(yīng)該盡可能使用 Cookie 記憶用戶的數(shù)據(jù)。
側(cè)邊欄放在左邊還是右邊?
應(yīng)該是右邊,因?yàn)槭謾C(jī)屏幕很小,用戶閱讀你的網(wǎng)頁的時候,如果左邊顯示側(cè)邊欄,他們要看真正的內(nèi)容,就不得不左右滾動,放在右邊,用戶就可以直接向下滾動看具體內(nèi)容,需要看側(cè)邊欄的時候再左右滾動。
小屏幕
早期的 Web 設(shè)計師提起當(dāng)年的 800x600 屏幕就一肚子怨氣,好在現(xiàn)在的桌面屏幕都足夠大了,然后移動設(shè)備的屏幕比這個更小。你所能做的,盡可能不要把網(wǎng)站的 Header 或 Logo 做得太大。
移動站點(diǎn)適合你嗎?
很多公司花費(fèi)大量金錢部署專門的移動站點(diǎn),事實(shí)上,這并不必要,如果你有個電子商務(wù)站點(diǎn),而手機(jī)用戶存在訪問問題,這種情況,也許才值得專門部署一個移動站點(diǎn)。
單列布局
要想讓你的站點(diǎn)更好地支持移動瀏覽器,你或許需要扔掉側(cè)邊欄,因?yàn)閭?cè)邊欄對移動用戶來說毫無疑義,F(xiàn)acebook 以及 Amazon 一類的站點(diǎn)使用這種方法改善用戶體驗(yàn)。
圖片縮放
很多基于博客系統(tǒng)的站點(diǎn)都包含移動版,實(shí)現(xiàn)更簡單的導(dǎo)航,問題是,這些站點(diǎn)同時會像文字那樣縮放它們頁面上的圖片,那些被縮小的圖很難看清楚,更甚的是,你沒有辦法改變圖片的顯示尺寸。應(yīng)當(dāng)允許用戶點(diǎn)擊一個圖片以顯示其完整尺寸版。
簡單導(dǎo)航
與其讓移動用戶像在桌面上那樣顯示站點(diǎn)中的所有內(nèi)容,不如只為他們顯示最基本的內(nèi)容,免得到處滾動,YouTube 在這方面做得最好,頁首的那些干凈,簡單的按鈕非常好用。
廣告
去掉側(cè)邊欄之后,你的站點(diǎn)中的大部分廣告位就沒有了,一個不錯的方法是將廣告放到頁尾。
頁尾的完整站鏈接
雖然你擁有一個移動版本的站點(diǎn),但用戶可能希望看到完整的站點(diǎn)內(nèi)容,多數(shù)移動站點(diǎn)的做法是在頁尾放上完整版站點(diǎn)的鏈接。
結(jié)論
上講述了現(xiàn)代移動 Web 站點(diǎn)設(shè)計中的各種問題,下面是創(chuàng)建移動 Web 站點(diǎn)的一些資源和工具:
Tools
- W3c Mobile Checker (W3C 移動站點(diǎn)驗(yàn)證)
- JavaScript Support for Phones (手機(jī)瀏覽器的 JavaScript 支持)
- Mobile Site Converter (移動站點(diǎn)轉(zhuǎn)換)
- Simple Mobile Site Testing (簡單移動站點(diǎn)測試)