mobile-design-ios

此技能面向采用 Liquid Glass 设计语言的 iOS 26+。面向较旧 iOS 版本的应用，应改用标准的 Apple Human Interface Guidelines——这些设计模式已在通用 AI 知识中有充分介绍。

此技能旨在帮助创建真正贴合平台的 iOS 界面，避免 AI 生成的移动 UI 中常见的千篇一律的“模板应用”风格。每项设计决策都应体现对 iOS 26 Liquid Glass 设计语言的理解，以及对专业应用与业余作品之间差异的把握。

用户会提供 iOS UI 需求：屏幕、流程、组件或完整的应用界面。他们可能还会补充用途、受众或技术限制等背景信息。

设计思路

生成任何 UI 之前，先确立明确的设计方向：

• 目的：这个屏幕要实现什么？用户来到这里时处于什么情绪状态？
• 个性：选择一种方向——宁静／禅意、大胆／编辑风、温暖／自然、精确／技术感、活泼／充满活力、奢华／精致、极简／专注。应用的个性应显得经过深思熟虑且始终一致。
• 内容优先：iOS 26 的核心理念是内容为主角。玻璃效果应悬浮于内容之上，为内容服务，绝不与内容争抢注意力。先设计内容层，再添加导航。
• 差异化：怎样才能让它看起来像一款经过精心设计的应用，而不是默认模板？用户会注意并欣赏哪个细节？

重要：Liquid Glass 不是装饰，而是用于建立层级的工具。玻璃效果只能用于导航／控件层（标签栏、工具栏、悬浮按钮、工作表）。内容应保持不透明，并位于内容层。这条规则可以避免大多数 iOS 26 初级设计错误。

iOS 26 Liquid Glass 设计指南

重点关注：

• 层级：严格遵循双层模型。功能层（导航、工具栏、浮动控件）使用 Liquid Glass。内容层使用标准不透明材质。切勿在卡片、列表行或背景等内容元素上使用玻璃效果。切勿将玻璃效果叠加在玻璃效果上。
• 玻璃变体：默认使用 Regular 玻璃效果——它会模糊背景并调整亮度，以确保内容清晰易读。仅在照片、视频等视觉内容丰富的媒体上使用 Clear 玻璃效果，因为变暗会损害体验。仅对主要交互元素应用 .interactive() 修饰符——它会增加 GPU 开销。
• 分组：将多个彼此靠近的玻璃元素包装在 GlassEffectContainer 中——否则每个元素都会独立渲染（性能较差），且无法流畅地合并或变形。这是必需的，而非可选项。
• 排版：关键时刻使用更粗的字重并左对齐。分区标题使用标题式大小写，而非全大写。充分利用 Dynamic Type，并采用强调字重。任何文本的字号都不得小于 11pt。正文使用 SF Pro，以完整支持 Dynamic Type；但主视觉标题应使用有辨识度的展示字体，避免呈现出“iOS 默认风格”。
• 玻璃上的颜色：谨慎地为玻璃表面添加颜色。仅将色调用于一个突出的操作（如带色调的 Done 按钮）或状态指示器。如果需要品牌色，请将其放在内容层，而非玻璃上。每个玻璃元素都使用相同色调，就意味着没有任何元素能突出显示。
• 图标：SF Symbols 7 提供 6,900 多个符号。栏中使用图标而非文本标签——应在整个平台范围内采用这一变化。使用符号动画（Draw、Variable Draw、Magic Replace）呈现状态转换。使用单一来源颜色，并通过自动渐变渲染符号。
• 动效：玻璃元素会显现和消隐，而不是淡入或淡出。状态变化使用变形过渡（标签栏在滚动时收缩、按钮展开为弹出框、工作表从源锚点弹出）。动效应具有凝胶般的柔韧感，而非机械感。将触觉反馈与动效配合：元素出现时使用轻触感，在变形完成时配合中等触感。
• 几何形状：使用与硬件曲线匹配的同心圆角半径（ConcentricRectangle）。工作表使用更大的圆角，半屏工作表的边缘与屏幕边缘留出间距。与 iOS 26 之前相比，使用更大的行高、内边距和间距。
• 深度：Liquid Glass 通过透镜效果／折射、动态镜面高光和上下文感知阴影来呈现深度，而非投影或高度值。阴影会自动加深文本上的不透明度，以形成区分效果。将深度效果交给系统处理。
• 滚动行为：内容在玻璃栏下方滚动。配置滚动边缘效果（内容接近栏时，模糊和不透明度会增加）。向下滚动时，标签栏会缩小为紧凑形式；向上滚动时则会展开。
• 侧边栏和工作表：侧边栏采用内嵌玻璃效果，让内容可以在其后方延伸，并通过背景延伸模糊效果呈现。半屏工作表与屏幕边缘留出间距，并使用更大的圆角。操作表应从其源元素弹出，切勿从屏幕底部弹出。警告框应直接从触发按钮展开。

无障碍功能不容妥协

• 普通文本的最低对比度为 4.5:1，大号文本为 3:1——在玻璃背景上，这意味着要针对滚动背景进行测试，而非静态模型
• 检测 Reduce Transparency，并提供不透明备用样式（使用 .identity 玻璃变体）
• 遵循 Reduce Motion 设置——停用变形、透镜和弹性行为
• 遵循 Increase Contrast 设置——使用更醒目的边框和前景元素
• 无论视觉形状如何，触控目标的最小尺寸均为 44×44pt
• 支持浅色和深色外观——即使应用只支持单一外观，也必须同时提供两种外观，以适配玻璃效果
• 遵循 iOS 26.1 的 Tinted/Clear 切换设置（Settings → Display & Brightness → Liquid Glass）——用户可以控制玻璃的不透明度

绝对不要这样做（iOS「AI 垃圾设计」标志）

• 在内容元素（卡片、列表行、表格单元格、背景）上使用玻璃效果——这是最常见的业余错误
• 玻璃效果叠加玻璃效果——Apple 明确警告过不要这样做
• 为导航栏或标签栏设置自定义不透明背景——这会完全阻挡 Liquid Glass
• 使用全大写的分区标题——iOS 26 使用标题式大小写
• 忽略紧凑标签栏的滚动行为——固定标签栏在 iOS 26 上显得过时
• 所有内容都使用千篇一律的蓝色强调色，毫无品牌个性
• 每个元素的间距和内边距都完全相同——改变密度，营造节奏感
• 只在静态模型中测试对比度——玻璃效果会根据其后方滚动的内容改变外观
• 在应使用 Liquid Glass 的地方使用旧的 UIVisualEffectView 模糊材质
• 操作表从屏幕底部弹出，而不是从其来源元素弹出
• 「界面闪烁」问题——明暗内容混杂，导致栏的外观快速切换

专业设计与模板设计的区别

专业的 iOS 26 应用都有这些特点：玻璃效果只会出现在能够传达「这是悬浮于内容之上的控件」的位置。设计令牌集中管理——所有屏幕上的圆角半径、内边距和玻璃层级都保持一致。GlassEffectContainer 将相关玻璃元素组合成统一的材质。色调用于传达语义，而非装饰。动效有明确目的——只用于有意义的交互，而非持续炫技。「降低透明度」模式的处理与玻璃效果模式本身同样周全。

在问「这看起来好不好？」之前，先问「这个玻璃表面传达了怎样的层级关系？」

请记住：最好的 iOS 26 应用让人觉得 Liquid Glass 一直就在这里。最差的应用则让人觉得玻璃效果只是事后添加的装饰。先设计内容体验，再让玻璃效果为其服务。