UI design specifications and production specifications for adaptive resolution

UI design specifications and production specifications for adaptive resolution

Benchmark Device: iphone 4s

Benchmark screen resolution: 960*640 (iOS), 800*480 (Android), 854*480 (Android)

Reference parameter 3.5inc + 330ppi

Standard Height: 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

In this case, the most important is the pixel value of the Aspect Ratio and Resource size of the Design size.

about design criteria:

The most important thing designers need to focus on is the minimum/maximum aspect ratio, and the design work on the minimum aspect ratio.

Cause: From a narrow screen you can adjust the anchor relative to the parent object by the controls individually , stretch from the adaptive widescreen. The reverse is not necessarily true.

In practice, designers sometimes take screenshots from the device and use this as a real-time illustration to fine-tune the UI layout in Photoshop.

Take Ipad3 as an example, the design size is 4:3.

The ratio of screenshots to the screenshot is correct at this time, but the pixels of the truncated graph are 2048*1536.

You can create a layer with the same ratio and height as the standard height in PS to scale the screenshot to the standard height size. The measured pixel value is the pixel value that needs to be adjusted in the Ngui.about production standards:1, Ngui Uiroot set to Fixedonmobiles. 2, the value of Manual height is set to the standard height. 3.One-by-one controls finely and subtlyAdjusts the anchor relative to the parent object, stretch from adaptive widescreen.4. In principle, you can not scale the control without scaling the control, using the original size of the resource. The degree of implementation of this principle is one of the key factors that determine the quality of the entire UI final device.
about resource criteria: the accuracy of the original resource is the second of the key factors that determine the quality of the entire UI final device . the higher the accuracy, the greater the UI resources。 Resource transduction before there is a original diagram, the production specification is 1, the image size is the minimum aspect ratio * standard height. 2, the image dpi = 72. Using the PS default value of 72, this value is a device-dependent value. The DPI of the display is typically around 96, and the PPI reference for mobile devices is appendix three and appendix Four.
about Standard Heights:The common standard height is: 480,640,720,768, 1536
480 is an early Android device, typically used for screens below 3.5inc. Common resolutions are 800*480 and 854*480, with a share of 16% and 11%
640 is 4, 4s, 5, 5s, 5C parameters, as of 2014-7 of all iphone 15%, 29%, 25%, 29%, 3%, saying that domestic Android is the mainstream platform.
720 is a large screen Android device, generally used for more than 4inc screen. Common resolutions are 1280*720 and 1920*1080, with a share of 38% and 18%
768 is the resolution of IPAD1 and ipad Mini, and I guess the HD resources from the early apps are standard. 1536 is iPad2 after the resolution of the tablet device
The standard height of the selection is768, because 1, 1024x768. 1024 is the size of the map used by the UI atlas, and when you make Atlas, the split-three-segment or nine-Gongge also have natural alignment advantages. 2, 768 accuracy is currently 65% of Android phones and all but plus all iphone phones. 3, 720->768 resource size increase 13%, not very big. However, compared with the current situation, the 960*480 will increase by 28%. 4, high-precision equipment to look at more than the 640 stronger.

in the design, production, resources three aspects of the importance of uniform standard height: uniform standard size allows for consistent pixel values, the importance of collaboration is self-evident.
about the selection of the ratio range:The current ratio of mobile devices is 1.1-1.9, as far as I know. Mainstream equipment in the 1.3333-1.79x in order to avoid the 16:9 large screen to do accurate adaptation, directly covered to 1.8, to deal with the various generation of factory screen rate fluctuations. So choose 1.33333-1.8the screen is out of standard handling:

Usually less than 1.33 cut up and down both sides.

Usually more than 1.8 cut left and right sides.

Apple devices are all within this range, so don't cut them.

PS: Why does a classmate reflect that our UI is not looking good on the ipad?

1, we are using high-precision equipment to match low-precision resources. (720/1536 matches 640 of resources).

2. There is a gap between the UI layout and the original resource size. (caused by a non-uniform standard) Appendix 1:ppi Relationship to screen model

Data Source: http://blog.csdn.net/guozh/article/details/8954994

"HVGA mdpi"
"WVGA hdpi"
"FWVGA hdpi"
"QHD hdpi"
"720P xhdpi"
"1080P xxhdpi" Appendix 2: Common screen resolutions and aspect ratios

Data Source: 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

Appendix 3: Mainstream screen occupancy of Android phones

Data Source: Http://developer.android.com/about/dashboards/index.html#Screens

Appendix 4:apple Mobile Device Information:

Data Source: http://www.apple.com

Appendix 5: Various device share data sources Internet, time 2014-7