别让图标拖慢首版：用 AI + SF Symbols 先搭出一套 iOS 功能图标

今天这招解决一个很具体的卡点：你已经让 AI 写出了几个 SwiftUI 页面，但底部导航、按钮、空状态里的图标开始混乱。有人用星星表示收藏，有人用书签表示收藏；有的图标线条粗，有的又像从别的素材站剪来的。没有设计师时，这种小混乱会迅速让首版看起来不稳。

SF Symbols 可以先把这个问题压住。Apple 把它定义为一套和 San Francisco 系统字体无缝配合的符号库，当前官方页写明有 7,000 多个 symbols，并支持不同字重、尺寸和文本对齐；新版 SF Symbols app 还提供语义搜索，可以用自然语言描述想找的符号。1 这正好适合 PM：你不需要自己画图标，先用 AI 把功能意图翻译成图标候选，再用官方工具验收。

SF Symbols 语义搜索示意 — SF Symbols 官方页展示的 Enhanced Search 结果示意，适合用来验证 AI 给出的图标方向。1

先把问题说清楚：图标不是装饰，是导航承诺

一个 iOS 首版里，图标至少承担两件事。

第一，它让用户在很短时间内猜到按钮会做什么。第二，它让同一类功能看起来属于同一个系统。独立做前端时，最容易犯的错不是「没有图标」，而是每次让 AI 写页面时顺手生成一个 systemImage 名称，最后全 App 没有统一标准。

今天的技巧是：先做一张功能到 SF Symbols 的映射表，再让 AI 写 SwiftUI。 顺序不要反过来。先写代码再回头换图标，你会在很多页面里找同一个名字，改起来很烦。

原理：AI 负责翻译意图，SF Symbols 负责统一外观

AI 擅长把「我的功能是什么」翻译成「可能用哪个隐喻」。比如：收藏、稍后再看、账户、筛选、分享，这些都可以让 AI 先给出 2 到 3 个候选 symbol 名称。

但 AI 不能直接当最终答案。它可能编出不存在的 symbol 名，或者把同一个产品动作翻译成两个相近隐喻。所以这里的分工要固定：

环节	让谁做	你验收什么
功能意图拆解	PM + AI	每个按钮只表达一个动作
图标候选	AI	是否有 2 到 3 个可比较选项
名称核对	SF Symbols app	symbol 是否真实存在、是否和功能含义接近
前端落地	SwiftUI	同一功能在所有页面使用同一个 symbol

Apple 的 WWDC 视频里给了最小用法：SwiftUI 可以用 Image(systemName: "heart") 显示系统 symbol，也可以用 Label("Heart", systemImage: "heart") 把文字和图标放在一起。2 对 PM 来说，优先记住 Label 就够了，因为它同时保留文字和图标，不容易让按钮只剩一个猜谜图案。

怎么用：15 分钟做一版图标映射表

SF Symbols app 预览界面 — SF Symbols 官方页展示的 app 预览界面；核对候选 symbol 时，以这个官方工具为准。1

第 1 步：列出你这一版真的需要图标的地方。 不要从 symbol 库开始逛。先打开你的产品需求或页面草图，列出导航、主要按钮、空状态、设置项。每一行写清楚「用户看到它时应该理解什么」。

可以让 AI 先帮你整理成这张表：

位置	功能意图	不想传达的意思	候选 symbol
底部 Tab	保存过的内容	不要像点赞	bookmark / tray.full
筛选按钮	缩小结果范围	不要像设置	slider.horizontal.3
空状态	暂时没有记录	不要像错误	tray

第 2 步：把这段 prompt 交给 AI。

你是 iOS 产品设计助理。请根据下面的功能表，为每个功能推荐 2 个 SF Symbols 候选名称。每个候选用一句话解释隐喻。不要编造 Apple SF Symbols 里不存在的名称；如果不确定，请标记「需在 SF Symbols app 里核对」。输出表格。

这句 prompt 的关键不是让 AI 一次给出正确答案，而是逼它说清楚为什么选这个图标。解释不通的候选，通常也不适合放进产品里。

第 3 步：在 SF Symbols app 里核对。 官方页说明 Enhanced Search 支持用自然语言描述想找的符号，即使搜索词和 symbol 名称不完全一致，也能找到相关结果。1 你可以把 AI 给出的功能意图直接搜一遍，再把候选名搜一遍。两边都能对上，才进入代码。

第 4 步：让 AI 按映射表改 SwiftUI。 给 AI 的要求要具体：所有「收藏」都用同一个 symbol，所有「筛选」都用同一个 symbol。不要让它在不同页面自由发挥。

最小代码线索只需要这样：

Label("收藏", systemImage: "bookmark")
Label("筛选", systemImage: "slider.horizontal.3")

如果某个地方必须只显示图标，不显示文字，要额外补一句验收要求：给这个图标加可访问性说明。Apple 在视频里提到，Label 的 title 会给 VoiceOver 提供文本描述；但只有图片的场景，必要时可以用 accessibilityLabel 补充说明。2

今天的验收清单

做完不要只看「图标有没有显示」。你自己按下面 5 项验收：

同一个功能，在所有页面使用同一个 symbol。
每个图标不用看文字，也能大概猜到动作。
收藏、点赞、保存、下载这类容易混的动作，没有互相借用图标。
深色模式和浅色模式下，图标都能看清。
只显示图标的按钮，有对应的可访问性说明。

这招的产品价值很直接：首版先不追求定制视觉，但要避免「像拼出来的」。SF Symbols 给你一套和 iOS 原生界面同源的图标语言，AI 帮你快速做第一轮匹配。你要做的，是把「每个功能到底想让用户理解什么」说清楚，并把映射表固定下来。

今天就做一个最小动作：挑一个页面，把所有按钮和空状态列出来，生成一张「功能意图 → SF Symbols」表。哪怕最后只替换 5 个图标，界面也会比让 AI 随手发挥稳很多。

别让图标拖慢首版：用 AI + SF Symbols 先搭出一套 iOS 功能图标

先把问题说清楚：图标不是装饰，是导航承诺

原理：AI 负责翻译意图，SF Symbols 负责统一外观

怎么用：15 分钟做一版图标映射表

今天的验收清单

Fuentes de referencia