iOS 26 起 Apple 最大的视觉语言更新。 时效性强(2025 发布),单独成篇。Liquid Glass 的动态效果本质是视频演示(原档里大量
.mov,本地 Obsidian 可看,不进 git);本 wiki 把概念讲透。
一、Liquid Glass 是什么
不是模仿某种现实材质,而是一种全新的数字"元材料"(meta-material):能实时折射、塑造光线,营造深度与分层感;像液体一样轻盈灵活(手指一碰就响应),还有凝胶般的柔性(交互时同步移动、略微变形)。
· 演进脉络:macOS X Aqua(拟物透明)→ iOS 7 实时模糊 → iPhone X 流畅性 → Dynamic Island 形变 → visionOS 沉浸 → Liquid Glass(集大成)。契合屏幕越来越圆润的趋势,以圆润悬浮形态嵌入设备圆角。 · 核心视觉机制 = 透镜效应 Lensing:像透镜一样弯曲光线产生深度感(不同于传统的散射模糊),让你既看清前面控件、又看清后面内容。展开/收起用流畅水波状过渡。 · 静中安静、动中激活:静止时界面简洁安静;触摸时"激活"——从内部发光、像水一样弹一下,充满"生命力"。
二、材质层结构(系统内置,用了就有)
graph TD
E["Liquid Glass 材质(多层协同)"] --> H["高光层 Highlights<br/>模拟真实光照,随形状/设备倾斜而动"]
E --> S["阴影层 Shadows<br/>给'落地感';压文字上自动加深、压浅色上变浅"]
E --> F["内部发光反馈 Feedback Illumination<br/>从手指触点扩散,蔓延到附近元素"]
E --> T["聚焦变化 Focus Transition<br/>切窗口时变暗/退后,聚焦当前"]
这些都是系统自带行为,你用了 Liquid Glass 就自动有,不用自己实现。
图:Liquid Glass 的 Large / Medium / Small 三尺寸实样(来自 iPadOS 26 UI Kit)。同一材质随尺寸变厚薄——大面板更不透明保可读、小控件更通透透出背景;右列圆形是染色态(蓝)和单色态。背景一变(云海明暗),玻璃的透镜折射和明暗就跟着变。
三、两个变体(不能混用)
| 变体 | 特性 | 何时用 |
|---|---|---|
| Regular 常规(最常用) | 含全部视觉+自适应特性,任何尺寸/背景都保可读 | 默认选它;上面可放其他元素 |
| Clear 清透 | 无自适应,始终高透明,让底层"露出来" | 仅满足 3 条件:① 多媒体丰富背景(图/视频)② 加暗化层(调暗后内容仍可感知)③ 上方内容醒目(白图标/大字) |
铁律:避免 glass-on-glass —— 别把多个 Liquid Glass 元素堆叠(很快显拥挤、失层次),用半透明色块代替。Liquid Glass 只用于悬浮在内容之上的导航层(工具栏/标签栏),内容层(如表格)保留普通材质否则抢焦点。
四、自适应 Adaptivity + 可读性 Legibility
· 小控件(导航栏/标签栏):随背景在浅/深色间切换(像智能眼镜随光线调明暗);玻璃上的符号/图形同步切换以保最大对比。 · 大面板(菜单/侧边栏):也自适应,但不在浅深间切换(面积大频繁变色会晕),只是边缘慢慢变灰;变大时像"变厚"——更深阴影、更明显透镜折射。 · 滚动边缘效果 Scroll Edge(功能性非装饰):内容在玻璃下滚动时,把内容"溶解"进背景让玻璃浮起。两样式:Soft 柔和模糊(默认,iOS/iPadOS 浮动按钮)/ Hard 强模糊(macOS 密集界面、固定表头);别混用别叠加,每视图一种。
五、染色 Tinting + 无障碍
· 染色只用于需强调的主操作(如外卖 App 红色"查看购物袋"按钮);选个颜色后系统自动按底层亮度生成色调,像彩色玻璃随背景微调。别给所有元素染色(失层级感);想给界面注入色彩应在内容层(背景图/插画)而非控件层。纯色填充按钮死板突兀,染色后透明贴合环境。 · 无障碍自动响应(无需额外代码):减少透明度→更磨砂遮更多背景;提高对比度→黑白主色+对比边框;减少动态→关弹性动画。
六、几何与同心 Concentricity
让圆角/大小/比例与设备边框一致,形状能嵌套在彼此之中。三种形状:① 固定形状(圆角不变,Mac 高密度小控件)② 胶囊(圆角=高度一半,最适合同心,滑块/按钮/表格;桌面只给最重要按钮)③ 同心形状(圆角=父容器圆角−边距)。注意避免过尖(pinched)/过张(flared)的圆角(造成视觉紧张),卡片里图没对齐改成同心圆角系统自动搞定。连续性 Continuity:跨设备/调窗口大小时用户是"继续任务"非重开;一个决策全平台通用;共享内容用相同图标保语义一致。
七、Icon Composer 图标工作流(2025 新工具)
从单一图稿 → 全平台响应式动态图标,支持 6 外观模式(默认/深色/浅透明/深透明/浅色染色/深色染色)。
· 流程:设计工具分层(背景层只 1 个、前景多层,按 Z 轴+按颜色分层最大可控)→ 导出 SVG(扁平图形,保画布大小、按 Z 轴编号、文字转轮廓;含渐变/照片的图层导 PNG)→ 导入 Icon Composer 调玻璃材质/模糊/阴影/透明度 → 存
.icon拖进 Xcode。 · 画布:iPhone/iPad/Mac 统一 1024px 圆角矩形;Apple Watch 1088px(略大,圆形)。别自己加边框(系统裁);减少图稿里的静态特效(阴影/斜面),材质自带动态光影会冲突;用圆润边角让光自然流动;由浅到深渐变背景最配光照。 · 暗色模式要主动改色(字典图标棕标签在暗底看不清);单色模式把最显眼部分设白。
八、SF Symbols(系统符号库)
符号是跨语言的最简交流方式(全世界都懂三角=播放),提升识别速度、表达抽象概念。SF Symbols 与 SF 字体一一对应(9 权重 + 3 比例 Small/Medium/Large),自动与文本对齐。
▸ 4 种渲染模式
| 模式 | 是什么 | 用在哪 |
|---|---|---|
| 单色 Monochrome | 单一颜色 | 最中性、小尺寸最清晰 |
| 分层 Hierarchical | 单色+透明度分层 | 创建视觉层次(雨/云/太阳分三级);保色值一致 |
| 调色板 Palette | 2+ 颜色各自可控 | 突出多样性、融入彩色界面 |
| 多色 Multicolor | 符号固有色(叶子绿) | 表达现实对应色/含义(加=绿、删=红) |
分层逻辑:图形有间隙用一/二级、互相遮挡接触用一/三级。可变颜色 Variable Color:基于不透明度按数值变化(WiFi 信号强度),累计 vs 逐步两种;与可变绘制二选一。
▸ 动画(有目的地用,别滥用)
| 动画 | 表达 |
|---|---|
| 出现/消失 Appear/Disappear | 新增/移除 |
| 弹跳 Bounce | 操作已发生/需发生(达最大亮度) |
| 缩放 Scale | 选中焦点反馈(悬停文件夹放大);弹跳=动作发生,缩放=选择反馈 |
| 脉冲 Pulse | 持续进行(改透明度,屏幕共享) |
| 呼吸 Breathe | 活动进行中(改透明度+大小,录音);呼吸比脉冲更"有生命力" |
| 摇摆 Wiggle | 呼吁行动/强调变化(纸飞机 315°) |
| 旋转 Rotate | 任务进行中 |
| 替换 Replace / Magic Replace | 功能变化;Magic Replace 智能识别共同外框无缝过渡(播放↔暂停),不相关时回退标准动画 |
| 变量绘制 Draw On/Off | 沿路径"画出/擦除"(风从左到右、阿拉伯字母从右到左);可显进度 |
▸ 绘制原理:符号由锚点+闭合路径构成,用插值原理(已知点推断未知)从同一组锚点生成不同粗细。别用描边改粗细(描边外缘无对应点,破坏插值)→ 用"描边扩展为轮廓";别加删点(破坏兼容);只有闭合路径能填色。自定义符号:导出模板改、注释图层层级、给替代文本标签、不能复制 Apple 产品。
九、字体 Typography(San Francisco 家族)
· 家族:SF Pro/SF Pro Rounded(iOS/iPadOS/macOS/tvOS 主字体)、SF Compact(watchOS 窄列优化)、SF Mono(代码 Xcode)、New York(优雅展示)。全字重(超轻→黑体)。 · 光学尺寸 Optical Sizes:SF Text(<20pt 小字)vs SF Display(≥20pt 大字)——源自铅字印刷传统,小字需更大字母间距+更坚固细部(防 i/l 混淆)。可变字体 Variable Font 的设计轴之一就是光学尺寸,能自动适配各字号。新增宽度轴(紧缩/压缩/扩展):压缩适合新闻标题省空间、扩展适合地图标签。 · Dynamic Type 11 文本样式:Large Title / Title 1-3 / Headline / Subheadline / Body / Callout / Footnote / Caption 1-2。4 原则:能放大就支持、用满屏宽、放大不截断、符号同步缩放。 · 字距 Tracking / 行距 Leading:小字号增字距提可读、大字号减字距增冲击;行距约字号 120%(阿拉伯语增、watchOS 收紧省空间)。Tracking 单位=2048 字体单位的比例。 · 选字 Pick a Font:两问(用途?想传达什么印象?);两概念结构 Structure(书写工具路径)+对比 Contrast(笔画粗细变化);文本字体(低对比、宽字距、舒适阅读)vs 显示字体(高对比、装饰、吸引注意);搭配选比例接近的(免反复调字号)。
十、色板体系 Color System
· iOS13 材质 4 级:厚(高对比背景,弹窗)/普通(卡片菜单)/薄(导航工具栏,透背景信息)/超薄(状态栏);配 vibrancy 活力效果(动态适应背景,优于纯色)。 · Tint 主题色:双模式动态(深色变浅、浅色变深),自定义品牌色要两模式都验对比度 ≥4.5:1(coolors 等工具,"艺术+科学")。 · 灰度色板:① fill colors(填充,带透明度融背景)② separator colors(分隔线)③ system grays(6 梯度灰,不透明,解决透明度搞不定的场景如交织网格防视错觉)。 · 语义色 Semantic Colors:按用途命名(label/secondarySystemBackground)而非外观,自动适配浅深+高对比;4 级灰度对应信息层级(标题/副标题/占位/禁用),还原"自然光由亮到暗"而非简单反色。
源自 iOS macOS 基础原子(37 篇:Liquid Glass 13 + SF Symbols 8 + 字体 5 + 色板 4 + 图标设计)。动态效果在原档 .mov 视频(本地 Obsidian 查看)。视觉基础速查见 Apple HIG 视觉基础 Foundations(颜色/字体/布局/材质/动效/暗黑/图标/SF Symbols/品牌);应用图标跨平台规范见 Apple HIG 视觉基础 Foundations(颜色/字体/布局/材质/动效/暗黑/图标/SF Symbols/品牌) §应用图标。