The most 'methodology-focused' section in the entire library — other wikis talk about 'which component to use', while this section talks about why. These principles are universal and timeless, applicable to all design (not just Apps). After reading, you will have a 'language for judging whether design is good or bad'.
1. Design Philosophy: Why It Is Called Human Interface
Apple uses Human Interface instead of User Interface — because "Human" better reflects the ultimate goal of design than "User": serving people.
The ultimate goal of design is to serve people. What truly matters is how an App meets people's emotional and practical needs: a sense of security and predictability, knowledge and understanding, completing tasks and achieving goals, and experiencing beauty and joy. Good design lets people use it without learning, and feel comfortable and confident.
▸ 5 Elements of Intentional Design(The common thread across every great product: better satisfying people's needs)
| Element | Meaning | Example |
|---|---|---|
| Radical simplification | Remove unnecessary elements so users can focus on their actual needs | iTranslate Converse uses one large button across the whole screen (hold to speak and translate instantly) |
| Deep Understanding | Uncover underlying problems rather than surface-level needs | Streaks Workout identified user 'inertia', reduced the burden of choice each session, and introduced randomness |
| Extreme Focus | Focus on a niche, extreme user group, and in turn find a universal solution | Rollaboard luggage was designed only for pilots (0.1% of users), yet became an industry standard |
| Personal Connection | Be personalized and emotional, making users feel 'custom-made for me' | Carrot Weather's 'snarky' weather experience (referencing family personalities) |
| Direct Communication | Be clear and direct, avoiding complexity and ambiguity | The WWDC App's Tab Bar / Tinycards card flipping / Gorogoa |
▸ The Qualities of Great Design(What 'good' means)
Quality = widely recognized 'goodness' + non-random (carefully designed) + invested with large amounts of time and care + makes users feel 'this was already thought of for you' + completely painless to use + lets attention stay fully on the task. Care has two dimensions: caring enough to make the product the best it can be; caring enough about users (valuing diversity rather than one's own aesthetic). Metaphor: design is like mountain climbing — the sweat you put in makes the view from the summit more magnificent.
2. The 12 Core Design Principles (a checklist to post at your workstation)
These 12 principles are universal principles that Apple explains thoroughly using life analogies such as 'airports / a trip to Hawaii / restaurants'.They tell you 'why to do it this way', not 'how to do it'.
mindmap
root((12 核心原则))
导航类
Wayfinding 指引
Feedback 反馈
Visibility 可见性
Consistency 一致性
认知类
Mental Model 心智模型
Affordance 功能性暗示
Progressive Disclosure 渐进揭示
80/20 原则
布局类
Proximity 接近性
Grouping 分组
Mapping 映射
Symmetry 对称性
| Principle | One-liner | Life analogy + application |
|---|---|---|
| Wayfinding | Every interface answers 'Where am I? / Where can I go? / What will I see when I get there? / What is nearby? / How do I get out?' | Airport signage systems; navigation bar title = where am I, tab bar = where can I go, back button = how to get out |
| Feedback | Every action must receive confirmed feedback, in 4 types: status / completion / warning / error | Car dashboard; three signals for camera recording (red dot + timecode + button state); Apple Pay success animation + sound; inline form validation; Things 3 automatically changes 'June 31' to July 1 |
| Visibility | Feedback you cannot see = no feedback; display critical states at a high level | Mail badges vs opening every email to check; balance brevity and information density |
| Consistency | Present similar characteristics similarly, and follow platform conventions | Car brakes are on the left and the accelerator on the right; use icons, terminology, and navigation that users are familiar with; consistency beats innovation (unless there is a strong reason) |
| Mental Model | Not matching the user's mental model = not intuitive | The Mortimer faucet (dual handles control temperature and flow, look identical but operate completely differently → severe usability issue);changing users' mental models carries extreme risk, and you must ensure the benefit is obvious and tested |
| Affordance | The design of an object itself implies what can be done with it | A plate implies placing food on it, a slider implies dragging, a button implies tapping; a button is a high-level abstraction of a physical button |
| Progressive Disclosure | Progress from simple to complex step by step to manage complexity | A waiter asks step by step when you order a cheeseburger; hamburger menus / multi-step forms / advanced options |
| 80/20 Principle | 80% of value comes from 20% of features; hide secondary features | The print dialog shows only printer / copies / page range by default; more controls appear only after a click |
| Proximity | The closer a control is to the object it affects, the more intuitive it is | Light switches are in their respective rooms; Keynote's object creation tools are directly above the canvas |
| Grouping | Group related elements together to give structure | If most switches in a group control lights, assume the others also control lights; copy / cut / paste are grouped together |
| Mapping | The arrangement of controls matches the layout of the objects they control | Switch order corresponds to light layout; the best mapping is directly manipulating the object (gestures / pointer) |
| Symmetry | Reflection symmetry gives a sense of balance, translation symmetry gives a sense of order | The Weather app is centered and symmetrical; the Clock app's cities repeat evenly |
Iron rule: these 12 principles pull against each other — too much feedback annoys people, too much visibility distracts attention, too much progressive disclosure reduces efficiency. The challenge of design is balance; it requires proportion and judgment. Which principle is most important varies by platform / screen / scenario / user experience.
3. Fluid Interfaces (the soul of Apple motion design)
The essence of fluidity: the interface feels like an extension of the user's mind and body(not just high frame rates). The core is aligning the interface with how people think and move.
▸ Dynamic Motion vs Timed Animation(The most critical distinction)
| Timed Animation | Dynamic Motion (recommended) | |
|---|---|---|
| Pattern | Each interaction triggers a preset, independent animation; you must wait for it to finish before the next step | Interaction continuously affects interface behavior, with continuous real-time updates |
| Experience | The user is 'taken over', with a sense of delay | No gap between action and feedback, natural and finger-following |
▸ 6 Fluid Sub-Principles(Making the interface 'think like we do')
- Immediate response + continuous redirection —— Respond to input instantly, and allow interruption and redirection at any time (swiping up on iPhone X lets you switch between 'return to Home Screen / multitasking' at any time; intent is accurately judged by detecting finger acceleration peaks)
- Spatial consistency —— Elements follow consistent paths when entering and exiting (tapping a list item slides in from the right, returning slides out to the right), mimicking real-world spatial memory
- Cues along gesture direction —— Subtle cues guide the direction of operation
- Lightweight interaction + amplified output —— A light swipe (retaining gesture kinetic energy) → long scroll; pressing a module in Control Center grows toward the finger (as an affordance)
- Rubberbanding —— Softly bounce back at boundaries instead of 'hitting a wall'; also used for smooth transitions between elements
- Smooth dynamics + use behavior instead of animation —— Behave continuously like real-world objects;frame rate is not the only factor in fluidity (excessive displacement between adjacent frames causes flicker); add information to each frame using motion blur / motion stretching (iPhone X app icons elastically stretch to full screen when opened)
▸ Elastic Behaviors: Treat content as 'a ball attached to a spring', with 3 parameters (mass / stiffness / damping) → simplified to 2 parameters: damping + response. Recommendations:Use 100% damping for interactions without directional momentum (no overshoot, precise stop), and 80% damping for interactions with gesture momentum (elastic response to momentum).
▸ Projected Momentum(FaceTime Picture in Picture example): do not only look at the end position (snapping to the nearest point will stop in the middle); instead,first predict the final landing point using gesture velocity before moving, retaining momentum → finger-following. This 'project to find the endpoint' approach can be reused for dragging / zooming / rotating.
4. From Concept to Interface (complete design workflow in practice)
Apple uses the full process of optimizing a 'vinyl record App' from 0 to demonstrate 4 progressive layers of design.This is the workflow most worth copying.
graph LR
A["1 Structure 结构<br/>信息架构:列功能→学用户→整理洞察"] --> B["2 Navigation 导航<br/>标签栏+工具栏<br/>回答我在哪/能做什么/能去哪"]
B --> C["3 Content 内容<br/>渐进揭示+主题分组<br/>列表 vs 集合"]
C --> D["4 Visual 视觉<br/>视觉层级+系统文字样式<br/>统一色板+语义色"]
· Structure: Good structure makes the experience connect naturally. First list all features → imagine how users will use them → remove redundancy / rename ambiguous labels / group categories."If I can't clearly state the focus myself, the App will naturally leave users confused." · Navigation: Use a tab bar (for navigation only, not actions, so move 'add' inside the page) + a toolbar (provide page title + page-specific actions, answering 'Where am I? / What can I do?'). Tab labels and icons should let users know the content without tapping in. · Content: Progressive disclosure (show a few first, expand to see more); thematic grouping (by time / season / similarity); use collection views for many images. · Visuals: Build visual hierarchy (make the most important element a 'visual anchor': make it larger + increase contrast); use system text styles (automatically adapt to Dark Mode / large font sizes, no typesetting by feel); unify color palettes + retro graphics to give personality; use semantic colors (label / secondarySystemBackground named by purpose, automatically adapt).
Golden quote: "Design is never finished, and there is no single correct answer. Truly effective design is not every element fighting on its own, but all of them working together."
5. Multisensory Design: Sound + Haptics
▸ Sound design: Sound is a universal language not limited by language; it shapes experience, helps understand interactions, and gives devices a 'voice'.
4 principles for notification sounds:Distinctiveness (unique, brand-aligned, e.g., Dark Sky's 'liquid feel' implies rain) / Match the App's design / Simple and unobtrusive (it will be heard repeatedly) / Clarity (cuts through noisy environments without being harsh, e.g., iMessage). Interface sounds: use sparingly, keep volume low, help and delight, create instinctive reactions.Consider sound from the very beginning; do not add it at the end.
▸ 3 principles of haptic design(Core Haptics)
- Causality —— Imagine what sound/feeling interacting with a physical object would produce (the 'money sound' for successful Apple Pay)
- Harmony —— Visual + audio + haptics are synchronized (ball landing: impact sound + transient haptic, adjust amplitude by speed); the Apple Watch crown rotation sound was recorded from a bicycle hub
- Utility —— Feedback must have clear value (in AR, adjust haptic intensity by distance)
· Two building blocks:Transient (short like a tap, for notifications / confirmations) + Continuous (sustained like vibration, for loading / sliding states). · Clever touches: Alarm haptics come before sound (builds anticipation); 'ghost haptics / pre-excitation effect' (the first tap awakens the skin, making subsequent ones easier to perceive); watchOS uses different intensity patterns for left/right navigation to distinguish direction. · Technical constraints: Hardware differences (older devices are weaker) / Human perception frequency 20–300Hz / Power consumption (do not overuse) / Individual sensitivity differences (provide customizable intensity) / Environmental interference (pair important notifications with multisensory cues).
VI. Multilingual and Cultural Considerations (Globalization Design)
· Input: For Chinese and Japanese, use "marked text" to display temporary pinyin/kana,never modify input during the marked text stage(which would interrupt pinyin composition); for Hindi, characters form ligatures, so use color highlighting instead of changing font weight; italics are meaningless in Arabic, Hindi, Japanese, Korean, Chinese and similar scripts, so use them cautiously. · Display: TextKit 2 ensures text does not break; optimize line spacing according to language preferences. · Localization: The automatic grammar engine inflects words automatically based on gender / noun gender / pronunciation (German / Spanish / French / Hindi / Korean…), eliminating the need to handwrite multiple versions; number formats follow regional conventions (local Indian numerals ४४); icons are also localized (textformat becomes אא in Hebrew, list.number places numerals on the right in Arabic). · Culture: Avoid idioms and slang ("from A to Z" cannot be translated into Korean → change to "from start to finish"); respect cultural norms (an Indian cooking app should not recommend beef); account for cultural color differences (in Chinese stock markets, red means rise and green means fall).
VII. Intelligence and ML Experiences (Designing for AI Features)
▸ Intelligent interaction: Make the product feel like it "understands you" (comprehending goals, habits, and preferences), reducing taps and distractions,with respect for privacy as the foundation (on-device processing, explicit authorization). Three concepts:Intents(define key operations + parameters) → Learning(learn behavioral patterns on device) → Execution(reconstruct intent after prediction, executable in the background).
▸ System intelligence user journey(from before download to power user): Discovery (Maps pulls addresses from Messages) → App Clip (NFC trial without download) → First use (shortcuts on search screen) → Habituation (Siri Suggestions) → Smart widgets (Smart Stack auto-rotates display) → Shortcuts automation.
▸ ML experience design (data + metrics)——Key warnings for PMs building AI features:
· Data must be designed: Data determines model behavior and experience; pay attention to bias and fairness (Portrait mode intentionally collects multi-ethnic data); adjust dynamically, as standard academic datasets do not represent real-world experience. · Metrics do not equal experience:Metrics = numbers = a sense of scientific accuracy, but numbers cannot represent abstract, subjective things like a "good experience". If the App Store recommended purely based on "time spent", users would get trapped in games → therefore editorial content is added to increase diversity. · 4 things: Understand errors (Face ID misidentifying twins → provide passcode fallback) / Design failure scenarios (do not only map out success flows) / Evaluate real experience (keyboard touch area tuning ultimately depends on user input feel) / Evolve metrics (photo search misidentifying coyotes as dogs → keep improving).
VIII. Design Process Methods
▸ 60' Rapid Prototyping: Make (draw simple prototypes in Keynote) → Show (show to the team) → Learn(The goal is not to answer every question, but to "know what you don't know") → Iterate. Prototypes have 3 fates: correct direction (continue) / needs improvement (optimize and restructure) / completely unworkable (abandon but summarize lessons learned). Goal: take ideas from your mind → bring them into reality → show them to people → as quickly as possible.
▸ iOS Design System: Make colors, fonts, and icons operate under the same logic and consistency. 5 directions: familiarity (maintain established habits) / consistency (global redefinition) / clear information hierarchy (gradient colors) / accessibility / simple and easy to develop.
▸ Inclusivity is a journey, not a destination: Support multiple senses + provide personalization + use accessibility APIs + track "inclusivity tech debt"(know where gaps remain and plan improvements). For details see Apple HIG Accessibility and Ethics (Nine Principles / Inclusivity / Privacy / Copywriting / RTL).
Derived from iOS and macOS systems and frameworks (design principles / philosophy / ML experiences / intelligence / sound / haptics / fluid interfaces / multilingual support / prototyping, ~30 articles total). For the accessibility special topic see Apple HIG Accessibility and Ethics (Nine Principles / Inclusivity / Privacy / Copywriting / RTL); for visual foundations see Apple HIG Visual Foundations (Colors / Fonts / Layout / Materials / Motion / Dark Mode / Icons / SF Symbols / Branding); motion also has a quick reference in Foundations.
Sources and Related Materials
- Apple Design Guidelines Overview + Full Library Reverse-Lookup Map (Core HIG Navigation)
- Apple HIG Visual Foundations (Colors / Fonts / Layout / Materials / Motion / Dark Mode / Icons / SF Symbols / Branding)
- Apple HIG Accessibility and Ethics (Nine Principles / Inclusivity / Privacy / Copywriting / RTL)