後移動時代的 Web 設計

還記得Wap 嗎,現在還有多少人使用Wap?後移動時代,隨著瀏覽器技術的進步,為移動設備設置特殊站點已經不再必要。作為Web設計師,如果你能遵循一些基本的設計與佈局原則,你的站點將能被多數移動設備更輕鬆地訪問。本文講述的是後移動時代的Web設計原則。

移動瀏覽技術現狀

當今最受歡迎的手機系統包括Android,BlackBerry與iPhone。雖然這些手機系統中的瀏覽器都支持HTML+CSS+JavaScript,但它們仍然存在某些局限。

Flash

Flash

現階段,用手機訪問Flash 站點,除了一個黑屏幕,什麼都不會顯示,而且手機也不會提示說無法加載Flash,因此,Flash 站點應該通過瀏覽器探測技術,在不支持Flash 的客戶端上輸出替代內容。儘管Flash 在眾多平台上都能輸出漂亮的內容,但在手機上運行Flash 就像在Mac 上運行Windows 一樣,不過,業界已經出現一些技術來解決這個問題,但不要指望太多。

Silverlight



Windows Mobile 7 將支持Silverlight,那將是唯一一款支持該技術的移動瀏覽器。不過,既然微軟已經向 HTML 5 敞開大門,因此,也不要指望微軟在移動平台上會為Silverlight 做多少努力,因此,底線是,不要在你的移動站點中過於依賴Silverlight。

JavaScript

Javascript

過去5年,移動平台對JavaScript 的支持勢不可擋,其體驗已經接近桌面,但不能支撐過於復雜的功能,這裡有一個關於這個問題的案例分析。至於那些比較老的手機,雖然也支持JavaScript,但多數都是默認關閉的。當你需要為移動設備編寫JavaScript 的時候,需要對代碼進行驗證和檢查,以免用戶的設備崩潰,另外記住,將JavaScript 腳本放到頁面底部,這樣,不至於在頁面還沒加載前就崩潰。

CSS 3

移動平台對CSS 的支持已經很久了,如今,大量基於 Webkit 開源項目的手機開始支持CSS 3,CSS3 擁有更好的視覺體驗,支持降級使用,還能加速頁面加載,你在使用CSS3 的時候,只需要注意其中的某些屬性在舊的手機上可以降級使用。

設計感與易用性之爭

流行的Web 技術並非都是你的最佳選擇,你需要對使用的各種技術進行測試,事實證明,在移動瀏覽領域,諸如Lightbox,視頻,鼠標盤旋一類的技術存在問題,需要避開,我們將在這一節中對各種Web 設計元素進行講述。

Design Considerations and Usability Battles

為什麼視頻不能播放?

前面提過,不同移動平台對Flash 和Silverlight 的支持很不一致。目前,像 Vimeo 及 YouTube's一類的站點在移動設備上訪問還存在各種問題,​​YouTube 比Vimeo 略好一些,而內嵌視頻支持目前則好像只限於Google Android 平台。

移動平台的視頻,是通過HTML5 實現的,然而,到目前為止,HTML5 視頻的許可問題仍不明朗,不過Google 一直在這個問題上走在最前面,希望他們能最終使這個問題免於重蹈DVD 解碼器許可的覆轍。

文字縮放

希望你的文字最多使用的是相對位置而不是絕對位置,否則,Android 平台的瀏覽器會將你頁面的文字扔到屏幕之外的某個地方。

在小屏幕上的顯示清晰度問題

在手機的小屏幕上看網頁,就像你隔著一個房間看電腦屏幕那樣,結果是什麼看不清晰,你需要將重要的頁面元素加深對比度以便用戶能看得清楚點。

Lightbox 技術

Lightbox

Lightbox 是最受歡迎的JavaScript 技術,也是最容易讓手機用戶抓狂的地方,在很多時候,手機屏幕上的Lightbox 只顯示一個角落,而大部分內容則被扔到屏幕外的某個地方。另外,在某些時候,Lightbox 還讓手機的Web 頁面崩潰,導致任何東西都無法點用。這並不意味著你不能使用Lightbox,諸​​如登陸框一類的地方還是可以使用(登陸框可以做得比較小一些– 譯者註),但不管怎樣,最好同時提供一個傳統的登錄方式,以免Lightbox 顯示到屏幕之外。

瀏覽器探測

