Essential iOS UI Design Guidelines: Controls, Layout, Modals, Gestures, Animations, and Typography

1. Overview of UI Controls

Four categories of UI elements:

A: Bar – a combination of status and navigation bars.

B: Content view – displays application information and supports interactions such as scrolling, insertion, and deletion.

C: Control elements – represent product behavior or displayed information.

D: Transient view – provides important or additional information temporarily.

Control size specifications:

Icon dimensions:

2. Overview of UI Layout

1. Clickable areas should be at least 44 × 44 px.

2. Place important content and functions in high‑weight positions, preferably in the upper half of the screen and nearer the left side for left‑to‑right reading habits.

3. Visual weight and balance matter: larger elements attract more attention and appear more important than smaller ones.

3. Overview of Modal Scenarios

1. A modal is a dedicated mode for specific content or tasks; it helps users complete tasks or obtain information without distraction but temporarily blocks interaction with the rest of the app.

2. Keep modal tasks simple, brief, and focused; avoid making a modal feel like a mini‑app embedded in the main interface.

3. Always provide a clear and safe exit method so users know what will happen after leaving the modal.

4. Use alert dialogs to convey essential information and offer actionable options.

4. Overview of Gesture Interactions

A: Tap – press or select an object.

B: Drag – scroll or move an object across the screen.

C: Flick – quickly scroll or move an object.

D: Swipe – reveal more content, such as delete buttons in a list or the notification center from the top.

E: Double tap – zoom content to the center of the screen.

F: Pinch open/close – enlarge or shrink content.

G: Long press – show a magnifier for text selection or cursor placement.

H: Shake – trigger undo or redo actions.

5. Overview of UI Animations

1. Polished animations are pervasive in iOS, making the experience more dynamic and engaging. Well‑designed animations can:

A: Convey state changes.

B: Enhance users' perception of direct manipulation.

C: Visually present operation results.

2. Align animations with native iOS patterns; users expect smooth transitions, fluid orientation changes, and physics‑based scrolling that match built‑in apps.

6. Overview of UI Typography

1. Typography is a key element of iOS 7 design; most interactions involve tapping text or icons, though buttons occupy a smaller visual weight.

2. The default system font is Helvetica Neue, a clean, lightweight typeface, but designers are not limited to it.

3. iOS 7 uses slightly larger font sizes; hierarchy is expressed through color and weight to maintain clear layout and readability.

4. Apple’s font specifications:

A: Navigation bar title – Medium 34 px.

B: Buttons and table headers – Light 34 px.

C: Table cell labels – Regular 28 px.

D: Tab bar item labels – Regular 20 px.