編者注:本文編譯自Iain McQueen發表在Posterous上的博文“What I Learned Building a Mobile Friendly Web App”。
自今年11月19日釋出第一版Swiperoo起,Dave和我就開始時不時談論開發初期遇到的各種問題。我想,一定也有很多其他移動應用開發者會遇到和我們一樣的問題,因此,在這裡把我在開發使用者友好型移動應用時總結出來的五個教訓和大家分享,希望對大家有一定的借鑑意義。
1)使用者期望本地瀏覽器功能保持不變
如果你計劃開發一個移動優化網站,那麼至少需要花一定的時間來模仿本地裝置功能。進行滑動/分頁的清掃手勢就是一個很好的例子。清掃這個創意聽起來 似乎不錯,但通常需要禁用預設的平移和縮放手勢功能,而這是某些使用者並不希望發生的。我們正在努力尋求一種技術解決辦法,一旦有所發現,便會第一時間發 布。
教訓:進行移動應用開發時,儘可能保持本地功能。
2)並非所有裝置“生來就平等”
假如移動應用開發領域存在可靠標準,那很多設計方面的頭疼問題都會迎刃而解。但問題是,目前根本沒有這樣的標準存在,因此,該頭疼的問題還是得繼續“頭疼”。使用不同移動瀏覽器時會有細微區別,比如寬度設計。考慮到很多人喜歡固定寬度,960畫素能很好地適用iPad和iPhone。然而,或許你早已認識到,iPhone上的高度並不完全相同,因而使設計變得更為複雜,而本地功能可以很好地避免這類問題,這又可以回到第一個教訓。
教訓:在儘可能多的裝置上進行測試,或者專注於某一類特定裝置,如iPad或智慧手機等。
3)面向未來的相容性是一個很大的挑戰
Swiperoo是面向平板和所有臺式電腦瀏覽器的平臺,使用者需要將Safari、Firefox或Chrome等瀏覽器更新至最新版本才能獲得我 們產品的全方位體驗。但據調查,非技術人員使用者通常都不會主動更新他們的瀏覽器。如果想開發一個同時面向移動裝置和本地裝置的的網站,Modernizr是一個不錯的工具,或者至少應該提醒使用者如何解決問題以及不解決這些問題可能受到的種種限制。
教訓:設計和開發前端產品時,多考慮傳統瀏覽器。
4)設計時需考慮資源問題
與臺式電腦相比,行動網路在頻寬和處理能力方面存在諸多限制。使用者在抱怨速度太慢時,圖片負載是一個很重要的因素,以下是一些處理圖形的小技巧:
- 圖片可以不用時就不要用,實在需要時就儘可能使用小圖片;
- 使用sprites減少HTTP請求;
- 圖片的漸變和陰影效果會加大對硬體的壓力,因此使用時需謹慎;
- 如需使用動畫,使用較輕的漸變等效果。
有時候確實不可避免地需要用到圖片,這些小技巧可在一定程度上起到改善性作用,同時也有助於維護快取檔案。
教訓:確保網站能快訊載入移動裝置。
5)儘可能使用Javascript
在提高行動網路效能方面,Javascript能有效地解決很多令人頭疼的問題。現在幾乎所有的移動瀏覽都相容Javascript,這樣可以使 HTML看起來整潔,減少頁面大小。建議藉助Ajax進行需要伺服器端互動的頁面更新,它不均可以避免過載不必要的內容,還能創造一種更本地化的使用者體 驗。
教訓:通過使用有利於後端程式的前端技術提高效能。