海盗船怎么做:客户端交互设计适配之——屏幕大小(2)

来源:百度文库 编辑:偶看新闻 时间:2024/03/29 21:45:15

  • 由于当前的平板电脑上的应用的开发都是基于手机应用的功能,但是,平板的屏幕物理尺寸大增,使用情景也和手机不一致,在设计上有很多的特殊性,可发挥空间也更大,因此个人建议单独的设计。

其次,根据我们的产品战略,来确定待开发产品的用户群体来确定一款目标手机屏幕。由于对于某个业务的手机客户端都不会只推出其中的某一款(除非是战略上的用户群确定为使用某种手机的特殊业务),而是会对不同的手机平台分别进行适配。因此,确定的目标手机屏幕,应该是在该档次中最主流的手机屏幕大小,在以此为基准向上或向下来适配其他的同档手机。

2.适配原则

1)  客户端的logo,在各个手机上都应该清晰地显示

2)  标题或者底部栏必须100%的与手机宽度适配

3)  文字内容如果显示不下的话,可以自动适配宽度进行折行

4)  图片可以根据宽度进行自动缩放,屏幕宽度超过图片本身时,显示图片本身的大小

5)  适配过程中,界面的元素的宽高最小值应该符合用户的主观舒适范围值。

6)  不能完全使用分辨率的绝对比例来对界面布局进行缩放;

3. 适配思路分析

根据我们前面的分析,

C类大屏幕大小主要以Android、iPhone、win phone 7 和Nokia V5等手机为主,它们都是触屏手机,在适配上可以划为一个档次。

B类中等屏幕大小智能机主要以Symbian 和Windows mobile为主,因此在适配这两个平台时,主要集中在B类屏幕间的适配。

B类中等屏幕大小还有一块是非智能手机,使用Java客户端,同时,A类小屏幕大小主要使用Java客户端,因此,Java类客户端需要适配的范围更广,至少应包括B类和A类的屏幕大小。

(1)Android 与iPhone手机的适配

iPhone 本身就只有两个分辨率及一个屏幕大小尺寸,可以很好的来适配(最多出两套图片即可,系统会自动读取)。

对于android,由于其开放性,导致了各种屏幕的大小及分辨率都有。但Android系统有一个很好的特性,系统会根据屏幕的分辨率密度来进行 自适应。但是,当密度差异较大时,自适应后,图标会由于拉伸变得模糊影响效果。这时,必须要通过重新设计新的图标或者加大间距来保持最佳的视觉效果及更便 利于用户操作。

Android 手机屏根据屏幕的分辨率密度和物理尺寸,可以分为以下几类:

 注:图中的【】内的值为手机所占的百分比值。Android 开发平台数据,不一定准

Android 提供了如下的机制来对不同大小和密度的屏幕进行适配:

1)  图片资源的缩放

基于当前屏幕的密度,平台自动加载任何未经缩放的限定尺寸和密度的图片。如果图片不匹配,平台会加载默认资源并且在放大或者缩小之后可以满足当前界 面的显示要求。如果没有多套资源,平台会认为默认的资源是中密度的屏幕资源(160dpi)。例如,当前为高密度屏幕,平台会加载高密度资源(如图片), 如果没有,平台会将中密度资源缩放至高密度。

2)  根据分辨率和坐标自动缩放(密度不同的屏幕适配)

如果程序不支持多种密度屏幕,平台会自动缩放绝对像素坐标值和尺寸值等,这样就能保证屏幕元素能和密度160的屏幕上一样能显示出同样物理尺寸的效果。平台会根据密度的比例来缩放实际尺寸的大小。

3)  兼容更大的屏幕大小(屏幕不同的适配)

当前屏幕超过程序所支持屏幕的上限时,定义supports-screens元素,这样超出显示的基准线时,平台会以屏幕大小的比例来缩放整个屏幕。

由上表格也可知,当前的Android手机主要集中在标准屏的中密度和高密度两个型号上。因此在设计中,主要是设计其中的一种为主,再去适配另一个型号即可。对于在一个档次上的手机,都会根据上述的三个原则,系统自动去适配。个人认为,在进行Android手机设计时,如果只准备一套资源时,应该以高密度的版本为主,这样去适配中密度时,效果更好。

当然,如果屏幕的密度差异较大时,自动适配的效果肯定不会,如果要取得更好的适配效果,必须针对几个不同的屏幕密度进行单独设计屏幕元素,提高视觉满意度。

(2)非Android、iphone的手机适配

对于其他的非Android、iphone手机,则需要更多地考虑其适配规则,这些手机系统不提供自适应的适配。

简单整理规则如下:

1)  向上适配(标准屏向更大【分辨率高,物理尺寸大】的屏幕适配)

在向更大的屏幕适配时,根据设备分辨率的不同,会分为两种状态。

A.如果两者的屏幕分辨率密度(dip)差不多,物理尺寸更大的屏幕。那可以直接在当前尺寸上拉长、拉宽即可,图标、行距都可以保持不变。

B. 如果屏幕密度要大很多,物理尺寸差不多的。则适配点包括:

  • 设计多套图标,需要有更大分辨率的图标
  • 使用不同的字体,需要更大的字体来适配大设备分辨率的屏幕
  • 增加行间距
  • 自适应放大内容中的图片
  • Tab页签 需要根据屏幕的大小来确认每屏最多显示的数目。
  •  考虑一些复杂界面,增大界面中的一些元素的分辨率,会导致许多东西需要重新设计。这种情况需要重新设计该界面。

2)  向下适配

在向更小的屏幕适配,这种情况较少,那会集中在如下几点:

  • 考虑一些极限点的改进,需要适配到小屏幕的手机中,如标题的最大字数等。
  • title、bottom栏与小屏幕宽度适配。
  • 考虑到行高(行信息展示)的设计是否适合更小的屏幕高度。
  • 在结构上,需要考虑在小屏幕中,显示是否合适。
  • 根据屏幕密度的比例来设计屏幕元素,需要更小分辨率的屏幕元素