<!-- title: 透明美学的代价：Liquid Glass为何翻车 -->
<!-- domain: design -->
<!-- video: https://www.youtube.com/watch?v=jGztGfRujSE -->

# 透明美学的代价：Liquid Glass为何翻车

## 导语

2026年6月8日，WWDC 2026如期而至。但所有人都在等同一件事——Apple会不会给"液态玻璃"（Liquid Glass）收拾烂摊子。一年前的WWDC 2025，Apple发布了自iOS 7以来最大刀阔斧的设计语言改版：整个系统界面像被罩进了一块会流动、会折射、会反光的果冻。Apple官方那句宣传语至今耐人寻味——"一种半透明的材质，能够反射与折射周围环境"。

听起来很美，用起来却是另一回事。 Nielsen Norman Group（NN/g，UX界最权威的机构之一）在2025年10月直接发文，标题就叫《Liquid Glass Is Cracked》（液态玻璃裂了）。他们用一句话判了死刑：**Apple正在把"炫目"置于"可用性"之上**。更尖锐的评论者认为，这场华丽改版根本是障眼法——用来转移人们对Siri等AI功能屡屡跳水的注意力。

本文以Apple官方发布视频《Introducing Liquid Glass》为锚点，结合NN/g的可用性体检报告、WWDC 2026的最新修正，以及Apple近二十年设计语言演进史，带你拆解一个核心命题：**当设计追求"好看"超过了"好用"，世界顶级设计团队也会翻车。**

## 视频背景卡片

| 项目 | 内容 |
|------|------|
| 视频标题 | Introducing Liquid Glass \| Apple |
| 频道 | Apple（官方） |
| 发布 | 2025年6月9日（WWDC 2025） |
| 视频类型 | 设计语言官方发布 / 设计哲学阐述 |
| 核心主题 | 用"液态玻璃"材质统一Apple全平台设计语言 |
| 关联深度视频 | Meet Liquid Glass（WWDC25 Session 219，Apple设计团队主讲） |
| 当前状态 | iOS 27（WWDC 2026）已对透明度、可读性做出重大修正 |
## 一、这是一次"摆向另一边"的钟摆运动

要理解Liquid Glass为什么争议这么大，得先看它从哪儿来。Apple的设计语言一直在两极之间摇摆，这是理解一切的底层逻辑。

- **2007–2013 拟物（Skeuomorphism）**：乔布斯时代。备忘录是黄色记事本，游戏中心是绿色台呢，时钟App甚至会显示真实秒针。设计靠"现实隐喻"教用户怎么用。
- **2013（iOS 7）扁平化（Flat Design）**：Jony Ive主导，一刀切掉所有纹理。理由是——用户已经学会用手机了，不需要再"哄"。
- **2021 玻璃拟态（Glassmorphism）**：macOS Big Sur和Windows 11 Fluent Design带火的半透明毛玻璃风潮。
- **2025（iOS 26）Liquid Glass**：又一次摆回"表现力"那一端。Apple明确说要**告别iOS 7的扁平，回归更有表现力的拟物元素**。

这是一记标准的钟摆——但这次摆得太猛，直接撞上了"可用性"这堵墙。某百科记录了一个关键细节：Apple软件工程高级副总裁Craig Federighi透露，设计师们甚至走进了公司的工业设计工作室，**真的烧制出不同不透明度和透镜属性的玻璃实物**，好让界面材质尽可能贴近真实玻璃的光学特性。这种"较真"很Apple，但也埋下了隐患：真实玻璃好看，可它**反光、透明、把后面的东西挡得模模糊糊**——而这些恰恰是UI可用性的天敌。

> 视频原话取向：Apple强调"层次感"与"统一感"；我的判断是，Apple这次押注的是**visionOS的空间计算美学**——Federighi自己也承认"最明显的灵感来源就是visionOS"。问题在于，把一个为沉浸式头显设计的语言，生搬硬套到一块6英寸的手机竖屏上，可用性逻辑并不通用。

## 二、透明即不可读：最古老的可用性定律被公然违反

NN/g的报告开篇就指出一个 usability 领域最古老的发现：**任何叠在另一物体之上的东西，都会变得更难看清。**

听起来像废话，但Apple偏偏在2025年"骄傲地"用半透明、气泡化的UI元素盖在繁忙的背景之上，遮住了文字、图标和控件。几个被点名批评的真实场景：

