淺談行動裝置網頁:實戰篇

Internet Sep 23, 2011

使用一個行動裝置瀏覽網頁固然便利,但其輕薄短小便於攜帶的優勢也同時帶來了某些侷限性。以下便列舉其中的幾項以供大家思考。
螢幕尺寸:在 2.8 吋到 5.3 吋的鼓掌之間,僅能容納 xx 到 xx 個左右的 12 級字。

視窗及分頁:單一可視視窗,分頁數定量。

導覽方式:以上下捲動配合觸動點擊的手勢替代傳統的鼠標瀏覽。

支援性:有限的檔案類型支援性,像是 swf、wmv 或是直接在網頁中讀取 pdf。

部分內容管理系統 (CMS) 雖然提供了直接將現有內容轉換成行動版網頁的功能,但行動版網頁設計不僅僅是把網頁內容直接濃縮而已,在體認到其與傳統網頁的差異性後,更要依據這些特性在設計上做出適度的調整。

頁面採單欄式彈性設計,一個能夠自動調整的版面在行動裝置五花八門的螢幕尺寸上皆可適用。

構精簡化,至多三層左右,不會有人想在第F層隔壁的上面才能獲取所需的內容,稍長的內容可採用折頁隱藏的設計。

主導覽列的位置應落在內容上方及最下方,此外,一般成人平均指尖接觸面積為 1 平方公分,按鈕的設計需大於 38px*38px 為最佳。由於沒有傳統網頁上的滑入效果,因此部分行動版網頁會讓使用者觸動點擊後出現載入的效果。

CSS 保持精簡,多利用 CSS3 表現圖形,非使用圖片的部分尺寸適當即可,高解析大圖在行動版網頁上是無意義的,少用額外的 javascript,並且注意連結檔案類型。

確保重新指向的正確性,如果用戶使用手機瀏覽你的網頁就自動跳轉至手機版網頁。

盡量使用簡短的的網址,以避免用戶需在手機上觸動輸入又稠又長的網址的情形。
例:使用http://longlongdomain.com而非http://www.longlongdomain.com/index.html

最後,除了在模擬器上的跨平台測試,最好也能以實機測試。

Tags