⚡

iOSSwiftUI设计最佳实践Skill ios-design

这个技能提供基于Apple设计原则的SwiftUI iOS界面开发最佳实践指南，包含62条规则，覆盖状态管理、布局、导航、可访问性等关键方面，适用于移动开发中的iOS应用界面构建。关键词：SwiftUI, iOS, 设计, 最佳实践, 移动开发, 界面, 规则, 可访问性。

移动开发 0 次安装 0 次浏览 更新于 3/18/2026

name: ios-design description: 基于Creative Selection和Design Like Apple原则的SwiftUI界面实现模式，对齐iOS 26 / Swift 6.2的clinic模块化MVVM-C架构。在构建新SwiftUI视图/屏幕时使用，同时尊重Domain/Data边界、App-target route-shell导航和生产级可访问性/交互标准。

Apple SwiftUI iOS 设计最佳实践

一个构建者指南，用于在SwiftUI中实现Apple质量的iOS界面，基于两部基础设计文本：

  • Ken Kocienda — Creative Selection（对用户的同理心、编码中的工艺、选择最佳解决方案的品味、迭代精炼的演示文化）
  • John Edson — Design Like Apple（系统思维、产品即营销、设计出声、设计有信念）

包含62条规则，分为8个基于原则的类别。每条规则识别一个特定的反模式，将修复基于命名原则，并提供正确的iOS 26 / Swift 6.2 SwiftUI实现。

范围与兄弟技能的关系

这个技能是构建和实现指南 — 它教授如何使用Apple质量的模式从头开始构建新的SwiftUI界面。当与ios-ui-refactor（审核/重构现有UI）一起加载时，这个技能涵盖了ios-ui-refactor后来审计的绿色实现。使用这个技能构建新屏幕；使用兄弟技能评估和改进现有界面。

Clinic架构合约（iOS 26 / Swift 6.2）

本技能中的所有指导假设clinic模块化MVVM-C架构：

  • 功能模块仅导入Domain + DesignSystem（从不导入Data，从不导入兄弟功能）
  • App目标是汇聚点，拥有DependencyContainer、具体协调器和Route Shell布线
  • Domain保持纯Swift，定义模型加上仓库、*Coordinating、ErrorRouting和AppError合约
  • Data拥有SwiftData/网络/同步/重试/后台I/O，并实现Domain协议
  • 读写流默认为过期时重新验证读取和乐观排队写入
  • ViewModels直接调用仓库协议（不使用默认用例/交互层）

何时应用

参考这些指南当：

  • 从头开始构建新的SwiftUI视图和屏幕
  • 选择语义颜色、系统排版和间距网格（Edson的系统思维）
  • 用@State、@Binding、@Observable、@Environment管理状态（Kocienda的工艺）
  • 选择正确组件：List vs LazyVStack、Sheet vs FullScreenCover（Kocienda的品味）
  • 用@ViewBuilder、自定义修饰符和值类型组合视图（Kocienda的创意选择）
  • 用NavigationStack、TabView、sheet实现导航（Edson的对话）
  • 用堆栈、网格、框架和自适应布局布局内容（Edson的设计出声）
  • 确保VoiceOver、触摸目标、深色模式和减少运动支持（Kocienda的同理心）
  • 添加过渡、加载状态和动画抛光（Edson的产品即营销）

按优先级的规则类别

优先级 类别 原则 影响 前缀 规则
1 每个像素的同理心 Kocienda “同理心” · Edson “设计是关于人的” 关键 empathy- 8
2 视觉系统 Edson “系统思维” · Kocienda “收敛” 关键 system- 8
3 工艺：状态为基石 Kocienda “工艺” 关键 craft- 7
4 创意组合 Kocienda “创意选择” 高 compose- 6
5 品味：正确选择 Kocienda “品味” · Edson “设计有信念” 高 taste- 8
6 导航作为对话 Edson “设计是对话” · Kocienda “演示” 高 converse- 9
7 设计出声：布局 Edson “设计出声” · Kocienda “交叉” 高 layout- 8
8 产品说话 Edson “产品即营销” · Kocienda “演示文化” 中 product- 8

快速参考

1. 每个像素的同理心（关键）

Kocienda：“同理心 — 尝试从其他人的角度看世界。” Edson：设计始于手持设备的人。

2. 视觉系统（关键）

Edson：“缩小以看对象间的关系。” Kocienda：收敛 — 许多决策朝向一个连贯整体。

3. 工艺：状态为基石（关键）

Kocienda：“工艺 — 应用技能以实现高质量结果。”

4. 创意组合（高）

Kocienda：“创意选择 — 伟大软件通过组合和重组构建。”

5. 品味：正确选择（高）

Kocienda：“品味 — 精炼判断，选择唯一正确解决方案的能力。” Edson：承诺一种方法并完善它。

6. 导航作为对话（高）

Edson：“设计是产品与人之间的对话。” Kocienda：演示作为界面是否清晰说话的对话。

7. 设计出声：布局（高）

Edson：“设计出声 — 原型无休止直到布局感觉不可避免。” Kocienda：技术与自由艺术的交叉。

8. 产品说话（中）

Edson：“产品本身即营销。” Kocienda：每个动画和加载状态构建以经受Steve Jobs审查。

如何使用

阅读个别参考文件获取详细解释和代码示例：

参考文件

文件 描述
references/_sections.md 类别定义和原则基础
assets/templates/_template.md 新规则模板
metadata.json 版本和参考信息