Teach you the first draft of iOS APP design to support iPhone5/iPhone6/Plus
http://www.uigreat.com/Standard/a165/
The first step, the visual design stage, the designer makes a design draft with a width of 750px (iPhone 6), and uses vector paths for all design elements except pictures. After the design is finalized, make an annotation on the 750px design draft, and output the annotation map. At the same time, proportionally enlarge 1.5 times to generate a design draft with a width of 1125px, and cut the image in the 1125px draft.
The second step is to output two deliverables to the development engineer: one is the @3x slice resource used by the program, and the other is the design annotation map with a width of 750px.
In the third step, the development engineer gets the 750px annotation map and @3x cut map resources to complete the interface development of iPhone 6 (375pt). At this stage, the interface cannot be developed with a fixed width, and auto layout must be used to facilitate subsequent adaptation to other sizes.
The fourth step is the adaptation and debugging stage. Based on the interface effect of iPhone 6, the interface effects of iPhone 6 plus (414pt) and iPhone 5S and below (320pt) are debugged upward and downward respectively. This completes the three-screen adaptation of large, medium and small screens.
As mentioned above, the adaptation strategy is to first select the iPhone 6 as the benchmark design size, and then automatically adapt to the other two sizes through a set of adaptation rules. This set of adaptation rules can be summed up in one sentence: text flow, control flexibility, and image scaling.
Control flexibility means that the height in the vertical direction does not change during the adaptation process of navigation, cell, bar, etc.; when the width in the horizontal direction changes, the adaptation is realized by adjusting the element spacing or right-aligning the elements. In this way, the larger the screen, the more content can be displayed in the horizontal direction, taking advantage of the large screen.