SuperAPI AI 工具集

ios-ux-design

设计与创作

查看项目

更新于 10-15 16:36

技能介绍

用途

本技能用于在分析 iOS 应用 UI/UX、评估 iOS 设计模式、提出 iOS 界面改进方案或创建 iOS 实现建议时激活。它定位为 iOS UX 设计专家,专注于 Apple 平台原生设计,深度参考 iOS Human Interface Guidelines、SwiftUI 模式与系统原生交互。

核心设计原则

技能以 Apple 的基础设计价值为准绳:

  • 清晰(首要原则):文本在各尺寸下使用 San Francisco 系统字体保持可读;图标使用 SF Symbols 精确清晰;装饰subtle而恰当;功能驱动设计决策;内容填满整个屏幕。
  • 顺从(内容优先):内容至上,UI 元素让位于内容;全出血布局最大化内容;半透明与模糊提供上下文而不造成干扰;界面外框保持最小视觉重量;流畅动效提供意义。
  • 深度(视觉层级):分层与动效传达层级与活力;清晰的视觉层提供应用结构;真实的动效增强对界面的理解;半透明背景暗示深度。
  • Liquid Glass(iOS 26+):具有玻璃光学特性的半透明元素;对光线、运动和内容动态适应;更精致的配色与更大胆的排版;左对齐文本提升扫读性;同心性在硬件与软件间建立统一节奏。

iOS 特有的交互范式

触控优先设计,区别于桌面端的键盘优先:

  • 触控目标:所有交互元素最小 44x44pt(是 pt 而非 px,点会随屏幕密度缩放)。
  • 拇指区域:在较大设备上把主要操作放在拇指可舒适触及的范围。
  • 边缘情况:避免把关键交互放在系统手势所在的屏幕边缘。

手势词汇:轻点(主要操作、选择)、滑动(导航、显示操作)、长按(上下文菜单、预览)、捏合(缩放)、拖拽(重排、跨上下文移动)、边缘滑动(返回,系统级预期)。

系统手势不可覆盖:底部边缘上滑(主屏/多任务)、右边缘滑动(应用切换器,部分设备)、右上滑动(控制中心)、左上滑动(通知中心)、左边缘滑动(应用内返回)。仅在游戏等沉浸式体验中谨慎使用边缘保护。

分析方法论

分析 iOS 应用时按以下维度展开:

  1. 架构评估:SwiftUI 与 UIKit 的框架选择是否恰当;识别 MVVM、Clean Architecture 或 SwiftUI 自然 MVC;梳理标签栏、层级导航、模态呈现的导航结构;评估 @State、@StateObject、ObservableObject 的使用;识别视图组合与设计令牌的复用。
  2. iOS 原生合规性:是否使用 UINavigationController、UITabBarController 或 SwiftUI 等价物;是否使用 SF Symbols 而非自定义图标;是否使用语义颜色以支持明暗模式;San Francisco 字体与动态字体支持;UIViewPropertyAnimator 或 SwiftUI 过渡的使用。
  3. 触控交互审计:测量所有交互元素(最小 44x44pt);验证标准手势实现;评估触觉反馈、视觉状态变化、动画响应;测试 VoiceOver、动态字体与减弱动态效果。
  4. 导航模式评估:标签栏(扁平架构,3-5 个同等重要的主区域,始终可见,每个标签维护自己的导航栈,最重要内容置于最左,iOS 26+ 底部含专用搜索标签);层级导航(树状信息,push/pop 与返回按钮,左边缘滑动返回,大标题在顶部、滚动时内联);模态呈现(全屏用于关键流程完全接管,page sheet 部分覆盖并可下滑关闭,form sheet 在 iPad 上居中)。模态应有清晰的完成与取消;当可能丢失数据时确认;不要用含义模糊的“X”关闭含用户输入的模态。
  5. 视觉设计系统审计:
    • 颜色:必须使用语义颜色(label 系列、背景系列、分组背景系列、填充系列、systemBlue 等系统色)。禁止硬编码 RGB、hex 或直接使用 UIColor.white/black。自定义颜色必须定义四个变体(浅色、深色、浅色高对比、深色高对比)。
    • 排版:San Francisco 系统字体;始终使用语义文本样式(largeTitle、title1/2/3、headline、body、callout、subheadline、footnote、caption1/2);所有文本随用户偏好缩放;九种字重;光学尺寸在 20pt 阈值自动选择。
    • SF Symbols:SF Symbols 7 提供 6,900+ 符号;九种字重、三种缩放;自动与文本对齐;渲染模式含单色、层级、调色板、多色;不要嵌入固定尺寸的框架中;使用 HIG 推荐列表中的语义符号名。

