Mobile Web #2 如何在 Mobile 上面呈現 App 般的效果

最近整個栽在行動版網頁的開發中,看起來小小的螢幕,困難程度卻比一般網頁麻煩多了

1. Mobile 裝置上面的可顯示區域小的多,要如何顯示出真正重要的東西,用一般網頁去設計的話,光是 banner 就佔掉了一大塊空間,還有一大堆東西要放,又是選單又是標題的,還不能太小不然手指頭點不到。

2. Mobile 裝置現在做的真的都很不錯,好到讓人忘記他的硬體完全不能跟一般電腦相比,電腦上跑的好好的 jquery animate 動畫效果 ,在 Mobile 上面看是讓人想哭的慢。

3. 不穩定的連線,有誰用 Mobile 上網的環境都是確定很順暢的,如果在不穩定的環境下上網,丟回來一直發生 404 的畫面,相信大家一定直接關掉了吧。

4.各種機型解析度瀏覽器版本,這原本電腦版網頁也會發生的問題,只是 1960 的螢幕可以接受只有 1280 的畫面,但是 ipad 使用者應該不能接受 iphone 的畫面吧。

綜合以上各點,已經開始逼近解答了,就是 css3 。利用 transform 取代  jquery animate 甚至用 translate3d 做 3d 效果,或是加上 media queries 動態改變排版,只是以台灣目前產業生態來說,css3 這塊到底是網頁設計師還是工程師,css 3 畢竟也只是單純的效果,還是要有 js 的觸發動作,還有很多細節的效果狀態要控制,或許之後 Mobile 不會再有網頁設計師,而是改成前端設計師,將  js 獨立出來一層架構(現在的 ExtJS 就是在做這件事)還要加上設計師的美感跟排版功力。

還有一個問題是並不是每個瀏覽器都可以完整支援 css3 ,不過好險的是目前的 android 跟 iOS 都是預設 webkit 核心瀏覽器,近來很有野心的 Windows Phone7 呢 .. .. 反正聽說 ie10 快出了對吧。

image

(iOS Only) 個人很愛的 app.ft.com ,Financial Times 推出的 Mobile Web ,簡單的畫面,豐富的內容,又很容易上手,連我這個看不太懂英文的都馬上就會用了。利用了 media queries 的功能,在 iphone ipad 或是電腦螢幕上(需要利用 User Agent 模擬)都會看到不同的頁面呈現方式。

image

(Webkit Only) Windows Phone7 推出的 Demo 網頁版,為了讓其他裝置使用者可以體會一下 Metro UI 的魅力,特效炫到一個爆炸,這也是我第一次發現 ie 不能瀏覽的 microsoft 網頁。


Reference

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *