1. iOS device resolution

It is said that iOS development is easier than Android development. How does IOS achieve this? Let's take a look at it today. I hope it will be helpful to those who are doing IOS interface design.

 

1. iOS device resolution

There are currently three most important iOS devices (Apple TV and so on), divided into two categories by resolution

IPhone/iPod Touch

General screen resolution: 320 pixels x 480 pixels

Retina resolution: 640 pixels x 960 pixels

IPad, ipad2/new iPad

General screen 768 pixels x 1024 pixels

Retina screen 1536 pixels x 2048 pixels

 

2 Relationship between points used in IOS design and resolution

Although there are four resolutions listed above, careful people will find that the resolution of the Retina screen is always twice that of the general screen, this is a great convenience for iOS design and development. Naturally, you can think of the interface design, you only need to design a set, and then scale up or down the proportion. This is also true in actual design and development. Apple uses point in a unified manner to prevent confusion in thinking during communication (especially for programming implementation) describe the size of the interface elements, for example:

IPhone/iPod Touch

Page Description: x

IPhone/iPad

Page Description: x

Conversion Relationship

1 point = 1 pixel

Retina screen 1 point = 2 pixels

In this way, whether we are designing and developing a general screen or a Retina screen, we can clearly and uniformly describe the size of the page elements.

 

3. Name the image on the IOS page

Now we can use a unified language to describe the size of the interface elements of the two screens. But how can we set different resolutions for different screens? It is hard to say that during development, we need to add a statement to determine whether the current device is a Retina screen at the place where each image is loaded, and then load the corresponding image? Of course you can do this, But IOS has a simpler method for automatic loading, that is, naming by a standard file name. For example, the following statement is used to load an image:

[Uiimage imagenamed: @ "pic.png"]

In the actual operation, if the current device is found to be the Retina screen, will automatically find the picture "pic@2x.png", automatically loaded for the Retina screen image material, is it very convenient?

Therefore, when creating an iOS device, we can classify the image files as follows. For the images in the 640x960 folder, add "@ 2x" to the file name.

 

4. Naming rules for common iOS app icons

See the following two documents:

Apple Q &

Apple official instructions

Please follow the specifications described in this document to name the icons !!

 

PS: some additional icon references

The A icon automatically adds the highlighted effect. If you do not need it, you can explicitly specify the uiprerenderedicon key value in plist to remove it.

B: 57 pixels iPhone icon on the general screen. The radius of the rounded corner of the icon is 10 pixels.

C 114 pixel iPhone icon on the Retina screen. The radius of the rounded corner of the icon is 20 pixels.

D. The 512-pixel icon used for iTunes/App Store is scaled to 175 pixels in actual display (but 175 pixels cannot be submitted for submission)

E 72-pixel iPad icon with a radius of 13 pixels

F 144 pixel Retina screen iPad icon, the radius of the icon rounded corner is 26 pixels

The final visual size of the Spotlight search icon on the G 50 pixel iPad is 48 pixels, because IOS removes one pixel from each side of the icon and adds a shadow effect.

The final visual size of the Spotlight search icon on the H 100 pixel Retina screen is 96 pixels. The reason is the same as above. This time, two pixels are subtracted on each side.