信息架构与组件

标签栏适用于同级信息层级、高频访问内容与主功能,反模式包括超过 5 个标签、标签触发操作而非导航、导航时隐藏标签栏、通过标签进入模态。层级导航建议最小化深度(最多 3-4 层),每层有明确目的,为深层级提供搜索作为逃生通道。模态任务流应有清晰入口、聚焦的任务 UI(不显示标签栏)、明确的退出操作,可包含导航栈以支持多步流程。搜索模式包括 iOS 26 专用搜索标签(持久访问、最近搜索、带分段的范围搜索)或传统搜索栏。

组件设计方面,列表是 iOS 应用的基础;列表样式含 insetGrouped(现代默认)、grouped、plain、sidebar;行可含文本、图标或图像与配件(chevron、disclosure、checkmark);滑动操作中前导为正向操作、尾部为破坏性操作(放最右),最多 3-4 个。导航栏最多三行:控制与操作行、大标题行(SF Pro Display 34pt 粗体,滚动时折叠)、搜索行。按钮层级中主操作每屏一个、填充样式,次操作可用着色样式,破坏性操作使用 systemRed 并需确认。表单与输入包括系统圆角矩形文本框(最小 44pt 高、清除按钮、占位符、匹配键盘类型)与分组表单。选择器分内联(3-7 选项)、滚轮(日期/时间或长列表)、菜单(2-5 选项)。

无障碍要求(非可选)

  • VoiceOver:所有交互元素需辅助功能标签;非显然操作需提示;逻辑导航顺序;按钮、标题、可调节等特征。
  • 动态字体:使用文本样式而非固定尺寸;在所有辅助尺寸下测试;允许多行换行;为大文本调整布局。
  • 颜色与对比度:小字 7:1(WCAG AAA),大字 4.5:1(WCAG AA);不单独依赖颜色;支持增强对比模式(四个颜色变体)。
  • 减弱动态效果:提供基于动效 UI 的替代方案;遵循减弱动态效果设置;用淡入淡出代替滑动/缩放。
  • 其他:支持粗体文本偏好、按钮形状偏好;用 VoiceOver 与语音控制测试;正文字体最小 11pt。

SwiftUI 相关模式与实现

资料给出 SwiftUI 示例:使用 TabView + NavigationStack 构建标签式结构,List + Section + NavigationLink + navigationDestination 构建列表与跳转,使用语义颜色(.primary、.tint(.blue)、.background)与 SF Symbols(含 symbolRenderingMode、imageScale、Label)。深色模式要求使用动态颜色并提供四个变体,图片资源需为明暗外观分别提供,优先使用 SF Symbols 或保留矢量数据的 PDF 矢量。材质与模糊效果使用系统材质(ultraThinMaterial 至 ultraThick)。屏幕适配需基于尺寸类(紧凑/常规宽度)与安全区域(刘海、灵动岛、Home 指示器)。iPad 需考虑多列布局、popover、键盘快捷键与拖放。

实施优先级

  • 快速见效:用语义颜色替换硬编码颜色、用 SF Symbols 替换自定义图标、实现标准滑动返回、为主要交互添加触觉反馈、修正小于 44pt 的触控目标。
  • 战略改进:实现正确的标签栏导航结构、为聚焦任务添加模态呈现、集成动态字体支持、实现 VoiceOver 无障碍、为内容更新添加下拉刷新。
  • 长期愿景:迁移到 SwiftUI(若仍在使用 UIKit)、建立含设计令牌的完整设计系统、高级无障碍功能(语音控制)、iPad 优化布局与分屏、小组件与实时活动集成。

质量检查项

交付建议前需确认:每个颜色都是语义色或已定义四个变体;所有文本使用 San Francisco 与文本样式;适当位置使用 SF Symbols 而非自定义 PNG;触控目标为 44x44。

限制

该技能面向 iOS 原生设计语境,资料未提供对其他平台、非 Apple 设计规范或具体第三方设计系统的支持说明;也未提供收费、价格、平台可用性或实际效果信息。