- **短信背景图**：iOS 26鼓励用户给信息对话设置背景照片。结果朋友的文字"伪装"在海滩度假照或宠物毛发里，你根本读不清，甚至连输入框都发现不了。
- **文字叠文字**：邮件列表里，一行文字压在另一行上——NN/g的吐槽很毒辣："读个邮件主题，现在需要《达芬奇密码》级别的解密能力。"既看不清，还丑。
- **苹果地图**：底部图标和背景地图图像融为一体，即便有背景模糊也无济于事。

这背后的认知科学原理很硬：**对比度（contrast）是人眼识别文字的第一前提**。半透明控件让前景与背景的明度差异被"中和"，对比度暴跌，文字边缘模糊。在阳光直射的户外（低对比环境），情况会灾难性恶化。Apple宣传Liquid Glass"让内容更聚焦"，现实却是——内容确实"在画面里"，但你"看不见它"。正如NN/g那句绝妙的比喻：**"Apple叫它Liquid Glass，对许多用户来说它更像一扇起雾的窗户——远处看很美，想看清里面却让人抓狂。"**

## 三、动效的傲慢：第100次的"愉悦"就是"干扰"

Liquid Glass把动效（motion）用到了近乎强迫的程度。NN/g列了一长串"为了动而动"的清单：

- 轮播指示点几秒后悄悄变成"搜索"两个字；
- 相机按钮被点按时会轻微抽动；
- 切换标签时，标签栏会冒泡、扭动；
- 被选中的按钮会脉动；
- 音乐App里，当前歌名像股票行情一样滚动，还泛着水波高光——滑到顶部时，气泡还会"跳"一下给标签栏让位。

这里涉及一个被反复验证的UX定律：**人类视觉系统对运动极度敏感**（这是进化留下的——运动意味着猎物或捕食者）。所以动效第一次出现时，它确实"抓眼球"，甚至带来"咔哒一下"的愉悦感。但关键问题在于——**愉悦在第10次会变成分心，在第100次会变成折磨**。界面在不停喊"看我！看我！"，而它本该做的，是安静地让位，让真正的主角（内容）登场。

> 我的延伸分析：这其实是"个性化 delight"与"规模化 efficiency"的根本冲突。产品演示（demo）是给人看一次的，动效惊艳；但操作系统是被亿万用户每天用上百次的工具，每一次多余动效都在偷走注意力与时间。Apple把"演示级美学"当成了"日常级体验"，这是定位错位。

## 四、触控目标的缩水：被抛弃的费茨定律

Apple还悄悄做了一件让可用性专家跳脚的事——**缩小并挤密触控目标**。长期以来，iOS遵循"目标间距至少0.4cm、点击区域至少1cm×1cm"的 guideline，这背后是**费茨定律（Fitts's Law）**：目标越小、距离越远，命中越难、越慢。

iOS 26的标签栏被挤压，给那个几乎出现在每个页面右下角的"搜索"按钮腾地方。一个控件孤零零地飘在外面，其余挤成一团，统一的控制区被撕裂，整条栏"扫一眼"的效率骤降。讽刺的是，这种"处处塞搜索"的做法，被批评为**抄了Google的作业**——对一家以"自成体系设计语言"著称的公司而言，这本身就是一种身份迷失。

## 五、可预测性的丧失：重演"微软Office自适应菜单"惨案

这一条最致命，也最值得产品人警惕。NN/g搬出了一个经典反面教材：**早年的Microsoft Office"自适应菜单"**——菜单会根据你最近用过的功能自动重排。结果人们恨透了它，因为没有任何东西待在你上次放的位置，你每次都得重新扫描整张菜单。**界面永远在变，就永远学不会。**

Apple"似乎从这堂课里什么也没学到"。iOS 26里，控件会**出现、消失、折叠、展开**：标签栏在激活搜索时折叠让位；Safari的前进按钮"有没有下一页"才显示；URL栏被挤在图标之间，截短到你都不知道自己在哪个网站；曾经一键可达的标签页，被藏进了"更多（…）"溢出菜单。搜索从页面顶部迁到了底部且永远可见——新人觉得好找，老用户却要被迫重新形成肌肉记忆，短期内=生产力损失+挫败感。

背后是**可学习性（learnability）与一致性（consistency）**的代价：每打破一次既定习惯，都是在向几亿用户"收税"。最狠的评论来自MacRumors读者：**"制造可用性问题，不叫创新。这是我第一次见Apple在UI上做得如此糟糕……业余得离谱。"** 还有人调侃：**"等iOS 30，我们又得回到拟物设计了。"**

## 六、WWDC 2026的纠偏：钟摆开始回拨

