4/05/2013



在大家越來越習慣使用行動設備瀏覽網頁的情況下,越來越多網站不得不推出行動版網頁,讓網站頁面能以最完美的型態呈現在用戶面前,當然,行動版網頁的設計工作並不是只有將頁面調整到最佳比例那麼簡單,很多地方還是需要經過特別設計的,以下就幫大家列出幾點設計行動版網頁時不可忽略的小細節。

了解用戶使用情境


首先,了解用戶使用情境是一件非常重要的事,用戶可能只會在某些特定的情況下使用行動設備瀏覽你的網頁,所以假如你的網站有很多功能,請先預設用戶的使用情境,然後將他們最有可能使用的功能放在網頁上或是將這些功能設計在頁面最顯眼的位置。

拿 Flickr 為例,Flickr 的行動版網頁主要提供最新活動(Recent activity)、好友上傳(Uploads from your contacts)、今日最有趣(Today’s interestingness)與附近上傳(Photos taken nearby)等四大功能,最新活動和好友上傳讓用戶可以隨時了解好友或網路上的最新動態,而今日最有趣和附近上傳則讓用戶可以在無聊時瀏覽照片打發時間。


內容比導覽更重要


對於用戶來說,行動版網頁裡的內容比導覽還要重要,舉例來說,當用戶在使用行動網頁查詢最新資訊時(Ex:股價、新聞、球賽比數),他們想要的是快速看到內容而不是你的網站導覽。

不過目前有太多行動版網頁犯了類似的錯誤,這些網頁通常會在首頁展示網站的導覽系統,但對用戶來說,時間就是金錢,下載這些導覽內容不但浪費他們的時間,還會額外增加他們的上網費用,所以,盡快將用戶想要的內容呈現到他們眼前,是件非常重要的事。

在這方面 ESPN 和 YouTube 的行動版網頁都作的很好,這兩個網站僅在網頁表頭釋出一點空間告知用戶目前所在位置,剩餘空間都拿來展示用戶所需要的內容。


看到這你也許會想,雖然內容比導覽重要,但總不能把導覽移除吧!在不能移除的情況下,這個導覽系統應該出現在哪裡呢?面對這個問題,ESPN 和 YouTube 都各自想出了答案。先看 YouTube,YouTube 行動版網頁選擇將導覽資訊隱藏在網頁上方的特殊圖示內,這方法雖然有遵守上方內容比導覽重要的原則,而且網頁上的導覽功能依舊可以使用,不過這種設計仍有幾項缺點,第一就是用戶不但要知道這圖示就是代表網站導覽目錄,而且還要主動尋找它的位置,再來就是當用戶使用這個導覽目錄時,當前所執行的工作會被打斷。


相較之下,ESPN 就聰明多了,ESPN 行動版網頁在頁面上方設置了一個目錄按鈕,此按鈕點擊後會直接在下方展開一個網站導覽列表,這方法讓用戶可以在不離開當前頁面的情況下,直接思考下一步要去哪。



回復鍵有存在的必要嗎?


用過 iOS App 的人都知道,很多 iPhone 原生 App 都會在系統內設置一個回復鍵(通常會顯示在頁面左上方),方便用戶回到上一頁或是回復先前操作,不過到了行動版網頁,這個回復鍵真的有存在的必要嗎?


這答案是否定的,因為除了 iPhone,大多數 Android 手機本身就有一個回復鍵,而 iPhone 上平時拿來瀏覽行動網頁的瀏覽器通常也都會內建回到上一頁的按鍵,所以若是在行動版網頁上在再加入一個回復鍵,可能就顯的有點多餘。



頁面底部的固定導覽列


和回復鍵一樣,很多 iPhone 原生 App 都會在頁面底部加上一條固定的導覽列,這導覽列讓用戶可以很輕鬆的使用拇指操作一些特定功能,不過對於行動版網頁來說,這種固定在頁面下方的導覽列是否有存在的必要就非常值得討論。因為對 iPhone 用戶來說,拿來瀏覽頁面的瀏覽器通常就會內建一條固定導覽列(主要用來放置上一頁、下一頁以及設定等按鈕),所以若是在網頁下再加入一條導覽列,畫面就會變的非常的擁擠。

拿 Yahoo 信箱為例,若是加上頁面上方的導覽列,行動版的 Yahoo信箱在單一畫面上同時會出現三條導覽列,嚴重壓縮到郵件顯示的空間。


若是想解決這個問題,建議可以像 Twitter 一樣,設計一個特別的導覽列放置在頁面最上方。


以上幾點都是設計行動版網頁時需要注意的小細節,設計師在設計頁面時千萬別將它們忽略了!

【參考資料:alistapart