WebApp最佳实践用户体验篇之如何针对多种屏幕尺寸设计合理的移动应用

身为一个移动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屏幕尺寸的。这样一来，设计人员就能使用相对大小定义字体以及其他界面元素了，从而根据设备的真是尺寸自动调节视图了。