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

客户端设计中的屏幕大小适配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. 中等屏幕：宽度240320 px，或者2.43.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 口寸及以上的屏幕【可以不包含在手机中，"_"!由于当前的平板电脑上的应用的开发都是基于手机应用的功能，但是，平板的屏幕物理尺寸 大增，使用情景也和手机不一致，在设计上有很多的特殊性，可发挥空间也更大，因此个人 建议单独的设计。屏幕类型参专分辨率典型机型屏幕竟度【料）物理尺寸*时）A.一小屏幕<240<2.4E一中等屏幕240-3 2C奸3一0240+320C.大屏幕320*480D.平板屏幕其次，根据我们的产品战略，来确定待开发产品的用户群体来确定一款目标手机屏幕。由于 对于某个业务的手机客户端都不会只推出其中的某一款（除非是战略上的用户群确定为使用 某种手机的特殊业务），而是会对不同的手机平台分别进行适配。因此，确定的目标手机屏 幕，应该是在该档次中最主流的手机屏幕大小，在以此为基准向上或向下来适配其他的同档 手机。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手机屏根据屏幕的分辨率密度和物理尺寸，可以分为以下几类：屏幕美型低密度（120）, Idpi中密度(160), Bifei房密度（240）WiQVGA（24位散0小屏幕2. 3%WVGA400 (240s40.Q)m7GA (.320x480)WGAS00 (430sSQQ)标谁屏幕45-9%d. 4%WGA80t> (480800)51-大屏幕阿G建54卓（40OXS54）注：图中的【】内的值为手机所占的百分比值。Android开发平台数据，不一定准Android提供了如下的机制来对不同大小和密度的屏幕进行适配：1）图片资源的缩放基于当前屏幕的密度，平台自动加载任何未经缩放的限定尺寸和密度的图片。如果图片不匹 配，平台会加载默认资源并且在放大或者缩小之后可以满足当前界面的显示要求。如果没有 多套资源，平台会认为默认的资源是中密度的屏幕资源（160dpi）。例如，当前为高密度屏 幕，平台会加载高密度资源（如图片），如果没有，平台会将中密度资源缩放至高密度。2）根据分辨率和坐标自动缩放（密度不同的屏幕适配）如果程序不支持多种密度屏幕，平台会自动缩放绝对像素坐标值和尺寸值等，这样就能保证 屏幕元素能和密度160的屏幕上一样能显示出同样物理尺寸的效果。平台会根据密度的比例 来缩放实际尺寸的大小。3）兼容更大的屏幕大小（屏幕不同的适配）当前屏幕超过程序所支持屏幕的上限时，定义supports-screens元素，这样超出显示的基 准线时，平台会以屏幕大小的比例来缩放整个屏幕。由上表格也可知，当前的Android手机主要集中在标准屏的中密度和高密度两个型号上。因 此在设计中，主要是设计其中的一种为主，再去适配另一个型号即可。对于在一个档次上的 手机，都会根据上述的三个原则，系统自动去适配。个人认为，在进行Android手机设计时， 如果只准备一套资源时，应该以高密度的版本为主，这样去适配中密度时，效果更好。当然，如果屏幕的密度差异较大时，自动适配的效果肯定不会，如果要取得更好的适配效果， 必须针对几个不同的屏幕密度进行单独设计屏幕元素，提高视觉满意度。（2）非Android、iphone的手机适配对于其他的非Android, iphone手机，则需要更多地考虑其适配规则，这些手机系统不提供 自适应的适配。简单整理规则如下：1）向上适配（标准屏向更大【分辨率高，物理尺寸大】的屏幕适配）在向更大的屏幕适配时，根据设备分辨率的不同，会分为两种状态。A. 如果两者的屏幕分辨率密度（dip）差不多，物理尺寸更大的屏幕。那可以直接在当前尺 寸上拉长、拉宽即可，图标、行距都可以保持不变。B. 如果屏幕密度要大很多，物理尺寸差不多的。则适配点包括：设计多套图标，需要有更大分辨率的图标使用不同的字体，需要更大的字体来适配大设备分 辨率的屏幕增加行间距自适应放大内容中的图片Tab页签需要根据屏幕的大小来确认每屏 最多显示的数目。考虑一些复杂界面，增大界面中的一些元素的分辨率，会导致许多东西需 要重新设计。这种情况需要重新设计该界面。2）向下适配在向更小的屏幕适配，这种情况较少，那会集中在如下几点：考虑一些极限点的改进，需要适配到小屏幕的手机中，如标题的最大字数等。title、bottom 栏与小屏幕宽度适配。考虑到行高（行信息展示）的设计是否适合更小的屏幕高度。在结构 上，需要考虑在小屏幕中，显示是否合适。根据屏幕密度的比例来设计屏幕元素，需要更小 分辨率的屏幕元素使用小的字体，具体的大小需要根据屏幕的大小来设定。（3）竖屏横屏适配 横竖屏的适配，在本文中，不过多讨论，这里只是简单的整理一下，我自己的理解。对于不同功能的应用，都有其特定的页面展现形式，个人并不赞同蛮目对任何应用不加选择 的都去适配横屏。个人观点如下：1）不同的应用，在设计的过程中，对于选择不同的屏幕有不同的选择，如普通list多的 应用，竖屏更合适；显示图片更多的界面，或者想更好的展示全景的应用，横屏更合适。2）不必遵循，对任何的应用都可以自动进行横屏竖屏的切换。如果觉得没有必要横屏或者 竖屏的应用，就可以不切换。3）由于用户在使用手机的过程中，经常会无意中调整位置，从而导致手机误认为是要进行 横竖屏的转化，从而更容易导致操作上的失误，引起用户的反感。4）横竖屏的切换时，允许用户对于同一个界面有不同的展示方式。例如不一定在竖屏时时 list方式显示，在横屏时也和竖屏保持一致，这时横屏可以有更好的适应横屏的展示方式， 使用户更好的操作。由于手机系统各异，手机的屏幕尺寸五花八门，屏幕的性能也呈现多样性，还有触摸屏和非 触屏的区分，这四个变量结合起来，会有无数种不同的情况，如何能使你的应用完美地展现 给用户，适配固然很重要。但是，更重要的是你要在适配之前，确定应用的目标群体。如果 你的应用主要是针对高端手机用户的，那你何必去考虑低端的手机呢？毕竟为了很少的用户， 使你花了很大的力气，可能会有不值得，这一点绝对值得每一个设计师思考。题外话一般来说，我们在设计一个产品时，首先需要确定产品的用户群体，然后基于用户群体来设 计针对该用户群特点和使用行为的界面。但是对于手机客户端，感觉这个过程不能完全适用：原因是因为，我的客户端设计主要是针对不同的手机平台（Android、ios，Win Phone 7， Palm Pre，Symbian）来开发的，因此，开发出来的客户端适用于所有的持有该手机的用 户。但是这些手机持有者是否都有相同的特质，是否都喜爱使用该客户端，是个很大的未知 数。另一方面，如果我在建立用户群时，完全根据用户的需求、使用行为又或者人种学特征 来分类，那每一群人中持有的手机各不相同，那又该如何定义每个不同平台下的客户端的功 能呢？当然，有人也会说那就先了解不同的手机平台的用户群特征，然后再研究这群人对本客户端 应用的需求和使用行为，以此再来设计客户端，目前来说这是更好的研究思路。总之，这样深入的讨论，会发现客户端会越想越复杂，有人说手机客户端的设计是最复杂的， 是很有道理的，值得大家更多地探讨