後移動時代的 Web 設計

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

移動瀏覽技術現狀

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

Flash

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

Silverlight

Windows Mobile 7 將支援 Silverlight，那將是唯一一款支援該技術的行動瀏覽器。不過，既然微軟已經向 HTML 5

敞開大門，因此，也不要指望微軟在移動平台上會為 Silverlight 做多少努力，因此，底線是，不要在你的移動網站中過於依賴
Silverlight。

JavaScript

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

CSS 3

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

設計感與易用性之爭

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

為什麼視頻不能播放？

前面提過，不同移動平台對 Flash 和 Silverlight 的支援很不一致。目前，像 Vimeo
及 YouTube’s

一類的網站在行動裝置上訪問還存在各種問題，YouTube 比 Vimeo 略好一些，而內嵌視頻支援目前則好像只限於 Google Android
平台。

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

文字縮放

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

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

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

Lightbox 技術

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

瀏覽器探測

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

滑鼠盤旋

很多網站的導航使用滑鼠盤旋並下拉子功能表的方式，然而行動瀏覽器沒有滑鼠盤旋一說，雖然有的手機支援這一操作，但和案頭方式有很大的差異。應該避免
將重要的資訊放到需要滑鼠盤旋才能顯示的狀態。

下拉式功能表導航

下拉式功能表需要滑鼠盤旋才能開啟，前面說過，在手機上，這無法實現，另外，下拉式功能表的尺寸往往超過手機螢幕尺寸，即時使用者開啟了下拉式功能表，也很有可能
無法完全訪問。你應當始終在側邊欄保留子功能表，不管是針對手機網站還是案頭網站。

緩慢的載入速度

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

載入進度提示

你應當使用載入進度表徵圖，告訴使用者現在正在載入，對於手機瀏覽器這種 網際網路連線不很穩定的情形尤其重要，在一些 Ajax
應用場合，如果不顯示載入進度，使用者會以為你的網站已經失去反應。

記憶使用者的資料

手機使用者打字很不方便，應該儘可能使用 Cookie 記憶使用者的資料。

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

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

小螢幕

早期的 Web 設計師提起當年的 800x600
螢幕就一肚子怨氣，好在現在的案頭螢幕都足夠大了，然後行動裝置的螢幕比這個更小。你所能做的，儘可能不要把網站的 Header 或 Logo
做得太大。

移動網站適合你嗎？

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

單列布局

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

圖片縮放

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

簡單導航

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

廣告

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

頁尾的完整站連結

雖然你擁有一個移動版本的網站，但使用者可能希望看到完整的網站內容，多數移動網站的做法是在頁尾放上完整版網站的連結。

結論

以上講述了現代移動 Web 網站設計中的各種問題，下面是建立移動 Web 網站的一些資源和工具：

Tools

• W3c Mobile Checker
  （W3C
  移動網站驗證）
• JavaScript Support
  for Phones
  （手機瀏覽器的 JavaScript 支援）
• Mobile Site Converter

  （移動網站轉換）

• Simple
  Mobile Site Testing （簡單移動網站測試）

 

本文作者

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
網站內容管理系統
官方網站