MC新手入门（二十六）------屏幕适配

   随着各手机操作系统的应用平台的上线，几乎所有的互联网应用都在往手机上移植。然而手机与PC 不同，PC经过了多年的发展，在设计上形成了很多默认的规则，如网页的宽度都在960px（像素）左右。目前的手机种类繁多，手机屏幕的尺寸、比例各异，并且手机的屏幕本身就小，同时既要考虑应用或游戏在不同屏幕大小上的适配，又要保持其展示效果的一致性，同时还要提高每个手机屏幕的使用效率，这就存在着很多的矛盾。
     在客户端的设计过程中，针对不同尺寸的屏幕，应该如何来设计呢?需要为每种屏幕设计不同的界面，还是所有的屏幕都使用相同的界面布局呢?我们将在下面的内容中来探讨这些问题。

当前热门手机的屏幕大小
    从当前的市场上可以看出。手机屏幕差异很大，屏幕大小和分辨率各不相同。如果为了适配更多的用户群体，则需要着重考虑的手机屏幕大小和分辨率。根据当前的手机发展趋势以及手机客户端的使用行为来看，最多用户关注的手机屏幕是2.4寸以上或320*480以上的手机屏幕。
屏幕大小正确理解
    说起屏幕大小的时候，会有两种表达方式：1) “我的屏幕2.4寸，你的屏幕3.5寸”； 2)“这个屏幕分辨率 240*320，那个屏幕分辨率为320*480”。但在设计过程中，屏幕的分辨率和屏幕的实际尺寸必须同时考虑。
   这里首先有几个概念需要再澄清一下：
   屏幕物理尺寸：屏幕对角线长的实际尺寸，如2.4寸，3.5寸等等
   屏幕分辨率：屏幕所能显示像素的多少。如，320*480等。 
   屏幕密度(pixel per inch)：以每英寸的像素数。每英寸的分辨率数，如160ppi。
   物理尺寸决定了屏幕的实际尺寸，而分辨率可以表示屏幕上可以呈现的像素点数，屏幕密度决定了屏幕的精细程度。相同的屏幕大小，如果分辨率高，则屏幕元素更精细。一个界面元素在屏幕里的实际尺寸却是与屏幕密度相关，屏幕密度较小的屏上，界面元素的实际尺寸就会大些，反之亦然。 
在进行手机界面布局中，除了元素的像素值外，考虑元素的实际尺寸也非常重要（人眼是要靠物体成像在视网膜上的视角大小来进行识别感知，视角是与物体实际大小和距离有关)。如【图4-5-2-1】，【图4-5-2-2】。

                              

图4-5-2-1

图4-5-2-2

    在不同屏幕中，不同的图标点阵或者不同的字体及大小的汉字，在人的主观感知上，会有一个最优的结果值。在设计的过程中，我们需要根据这个最优值来进行界面的布局及设计。用户感知最优的取值也与使用手机的人群有关(如年龄大的用户需要物理尺寸更大的界面元素)。 
设计过程与屏幕适配思路
    我们在游戏设计过程中，怎么让游戏的画面去适配我们的屏幕呢？带着这个问题我们来学习下的内容。
确定目标的屏幕大小
    屏幕大小由宽度和高度两个因素决定，但是在布局手机客户端的过程中，最重要的是宽度值。宽度确定后，高度可以由滚动或者翻页来显示所有内容;文字可以在适当的位置折行;标题栏可以伸缩适配屏幕宽度等等。但高度并不是完全不考虑，图标、文字、特殊的组件不仅需要考虑宽度，也需要考虑整个屏幕的布局是否与之适配。
    由于无法对所有的客户端进行单独的开发，因此，需要对手机屏幕大小进行归类。在设计中也不会仅仅只考虑屏幕大小一个因素，屏幕大小和操作系统、手机类型等存在很大的相关性的。

首先，我们先来定义一下手机的屏幕大小的归类档次：

图4-5-3-3-1

- 小屏幕：宽度240 px（像素） 以下屏幕或者2.4寸 以下屏幕，一般以非智能机为主，归在这个分类中的手机屏幕，一般是以java版本的客户端为主。

- 中等屏幕：宽度240~320 px，或者2.4~3.0寸屏幕 智能手机以Symbian或S60 v1,2,3，Windowsmobile为主流;或者是非智能手机的客户端以java版本为主。同时包括240*320的宽屏手机。

- 大屏幕：宽度320 px～480px以上屏幕或者 3.0寸以上的屏幕
           iPhone 手机只有两个版本的适配，屏幕物理尺寸保持一致；

       Android 系统手机及衍生平台手机；
       Windows Phone 7 系统手机 ；
       Nokia S60 v5，symbian 3等。

- 平板屏幕：7寸及以上的屏幕

    由于当前的平板电脑上的应用的开发都是基于手机应用的功能，但是，平板的屏幕物理尺寸大增，使用情景也和手机不一致，在设计上有很多的特殊性，可发挥空间也更大，因此个人建议单独的设计。
    其次，根据我们的产品战略，来确定待开发产品的用户群体来确定一款目标手机屏幕。由于对于某个业务的手机客户端都不会只推出其中的某一款（除非是战略上的用户群确定为使用某种手机的特殊业务），而是会对不同的手机平台分别进行适配。因此，确定的目标手机屏幕，应该是在该档次中最主流的手机屏幕大小，在以此为基准向上或向下来适配其他的同档手机。
