SuperAPI AI 工具集

SwiftUI UI/UX Review

前端与建站

查看项目

更新于 10-13 15:49

技能介绍

用途

SwiftUI UI/UX Review 用于对 SwiftUI 界面进行全面的 UI/UX 审查与分析,适用于 iOS 17/18/26+,重点关注动画、Liquid Glass 设计语言、Apple Human Interface Guidelines(HIG)、无障碍标准以及现代 UI/UX 模式。

典型使用场景包括:

  • 审查动画,例如弹簧动画、关键帧动画、转场、微交互、Liquid Glass 变形
  • 审查 SwiftUI 代码是否符合 UI/UX 最佳实践
  • 审计是否遵循 iOS 26 Liquid Glass 设计语言
  • 检查无障碍实现(VoiceOver、动态字体、减弱动态效果)
  • 分析导航、引导页、标签栏、Sheet 与模态模式
  • 识别常见 UI/UX 错误与反模式
  • 评估动画性能与时长
  • 提供可操作的界面改进建议

主要能力

审查流程

第一步:收集上下文。 审查前先收集:目标 iOS 版本(iOS 17+ 用于 PhaseAnimator/KeyframeAnimator;iOS 26+ 用于 Liquid Glass)、应用用途、用户群体、既有设计系统。

第二步:结构分析。 检查导航(NavigationStack 使用、标签栏实现、深度链接支持)、状态管理(@State、@Binding、@Observable 模式、数据流)、视图层级(组件拆分与复用)、修饰符(顺序与无障碍修饰符)、动画(弹簧参数、时序、转场、无障碍合规)。

第三步:动画审查。 关注时长(100-500ms)、弹簧(交互式使用,dampingFraction 合适)、目的性(传达变化而非干扰)、性能(无掉帧,复杂视图用 drawingGroup())、无障碍(遵循系统设置,检查 accessibilityReduceMotion)。文档给出推荐弹簧参数,如按钮按压 .spring(response: 0.3, dampingFraction: 0.6)、模态呈现 .spring(response: 0.5, dampingFraction: 0.8);iOS 17+ 预设 .bouncy、.smooth、.snappy。iOS 26+ 新 API 包括 @Animatable 宏、@AnimatableIgnored 宏、.symbolEffect(.drawOn/.drawOff)、.backgroundExtensionEffect()、tabViewBottomAccessory { }、ToolbarSpacer、scrollExtensionMode(.underSidebar)、Sheet 变形(matchedTransitionSource + navigationTransition(.zoom))、富文本编辑器、标签间距等。同时列出常见动画问题与严重级别及解决方案。

第四步:Liquid Glass 合规(iOS 26+)。 说明玻璃变体仅有 3 种:.regular、.clear、.identity,并特别警告 .prominent 不是玻璃变体,强调按钮应使用 .buttonStyle(.glassProminent)。列出适合使用与应避免使用 Liquid Glass 的场景,以及玻璃变形动画相关 API(GlassEffectContainer、glassEffectID、glassEffectUnion,配合 .bouncy)。同时列出 iOS 26 新布局 API。

第五步:模式验证。 覆盖引导页模式(iOS 18+ 推荐 ScrollView + scrollTargetBehavior(.viewAligned))、标签导航(每个标签独立 NavigationStack)、Sheet 与模态、加载状态(.redacted、ContentUnavailableView)、计数器/数字显示、权限请求模式(App Store 指南 5.1.1,权限前置提示不得有退出/跳过按钮)。

第六步:无障碍审计。 必查修饰符包括 .accessibilityLabel()、.accessibilityHint()、.accessibilityElement(children:)、.accessibilityHidden();动态字体、减弱透明度、减弱动态效果、颜色对比度。

第七步:生成报告。 报告结构包含 UI/UX Review Summary、Strengths、Animation Issues、UI/UX Issues、Recommendations、Code Examples。

快速参考

文档提供常见问题速查表(问题、严重级别、解决方案),以及动画 API 快速参考(iOS 17+ 动画器如 PhaseAnimator、KeyframeAnimator、转场、触觉反馈)和设计令牌参考(间距刻度 xs 4pt、sm 8pt、md 16pt、lg 24pt、xl 32pt;语义颜色)。

附加资源

文档列出参考文件与外部资源,包括 Apple 官方文档(Human Interface Guidelines - Motion、Animating views and transitions、Applying Liquid Glass to custom views、多场 WWDC 演讲)、动画库(Pow、AnimatedTabBar、open-swiftui-animations、Hero、FlowStack、SkeletonUI)、英雄转场示例、Liquid Glass 与 iOS 26 相关资料及教程。

使用方式

该技能以审查者视角运行:先收集上下文,再进行结构分析、动画审查、Liquid Glass 合规检查、模式验证与无障碍审计,最后按指定结构生成报告。文档中给出了推荐弹簧参数、API 示例代码与合规/不合规的权限请求代码示例。