移動web網站的設計師:如何設計行動裝置 App程式

文章描述：WebApp最佳實務使用者體驗篇之如何針對多種螢幕尺寸設計合理的行動裝置 App.

身為一個移動web網站的設計師，除非你只是針對某種特定的裝置設計，否則你應該會常常碰到這樣的問題：如何清楚地瞭解網站運行裝置的螢幕尺寸大小？這個問題一直困擾著行動裝置上的設計師。

例如：

iPhone的高度是480個像素，寬320像素。

許多Nokia N系列裝置的寬度為240像素，高度為320像素。

許多更新款的裝置支援寬度和高度顛倒的視圖。

舊款的Nokia（目前仍然比較流行）裝置螢幕的尺寸從176×208到352×416不等。

Blackberry螢幕的解析度也是從160×160到324×352各種尺寸都有。

本文意在說明如何針對豐富的行動裝置和螢幕尺寸，合理地設計應用視圖。首先提出兩個小螢幕設計中的關鍵問題——螢幕和像素大小的多樣性。

處理多樣性

現在你可能會問自己“我的設計真的需要滿足所有這些不同的螢幕尺寸嗎？”，或者是“我是否應該為每種不同的裝置專門設計一個版本？”這完全取決於你的項目的商業要求，有的設計可能只需要滿足一種螢幕尺寸——或者說是一種裝置就足夠了。但如果項目要求你的設計必須支援大多數的主流裝置，那麼你就必須找到一種處理多種螢幕尺寸的有效方法了。

不用慌張，事情沒有那麼可怕。在設計移動web時，你完全可以假設頁面是可以上下滾動的——就像案頭瀏覽器中的應用一樣。這樣就不用考慮螢幕的高度問題了，你可以將主要的精力集中在處理裝置螢幕的寬度上了。幸運的是，DeviceAtlas Explorer已經提供了大量已有裝置的螢幕寬度統計資訊了。

正如圖表所示，大多數的螢幕寬度主要集中在128，240和176像素這幾種類型中——而剩餘的集中類型：120，130，160，208和220像素——和最多的三種類型值也相差不大。還有一小部分的螢幕尺寸寬度為96，101，320或是大於320像素。螢幕寬度低於128像素的裝置只佔了很小的比例，總共有469個裝置。

還有一點，不到5%的裝置寬度大於320個像素。但這一數字可能會在未來有所提升，目前已經可以看到，小螢幕（128，176等）裝置正逐漸被大螢幕（240+）裝置所代替。下面的圖表給出了相關的分析。

螢幕的解析度的確很重要，但還有一點同樣也必須考慮——螢幕的物理尺寸。

‘像素問題’

這些年來，設計師主要是針對大型的電腦裝置設計檢視。儘管顯示器的物理尺寸可能不盡相同，但螢幕的尺寸基本都為1024×768像素；常見的像素密度為85 ppi（pixels-per-inch）。但是最近，顯示的視圖開始發生了一些變化：

Asus Eee PC 900迷你筆記型電腦的解析度為1024×600像素，像素密度約為133ppi。

Apple iPhone的解析度為320×480像素，其中像素密度為160ppi。

Nokia的E60螢幕的解析度為416×352，而像素密度是240ppi。

為了支援多種裝置，像素密度的不同將帶來新的問題；像素的大小也將影響整個設計的效果。

下圖顯示了在像素密度為72，144和240ppi的裝置上，100×100像素的映像的顯示效果。隨著圖片越來越小，映像的形狀和一些細節都有所變形。

幸運的是，追求高像素密度的風潮似乎已經過去了，目前超過200 ppi的裝置還並不多見了。這意味著，你並不是真的需要支援上圖中列出的所有的像素密度。但是，在設計的時候，你需要記住，不能想當然地認為所有的裝置的像素都是相等的。需要做到以下幾點：

確定你需要支援的像素密度的範圍。

在真實裝置上檢測你的設計，以防某些極端的情況被你忽略了。

使用相對單位設計和定義布局元素，比如ems或是百分百。這將提供一個更真實的布局元素尺寸和位置資訊。

由於製造商想要提升作業系統的靈活性，因此‘像素問題’將受到越來越多的關注。事實上，Google的Android系統已經實現了一個“>potentially interesting solution”方案來解決像素的問題。Android作業系統採用了一個抽象的‘dp’（獨立像素密度）單位，它是基於160 ppi螢幕尺寸的。這樣一來，設計人員就能使用相對大小定義字型以及其他介面元素了，從而根據裝置的真是尺寸自動調節視圖了。

[1] [2]  下一頁