[原]自适应分辨率的UI设计规范和制作规范
自适应分辨率的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.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：各种设备占有率
