設計行動裝置網頁(Mobile-Web)的10個要素

評論
評論

 


7 善用摺疊式目錄

網頁的資訊很多?請記得用重點式,或主題式的呈現內容,跟第 6 點一樣,將多欄的資料隱藏在重點/主題的條目下,讓使用者輕鬆選取自己想看的資訊。另外記得用直式設計,不要讓使用者還要左右行動畫面才能看完一行字。

例子:Major League Baseball 的行動版網頁:

8 行動裝置網頁的按鍵要明顯易按

網頁設計者必須要清楚使用電腦時,滑鼠或 touch pad 可以按左鍵,右鍵,或者滑動軸,這些行動裝置都沒有。另外在將電腦版網頁移植到行動裝置時還有一個要點,就是電腦網頁在做選取的功能時,可以將滑鼠游標移到按鍵上方但不一定要按下(hover),但是行動裝置只有點擊的功能,所以重新設計或移植網頁時必須要重新設計按鍵特性。

9 記得提供視覺反饋按鍵(interaction feedback)

在電腦網頁點擊一個按鈕時,都會看到按鈕的顏色變化,這告訴使用者他已經成功點擊該按鈕,同樣的,行動裝置網頁也建議做這樣的設計,這種不起眼的小設計會影響到使用者的心情及反應。

另外一個視覺反饋的重點在網頁載入的時候,在使用者做出點擊/選取的動作後,網頁會開始 loading,這個時候建議做出一些行動圖案讓使用者知道網頁正在載入,避免使用者重複點擊按鈕,延誤載入的時間。

10 測試,測試,再測試網頁性能

網頁完成後才是考驗的開始,作為網頁設計者,你能夠確定你設計的網頁在各個裝置上都能運作嗎?不可能(尤其是 Android 裝置更要注意,參考前文「漫談 iOS 以及 Android 版本分裂狀態以及對於開發者的影響」及「Andorid 的版本分裂以及 HTC 的機海戰術」),因為你不可能真的測試過每一台行動裝置。

所以必須要測試軟體(developer SDK)的輔助,以及一些網頁版的模擬器(web-based emulator),Mike Brittain 的網站有提供一些測試網頁的相關資料。

 

相關文章

評論