自适应分辨率的UI设计规范和制作规范
 
基准设备：iphone 4s
 
基准屏幕分辨率 : 960*640(ios) , 800*480(android), 854*480(android)
 
基准参数 3.5inc + 330ppi
 
标准高度: 768
 
1.333(4:3) -> 1.8(16:9)
 
UI Height = 768
 
Design Size= 1024/768
 
Phone Resource Size = 1024/768
 
HD Resource Size = 2048/1536
 
在这里面，最重要的是 Design Size的 Aspect Ratio 和 Resource Size 的像素值。
 

 
 
关于设计标准：
 
设计人员最需要关注的是最小/最大纵横比，并且在最小纵横比上进行设计工作。
 
原因：从窄屏可以通过逐个控件调整相对于父对象的Anchor, Stretch来自适应宽屏。反过来就不一定成立。
 
实际操作的时候，设计人员有时候会从设备截屏，并以此图作为实际情况，在PS里对UI布局进行精细调整。
 
以ipad3为例，设计尺寸是4:3。
 
这个时候截屏的图的比率虽然正确，但截图图的像素是2048*1536。
 
可以在PS里创建一张同等比率、高度为标准高度的图层，将截图缩放到标准高度大小。这时测量得到的像素值，就是NGUI里需要调整的像素值。
 
关于制作标准：
 

 1、NGUI里UIRoot设置为FixedOnMobiles。
 

 2、Manual Height 的值设置为标准高度。
 

 3、
 逐个控件精细、巧妙地调整相对于父对象的Anchor, Stretch来自适应宽屏。
 

 4、原则上能不缩放控件就不缩放控件,使用资源原始的尺寸。此项原则的执行程度是决定整个UI最终设备质量的关键因素之一。
 

 
 
 
关于资源标准：
 

 原始资源的精度是决定整个UI最终设备质量的关键因素之二，
 精度越高，UI资源也越大。
 

 资源切图之前都有个原始图，制作规范是
 

 1、图像尺寸为最小纵横比 * 标准高度.
 

 2、图像dpi = 72. 使用PS默认值72，这个值是设备相关值。显示器的DPI一般在96左右，移动设备的PPI参考附录三和附录四。
 

 
 
 
关于标准高度：
 

 常见的标准高度为：480,640,720,
 768,1536
 

 
 
 

 480 是早期Android设备，一般用于3.5inc以下的屏幕。
 

 常见的分辨率为 800*480 和 854*480 ，占有率为16%和11%
 

 
 
 

 640 是4、4s、5、5s、5C的参数，截止于2014-7 
 

 占全部iphone的15%、29%、25%、29%、3%,话说国内Android是主流平台。
 

 
 
 

 720 是大屏Android设备，一般用于4inc以上的屏幕。
 

 常见的分辨率为1280*720 和 1920*1080， 占有率为38%和18%
 

 
 
 

 768 是iPad1和iPad Mini的分辨率，我猜测早期APP出的HD版资源以此为标准。
 

 1536 是iPad2以后的平板设备的分辨率
 

 
 
 

 选择的标准高度是
 768，因为
 

 1、1024*768. 1024是UI Atlas使用的贴图大小，在制作Atlas时，切分三段式或九宫格也有天然的对齐优势。
 

 2、768精度完爆目前65%的Android手机和除了Plus之外的全部Iphone手机。
 

 3、720->768 资源大小增加13%，不算很大。但和目前实际情况的960*480相比，会增加28%。
 

 4、高精度设备上看着比640强得多。
 

 
 
 

 
 
 
在设计、制作、资源三方面统一标准高度的重要性：
 

 统一的标准尺寸才可以让像素值一致，多人协作时的重要性不言自明。
 

 
 
 
关于比率范围的选择：
 

 目前移动设备的比率据我所知为 1.1 - 1.9。
 

 主流设备在1.3333 - 1.79x
 

 为了避免在16:9大屏上做精确适配，直接涵盖到1.8，搞定各种代工厂的屏幕比率浮动。
 

 所以选择 1.33333 - 1.8
 
屏幕超出标准的处理办法：
 
凡是小于1.33的切上下两边.
 
凡是大于1.8的切左右两边.
 
Apple设备全部在此范围内，所以不用切。
 

 
 
PS:为什么有同学反映我们的UI在Ipad上看着不好?是因为
 
1、我们都在用高精度设备匹配低精度资源。(720/1536 匹配 640的资源).
 
2、UI布局和原始资源大小有差距。(标准不统一造成的)
 
附录1：ppi和屏幕型号的关系
 
数据来源:http://blog.csdn.net/guozh/article/details/8954994
 
 
 "HVGA    mdpi"
 "WVGA   hdpi "
 "FWVGA hdpi "
 "QHD      hdpi "
 "720P     xhdpi"
 "1080P   xxhdpi "
 
附录2：常见屏幕分辨率和纵横比
 
数据来源：http://www.cnblogs.com/ganzhijie/archive/2011/08/18/2144216.html  (2011)
 
 
 486
