我们之前介绍过《产品经理谈移动设备的细节设计》。在本文中，我们将介绍“移动端设备屏幕适配的UI设计”。随着手机屏幕的不断增大，部分用户的手机屏幕还停留在240*320的尺寸。当然，也有一些不规则的屏幕分辨率。对于很多UI，不同的手机屏幕往往会绘制多组图片来保证手机客户端在不同屏幕上的匹配。规划移动客户端在不同屏幕上的实现，并制定可以计算特定控件位置的填充区域算法。这是前期针对不同手机屏幕做的界面适配算法。先认识几个手机屏幕区域（240*320和320*240开头）填充区域CONTAINER：在这个标准中，使用填充区域的概念来控制界面。整个页面由不同大小的填充区域组成。不同的padding区域在适配屏幕时有不同的缩放规则。SCREENSCREEN：rootpaddingarea，每个分辨率下可见区域的大小，它的大小等于某款手机的屏幕分辨率。比如在NokiaN78下，SCREEN的参数是240*320。诺基亚N78的屏幕设计参考屏采用横竖屏两组不同的参考屏，垂直参考屏240*320和水平参考屏320*240，两种参考屏可以切换。竖屏240*320适合屏幕缩放：竖屏的屏幕缩放以240*320尺寸为准，可以缩放到480*640等屏幕尺寸。满足iPhone、Android等用户的需求。竖屏的屏幕缩放竖屏的字体缩放：在控件适配不同屏幕的过程中，往往需要根据字体的缩放比例对控件进行缩放。遵循的原则——head-to-tail原则在常规接口的适配过程中，遵循从头到尾再中间的原则，即先确定header的高度，再确定footer的高度，然后根据屏幕的高度计算出head和tail的高度，确定内容填充区域的高度，完成整个界面布局的调整。控件的宽度主要是根据缩放原理。常用界面Android、iPhone触摸屏类型Nokia、KJava等键盘类型缩放原理界面在适配不同界面时，主要采用两套不同的缩放规则，不同的填充区域分别使用字体缩放和比例缩放需要。整个缩放规则的设计来源于画面在不同屏幕之间的适配方式。假设有一台n73手机，屏幕分辨率为240*320。在本手机上全屏查看480*640的图片时，手机刚显示完。显示效果如下（红框为屏幕可见区域）：缩放原理如果我们用E63手机（分辨率320*240）观看，不同观看模式下的效果为（红框是可见区域）：从高度自适应效果和宽度自适应效果可以看出，如果使用宽度自适应效果进行缩放，上下滚动条可以达到更好的显示效果，图片内容可以同时清晰查看。因此，参考图片的宽度适配，将界面当成一张图片，将不同屏幕分辨率的宽度比例作为壁纸来调整界面的缩放比例。启动界面240*320-320*240240*320-竖屏展开320*240-横屏展开常规界面240*320-320*240240*320-竖屏展开320*240-横屏展开网格界面，程序会图标自动排序，首尾遵循通用的界面适配原则。宫格界面【编辑推荐】产品经理谈移动设备细节设计WindowsPhone7UI设计理念未来的移动设备UI设计会是什么样子？AndroidUI设计与后台线程交互MeeGo移动终端设备开发UI设计基础教程
