(客户端设计中的屏幕大小适配.docxVIP

客户端设计中的屏幕大小适配 2011-07-18 09:30工作至今一直在做wap站的设计，对各平台的硬件也做过一些分析对比，今天看到无明老大的文章，写得真细致，so,转一份，一来学习，二来寻找可继续深入的点，接着写下去~当前的手机种类繁多，手机屏幕的大小、比例各异，并且手机的屏幕本身就小，因此既要考虑应用在不同屏幕大小上的适配，又要保持其一致性，同时还要提高每个手机屏幕的使用效率，这就存在着很多的矛盾点。在客户端的设计过程中，针对不同的屏幕大小，应该如何来设计？是否每个大小的屏幕尺寸都需要一个新的界面布局，还是所有的屏幕尺寸都使用相同的界面布局？我们将在下面的内容中来探讨这些内容。一、当前热门手机的屏幕大小虽然只是2010年中的某一周的手机销售量排名，由此可以看出，当前使用中的手机屏幕差异很大，各种屏幕大小和分辨率都有。如果为了适配更多的用户群体，则需要考虑的手机屏幕大小和分辨率更多。【不过，根据当前的手机发展趋势，及手机客户端的使用行为可以看出，最主要需要用户关注的手机屏幕是2.4吋以上，240*320以上的手机屏幕，因为这样的手机使用客户端的频率和用户量都会更多。个人建议更多地是考虑320*480及以上的屏幕。】二、屏幕大小正确理解说起屏幕大小的时候，会有两种表达方式，1） “我的屏幕2.4吋，你的屏幕3.5吋。” 2）“这个屏幕分辨率 240*320，那个屏幕分辨率为320*480。”但在设计过程中，屏幕的分辨率和屏幕的实际尺寸必须同时考虑。这里首先有几个概念需要再澄清一下：屏幕物理尺寸：屏幕对角线长的实际尺寸，如2.4吋，3.5吋等等屏幕分辨率：屏幕所能显示像素的多少。如，240*320等。屏幕密度（pixel per inch）：以每英寸的像素数。每英寸的分辨率数，如160ppi。 物理尺寸决定了屏幕的实际尺寸，而分辨率可以表示屏幕上可以呈现的像素点数，屏幕密度决定了屏幕的精细程度。相同的屏幕大小，如果分辨率高，则屏幕元素更精细。一个界面元素在屏幕里的实际尺寸却是与屏幕密度相关，屏幕密度较小的屏上，界面元素的实际尺寸就会大些，反之亦然。在进行手机界面布局中，除了元素的像素值外，考虑元素的实际尺寸也非常重要，甚至更为重要（人眼是要靠物体成像在视网膜上的视角大小来进行识别感知，视角是与物体实际大小和距离有关）。在不同屏幕中，不同的图标点阵或者不同的字体及大小的汉字，在人的主观感知上，会有一个最优的结果值。在设计的过程中，我们需要根据这个最优值来进行界面的布局及设计。也可以看出，这个用户感知最优的取值也与使用手机的人群有关（如年龄大的用户需要物理尺寸更大的界面元素）。在不同屏幕中，不同的图标点阵或者不同的字体及大小的汉字，在人的主观感知上，会有一个最优的结果值。在设计的过程中，我们需要根据这个最优值来进行界面的布局及设计。也可以看出，这个用户感知最优的取值也与使用手机的人群有关（如年龄大的用户需要物理尺寸更大的界面元素）。三、设计过程与屏幕适配思路1．确定目标的屏幕大小屏幕大小由宽度和高度两个因素决定，但是在布局手机客户端的过程中，最关心的是宽度值。宽度确定后，高度可以由滚动或者翻页来显示所有内容；文字可以在适当的位置折行；标题栏可以伸缩适配屏幕宽度等等。但并不是不考虑高度，图标、文字、特殊的组件不仅需要考虑宽度，也需要考虑整个屏幕的布局是否与之适配。由于不可能对所有的客户端进行单独的开发，因此，需要对手机屏幕的大小的归类。同时，在设计中也不会真的只考虑屏幕大小一个因素，屏幕大小和操作系统、手机类型等还是存在很大的相关性的。首先，我们先来定义一下手机的屏幕大小的归类档次：A. 小屏幕：宽度240 px 以下屏幕或者2.4 以下屏幕一般以非智能机为主，归在这个分类中的手机屏幕，一般是以java版本的客户端为主。 B. 中等屏幕：宽度240~320 px，或者2.4~3.0吋屏幕智能手机以Symbian或S60 v1,2,3，Windows mobile为主流；或者是非智能手机的客户端以java版本为主。同时包括240*320的宽屏手机。 C. 大屏幕：宽度320 px以上屏幕或者 3.0吋以上的屏幕iPhone 手机只有两个版本的适配，屏幕物理尺寸保持一致；Android 系统手机及衍生平台手机Win phone 7 系统手机Nokia S60 v5，symbian 3等 D. 平板屏幕：7吋及以上的屏幕【可以不包含在手机中，^_^】由于当前的平板电脑上的应用的开发都是基于手机应用的功能，但是，平板的屏幕物理尺寸大增，使用情景也和手机不一致，在设计上有很多的特殊性，可发挥空间也更大，因此个人建议单独的设计。 其次，根据我们的产品战略，来确定待开发产品的用户群体来确定一款目标手机屏幕。由于对于某个业务的手机客户端都不会只推出