440
1.104545
576
520
1.107692
1280
1024
1.25
2560
2048
1.25
5120
4096
1.25
320
240
1.333333
640
480
1.333333
800
600
1.333333
1024
768
1.333333
1152
864
1.333333
1280
960
1.333333
1400
1050
1.333333
1600
1200
1.333333
2048
1536
1.333333
2800
2100
1.333333
3200
2400
1.333333
4096
3072
1.333333
6400
4800
1.333333
1920
1400
1.371429
1280
854
1.498829
320
480
1.5
480
320
1.5
960
640
1.5
1600
1024
1.5625
3200
2048
1.5625
6400
4096
1.5625
768
480
1.6
1280
800
1.6
1440
900
1.6
1680
1050
1.6
1920
1200
1.6
2560
1600
1.6
3840
2400
1.6
5120
3200
1.6
7680
4800
1.6
400
240
1.666667
800
480
1.666667
1280
768
1.666667
1024
576
1.777778
1280
720
1.777778
1600
900
1.777778
1920
1080
1.777778
2048
1152
1.777778
2560
1440
1.777778
3840
2160
1.777778
4096
2304
1.777778
7680
4320
1.777778
1366
768
1.778646
854
480
1.779167
432
240
1.8
 
 

 
 
附录3：安卓手机主流屏幕占有率
 
数据来源: http://developer.android.com/about/dashboards/index.html#Screens
 

 
 

 
 
 
附录4：Apple移动设备资料:
 
 
数据来源: http://www.apple.com
 

 
 

 
 
附录5：各种设备占有率
 

 数据来源互联网，时间2014-7
 

 
 
 

需求描述
 
报表在WEB页面输出的时候，行、列都很多，需要设置横向、纵向滚动条来固定报表表头。这样，就造成针对客户端不同的分辨率的显示器，滚动条的高度和宽度固定，对于分辨率小的机器，在页面上看不到滚动条，分辨率大的机器，滚动条右下方留出了很大的空白，这样造成页面不美观，影响用户体验。
 
 
 
解决方法
 
可以通过jsp调节参数实现。
 
步骤一：
 
1.在客户访问一个报表页面之前，加一个redirect.jsp页面，里面加入一个js函数，来获取客户端浏览器窗口的大小：
 
<SCRIPT>
 
        var w = 0;   
 
        var h = 0;   
 
         //通过深入Document内部对body进行检测，获取浏览器窗口大小   
 
         if (document.documentElement  && document.documentElement.clientHeight && document.
 
documentElement.clientWidth){   
 
             h = document.documentElement.clientHeight;   
 
             w = document.documentElement.clientWidth;   
 
         }else{
 
            w = 1259 ;
 
            h = 632 ;
 
         }     
 
//重定向到报表所在的jsp页面，并且把客户端浏览器宽度、高度，作为参数
 
//传递给报表所在的jsp页面     
 
       window.location.href=”<%=path%>/mis2/reportcenter/res/showReport.jsp?<%=param%>&w=”+w+”&h=”+h ;
 
 </SCRIPT>
 
 
 
步骤二：
 
在报表所在的jsp页面上（showReport.jsp），获取浏览器的宽度、高度。
 
String w = request.getParameter(”w”) ;
 
       String h= request.getParameter(”h”) ;
 
 
 
步骤三：
 
修改发布标签
 
              <report:html name=”report1″ reportFileName=”a.raq”
 
                     funcBarLocation=””
 
                     params=”<%=param.toString()%>”
 
                     needScroll=”yes”
 
                     scrollWidth=”<%=w%>” –动态设置滚动条宽度、高度
 
                     scrollHeight=”<%=h%>” 
 
       />

做这一组教程的目的有2个。
 
1、为了分享一些个人心得经验，很多问题一直困扰这我，然而看了很多资料，并没有讲的非常明确的文章。所以写出来让大家少走弯路
 
2、为了给自己留一个底以后用的时候方便查询
 
这篇教程主要解决两个问题。我们一个一个来。
 
 
如何在u3d里使用像素px单位。大家知道，u3d里的x,y,z默认是米。所以在导入素材的时候，在Inspector面板中要设置1像素等1单位。这样就能使u3d的单位变成像素了
 
 
 
 
 
下来是重点了，几乎所有的教程里都没介绍过自适应分辨率的问题，我理解对于3d游戏，除了ui部分，是不需要自适应的，因为无非就是视口显示的内容多少。而ui可以通过ugui实现自适应
 
那么问题来了，2d游戏，在不同分辨率设备上，如果不做处理，显示的内容差别会很大。所以需要做如下工作来使2d游戏只适应分辨率
 
 
以上是主流设备分辨率，这里会有一个概念宽高比1.6就是16/10，就是16比10的分辨率，例如1280*800。
 
那到底怎么做才能让u3d的2d游戏自适应分辨率呢。
 
 
 
 
第一，由于相机的位置默认是在正中间，我们以1280*800作为基准分辨率来开发。所以我们移动相机到x640 y400。目的是让左下角的起始点变为x=y=0 方便开发。如上图1部分
 
 
 
第二，也是重点，要设置相机的视口为正交模式，就是平行的视口，这样物体的大小就和z的距离无关了
 Orthograohic的Size是重点。这里要设置为高度的一半。由于我们是800高度为基准，这里我们写400就可以了，如上图2部分。
 
这样做了以后，只要是在16:10分辨率的设备上，视口和元素都会等比例方法缩小，做到自适应分辨率
 
上图3部分的图片宽度是400，占屏幕小三分之一
 
 
 
经过以上设置游戏就可以在各种分辨率下正常显示了。当然还有一些瑕疵，就是比例不是16:10的情况下，上下或最有会有黑边。但是基本上不影响游戏性。
 
 
 
大家可以拖动game浏览窗口大小自行观察自适应情况
 
 
 
 
 
 
 
 

 
 
  
<div id="web_bg" style="position:absolute; width:100%; height:100%; z-index:-1">
<img style="position:fixed;" src="http://a.lanyes.org/bg1.jpg" height="100%" width="100%" />
</div>
 
 
 
 
 
 
转载于:https://www.cnblogs.com/zjy954/p/5436525.html