故事到这里并没有结束。这正是本文选在2026年6月写的意义——**WWDC 2026（6月8–12日）刚开完，Apple公开认错式地修正了Liquid Glass**（MacRumors，6月10日）：

- **透明度滑块**：新增系统级控件，从"超清晰"到"全染色"无极可调，远超一个简单的二元开关——把可读性的控制权还给了用户；
- **更强的背景漫反射**：更有效地模糊、扩散复杂背景内容，全面提升可读性；
- **加深边缘 + 更亮的镜面高光**：用更明确的轮廓和层次拉开玻璃与背景的距离；
- **滚动统一工具栏**：内容滚到悬浮栏下方时，顶部自动出现统一工具栏，保持文字清晰；
- **图标更锐利**：新的折射（refraction）特性让图标更易辨识；
- **无障碍适配**：自动响应"降低透明度""增强对比度"等辅助功能设置。

> 我的解读：这一系列修正，几乎逐条对应了NN/g一年前指出的问题。它印证了一个朴素的道理——**再强势的设计美学，也无法长期对抗可用性规律**。但代价已经发生：一位读者评论道，"他们花这么多精力去修那些本已被解决好的可用性和基础问题——全是他们自己造的孽。" 一场本可避免的、耗时多年的返工。

## 知识结构图

下图刻画Apple设计语言二十年的"钟摆运动"，以及Liquid Glass所处的位置：

```mermaid
flowchart LR
    A["2007-2013<br/>拟物 Skeuomorphism<br/>现实隐喻·教用户使用"] --> B["2013 iOS 7<br/>扁平化 Flat<br/>Jony Ive·去纹理"]
    B --> C["2021<br/>玻璃拟态 Glassmorphism<br/>Big Sur / Win11 Fluent"]
    C --> D["2025 iOS 26<br/>Liquid Glass<br/>拟物回归·visionOS灵感"]
    D --> E["2025 反噬<br/>透明=不可读<br/>动效=干扰<br/>违反费茨定律"]
    E --> F["2026 iOS 27<br/>认错式纠偏<br/>透明度滑块<br/>可读性修复"]
    F -.摆向.-> A

    style D fill:#bcdcff,stroke:#0a6cc8,stroke-width:2px
    style E fill:#ffd6d6,stroke:#c8360a,stroke-width:2px
    style F fill:#d6f5d6,stroke:#2e8b2e,stroke-width:2px
```

下图揭示Liquid Glass翻车的**底层因果链**——从美学目标到可用性崩塌的传导路径：

```mermaid
flowchart TD
    G["美学目标<br/>表现力·深度·层次·统一"] --> H["技术手段<br/>半透明折射 + 流体动效"]
    H --> I1["对比度↓<br/>文字叠在背景上<br/>阳光直射=灾难"]
    H --> I2["注意力被劫持<br/>第100次动效=干扰"]
    H --> I3["触控目标缩水<br/>违反费茨定律"]
    H --> I4["可预测性丧失<br/>重演Office自适应菜单"]
    I1 --> J["核心症状<br/>内容看不见 / 学不会 / 点不准"]
    I2 --> J
    I3 --> J
    I4 --> J
    J --> K{"可用性规律<br/>是否可对抗？"}
    K -->|"否"| L["WWDC 2026 纠偏<br/>透明度滑块·可读性修复<br/>用户重获控制权"]
    K -->|"是"| M["长期代价<br/>用户挫败·品牌信任损耗"]
    style H fill:#fff3cd,stroke:#b8860b
    style J fill:#ffd6d6,stroke:#c8360a
    style L fill:#d6f5d6,stroke:#2e8b2e
```

## 实战启示：这对每个做产品的人意味着什么

**如果你是设计师/产品经理**，这堂课的核心是——**永远区分"演示场景"与"日常场景"**。一个炫酷的发布会demo，会被看一次；但一个操作系统按钮，一年会被点几十亿次。把"一次性惊艳"的设计原则套到"高频日常"工具上，就是把Apple都踩过的坑再踩一遍。每一次动效、每一层透明度、每一处控件位置变化，都要问：**它的可用性成本，配得上它的美学收益吗？**

**如果你做UI/视觉**，请把"对比度"刻进DNA。透明、毛玻璃、渐变都很潮，但任何削弱前景-背景明度差的做法，都在直接挑战人类视觉系统的物理极限。阳光、暗光、色弱用户、低分辨率老旧屏幕——你的设计必须在这些"最坏情况"下依然可读。一个判断标准：**截图转灰度，文字还看得清吗？**