适配原则
1)客户端的logo，在各个手机上都应该清晰地显示。
2)标题或者底部栏必须100%的与手机宽度适配。
3)文字内容如果显示不下的话，可以自动适配宽度进行折行。
4)图片可以根据宽度进行自动缩放，屏幕宽度超过图片本身时，显示图片本身的大小。
5)适配过程中，界面的元素的宽高最小值应该符合用户的主观舒适范围值。
6)不能完全使用分辨率的绝对比例来对界面布局进行缩放。
适配思路分析根据我们前面的分析

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

平板屏幕主要以各类7寸以上平板电脑为主，适配上应为其单独设计。

     Android 与iPhone手机的适配

    iPhone 本身就只有两种分辨率及一种屏幕大小尺寸，可以很好的来适配(最多出两套图片即可，系统会自动读取)。
对于android，由于其开放性，导致了各种屏幕的大小及分辨率都有。但Android系统有一个很好的特性，系统会根据屏幕的分辨率密度来进行自适应。但是，当密度差异较大时，自适应后，图标会由于拉伸变得模糊。这就必须要通过重新设计新的图标或者加大间距来保持最佳的视觉效果及更便利于用户操作。
Android 手机屏根据屏幕的分辨率密度和物理尺寸，可以分为以下几类：

图4-5-3-3-2

注：图中的【】内的值为手机所占的百分比值。Android 开发平台数据，不一定准确，
Android 提供了如下的机制来对不同大小和密度的屏幕进行适配：
   图片资源的缩放
   基于当前屏幕的密度，平台自动加载任何未经缩放的限定尺寸和密度的图片。如果图片不匹配，平台会加载默认资源并且在放大或者缩小之后可以满足当前界面的显示要求。
   根据分辨率和坐标自动缩放（密度不同的屏幕适配）
   如果程序不支持多种密度屏幕，平台会自动缩放绝对像素坐标值和尺寸值等，这样就能保证屏幕元素能和密度160的屏幕上一样能显示出同样物理尺寸的效果。平台会根据密度的比例来缩放实际尺寸的大小。
   兼容更大的屏幕大小(屏幕不同的适配)
   当前屏幕超过程序所支持屏幕的上限时，定义supports-screens元素，这样超出显示的基准线时，平台会以屏幕大小的比例来缩放整个屏幕。
   在MC设计中，应该以高密度的版本为主，这样去适配中密度时，效果更好。

MC开发中应注意的适配规则

    MC自身提供了比较优秀的自动适配方法，通过一定的适配规则处理，就能够让游戏在不同分辨率的手机上呈现良好的效果了。
简单整理规则如下：
   向上适配(标准屏向更大【分辨率高，物理尺寸大】的屏幕适配)
   如果两者的屏幕分辨率密度(dip)差不多，物理尺寸更大的屏幕。那可以直接在当前尺寸上拉长、拉宽即可，图标、行距都可以保持不变。
   增加行间距
   自适应放大内容中的图片
   Tab页标签 需要根据屏幕的大小来确认每屏最多显示的数目。考虑一些复杂界面，增大界面中的一些元素的分辨率，会导致许多东西需要重新设计。这种情况需要重新设计该界面。
   向下适配
  在向更小的屏幕适配，这种情况较少，那会集中在如下几点：
  考虑一些极限点的改进，需要适配到小屏幕的手机中，如标题的最大字数等。
  title、bottom栏与小屏幕宽度适配。
  考虑到行高(行信息展示)的设计是否适合更小的屏幕高度。
  在结构上，需要考虑在小屏幕中，显示是否合适。
  根据屏幕密度的比例来设计屏幕元素，需要更小分辨率的屏幕元素
  使用小的字体，具体的大小需要根据屏幕的大小来设定。
   竖屏横屏适配
    对于不同功能的应用，都有其特定的页面展现形式，不能盲目对任何应用不加选择的都去适配横屏。
建议如下：
1) 不同的应用，在设计的过程中，对于选择不同的屏幕有不同的选择，如普通列表多的应用，竖屏更合适；显示图片更多的界面，或者想更好的展示全景的应用，横屏更合适。
2) 不必遵循，对任何的应用都可以自动进行横屏竖屏的切换。如果觉得没有必要横屏或者竖屏的应用，就可以不切换。
3) 由于用户在使用手机的过程中，经常会无意中调整位置，从而导致手机误认为是要进行横竖屏的转化，从而更容易导致操作上的失误，引起用户的反感。
4) 横竖屏的切换时，允许用户对于同一个界面有不同的展示方式。例如不一定在竖屏时用列表方式显示，在横屏时也和竖屏保持一致，这时横屏可以有更好的适应横屏的展示方式，使用户更好的操作。
手机的屏幕尺寸五花八门，屏幕的性能也呈现多样性，如何能使应用完美地展现给用户，适配固然很重要。但是，更重要的是要在适配之前，确定游戏的目标群体。如果游戏主要是针对高端手机用户的，那就不必去考虑低端的手机，毕竟为了很少的用户，使花了很大的力气，可能也会不值得，这一点绝对值得每一个设计师思考。