Initially, 2G and 3G iPhones had the same artboard sizes of 320 x 480 and elements could be exported in the same scale. Then the iPhone 4, 4s came out in which the artboard size was still the same but export scaling changed to 2x i.e. you would need to export different screen elements at twice the size. Then major and bigger screen sizes started appearing from iPhone 6, 6+ to the current variant iPhone 11 Pro, 11 Pro Max. Now there are a bunch of different screen sizes and three export scaling sizes 1x, 2x, and 3x. While designing apps for the iPhone, you must consider these points:
I. Use the most common screen size.
II. Check Google Analytics to see which iPhone your audience uses.
III. Initially, design the iPhone with less width.
Read more: Guidelines for Perfect Mobile Design
Status bar appears at the top and above all apps, except for the full-screen apps. It shows time, signal, wifi and all other notifications associated with different apps. The new status bar has a width of 44pt available in all-new iPhones that don't have a physical home button. The old iPhones with a physical home button had a 20pt width status bar.
The navigation bar appears on the app screen. It is usually different for every screen. The navigation bar contains: title, action buttons, and search. There are three main types of navigation bar:
a. One row navigation bar
It is used to display page actions.
b. Two-row navigation bar
It is used for the page title.
C. Three-row navigation bar
It is used for search bar. It usually appears when the user scrolls upwards.
The content page has the main information associated with the app. It follows the app design depending on the app you are using.
This section contains all the destination pages. The theme color of the application denotes the selected app icon or has a contrast value higher than other buttons. The font size of icon labels is from 10pt to 11pt. The background color of action bar can be a solid color or translucent which gives a background blur effect.
You can see this newly added section to the iOS family in iPhone X and above without a physical home button. It appears below the app and changes color depending on the color of the app. On a light background, the color of this indicator is dark and vice-versa.
Read more: 6 Simple Tips for Designing Better Dashboard
In this post, I have discussed different screen sizes and export scales for different iPhones. The sections divided in native apps follow similar pattern i.e. Status bar, Navigation bar, Content page, Action Bar, and Home screen indicator (iPhone without physical button).
The above-discussed content can assist you to create great apps that look like a native app.