自适应分辨率的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、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