**如果你做交互/信息架构**，请敬畏"一致性"与"可学习性"。打破一个用户已经形成肌肉记忆的惯例（哪怕新方案"理论更优"），都要付出真实的迁移成本。控件的出现/消失/折叠要极度克制——**界面的最高境界，是用户不需要看它，就能用对**。

**如果你是技术决策者**，Apple这次提供了一个反面教材：用Apple Silicon的强大算力去实时渲染折射、模糊、流体动效，技术上很酷，但在电池、性能、无障碍上的隐性成本不容忽视。**"技术能做到"从来不等于"应该做"**——这也是为什么2026年的修正里，无障碍适配成了重头戏。

一句话总结这套启示：**好的设计让内容发声，坏的设计让自己发声。**

## 延伸学习路径

1. **Nielsen Norman Group《Liquid Glass Is Cracked》原文**——最权威的可用性逐条体检，案例详实，强烈推荐通读。
2. **Wikipedia "Liquid Glass" 词条**——最完整的设计语言族谱，串起了Aqua、Flat、Glassmorphism、Frutiger Aero、Windows Aero的血脉关系。
3. **Apple WWDC25 Session 219《Meet Liquid Glass》**——Apple设计团队亲自阐述设计哲学的第一手材料，看官方"想说什么"。
4. **《Designing for the Digital Age》/ 《Don't Make Me Think》(Steve Krug)**——回归可用性第一性原理，理解为什么"一致性"和"可预测性"值千金。
5. **Fitts's Law 与 Hick's Law 的科普资料**——把这两条定律装进工具箱，能解释80%的"为什么这个界面用着累"。

## 一句话总结

> **Liquid Glass是Apple用一块"看得见的玻璃"换走了用户"看得清的内容"，最终证明：当美学野心越过了可用性规律，连世界最强的设计团队，也得回头给用户补上一个透明度滑块。**
## 参考来源

1. [Introducing Liquid Glass | Apple](https://www.youtube.com/watch?v=jGztGfRujSE) — 本文分析的锚点视频，Apple官方设计语言发布
2. [Liquid Glass Is Cracked, and Usability Suffers in iOS 26 — Nielsen Norman Group](https://www.nngroup.com/articles/liquid-glass/) — 权威可用性逐条体检报告（核心批判来源）
4. [Here's How Liquid Glass Is Changing in iOS 27 — MacRumors](https://www.macrumors.com/2026/06/10/how-liquid-glass-is-changing-in-ios-27/) — WWDC 2026纠偏的最新动态（2026-06-10）
5. [Liquid Glass, fragile UX, and why I waited 2 weeks — uxdesign.cc](https://uxdesign.cc/liquid-glass-fragile-ux-and-why-i-wanted-2-weeks-before-writing-about-it-5dccafb5c28f) — "iOS 7以来最大胆UI动作"的设计评论
> 本文由「51学通信」技术团队出品。51学通信由通信行业18年老兵**爱卫生**（微信ID: gprshome201101）维护，聚焦5G/6G核心网、3GPP标准解读、通信前沿技术深度分析。
> 出版作品有《5G核心网原理与实践》《IMS原理与实践》等4本通信专业书籍。知识星球「51学通信」提供深度技术答疑和行业洞察。
### 完成摘要

### 注意事项

- 视频背景卡片中的"播放量"未填具体数字（避免编造精确数据），改用"当前状态/视频类型"定性描述，符合不臆造数据的诚实原则。
- 暂存文件 `nng_lg.txt`、`mr_lg.txt`、`wk_lg.txt`、`ux_lg.txt` 在工作目录，如不需要可删除。

> [!tip] 51学通信知识星球
> **星主：爱卫生**（微信：gprshome201101）——公众号「51学通信」创办者，19 年通信行业运维与讲师经验，著有《GPRS网络信令实例详解》《EPC原理与实践》《5G核心网原理与实践》三本纸质书（各大电商平台有售）。
> **星球定位**：深耕 5G 核心网、IMS、NFV/AI、云原生等 ICT 领域，主打运维岗位与信令分析。
> **当前规模**：5200 篇主题 / 990 个回答，198 元/年。
> **加入福利**：加入星球后请加爱卫生微信，拉您进知识星球年度陪伴与答疑群——不限量回复您的各种问题，另有群内分享。
> **AI 加持**：51学通信知识星球已作为 skill 接入 WorkBuddy，使用 deepseek-4-flash 在海量星球帖子中精准找贴、找视频、找 FAQ 和案例，做总结、找文档和 PPT 等场景全覆盖。

![51学通信知识星球海报-扫码加入](https://wiki.500nian.com/images/zhixingqiu_qrcode.png)