App Interface Design Recommendations

Qingquanshan

Remember

The third version: a Iphone6 plus-based design for iphone5 or iphone 6 methods and tricks. The Iphone6 Plus is designed in 1242*2208px size
Solution: ① Simple and rough scale image size, that is, directly to the existing picture resources adjusted to 0.5 times times, if all with the path to draw, it will be a lot simpler, directly adjust the size.
Design size is: 1242*2208px This size is relatively large, for which computer configuration is not good enough for the small partners can follow the above 2 practices.
If you are a Mac computer, directly using sketch easy to do, 6 and 5 transduction can use a set, PPI are 326,6+ words export 3x diagram OK.

Finally, give the app designer a 9-point suggestion.
1, after the application, all use AutoLayout, do not use absolute positioning.
2, the use of similar web-like way to design the interface.
3, good designers, programmers, try to use point this unit to think, and do not use pixels. For example, you need to do the X 66 dots button, 2x mode, multiply by 2, 3x mode is multiplied by 3. This way of thinking can be roughly estimated to the actual physical length. 44 points, is the mobile phone navigation bar, the height of the toolbar. If you think in pixels, it's easy to make pictures too big or too small.
4, non-vector material, you can do the largest size, and then to reduce. For example, if you need a 3x screen, you can do the highest image directly.
5, and when using the vector tools such as flash to do the material, you should do a bit of that size directly. For example, a button with a 66-point x. Create a scene with a x 66. Then it is exported to twice times the graph, 3 times times the graph, because the vector amplification is not true. Do not create a 3x scene, export to a large picture, and then zoom out, so it is easy to distort. It is more desirable to use vector diagrams directly.
6, if it is the kind of navigation bar, toolbar and other background map, need to cross the entire screen. You can only cut a small piece, let the program stretch, stretch the way is to keep the pixels on both sides do not move, just stretch the most middle of a column of pixels. If you need to stretch, do not appear in the transverse direction of some gradients.
7, the button's click Area, should not be less than 44 pixels, even if the button's picture looks small, also should make the point button around the transparent area also has the reaction.
8, you can according to your current most convenient test machine model to do some of the main preview, Effect diagram. For example, you have an iphone 5, you can follow the iphone 5 size, the X 568 points, need to be compatible with the iphone 6 Plus, use 3x mode. This makes it easy to put pictures into the phone to see the actual effect. There are more than one test machine, select the larger, and then do some fine tune. If you support the flat screen mode of iphone 6 Plus, you need to handle it separately.
9, the above said is the application of treatment, the game will be some special. Now a lot of games, according to 1136 x 768 pixel size to design the scene, so that it can be compatible with both the ipad and iphone, and only use a map. The size of the IPad 1x mode is 768 pixels, and IPhone 6 in 2x mode is 1136 * 640. This size, you can simply center the scene, each stretch the scene to the maximum.