製作適合行動裝置展示的Web頁面

當下已是行動網路時代,街邊隨處可見捧著行動電話玩臉書的小青年,就連大叔大媽也不甘落後,線上聊天看報樣樣會。現在是個網站都會想做行動版,但是行動版卻不那麼好做,畢竟行動裝置有太多的侷限。運算能力低下的CPU,狹小的記憶體,讓多半手機無法支援複雜的頁面功能。還有螢幕尺寸不一,解析度迥異,色彩呈現混亂,這些都是擺在Web設計人員前面的難題。

行動裝置Web頁面臨的問題

CPU速度和記憶體大小等硬體限制我們軟體開發人員無法解決,只能在螢幕適用性方面下功夫。行動Web頁面和desktop上的web頁不同,主要體現有三個問題:

  1. 行動裝置螢幕解析度各不相同,可能在iPhone上顯示好好的頁面到HTC上就各種換行錯位。
  2. 相同螢幕解析度但是dpi不同導致的物件的可見大小不同,同樣10px,有的裝置上顯示大約0.5公分,有的裝置上小到0.1公分。
  3. 行動裝置上字型有限,無法展現出全部的字號大小,有的J2ME手機上就一大一小兩種字型。

流式排版

解決第一個問題的方法是採用流式頁面版式。容納較多文字或者按鈕元素的區域需要考慮折行後的效果,這樣可以比較好的適應各種解析度的螢幕。下面是歐朋瀏覽器網址導航首頁在不同尺寸螢幕下顯示的效果。可以看出在較小的螢幕上,每行的元素稍少,較大的螢幕上每行的內容則稍多,流式布局方案讓不同裝置上的呈現效果都比較美觀。

使用相對單位

螢幕dpi不同導致的物件大小差異問題可以通過換用相對長度單位來解決。字符大小和外框邊長百分比是兩種各具優勢的選擇。行動裝置生產廠商在出廠前會把字符設定到一個便於閱讀的尺寸,所以基於字符高度em來確定整個頁面的尺寸是一個不錯的選擇。另一種思路是把頁面整體效果當作一個可縮放的框架,每各物件的大小都按其佔螢幕的百分比來計算,這樣在不同尺寸和不同解析度的螢幕上都可以得到相同的效果。

但是,單純使用字符大小或者螢幕百分比都會遇到一些麻煩。

使用字符高度作單位是一個用原子構建世界的過程,界面必須考慮最小的螢幕,而且不同裝置上螢幕的寬度用字符高度來衡量也各不相同,很難構造一各整體布局優秀的界面。

使用百分比作單位則是一個切蛋糕的過程,同樣的比例在大螢幕上大,在小螢幕上小。只使用百分比作單位會導致頁面缺乏靈活性,本來圖片和環繞圖片的文字是可以適應屏幕大小的,卻由於使用了百分比導致,圖片被拉得超大或擠得超小。

實際使用的時候需要把兩者結合起來,百分比更適合頁面框架格局構建時使用,字符高度更適合在嵌入文本中的元素上使用。

做新浪微博客戶端的時候,頁面頂端的一排按鈕最開始用的是字符高度單位。後來發現在小螢幕裝置上會發生彼此重疊或折成兩排的現象,影響視覺效果。於是改用頁面百分比作度量單位,可是這樣一來在大螢幕裝置上,那些工具按鈕都碩大無比,也很難看。最終只好使用JavaScript來輔助判斷,16%和2em哪個小用哪個。在小螢幕上用百分比以獲得整體效果,在大螢幕上用字符高度以避免按鈕過大。

第三個問題似乎無解,畢竟手機記憶體太小,只能提供有限的字形。如果需要對沒有文字的圖片做寬高控制,一種比較有效的方法是將em值轉換成px值,這也需要JavaScript參與才能實現。

總之在行動裝置上開發web頁面還是相當局限。比較令人欣喜的是在iPhone、android等新興平台上,有更多的字形尺寸可供選擇。可以在一定程度上解決開發困境。當然如果有條件的話,為每種尺寸的熒幕做設計一個專用的版本還是能帶來最佳體驗的方法。

原文

Continue Reading