很多年前, Web 開發與設計者需要藉助瀏覽器探測技術,為不同瀏覽器,或者不同版本的瀏覽器輸出不同內容,隨著Web 標準的深入人心,為不同瀏覽器輸出不同內容已經不可取。瀏覽器嗅探可以通過諸如 jQuery 一類的JavaScript 庫輕鬆實現,還有一些可以嗅探 flash 支持情況的庫可以使用,然而現實是,除非你有大量Flash 應用,否則很少會用到這個,事實上,現在的很多移動瀏覽器在遇到不支持的內容時會悄然掠過,而不會像IE6 那樣彈一堆錯誤。

鼠標盤旋

很多站點的導航使用鼠標盤旋並下拉子菜單的方式,然而移動瀏覽器沒有鼠標盤旋一說,雖然有的手機支持這一操作,但和桌面方式有很大的差異。應該避免將重要的信息放到需要鼠標盤旋才能顯示的狀態。

下拉菜單導航

Sencha

下拉菜單需要鼠標盤旋才能打開,前面說過,在手機上,這無法實現,另外,下拉菜單的尺寸往往超過手機屏幕尺寸,即時用戶打開了下拉菜單,也很有可能無法完全訪問。你應當始終在側邊欄保留子菜單,不管是針對​​手機站點還是桌面站點。

緩慢的加載速度

手機瀏覽器加載速度非常慢,你需要壓縮自己的數據,甚至使用CDN 加速網絡。在WordPress 一類的CMS 中可以啟用數據壓縮,你可在在這個站點測試你的數據是否經過了壓縮,如果你使用靜態設計的頁面,可以使用 Minify 對你設計的網頁代碼進行淨化。

加載進度提示

Loading

你應當使用加載進度圖標,告訴用戶現在正在加載,對於手機瀏覽器這種Internet 連接不很穩定的情形尤其重要,在一些Ajax 應用場合,如果不顯示加載進度,用戶會以為​​你的站點已經失去反應。

記憶用戶的數據

手機用戶打字很不方便,應該盡可能使用Cookie 記憶用戶的數據。

側邊欄放在左邊還是右邊?

應該是右邊,因為手機屏幕很小,用戶閱讀你的網頁的時候,如果左邊顯示側邊欄,他們要看真正的內容,就不得不左右滾動,放在右邊,用戶就可以直接向下滾動看具體內容,需要看側邊欄的時候再左右滾動。

小屏幕

早期的Web 設計師提起當年的800×600 屏幕就一肚子怨氣,好在現在的桌面屏幕都足夠大了,然後移動設備的屏幕比這個更小。你所能做的,盡可能不要把網站的Header 或Logo 做得太大。

移動站點適合你嗎?

很多公司花費大量金錢部署專門的移動站點,事實上,這並不必要,如果你有個電子商務站點,而手機用戶存在訪問問題,這種情況,也許才值得專門部署一個移動站點。

單列佈局

Single Column

要想讓你的站點更好地支持移動瀏覽器,你或許需要扔掉側邊欄,因為側邊欄對移動用戶來說毫無疑義,Facebook 以及Amazon 一類的站點使用這種方法改善用戶體驗。

圖片縮放

很多基於博客系統的站點都包含移動版,實現更簡單的導航,問題是,這些站點同時會像文字那樣縮放它們頁面上的圖片,那些被縮小的圖很難看清楚,更甚的是,你沒有辦法改變圖片的顯示尺寸。應當允許用戶點擊一個圖片以顯示其完整尺寸版。

簡單導航

與其讓移動用戶像在桌面上那樣顯示站點中的所有內容,不如只為他們顯示最基本的內容,免得到處滾動,YouTube 在這方面做得最好,頁首的那些乾淨,簡單的按鈕非常好用。

Simple Navigation

廣告

去掉側邊欄之後,你的站點中的大部分廣告位就沒有了,一個不錯的方法是將廣告放到頁尾。

頁尾的完整站鏈接

雖然你擁有一個移動版本的站點,但用戶可能希望看到完整的站點內容,多數移動站點的做法是在頁尾放上完整版站點的鏈接。

結論

以上講述了現代移動Web 站點設計中的各種問題,​​下面是創建移動Web 站點的一些資源和工具:

Tools

本文作者

Ashton Blue

Ashton (Ash) Blue 是Ash Blue Web 設計公司的創辦者,他的公司網站是 www.ashbluewebdesign.com ,Twitter 賬戶是http://twitter.com/ashblueWD

本文國際來源:onextrapixel.com Designing For The Modern Day Mobile Market

中文翻譯來源:銳商企業CMS 網站內容管理系統 官方網站

特別注意:本站所有轉載文章言論不代表本站觀點,本站所提供的攝影照片,插畫,設計作品,如需使用,請與原作者聯繫,文章轉自alibuybuy

Comments are closed.