别让加载页像白屏：用 AI + redacted 给 iOS 做骨架屏 (2026)

一个白屏，会让用户以为 App 卡住了

你做一个列表页，接口还没接好，AI 先帮你把 SwiftUI 页面搭出来。最容易被忽略的不是按钮样式，而是加载那几秒：页面一片空白，或者中间只有一个转圈。用户不知道是网慢、接口慢，还是 App 已经挂了。

Apple 在加载体验指南里说，最好的内容加载体验，是在用户意识到等待之前就完成；如果做不到，界面至少要让人知道内容正在加载。1 Apple 也把进度指示器的作用说得很直接：让人知道 App 在加载内容或执行耗时任务时没有卡死。2

今天这一技不是让你设计一套复杂动效，而是让 AI 帮你把「白屏 / 转圈」改成 SwiftUI 的骨架屏。用户先看到页面结构，数据回来后内容再填进去。

技巧原理：先显示结构，再填真实内容

SwiftUI 有一个 redacted(reason:) 修饰符，Apple 的定义是给当前视图层级加上需要遮盖内容的原因。3 你可以把它理解成「把现有界面盖上一层占位外观」。

Hacking with Swift 的示例把它用在文本上：内容会先被渲染出来，但用灰色遮住，表示这还不是最终内容；同一篇文章也提到 unredacted() 可以让某些子视图不被遮盖。4

这正好适合 PM 做首版验收。你不需要先画完整骨架屏，只要告诉 AI：哪些区域是加载中的真实内容，哪些区域是固定控件。AI 再把对应 SwiftUI 容器加上 .redacted(reason: isLoading ? .placeholder : [])。

少量代码线索大概长这样，不需要你自己逐行写：

VStack(alignment: .leading) {
    ProductCard(product: product)
    CheckoutButton()
        .unredacted()
}
.redacted(reason: isLoading ? .placeholder : [])

重点是两件事：第一，骨架屏应该沿用最终页面结构，而不是另写一张临时假页面；SwiftLee 的实践文章也建议在数据加载时保留最终视图结构，让用户先熟悉页面布局。5 第二，固定按钮、页面标题、品牌标签这类已经确定的信息，可以用 unredacted() 保持可见。Apple 对 unredacted() 的定义是移除当前视图层级上的遮盖原因。6

怎么让 AI 帮你改

先不要让 AI 直接写「做个高级加载动画」。那句话太空，AI 很可能给你一堆自定义 shimmer、定时器和复杂状态。你要把需求翻译成页面验收语言。

可以直接复制这段给 AI 编码工具：

请把这个 SwiftUI 页面从「加载时空白 / 只显示 ProgressView」改成骨架屏。要求：
加载中仍保留最终页面的布局结构；
对标题、正文、图片、价格等接口数据使用 .redacted(reason: .placeholder)；
对页面导航、固定按钮、已有图标或品牌标签使用 .unredacted()；
数据加载完成后移除 redacted；
加载期间不要让被遮盖的按钮继续响应点击。

最后一条很重要。Swift with Majid 提醒过，redacted 只是视觉上隐藏数据，按钮仍然可能被点击；如果加载中按钮不该操作，需要你自己禁用。7 PM 不用会写禁用逻辑，但要把这句话写进缺陷单，否则页面看起来是骨架屏，实际上还能误触下单、收藏或提交。

你应该检查哪几处

把 AI 改完后的页面跑起来，只看四个地方。

检查点	你要看到什么	发现问题时怎么改需求
首屏加载	不是空白页，能看出大概有几张卡片、几行信息	「请保留最终列表结构，用占位内容支撑高度」
固定信息	页面标题、返回按钮、底部主按钮等不被灰块盖掉	「这些控件是固定内容，请加 `unredacted()`」
可点击状态	加载中的灰块、按钮不会被误点	「加载中禁用相关交互，数据完成后再恢复」
加载完成	灰块消失，真实内容没有跳动得太夸张	「占位文本长度和真实内容接近，不要用空字符串撑布局」

如果你只能做一个最小动作，就选最核心的列表或卡片。比如「商品列表」「推荐文章」「订单详情」「用户资料」这类页面，骨架屏比一个孤零零的转圈更容易让用户相信页面正在工作。

什么时候别用骨架屏

骨架屏不是万能解法。下面几种情况，直接用明确的进度提示更合适：

页面没有稳定结构，比如导入文件、生成报告、上传视频；
等待时间很长，用户需要知道还剩多少；
加载结果可能为空，必须先告诉用户正在检查什么；
当前操作有风险，比如支付、删除、提交表单。

这时 ProgressView 或明确状态文案更诚实。骨架屏适合「结构确定，只是数据晚点到」的页面；不适合把不确定的任务伪装成马上就好。

今天的行动清单

今天挑一个正在做的 SwiftUI 页面，按下面顺序处理：

截一张加载时的页面，标出空白、转圈、突然跳动的位置。
让 AI 列出这个页面的「接口数据区」和「固定控件区」。
要求 AI 只给接口数据区加 redacted(reason: .placeholder)。
要求 AI 给固定控件区保留可见状态，必要时用 unredacted()。
明确写上「加载中禁用会造成误操作的按钮」。
用慢网速或模拟延迟跑一次，看用户是否能在第一秒理解页面正在加载。

这招的价值不是让加载页更花哨，而是减少用户心里的那句「是不是坏了」。对一个人做 iOS 前端的 PM 来说，这就是可以当天落地的体验改进。

别让加载页像白屏：用 AI + redacted 给 iOS 做骨架屏