手机客户端适配性

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

屏幕尺寸指的是实际的物理尺寸,以屏幕的对角线长度为准。如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版的客户端。

如示意图,顶部为导航,内容为下拉框和“确定”按钮。程序开启时获取手机分辨率为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设计指南中有介绍,程序开启时根据获取到的精度值调用合适的图片资源。

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

来源:http://daichuanqing.com/index.php/archives/1331

时间: 2024-09-20 20:16:54

手机客户端适配性的相关文章

移动应用交互设计:手机客户端的交互适配方法

文章描述:本文中,我想简单的总结一下手机客户端的交互适配方法,希望能更好地来指导当前移动应用的设计需求. 简摘:本文从手机平台.机型(触屏和键盘)及屏幕大小三个方面简单的讨论了一下手机客户端的交互及适配特性及一些原则. 手机客户端软件虽只是手机中一个功能,但它却要比设计单款手机更为复杂.在设计单款.单系列手机时,需要考虑这款手机的软.硬件优势及不足,考虑其特性.其UI Style Guideline ,确定这些内容后,整个平台的UI也找到基础了.说起来,这至多是考虑某个系统.某个屏幕的特性而已,

手机客户端交互适配设计

简摘:本文从手机平台.机型(触屏和键盘)及屏幕大小三个方面简单的讨论了一下手机客户端的交互及适配特性及一些原则. 手机客户端软件虽只是手机中一个功能,但它却要比设计单款手机更为复杂.在设计单款.单系列手机时,需要考虑这款手机的软.硬件优势及不足,考虑其特性.其UI Style Guideline ,确定这些内容后,整个平台的UI也找到基础了.说起来,这至多是考虑某个系统.某个屏幕的特性而已,而不同功能的所有设计基础都是一致的. 但是对于客户端,咋一看,好像很简单,就是设计一个应用.实则不然,客户

手机客户端交互适配设计之我见

简摘:本文从手机平台.机型(触屏和键盘)及屏幕大小三个方面简单的讨论了一下手机客户端的交互及适配特性及一些原则. 手机客户端软件虽只是手机中一个功能,但它却要比设计单款手机更为复杂.在设计单款.单系列手机时,需要考虑这款手机的软.硬件优势及不足,考虑其特性.其UI Style Guideline ,确定这些内容后,整个平台的UI也找到基础了.说起来,这至多是考虑某个系统.某个屏幕的特性而已,而不同功能的所有设计基础都是一致的. 但是对于客户端,咋一看,好像很简单,就是设计一个应用.实则不然,客户

手机屏幕适配

随着手机屏幕的不断的增大,同时也遇到一些用户手机屏幕还是处于240*320这种屏幕的大小,当然也存着在一些不规则的http://www.aliyun.com/zixun/aggregation/10134.html">屏幕分辨率心寸大小.对于很多的UI来说,不同的手机屏幕很多时候得出多套的图才能保证手机客户端在不同的屏幕上实现匹配.针对手机客户端在不同屏幕下的实现进行规划,并制定出能够计算出具体控件位置的填充区算法,这个是前期对于不同的手机屏幕的匹配做出的一个界面适配算法. 首先认清几个手

js实现PC版网页自动识别手机客户端并跳转

PC版网页自动识别手机客户端并跳转,用js进行判断是否手机客户端进行跳转最好,特别是静态网页,把这个过程通过js的方式放在用户客户端执行,可以大大减少服务器端额外处理的压力.但是有时需要通过在服务器端进行判断的情况除外. 以腾讯网适配js函数为例: <script> (function(){ /*   腾讯网适配跳转 */ var reWriteUrl = function(url){  if(url){ if(url.indexOf("/a/")>0 ){  var

手机客户端交互设计原则及信息展现方式

在手机上浏览信息,存在着太多的局限,手机屏幕小注定了一页不能显示太多的信息,环境光线的变化注定页面设计不能过于花哨,流量限制注定不能有太多的图片和样式. 如果让你的用户直接在手机上浏览为web所设计的网页,即使是经过一些手机浏览器的优化,体验还是会很糟糕,甚至有时候会让人难以忍受. 如何调整信息展现方式,使内容能在小屏幕的手机上也更友好的展现呢?接下来我将通过一些原理和实例来阐述自己的观点. 首先,老祖宗Ben Shneiderman的交互设计8项黄金法则我们要铭记于心,因为这些法则也是适用于移

极路由手机客户端怎么用

  在使用极路由客端之前需要把你的路由器与极路由的的硬件绑定才可以使用手机客户端进入远程操作.下载好客户端软件以后点击进入并且登陆到极路由. 登陆成功以后就可以操作操作极路由的相关设置,我使用比较多的是我查查,其它的相关功能使用的比较少我就不演示了.说一下这一个功能是怎么样了就可以了. 我在查查看就可以看所有已连接到路由器里的设备.点击一个设备可以看到这个设备当前使用网络的情况. 进入这个设备网络流量详情,点击右上角处的三点.就可以看到更改设备名称,限速,断开网络.这三个功能是我使用最多的. 重

csdn的手机客户端如何退出登录?求告知

问题描述 csdn的手机客户端如何退出登录?求告知 在网页上改了篇博客,但是没有同步到手机客户端,所以我想是不是需要重新登录一下.请老师们多多指教 解决方案 向右滑动屏幕,展开菜单后,选择我的,进去设置,点击退出登录.

中国式网页设计:手机客户端和网页版合二为一

文章描述: 采用流式页面,手机客户端的编辑力量和网页版合二为一,一次推送,自动铺开到所有终端,大家在不同地方看到的都是一样的新闻列表,编辑力量将被空前地解放. [核心提示] 采用流式页面,手机客户端的编辑力量和网页版合二为一,一次推送,自动铺开到所有终端,大家在不同地方看到的都是一样的新闻列表,编辑力量将被空前地解放. 无限滚动,类似博客页面的版式终于开始替代所谓"新浪模式"的拥挤不堪的版面,成为传统门户网站的选择. 2012 年 7 月,腾讯科技改版成为博客版式,引发热烈讨论.随后,