IT技术博客大学习 共学习 共进步

手机客户端适配性

晓生's新视角 2010-06-07 13:06:20 浏览 4,622 次

    适配性指的是客户端应用程序能可以在多种参数的手机屏幕上运行,手机屏幕的相关参数有尺寸、分辨率和精度。

屏幕尺寸指的是实际的物理尺寸,以屏幕的对角线长度为准。如iPhone的尺寸为3.5英寸。屏幕分辨率是物理像素总数。如iPhone的屏幕像素为320×480px(宽×高)。屏幕精度取决于屏幕分辨率和像素在物理宽高上分布情况。如iPhone的精度为164dpi。简单地说精度是分辨率与尺寸的比值。同样的分辨率,尺寸越大,精度越小。

    引起适配问题的原因有:

    1.手机分辨率(简称为R)多样化。从128×128px到800 ×480px约30种分辨率,根据QVGA(240×320px)、HVGA(320×480px)和VGA(480×640px)可分为四种:

R<QVGA:128×128,130×130,132×176,176×208……,此种分辨率市场占有率不到5%,将逐渐被市场淘汰,加之此类手机的用户消费能力较低,因而很多应用程序都放弃此类手机。QVGA≤R<HVGA:240×320,240×400,240×432……,此种市场占有率达到70%。HVGA≤R<VGA:320×480,360×480,480×360……VGA≤R:480×640,480×800……VGA和HVGA是未来手机屏幕的发展趋势,市场占有率将持续增大。

    2.精度多样化。低精度的屏幕有较少的可用像素,而有时在同样的区域内显示更多的像素,同一个UI元素(如按钮)在高精度的屏幕上要比低精度的屏幕上看起来要小。

    在PC上的web设计通常宽度为960px,显示在宽屏幕上时,页面居中对齐,左右可用纯色或者图片填充。对于手机而言,每页显示的能力有限,不是像web设计那样讨论显示1屏还是8屏,手机客户端大多显示1屏,如不是多数据页面要尽量避免使用滚动条,否则在按键手机要按多次向下键或者在触摸屏上向上平移界面才能找到想要的内容,所以设计手机客户端讨论更多的是如何精简信息和减少操作步骤。

    QVGA的1屏界面移植到VGA上,只能占据半屏的屏幕,图标看起来不宜识别。所以先为QVGA手机设计界面之后,再根据大屏幕手机的分辨率调整界面中图标等元素的尺寸,保证显示效果并充分利用好每一个像素点。

    适配有两种做法:1.根据分辨率适配。2.根据精度适配。

分辨率适配

    这种做法适用于Java&Windows Mobile版的客户端。

    1

    如示意图,顶部为导航,内容为下拉框和“确定”按钮。程序开启时获取手机分辨率为w×h,从上到下依次绘制界面(数据均为假设):

当240≤w<320时,icon的大小为40×40px,菜单栏的高度=d(d=24px),上间距=左间距=右间距=10px,换行间距br=6px,下拉框的高度=字的高度+2a(手机默认的字体高度大小不一,a=4px),下拉框的宽度=w-左右间距,按钮的高度=字的高度+2a,按钮的宽度=字的宽度+2b(b=6px)

当320≤w<480时,icon的大小为60×60px,菜单栏的高度=d(d=32px),上间距=左间距=右间距=14px,换行间距br=8px,下拉框的高度=字的高度+2a(手机默认的字体高度大小不一,a=6px),下拉框的宽度=w-左右间距,按钮的高度=字的高度+2a,按钮的宽度=字的宽度+2b(b=8px)

……

    依次类推,区分出多个版本。其中数值可以是明确数字,也可以使用公式,比如,菜单栏的高度=d,br=d/4。这些数值和公式写入XML,加上适当的图片资源,更换不同的版本时,只是XML和图片不同,主要程序还是同样的。

精度适配

    Android是按精度适配,平台不仅可以使用在手机上,还能使用在导航仪等设备上,屏幕的参数同样的多样化。Android自带三种功能:1.图片缩放;2.自动定义像素尺寸和位置;3.兼容更大尺寸的屏幕,在Android的icon设计指南中有介绍,程序开启时根据获取到的精度值调用合适的图片资源。

    2

    按精度区分版本需要平台的支持,由于中精度大屏幕的手机较少,按照分辨率适配能满足大部分的手机显示要求,由于Android的客户端还在设计过程中,最终效果不便下结论。

建议继续学习

  1. 手机界面适配 (阅读 5,702)
  2. 2011年手机产品设计趋势(1):精致实用的界面 (阅读 5,386)
  3. 用谷歌浏览器来当手机模拟器 (阅读 5,144)
  4. 一个简单的基于PhoneGap的开源微博客户端 (阅读 5,020)
  5. 校园场景中的手机使用调研 (阅读 4,962)
  6. 手机原型设计工具 (阅读 4,542)
  7. 手机交互设计资料 (阅读 4,363)
  8. 再议手机交互设计原则 (阅读 4,183)
  9. 手机游戏设计初体验 (阅读 4,104)
  10. 触摸屏手机输入法的一些思考 (阅读 4,001)