This is Will’s reorganized deep read of iOS/macOS — a more detailed iPad/Mac special topic than the official HIG:cursor, navigation, copywriting, charts, windows. It serves as a decision-making reference for PMs building iPad/Mac apps.
1. Essential Differences Between Mac and iPad (Must-read before cross-platform development)
| Dimension | iPad (iOS genes) | Mac |
|---|---|---|
| Design premise | Built for touch (large elements, operable while walking) | Built for keyboard and mouse (precise pointer, high information density) |
| Button placement | Lower-middle area of the screen (within reach of a single-hand thumb) | Anywhere (ergonomics matter little);do not place at the bottom of the window(easily obscured by the Dock) |
| Typography | Standard 17pt | Standard 13pt;When running an iPad app on Mac, scale content to 77%(=13÷17), otherwise text will be too large and look uncoordinated; Mac does not support Dynamic Type |
| Color | Use accent colors to mark interactive areas and color content | Neutral(multiple windows and multiple files make colors look cluttered); the interface serves content and does not steal attention |
| Gestures | Two-finger pinch/rotation centers on the touch point; pull-to-refresh works well | Centers on the pointer position; gestures such as pull-to-refresh map poorly → replace with menus/right-click/toolbar; hover can be used to reveal more information |
| Icons | — | Since 2024, moving closer to iOS’s unified rounded rectangle style (in 2019 it still used a unique skeuomorphic shape to increase recognition) |
Three major interaction frameworks:① Streamlined tab integration (information-dense) ② Row-and-column lists (structured data) ③ Folders + document browser.Information layout:Mac windows are large; do not simply scale up the iOS layout; use reasonable content margins to prevent overly long text lines; use split view / master-detail views to maximize density.
2. iPadOS 26 New Window System + Pointer
· Window:Drag the handle at the bottom-right corner → turn into a floating window; window controls at the top-left corner (tap to zoom, long-press to expand layout shortcuts);Wrap window controls into the same row as the toolbar(do not leave the top safe area wasting content space);Open an independent window for each document(previously opening a second one would push out the first); give each window a descriptive name(use the document title so the window list is useful). · Pointer:New shape in iPadOS 26,always tracks input directly at 1:1(no longer magnetic/springback); the new highlight is a "liquid glass disc" that floats above controls, bends and refracts the underlying layer, and accurately indicates the button about to be tapped. · Menu bar(inherited by iPad from macOS): bring it up by moving the pointer to the top / swiping down with a finger; each app has its own menu bar; sort by usage frequency + group + add icons + keyboard shortcuts;do not hide menu items(gray out unavailable items instead of hiding them, to support position memory); populate the "View" menu (tabs + show/hide sidebar).
3. Adaptive Cursor iPadOS Pointer (iPad-only, Mac uses traditional pointer)
Core: The entire iPad system is designed for "fingertip size", so the pointer must adapt its precision to reduce misoperation.
▸ Adaptive vs. Traditional Pointer
| Traditional pointer (Mac) | Adaptive pointer (iPad) | |
|---|---|---|
| Precision | Pixel-level (easy to mistakenly tap between buttons / on the previous line of text / 2:15 instead of 2:30) | Dynamically matches interface precision: circular by default → transforms into button shape when aligned to a button / I-beam shape when aligned to a line of text / snaps to 15-minute intervals |
| Occlusion | Drawn on top of the interface, occluding controls | Moves behind icons along the Z-axis, revealing true colors |
| Mechanism | — | Dual pointer (visible pointer + invisible "model pointer"); when you lift your finger it automatically realigns to the control center;Magnetism Scans the inertial landing point and snaps to the nearest target ("like magic") |
▸ 3 content effects(to highlight interactive elements)
| Effect | Used on | Behavior |
|---|---|---|
| Highlight | Small backgroundless controls (toolbar buttons / tab bar, default) | After the pointer moves over the control, it becomes a light-colored background; when selected, content scales up with parallax; a light effect overlay shows the pointer’s true position |
| Lift | Medium elements with backgrounds (App icons / Control Center modules) | The pointer disappears behind the control; the element scales up with shadow + radiant glow, appearing to lift up |
| Hover | Large objects (where morphing performs poorly) | The pointer retains its default shape; the object changes appearance (any combination of scaling / tinting / shadow) |
· Designing a custom pointer:Use a solid shape or thick stroke (pointer color changes with background); balance custom size visually against the default 19pt circle; let the shape convey intent (highlight pen-tip shape rather than marker icon); preserve the center anchor point whenever possible. · Pitfalls:Do not use Highlight for rectangular objects (use Lift); do not leave gaps between objects (the pointer reverts to a circle causing unnecessary animation); add ~12pt padding for bordered elements, ~24pt for borderless elements; do not add shadow if you are not scaling up.
4. Navigation (Universal for iPad/iPhone + Derived Backward from Core Value)
· Flat vs. Hierarchical:Flat uses tab bars (Photos/Music), hierarchical uses sidebars to traverse deep content (Mail).Sidebar ↔ Tab Bar Adaptation:On narrow screens / portrait orientation, the sidebar automatically becomes a tab bar;do not mix them in the same view; the sidebar only holds primary navigation entries (user-generated content such as playlists is embedded under collapsible headings); use outline icons in the sidebar and filled icons in the tab bar. · Derive information hierarchy backward from core value(cycling app case): do not cram every feature into one tab; step back and ask "why do users use your app" → design core content first (route details) → derive the top-level hierarchy backward (places);never force automatic tab switching;Do not build a "home page" to cram in all features(breaks hierarchy, causes redundancy and confusion). · Two transitions: Push vs. Modal:Push(slides in from the right) = hierarchical deepening, use it for frequent content switching (Messages);Modal(pops up from the bottom) = independent task flow (creating events / multi-step / fullscreen), deliberately interrupts to focus attention. For Modals, using navigation bar labels (primary action bold on the right + cancel on the left) is better than an X close symbol (use X only for minimal interactions with no input);limit modal stacked on modal.
5. UX Copywriting (This is the core of the full library’s copywriting methodology)
▸ PACE framework(creates natural conversational flow):
| Letter | Meaning | Key points |
|---|---|---|
| P P — Purpose | One clear purpose per screen | Consider information hierarchy (title + buttons are most prominent), know what to omit (for temperature warnings delete "why/emergency call"), if you struggle to decide what to write return to the purpose |
| A A — Anticipation | Treat the app as a conversation partner | Imagine a conversation (when editing an alarm ask "Change only the next one or all weekends"), define VOICE then adjust TONE, anticipate the next step (breathing app "Now inhale…") |
| C C — Context | Step outside the app and think about what the user is doing | Give large buttons for outdoor walks, place panoramic shooting text under arrows;write useful warnings(interruptions must be useful and clear); useful empty states (Podcasts "No saved shows" + explanation) |
| E E — Empathy | Write for everyone | Simple and straightforward language, accommodate localization (word length changes), accessibility (VoiceOver describes intent + no gendered references) |
▸ VOICE (expression style, consistent) vs TONE (tone, changes with context):Every app is like a person with a personality (Duolingo "quest" + exclamation marks). Apple’s 4 copywriting principles:clear / concise / friendly / helpful. 4-step tone modulation:① Define VOICE attributes ② Expand them ③ Adjust the balance of the 4 attributes according to context (completing a 3x goal → greatly increase friendliness; Wi-Fi not connected → increase helpfulness and reduce conciseness) ④ Express accordingly.
▸ 4 tips to improve copy quality(most practical):
- Delete filler words:Adverbs and adjectives ("simply/quickly" — the license plate example is not simple at all), interjections and pleasantries ("oops/sorry/please" — for a late delivery "We are sorry" feels insincere).
- Avoid repetition:"We are late" + "The courier cannot arrive on time" + "10 minutes" → merge to "Delivery delayed by 10 minutes".
- Start with the reason (why):"Want to keep your streak going? Complete today’s word puzzle" is more powerful than the reverse ("To get X, do Y first").
- Build a glossary:Words you want to use (alias) vs. words to avoid (username/player name), consistent across the whole app; verbs should also be consistent (find).Read it aloud after writing and you will know where it is wordy.
· Great Alerts:Title states the problem clearly (including filename), content explains the reason and gives actions, options state consequences clearly (do not use "Yes/No", use "Cancel Download / Continue Download"); do not use alerts to expose error codes, do not make up for preventable problems. · Tips:Actionable + instructional + memorable (long press to send emoji); promotions/errors/no-action/complex paths are not suitable for tips.Teach users to use the app:5 principles (prioritize features to be obvious / visual cues / familiar gestures / group by behavior / give a sense of control) —learning by doing > reading a bunch of onboarding.
6. Charts System (Must-read for data products)
5 elements:① Marks (bars/lines/points — bar charts clearly show sales patterns, dot charts with raw data do not show patterns, line charts mislead when there are closed-store gaps) ② Axes (fixed range such as battery 0–100% vs. dynamic range such as steps; 4 horizontal grid lines, 7-day step size) ③ Descriptions (title "Total sales: 1,234 pancakes" gives the conclusion directly) ④ Interaction (tooltips + large touch areas extended to full height) ⑤ Color (balanced saturation to prevent one color from appearing more important; use purple-green instead of purple-pink to accommodate color blindness).
· When to use charts:For variability / ratios / comparisons; use lists for simple information instead of charts. · Macro-meso-micro three layers:Macro (total/average) → meso (weekday vs. weekend subsets) → micro (highlight the largest single value). · Static vs. Interactive:Static charts are small, have no gridline label interaction (previews/thumbnails, metaphorically tap to see more); interactive charts are large, full-width, include axis labels, and introduce features gradually (progressive disclosure). · Differentiation across multiple charts:Use familiar chart types (bars/lines; scatter plots require explanation); there must be obvious differences between charts (only changing text descriptions will be ignored; change color/shape/time range).
7. Subscription Design + Other Patterns
▸ 3 principles for successful subscriptions:Effortless(Always show the subscription button, do not treat it as a pop-up ad, present it when users show interest, simplify steps —3-step conversion 61% vs. 9 steps only 7%)/ Transparent(value proposition + call to action + multi-tier + clear terms + restore purchases) / Engaging(choose one of free trial / premium features / content sampling).
· Modal Sheet(iOS 13 default): revealing the background = content awareness; swipe down to close (one-hand friendly);disable swipe-down and provide a second confirmation when there is a key decision; retain the close button (not everyone understands gestures). · Safe Area: avoid rounded corners / sensor housing / Home indicator; scroll views extend to the bottom of the screen; bottom edge protection (requires two upward swipes to exit). · Picker: the new version supports multi-input via touch / pencil / keyboard / cursor + compact mode (inline button → expands from the top).
VIII. Dynamic Components and System Integration (Features and Components)
| Component | Key Points |
|---|---|
| App Clips | Cards (title / subtitle / image / open to view or play / app attribution); 3 principles: concise, fast, promote the full app; avoid login / navigation / settings / tutorials; notifications allowed 8 hours after first use (exceeding 1 day requires explicit authorization to extend for one week) |
| App Intents | System-level invoked features (action buttons / squeeze / widgets / Siri); focus on basic tasks (configure / create / delete);do not create multiple intents for similar tasks (use parameters); binary states support the default "toggle" parameter; two ways to open the app |
| Interactive Snippets | Top-overlay quick information + actions (Spotlight / Siri / Shortcuts); large type for instant readability; only disappears after confirm / cancel / swipe away |
| Live Activities / Shortcuts / App Clips / Intents / Interactive Snippets / Widgets | For component-level usage, see Apple HIG Component Decision Manual (63 Components · When to Use Which); Dynamic Island is inspired by biomorphic forms (elastic organisms); for Shortcuts visual design and app shortcuts, see the component manual |
| Custom Visual Effects(iOS 18 SwiftUI) | 5 categories: Scroll Effects (parallax) / Color Treatments (Mesh Gradient) / View Transitions / Text Transitions (TextRenderer character-by-character) / Metal Shaders (GPU ripple distortion) |
IX. iPad UI Kit: iOS 18 → 26 Component Visual Specifications (Liquid Glass Redesign)
This section is supplemented from iPad UI Kit (official Sketch/Figma visual specification kit) — almost all of its content is in images (one reference image per component + component-by-component before/after for 18 vs 26). Below, we extract what iOS 26 / Liquid Glass changed component visuals to look like into text + key real screenshots, for aligning with the new visuals when making iPad prototypes.
▸ Tab Bar (biggest change): changed from iOS 18's "bottom-attached solid bar" to iOS 26's floating capsule — left sidebar toggle icon + center tabs (selected state highlighted with a pill, active text turns blue) + right search; two versions, dark glass / light glass, adapt to the background.
Image: iPadOS 26 Tab Bar real sample. No longer attached to the bottom, but a floating capsule; selected item uses a pill background + blue text; dark/light glass switches automatically with the background.
▸ Toolbar: changed from "one continuous bar" to independent circular glass floating buttons for each icon, grouped by leading / center (title + subtitle) / trailing;primary action = blue solid circle. 4 variants: Top-iPad (title and subtitle centered) / Top-iPhone (back arrow + title + blue primary button) / Top-Sheet (X close + title + blue primary button) / Bottom (a row of circular glass buttons).
Image: iOS 26 Toolbar real sample. Toolbar items become individual independent circular glass buttons (no longer a continuous bar), blue solid circle = primary action.
▸ Materials: iOS 26 introduces Liquid Glass materials in three sizes: large / medium / small (for real samples see Apple HIG: Liquid Glass New Design Language + SF Symbols + Typography (iOS 26 Visual System) § Material Layer) plus tinted states.
▸ iOS 26 Complete Component Visual Catalog(included in UI Kit, all Liquid Glass-ified, exact pixels are in the original kit images):
Action Sheets / Activity Views / Alerts / App Icons / Buttons / Color Pickers / Contextual Menus / Device Bezels / Empty States / Face ID / Keyboards / Lists / Materials / Menus / Notifications / Page Controls / Pickers / Pop-up Buttons / Popovers / Progress Indicators / Segmented Controls / Sheets / Sidebars / Sliders / Status Bars & Menus / Steppers / System / Tab Bars / Text Fields / Toggles / Toolbars / Wallpapers / Widgets / Windows. 18 vs 26 Comparison: The UI Kit specifically includes a component-by-component iOS 18 → 26 before/after (action sheets / alerts / context menus / Control Center / Home Screen / Lock Screen / keyboard / lists / notifications / pickers / popovers / Sheets / sidebar / sliders / switches / steppers / tab bar / text fields / toolbar…). Overall direction:solid bars → floating glass elements, right angles → capsules/rounded corners, edge-attached → floating. Honest boundary: Out of these 168 images, I only extracted the three with the biggest changes — Tab Bar/Toolbar/Materials — to look at real samples; for the remaining components,exact pixels/anatomy still require viewing the original UI Kit images directly in Obsidian(
sources/reference/apple-design/.../iOS iPad UI Kit 组件/).
Sourced from iOS macOS Information and Controls (35) + Features and Components (13) + iPad UI Kit (3 + 168 visual specification images), totaling 51 articles. For component-level usage, see Apple HIG Component Decision Manual (63 Components · When to Use Which); for Liquid Glass application on iPad, see Apple HIG: Liquid Glass New Design Language + SF Symbols + Typography (iOS 26 Visual System); for the design philosophy behind copywriting, see Apple HIG Design Principles and Mindsets (12 Core Principles / Fluid Interfaces / Intentional Design / Multisensory / ML Experiences).