Master iOS UI Design: From Project Kickoff to Asset Export

Part 1 Project Initiation

When a company is ready to start a project, the product manager presents a detailed prototype, including product positioning, market demand, key selling points, product nature, and module functions. After estimating effort and coordinating departments, the project officially launches.

Before design begins, archive the project with a name and version sequence, and organize files into logical folders that suit your workflow.

Part 2 Photoshop Workflow

Common iPhone design canvas sizes are:

640 × 960 – iPhone 4 era

640 × 1136 – iPhone 5 series

750 × 1334 – iPhone 6 (recommended for most current designs)

Designing on the iPhone 6 canvas allows easy adaptation to older sizes. Set reference lines: vertical margins at 24 px, horizontal margins typically 24 px (adjustable after discussion with developers).

Part 3 Page Annotation

Accurate annotation is crucial for developers to reproduce the design. Include font size (px), font color, background colors, opacity, separator line colors, content area background, and Tab Bar background. Use both hexadecimal and RGB values when possible.

Typical elements to annotate:

All elements should have a left margin of 24 px.

Title bar: background color, text size, text color.

Banner images: width fills screen, height specified.

Icons: size and clickable area (often larger than the visual icon).

Modules: spacing, image dimensions, text size/color.

Tab Bar: icon + text as a single control, or separate if the developer prefers.

Note: This is a personal workflow, not a formal standard. Adapt flexibly to your team’s habits.

Part 4 Slice Export

Discuss slicing strategy with developers before exporting. Use even pixel dimensions to avoid half‑pixel artifacts. Provide multiple resolutions:

@1x – base size

@2x – Retina (iPhone 4/5/6)

@3x – Retina HD (iPhone 6 Plus)

Common naming convention: type_function_description_state.png (e.g., btn_sure_nor.png, [email protected]).

Export icons in PNG (prefer PNG‑24; use PNG‑8 only when file size matters). Vector formats (PDF, SVG) are optional but not universally supported on iOS.

Part 5 Common Data

Recommended iOS fonts:

Apple Heiti (Simplified Chinese) – STHeitiSC‑Light

Hiragino Sans GB W3/W6 (close to iOS default)

Typical font size ranges (use even numbers):

Top bar: 34‑38 px

Title: 28‑34 px

Body: 26‑30 px

Auxiliary text: 20‑24 px

Tab Bar: 20 px

Standard iPhone screen dimensions for design:

320 × 480 – iPhone 3GS

640 × 960 – iPhone 4/4s

640 × 1136 – iPhone 5/5s/5c

750 × 1334 – iPhone 6

1242 × 2208 – iPhone 6 Plus (portrait)

Launch images must be PNG and provided for the sizes you actually support (typically 640 × 960, 640 × 1136, 750 × 1334, 1242 × 2208, and 2208 × 1242 for landscape).

App icons are submitted as square PNGs; iOS will mask them to circles. Common icon sizes:

1024 × 1024 – App Store (Retina)

512 × 512 – App Store (standard)

120 × 120 – iPhone 6 home screen

114 × 114 – iPhone 5/4s/4 home screen

57 × 57 – iPhone 3GS home screen

58 × 58 – Retina Settings

29 × 29 – Settings