# Apple HIG SwiftUI iOS 26 / Swift 6.2 最佳实践首席设计师根据 Apple 质量标准评估和重构 SwiftUI 界面的视角，以 Rams、Segall 和 Edson 为基础。包含 8 个类别的 51 条规则，每条规则都基于来自三个基础设计文本的具体原则： * **Dieter Rams** — _优秀设计的十项原则_（“更少，但更好”，“设计应该诚实”） * **Ken Segall** — _Insanely Simple_（简单是直观、美观产品的核心原则） * **John Edson** — _Design Like Apple_（以设计为中心的文化，完美的原型设计，产品即营销）类别是通过视觉审查过程排序的：首先删除哪些内容，然后澄清哪些内容，然后使哪些内容变得诚实、隐形、系统、彻底、持久，最后完善哪些内容。 ## 范围以及与兄弟姐妹技能的关系这项技能是**重构和审查镜头**——它评估现有的 UI 并识别要修复的视觉反模式。当与“ios-design”（构建新 UI）、“ios-hig”（HIG 合规性）或“swift-refactor”（代码级重构）一起加载时，此技能会通过更详细的“不正确 -> 正确”转换和“何时不应用”指导来取代重叠规则。使用此技能来审核和改进现有屏幕；使用兄弟姐妹进行绿地实施。 ## 诊所架构合约（iOS 26 / Swift 6.2）本技能中的所有指导均假定诊所模块化 MVVM-C 架构： * 功能模块仅导入 `Domain` \+ `DesignSystem` （从不导入 `Data`，从不导入同级功能） * App目标是汇聚点，拥有`DependencyContainer`、具体协调器和Route Shell接线 * `Domain` 保持纯粹的 Swift 风格，并定义模型以及存储库、`*Coordinating`、`ErrorRouting` 和 `AppError` 合约 * `Data` 拥有 SwiftData/network/sync/retry/background I/O 并实现域协议 * 读/写流默认为 stale-while-revalidate 读取和乐观排队写入 * ViewModel 直接调用存储库协议（无默认用例/交互器层） ## 何时申请在以下情况下请参考这些指南： * 检查现有 SwiftUI 屏幕的视觉质量问题 * 审核屏幕上的每个元素是否都占有一席之地（Rams #10） * 评估界面是否不言自明，没有工具提示（Rams #4） * 检查颜色、状态和层次结构是否真实（Rams #6） * 确保动画和材质是不可见的，而不是装饰性的（Rams #5） *验证间距、半径和颜色形成一个连贯的系统（Edson“系统思考”） * 确认边缘情况 - 减少运动、触摸目标、安全区域 - 得到处理（Rams #8） * 采用 iOS 26 / Swift 6.2 API 来改进以前不可能的交互（Edson“Design Out Loud”） ## 按优先级规则类别优先|类别 |原理|影响 |前缀 |规则 ---|---|---|---|---|--- 1 |更少，但更好 | Rams #10 + Segall“简约思考”|关键 | `少-` | 7 2 |不言而喻的设计 |公羊#4 + 西格尔“思考人类”|关键 | `明显-` | 6 3 |诚实的接口|公羊#6 + Segall“残酷思考”|关键 | `诚实-` | 6 4 |隐形设计| Rams #5 + Edson“产品就是营销”|高| `隐形-` | 6 5 |系统，而不是碎片|埃德森“系统思考”+ Rams #8 |高| `系统-` | 6 6 |彻底到最后的细节|公羊 #8 + 公羊 #2 |高| `彻底-` | 7 7 |持久胜于时尚 | Rams #7 + Edson“信念设计”|中高| `持久-` | 5 8 |通过迭代完善 |埃德森“大声设计”+ Rams #1/#3 |中 | `精致-` | 8 ## 快速参考 ### 1\.更少，但更好（关键） Rams #10：“好的设计就是尽可能少的设计。”西格尔：苹果公司通过对一千件事说“不”而取得了成功。 * [`less-single-focal`]() \- 每个屏幕一个主要焦点 * [`less-type-restraint`]() \- 每个屏幕限制 3-4 个不同类型的处理 * [`less-one-typeface`]() \- 每个应用程序一种字体，根据重量和大小进行区分 * [`less-color-restraint`]() \- 为小型交互元素保留饱和颜色 * [`less-one-color- Purpose`]() \- 每种语义颜色只服务于一个目的 * [`less- Purposeful-motion`]() \ - 每个动画都必须传达状态变化或提供反馈 * [`less-fewer-controls`]() \- 删除不服务于核心任务的控件 ### 2\.不言而喻的设计（关键） Rams #4：“好的设计使产品易于理解。” Segall：界面必须以人们理解的方式表达。 * [`evident-visual-weight`]() \- 结合大小、重量和对比度以实现层次结构 * [`evident-whitespace-grouping`]() \- 使用空格分隔概念组 * [`evident-progressive-disclosure`]() \- 对密集信息使用渐进式披露 * [`evident-reading-order`]() \- 将视觉权重与逻辑阅读顺序对齐 * [`evident-navigation-intent`]() \- 用于任务和创建的工作表，推动向下钻取层次结构 * [`evident-label-clarity`]() \- 在不明确的图标上使用清晰的标签 ### 3\.诚实的接口（关键） Rams #6：“好的设计是诚实的。” Segall：没有糖衣的清澈。 * [`honest-semantic-colors`]() \- 使用语义颜色，切勿硬编码黑色或白色 * [`honest-contrast`]() \- 确保 WCAG AA 对比度 * [`honest-dark-mode`]() \- 为每种自定义颜色定义浅色和深色变体 * [`honest-foreground-style`]() \- 在 foregroundColor 上使用 foregroundStyle * [`honest-depth-cues`]() \- 使用材质进行分层，而不是使用投影来实现深度 * [`honest-loading-states`]() \- 显示真实进度，而不是无限期的旋转器 ### 4\.隐形设计（高） Rams #5：“好的设计是不引人注目的。” Edson：产品本身就是营销。 * [`invisible-spring-physicals`]() \- 所有 UI 转换默认为 spring 动画 * [`invisible-spring-presets`]() \- 使用 .smooth 进行日常操作，.snappy 进行交互，.bouncy 进行愉悦 * [`invisible-no-easing`]() \- 对于 UI 元素，优先使用 spring 而不是线性和 escapeInOut * [`invisible-system-materials`]() \- 使用系统材质，而不是自定义半透明背景 * [`invisible-symbol-effects`]() \- 使用内置的symbolEffect，而不是手动符号动画 * [`invisible-content-transitions`]() \- 使用 contentTransition 更改文本和数字 ### 5\.系统，而不是碎片（高）埃德森：“设计是系统思考。”公羊#8：任何事情都不能是任意的或偶然的。 * [`system-spacing-grid`]() \- 所有间距均使用 4pt 基本单位 * [`system-consistent-padding`]() \- 在所有屏幕上使用一致的填充 * [`system-corner-radii`]() \- 标准化每个组件类型的角半径 * [`system-alignment`]() \- 屏幕内每种内容类型的一致对齐 * [`system-color-naming`]() \- 按角色而不是色调命名自定义颜色 * [`system-brand-integration`]() \- 将品牌调色板映射到 iOS 语义颜色角色 ### 6\.彻底到最后的细节（高） Rams #8：“设计过程中的细心和准确性体现了对用户的尊重。” Rams #2：如果用户不能可靠地使用它，那么该产品就失败了。 * [`thorough-reduce-motion`]() \- 始终提供减少运动后备 * [`thorough-touch-targets`]() \- 所有交互元素至少为 44x44 点 * [`thorough-safe-areas`]() \- 始终尊重安全区域 * [`thorough-read-weights`]() \- 避免正文文本使用较轻的字体粗细 * [`thorough-vibrancy-levels`]() \- 将活力级别与内容重要性相匹配 * [`thorough-material-thickness`]() \- 根据对比需求选择材料厚度 * [`thorough-background-interaction`]() \- 启用 peek 样式表的后台交互 ### 7\.持久胜于时尚（中-高） Rams #7：“好的设计是持久的。” Edson：致力于在产品的各个代中持续发出声音。 * [`enduring-system-text-styles`]() \- 使用 Apple 文本样式，从不固定字体大小 * [`enduring-weight-not-caps`]() \- 使用粗细来强调，而不是全部大写 * [`enduring-swipe-back`]() \- 永远不要破坏系统向后滑动手势 * [`enduring-zoom-navigation`]() \- 使用缩放过渡进行集合到细节导航 * [`enduring-card-modularity`]() \- 使用独立的卡片进行仪表板布局 ### 8\.通过迭代完善（中）埃德森：“大声设计”——不断地进行原型设计，直到每次交互都变得不可避免。公羊#1：创新服务于真正的目的。 * [`refined-scroll-transitions`]() \- 使用scrollTransition 实现滚动位置视觉效果 * [`refined-phase-animator`]() \- 使用 PhaseAnimator 进行多步动画序列 * [`refined-mesh-gradients`]() \- 使用 MeshGradient 实现高级动态背景 * [`refined-text-renderer`]() \- 仅将 TextRenderer 用于英雄文本动画 * [`refined-inspector`]() \- 对后缘细节面板使用检查器 * [`refined-multi-detent`]() \- 提供带有拖动指示器的多个片状制动器 * [`refined-matched-geometry`]() \- 使用matchedGeometryEffect进行上下文原点转换 * [`refined-no-hard-cuts`]() \- 始终在状态之间设置动画，即使是最小程度 ## 如何使用阅读各个参考文件以获取详细说明和代码示例： * [章节定义]() \- 类别结构、主要来源和影响级别 * [规则模板]() \- 用于添加新规则的模板 ## 参考文件文件|描述 ---|--- [references/_sections.md]() |类别定义和原则基础 [assets/templates/_template.md]() |新规则模板 [metadata.json]() |版本和参考信息

iOS UI 重构

包含技能