《针对不同的手机屏幕进行设计.docVIP

针对不同的手机屏幕进行设计 一、屏幕大小正确理解说起屏幕大小的时候，会有两种表达方式，1) “我的屏幕，你的屏幕。” 2)“这个屏幕分辨率320*480，那个屏幕分辨率为*800，或者更大640*960，”但在设计过程中，屏幕的分辨率和屏幕的实际尺寸必须同时考虑。这里首先有几个概念需要再澄清一下：屏幕物理尺寸：屏幕对角线长的实际尺寸，如，等等屏幕分辨率：屏幕所能显示像素的多少。如，*480、480*800、640*960等。屏幕密度：以每英寸的像素数。每英寸的分辨率数，如160ppi。240*320 76800 360*640 230400 480*800 384000 480*854 409920 640*960 614400 此时得出结果为 326像素/英寸(ppi) 【苹果4 ,M9】 DEFY 只有 IP4 66.7% 可以这么说结果为 217 像素/英寸(ppi) 还有屏幕大小的问题 实际94.6%！！也就是说只有 205ppi 非常简单的初中几何问题。 854：480=16：9 勾股定理，对角线应该是 根号（16*16+9*9）=18.36 而对角线物理长度是3.7英寸， 那么480像素那条边的物理长度应该是 3.7*9/18.36=1.81 那么defy的像素密度就是 480像素/1.81英寸=265像素/英寸=265ppi 物理尺寸决定了屏幕的实际尺寸，而分辨率可以表示屏幕上可以呈现的像素点数，屏幕密度决定了屏幕的精细程度。相同的屏幕大小，如果分辨率高，则屏幕元素更精细。一个界面元素在屏幕里的实际尺寸却是与屏幕密度相关，屏幕密度较小的屏上，界面元素的实际尺寸就会大些，反之亦然。在进行手机界面布局中，除了元素的像素值外，考虑元素的实际尺寸也非常重要，甚至更为重要(人眼是要靠物体成像在视网膜上的视角大小来进行识别感知，视角是与物体实际大小和距离有关)。在不同屏幕中，不同的图标点阵或者不同的字体及大小的汉字，在人的主观感知上，会有一个最优的结果值。在设计的过程中，我们需要根据这个最优值来进行界面的布局及设计。 也可以看出，这个用户感知最优的取值也与使用手机的人群有关(如年龄大的用户需要物理尺寸更大的界面元素)。 在不同屏幕中，不同的图标点阵或者不同的字体及大小的汉字，在人的主观感知上，会有一个最优的结果值。在设计的过程中，我们需要根据这个最优值来进行界面的布局及设计。 也可以看出，这个用户感知最优的取值也与使用手机的人群有关(如年龄大的用户需要物理尺寸更大的界面元素)。 二、设计过程与屏幕适配思路1．确定目标的屏幕大小屏幕大小由宽度和高度两个因素决定，但是在布局手机客户端的过程中，最关心的是宽度值。宽度确定后，高度可以由滚动或者翻页来显示所有内容;文字可以在适当的位置折行;标题栏可以伸缩适配屏幕宽度等等。但并不是不考虑高度，图标、文字、特殊的组件不仅需要考虑宽度，也需要考虑整个屏幕的布局是否与之适配。由于不可能对所有的客户端进行单独的开发，因此，需要对手机屏幕的大小的归类。同时，在设计中也不会真的只考虑屏幕大小一个因素，屏幕大小和操作系统、手机类型等还是存在很大的相关性的。首先，我们先来定义一下手机的屏幕大小的归类档次：A. 小屏幕：宽度 px 以下屏幕或者 以下屏幕一般以智能机，归在这个分类中的手机屏幕，一般是。B. 中等屏幕：宽度~800 px，或者~4.3寸屏幕智能手机以Windows mobile、iOS为主流; C. 大屏幕：宽度 px以上屏幕或者 以上的屏幕手机只有两个版本的适配，屏幕物理尺寸保持一致;Android 系统手机及衍生平台手机Win phone 系统手机D. 平板屏幕：7吋及以上的屏幕【可以不包含在手机中】由于当前的平板电脑上的应用的开发都是基于手机应用的功能，但是，平板的屏幕物理尺寸大增，使用情景也和手机不一致，在设计上有很多的特殊性，可发挥空间也更大，因此个人建议单独的设计。其次，根据我们的产品战略，来确定待开发产品的用户群体来确定一款目标手机屏幕。由于对于某个业务的手机客户端都不会只推出其中的某一款(除非是战略上的用户群确定为使用某种手机的特殊业务)，而是会对不同的手机平台分别进行适配。因此，确定的目标手机屏幕，应该是在该档次中最主流的手机屏幕大小，在以此为基准向上或向下来适配其他的同档手机。2．适配原则1) 客户端的logo，在各个手机上都应该清晰地显示2) 标题或者底部栏必须100%的与手机宽度适配3) 文字内容如果显示不下的话，可以自动适配宽度进行折行4) 图片可以根据宽度进行自动缩放，屏幕宽度超过图片本身时，显示图片本身的大小5) 适配过程中，界面的元素的宽高最小值应该符合用户的主观舒适范围值。6) 不能完全使用分