熱門文章

2011年4月27日 星期三

設計移動網頁的幾個要素

現在,網頁設計公司已經越來越趨向移動設計了,由於手機,ipad,等移動設備的發明,我們以後除了電腦版的網頁,也要做出一個對應手機或行動裝置的網頁。

1. 確立網頁設計的內容,方向及類型
執行一個網頁設計的計劃前先要確定的一些方向:
全新網頁設計-是為某產品/品牌做一個新的網頁,包括電腦頁面及行動裝置頁面嗎?
重新設計網頁-是要從原有的舊網頁取材,量身訂造一個電腦頁面及行動裝置頁面嗎?
增設行動裝置頁面-是原有的電腦頁面不改變,只需要增設一個行動裝置頁面嗎?
以上3個不同的情況都有不同的設計策略,是網頁設計者開始做網頁設計前必須要釐清的。

2. 確定公司/品牌所要表達的形象
很多時候,網頁設計者/開發者需要為公司設計一個網頁,因此首要注意的是公司的形象及產品的特色。
3. 在設計行動裝置版網頁前務必預測網站流量
如果是要用舊有的電腦版網站為藍本,重新設計行動裝置版的網頁(目前這種案例居多),建議先用Google Analytics 或其他測量網頁流量的工具來作一些訪客背景調查,能夠掌握越多關於網站訪客的資料越好。

4. 學習如何設計可自動調整版面的網頁設計
承第三點,每一年推出的行動裝置之多,就算做了網頁訪客資料調查,也無法因應隨時做出符合每一台行動裝置/瀏覽器的頁面,根據Responsive Web Design 這篇文章,與其試圖迎合每一個行動裝置/瀏覽器,不如讓設計自然適應不同的裝置。善用新的資源如HTML5,CSS3,及不同的網路字體,做出自動調整版面的網頁設計

5. 簡單,但不能簡陋
設計行動裝置網頁的黃金要素就是要簡單,行動裝置的畫面絕對不可能比電腦螢幕大,處理器也不一定比電腦好,因此設計必須要簡單化。最基本要求是檔案的大小要越小越好,以及網頁載入的時間要越短越好。而且目前無線網路還沒有到非常成熟的階段,因此行動裝置網站不要做得太複雜及花俏。行動裝置網頁的各個元素放置為止,都必須要想清楚,行動裝置版網頁比電腦版網頁少了3/4的空間,代表沒有空間可以浪費, 1/4的空間裡,每一個元素都是重點。
但是簡單不代表行動版網頁注定要簡陋,多試著學習CSS3,可以減少圖片或Javascript 的依賴,並能輕鬆的完成多背景、圓角、3D 動畫、文字陰影、漸變及透明度等設計特色。

6. 網頁模板建議採用單欄式設計(Single-Column Layouts)
網頁模板採用單欄式設計,目的是為了方便在有限的行動裝置畫面上閱讀並操作網頁, 太多欄位對於一些手指頭比較大的使用者來說很容易誤觸,並且個別欄位字體變小也不好閱讀。
如果是多欄式的模板,建議使用Responsive web design 技巧,將多欄(multi-column)模板合併成單欄式設計。

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

8. 記得提供視覺反饋按鍵
在電腦網頁點擊一個按鈕時,都會看到按鈕的顏色變化,這告訴使用者他已經成功點擊該按鈕,同樣的,行動裝置網頁也建議做這樣的設計,這種不起眼的小設計會影響到使用者的心情及反應。另外一個視覺反饋的重點在網頁載入的時候,在使用者做出點擊/選取的動作後,網頁會開始loading,這個時候建議做出一些行動圖案讓使用者知道網頁正在載入,避免使用者重複點擊按鈕,延誤載入的時間。

9. 測試,測試,再測試網頁性能
網頁完成後才是考驗的開始,作為網頁設計者,你能夠確定你設計的網頁在各個裝置上都能運作嗎?不可能(尤其是Android 裝置更要注意,參考前文「漫談iOS 以及Android 版本分裂狀態以及對於開發者的影響」及「Andorid 的版本分裂以及HTC 的機海戰術」),因為你不可能真的測試過每一台行動裝置。所以必須要測試軟體(developer SDK)的輔助,以及一些網頁版的模擬器(web-based emulator), Mike Brittain的網站有提供一些測試網頁的相關資料。

沒有留言:

張貼留言

√√√√√√