全库最"方法论"的一块——别的 wiki 讲"用哪个组件",这里讲为什么。这些原则普适、永恒,适用于一切设计(不只是 App)。读完你会有一套"评判设计好坏的语言"。
一、设计哲学:为什么叫 Human Interface
Apple 用 Human Interface 而非 User Interface(用户界面)——因为 "Human" 比 "User" 更能反映设计的终极目标:服务于人。
设计的终极目标是为人服务。 真正重要的是 App 如何满足人的情感和实际需求:安全感与可预见性、知识与理解、完成任务实现目标、体验美与喜悦。好设计让人不用学也会用,感到舒适和自信。
▸ 意图设计 Intentional Design 5 要素(每个伟大产品的共通点:更好满足人的诉求)
| 要素 | 含义 | 案例 |
|---|---|---|
| 极简化 Radical simplification | 移除不必要元素,让用户专注实际需求 | iTranslate Converse 整屏一个大按钮(按住说话即翻译) |
| 深刻理解 Deep Understanding | 挖掘潜在问题而非表面需求 | Streaks Workout 发现用户"惰性",减少每次选择负担+引入随机性 |
| 极端聚焦 Extreme Focus | 专注小众极端用户,反而找到普适方案 | Rollaboard 行李箱只为飞行员(0.1% 用户)设计,却成行业标准 |
| 个人联系 Personal Connection | 个性化情感化,让用户觉得"为我定制" | Carrot Weather "毒舌"天气(参考家人个性) |
| 直接沟通 Direct Communication | 清晰直接,避免复杂模糊 | WWDC App 的 Tab Bar / Tinycards 翻卡 / Gorogoa |
▸ 质量 The Qualities of Great Design(什么是"好")
质量 = 大家公认的"好" + 非随机(经精心设计)+ 投入大量时间与关怀 + 让用户感到"已经被替你想到了" + 用起来毫无痛苦 + 注意力全在任务上。关怀有两个维度:够不够在意让产品达到最好;够不够在意用户(多样性而非自己的审美)。比喻:设计如登山,付出的汗水让登顶的景色更壮丽。
二、12 条核心设计原则(贴工位上的清单)
这 12 条是 Apple 用"机场/夏威夷之旅/餐厅"等生活类比讲透的普适原则。它们告诉你"为什么这么做",不是"怎么做"。
mindmap
root((12 核心原则))
导航类
Wayfinding 指引
Feedback 反馈
Visibility 可见性
Consistency 一致性
认知类
Mental Model 心智模型
Affordance 功能性暗示
Progressive Disclosure 渐进揭示
80/20 原则
布局类
Proximity 接近性
Grouping 分组
Mapping 映射
Symmetry 对称性
| 原则 | 一句话 | 生活类比 + 应用 |
|---|---|---|
| Wayfinding 指引 | 每个界面都回答"我在哪/能去哪/到了会看到啥/附近有啥/怎么出去" | 机场标志系统;导航栏标题=我在哪、标签栏=能去哪、返回按钮=怎么出去 |
| Feedback 反馈 | 每个操作都要确认反馈,4 种:状态/完成/警告/错误 | 汽车仪表盘;相机录制三信号(红点+时间码+按钮态);Apple Pay 成功动画+声;表单内联校验;Things 3 把"6月31日"自动改7月1日 |
| Visibility 可见性 | 看不到的反馈=没反馈;关键状态高层级展示 | 邮件徽章 vs 进每封邮件看;在简洁与信息密度间权衡 |
| Consistency 一致性 | 相似特征相似呈现,遵循平台惯例 | 汽车刹车在左油门在右;图标/术语/导航用用户熟悉的;一致性胜于创新(除非有强理由) |
| Mental Model 心智模型 | 不符合用户心智模型=不直观 | 莫提默水龙头(双把手控温控流,外观一样但操作全变→严重可用性问题);改用户心智模型风险极大,必须确保好处明显且测试过 |
| Affordance 功能性暗示 | 物体设计本身暗示可做什么 | 盘子暗示放食物、滑块暗示拖动、按钮暗示点击;按钮=物理按钮的高度抽象 |
| Progressive Disclosure 渐进揭示 | 逐步从简到繁,管理复杂度 | 点芝士汉堡时服务员一步步问;汉堡菜单/多步表单/高级选项 |
| 80/20 原则 | 80% 收益来自 20% 功能,隐藏次要功能 | 打印对话框默认只显打印机/份数/页码,更多控制点一下才出 |
| Proximity 接近性 | 控件离影响对象越近越直观 | 灯开关在各自房间;Keynote 对象创建工具在画布正上方 |
| Grouping 分组 | 相关元素聚在一起,赋予结构 | 一组开关大多控灯就假设其他也控灯;复制/剪切/粘贴成组 |
| Mapping 映射 | 控件排列与受控对象布局一致 | 开关顺序对应灯的布局;最好的映射是直接操作对象(手势/指针) |
| Symmetry 对称性 | 反射对称给平衡感,平移对称给秩序感 | 天气 App 居中对称;时钟 App 城市的均匀重复 |
铁律:这 12 条会互相拉扯——过多反馈让人烦、过多可见性分散注意、过多渐进揭示降效率。设计的挑战就是平衡,要有分寸和判断力。 哪条最重要因平台/屏幕/场景/用户经验而异。
三、流畅界面 Fluid Interfaces(Apple 动效的灵魂)
流畅的本质:界面感觉像是用户思想和身体的延伸(不只是高帧率)。核心是让界面与人的思维和运动方式对齐。
▸ 动态运动 Dynamic Motion vs 定时动画 Timed Animation(最关键的区分)
| 定时动画 | 动态运动(推荐) | |
|---|---|---|
| 模式 | 每次交互触发一段预设独立动画,放完才能下一步 | 交互持续影响界面行为,连续实时更新 |
| 体验 | 用户被"接管",有延时感 | 操作与反馈无间隔,跟手自然 |
▸ 6 个流畅子原则(让界面"像我们一样思考")
- 即时响应 + 持续重定向 —— 立即响应输入,且允许随时中断改向(iPhone X 上滑可在"回主屏/多任务"间随时切;靠检测手指加速度峰值精准判断意图)
- 空间一致性 —— 元素进出遵循一致路径(点列表项从右滑入、返回从右滑出),模仿现实空间记忆
- 沿手势方向提示 —— 微妙提示引导操作方向
- 轻量化交互 + 放大输出 —— 轻滑(保留手势动能)→ 远滚动;控制中心按压模块向手指方向生长(暗示)
- 橡皮筋效果 Rubberbanding —— 到边界柔和回弹,而非"撞墙";也用于元素间平滑交接
- 平滑动态 + 用行为代替动画 —— 像现实物体般连续行为;帧率不是流畅唯一因素(相邻帧位移过大会闪烁),用动态模糊/运动拉伸在每帧加信息(iPhone X 开 App 图标弹性拉伸成全屏)
▸ 弹性物理 Elastic Behaviors:把内容看作"连弹簧的球",3 参数(质量/刚度/阻尼)→ 简化为 2 个参数:阻尼 + 响应。建议:无方向动力的交互用 100% 阻尼(无过冲,精确停),有手势动力的用 80% 阻尼(有弹性回应动力)。
▸ 投影动量 Projected Momentum(FaceTime 画中画案例):别只看结束位置(就近吸附会停中间),要先用手势速度预测最终落点再移动,保留动量→ 跟手。这个"投射找终点"思路可复用到拖拽/缩放/旋转。
四、从概念到界面 From Concept to Interface(完整设计流程实战)
Apple 用一个"黑胶唱片 App"从 0 优化的全过程,演示设计的 4 个递进层次。这是最值得照搬的工作流。
graph LR
A["1 Structure 结构<br/>信息架构:列功能→学用户→整理洞察"] --> B["2 Navigation 导航<br/>标签栏+工具栏<br/>回答我在哪/能做什么/能去哪"]
B --> C["3 Content 内容<br/>渐进揭示+主题分组<br/>列表 vs 集合"]
C --> D["4 Visual 视觉<br/>视觉层级+系统文字样式<br/>统一色板+语义色"]
· 结构:好结构让体验自然衔接。先列全功能 → 设想用户怎么用 → 删冗余/改模糊命名/归类。"如果我自己说不清重点,App 自然让用户搞不清"。 · 导航:用标签栏(只导航不操作,所以把"添加"移进页面内)+ 工具栏(给页面标题+特有操作,回答"我在哪/能做什么")。标签命名+图标要让用户不点进去就知道内容。 · 内容:渐进揭示(先显几个,展开看更多);主题分组(按时间/季节/相似度);图多用集合视图。 · 视觉:建视觉层级(把最重要的做成"视觉锚点":变大+增对比);用系统文字样式(自动适配深色/大字号,不靠感觉排版);统一色板+复古图形给个性;用语义色(label/secondarySystemBackground 按用途命名,自动适配)。
金句:"设计永远做不完,也没有唯一正确答案。真正有效的设计不是每个元素单打独斗,而是它们共同协作。"
五、多感官设计:声音 + 触觉
▸ 声音设计:声音是不受语言限制的通用语言,塑造体验、帮助理解交互、赋予设备"声音"。
通知音 4 原则:辨识度(独特、与品牌匹配,如 Dark Sky 的"液体感"暗示下雨)/ 与 App 设计匹配 / 简单不打扰(会重复听)/ 清晰度(嘈杂环境穿透但不刺耳,如 iMessage)。界面音:适度用、音量低、帮助并愉悦、创造本能反应。从一开始就考虑声音,别最后才加。
▸ 触觉设计 3 原则(Core Haptics)
- 因果关系 Causality —— 想象与物理对象互动会是什么声音/感觉(Apple Pay 成功的"钱的声音")
- 和谐 Harmony —— 视觉+音频+触觉同步(球落地:撞击声+瞬态触觉,按速度调振幅);Apple Watch 表冠旋转的声音录自自行车轮毂
- 实用性 Utility —— 反馈必须有明确价值(AR 中按距离调触觉强度)
· 两个构建块:瞬态 Transient(短促如轻拍,给通知/确认)+ 持续 Continuous(延续如振动,给加载/滑动状态)。 · 巧思:闹钟触觉先于声音(增期待);"幽灵触觉/预激效应"(第一下唤醒皮肤,后续更易感知);watchOS 左右导航用不同强度模式区分方向。 · 技术限制:硬件差异(老设备弱)/ 人感知频率 20-300Hz / 费电(别过度)/ 个体敏感度差异(给自定义强度)/ 环境干扰(重要通知配多感官)。
六、多语言与文化(全球化设计)
· 输入:中日文用"标记文本"显临时拼音,绝不在标记文本阶段改输入(打断拼音);印地语字符连体,用颜色高亮代替改字重;斜体在阿拉伯/印地/日韩/中文等无意义,慎用。 · 显示:TextKit 2 保证文字不破碎;按语言偏好优化行间距。 · 本地化:自动语法引擎按性别/名词性别/发音自动变形(德/西/法/印地/韩…),免手写多版本;数字格式随地区(印度本地数字 ४४);图标也本地化(textformat 在希伯来语变 אא、list.number 在阿语数字在右)。 · 文化:避免成语俚语("从 A 到 Z"无法译韩语→改"从头到尾");尊重文化规范(印度烹饪 App 别推牛肉);颜色文化差异(中国股市涨红跌绿)。
七、智能与 ML 体验(为 AI 功能设计)
▸ 智能交互 intelligence:让产品感觉"懂你"(理解目标/习惯/偏好),减少点击和干扰,基础是尊重隐私(设备上处理、明确授权)。三概念:意图 Intents(定义关键操作+参数)→ 学习 Learning(设备上学习行为模式)→ 执行 Execution(预测后重建意图,可后台执行)。
▸ 系统智能用户旅程(从下载前到高级用户):发现(Maps 从 Messages 取地址)→ App Clip(NFC 免下载试用)→ 初用(搜索界面快捷方式)→ 习惯(Siri 建议)→ 智能小组件(Smart Stack 自动轮显)→ 快捷指令自动化。
▸ ML 体验设计(数据 + 指标)——给做 AI 功能的 PM 的关键警示:
· 数据要设计:数据决定模型行为和体验;关注偏差与公平(Portrait 模式特意收集多种族数据);动态调整,标准学术数据集不代表真实体验。 · 指标不等于体验:指标=数字=科学准确感,但数字代表不了"好体验"这种抽象主观的东西。 App Store 若纯按"使用时长"推荐,用户会被困在游戏里→ 所以补充编辑内容增加多样性。 · 4 件事:理解错误(Face ID 双胞胎误识→提供密码兜底)/ 设计失败场景(不只画成功流程)/ 评估真实体验(键盘触控区调优最终看用户输入感受)/ 进化指标(照片搜索土狼误识为狗→持续改进)。
八、设计流程方法
▸ 快速原型 60' Prototyping:Make(Keynote 画简单原型)→ Show(给团队看)→ Learn(目标不是回答所有问题,而是"知道你不知道什么")→ 迭代。原型 3 种命运:方向对(继续)/ 需改进(优化重组)/ 完全不行(放弃但总结教训)。目标:把脑中想法 → 带到现实 → 给人看 → 尽可能快。
▸ iOS Design System:让颜色/字体/图标在同一逻辑和一致性上运行。5 个方向:熟悉(保持习惯)/ 一致(全局重定义)/ 信息层级清晰(梯度色彩)/ 可访问性 / 简单易开发。
▸ 包容性是路不是终点:支持多感官 + 提供个性化 + 用无障碍 API + 追踪"包容性技术债"(知道还差在哪,有计划改进)。详见 Apple HIG 无障碍与伦理 Accessibility(九大原则/包容性/隐私/文案/RTL)。
源自 iOS macOS 系统与体系(设计原则/哲学/ML 体验/智能/声音/触觉/流畅界面/多语言/原型,共 ~30 篇)。无障碍专题见 Apple HIG 无障碍与伦理 Accessibility(九大原则/包容性/隐私/文案/RTL);视觉基础见 Apple HIG 视觉基础 Foundations(颜色/字体/布局/材质/动效/暗黑/图标/SF Symbols/品牌);动效在 Foundations 也有速查。