作者：郭鹏松（汽车之家：APP 架构前端工程师）
多元化信息时代已经到来，未来值得无限期待
iOS 26、macOS 26 Tahoe 发布
今年 9 月份，iOS 26、macOS 26 Tahoe 正式版开启推送，我迫不及待地将手头的 iPhone 15 和 MacBook Pro 升级到了最新系统。iPhone 的流畅度一如既往。但我的 Intel 老款 MacBook Pro 运行起来则略显卡顿，多任务处理时也有些力不从心。
不过，单从 UI 方面来讲，这次系统更新堪称近 10 年来最大的一次变革。全新的设计语言 Liquid Glass 的出现，给人带来了眼前一亮的感觉，也引发了我对苹果设计语言发展历程，以及未来信息呈现方式的深入思考。
互联网设计语言演变
拟物化设计兴起（90 年代 - 2010 年前后）
在 20 世纪 90 年代，互联网开始走进人们的生活，上网对于大部分老百姓来说，是一件门槛略高的事情 。为了让人们快速有效地融入互联网，了解这个新奇又陌生的网上环境，拟物化设计风格应运而生 。
互联网诞生之初，人们通过拨号上网
简单来说，拟物化设计就是将生活中的物体形态、材质、光影等特征逼真地还原到互联网界面中，你在生活中看到的东西是什么样子、有什么用途，它在互联网上就呈现出类似的模样。
在那个时期，主流的操作系统如 Windows98、Windows XP、iOS4、macOS X 等，其界面都以拟物化为代表 。例如，早期的计算机文件管理系统中，文件夹的图标就被设计成真实文件夹的样子，有立体的边缘和质感，让用户一眼就能明白其功能 。音乐播放器的界面则模仿真实的 CD 机或随身听，有逼真的播放按钮、进度条和音量调节旋钮 。
甚至有些图标 Icon，一直沿用至今。估计 00 后很难理解这几个图标为为什么会长这个样子。
在苹果的 iOS、macOS 系统中，便签应用的界面设计得像真实的便签纸，有黄色的底色和撕裂的边缘效果，备忘录应用则采用了逼真的皮革纹理，给人一种熟悉和亲切的感觉 。
这种设计风格就像是在数字世界中，构建了一个与现实生活紧密相连的镜像，极大地降低了用户的学习成本，让人们能够轻松地理解和操作各种软件和应用程序 。
扁平化设计的崛起（2010 年前后 - 2025 年）
拟物化设计风格在一段时间内取得了巨大的成功，但随着时间的推移，特别是到了 2010 年前后，移动互联网时代的到来，它的缺点逐渐暴露出来 。安卓和 iOS 的激烈竞争，使得智能手机市场迅速发展，人们上网的主战场从 PC 机器转向手机 。
手机屏幕从大屏幕到 3.5 寸小屏幕的转变，使得屏幕显示区域变得寸土寸金 。拟物化设计虽然生动逼真，但携带的信息量过大，绘制成本较高，在小屏幕上显得过于臃肿，加载速度也较慢，消耗流量较多，影响了用户体验 。
与此同时，人们对互联网的熟悉程度不断提高，不再像 2000 年前后那样对互联网环境感到陌生，已经具备了一定程度的基本常识 。在这样的背景下，人们开始追求一种更高效、更适合小屏幕展示的设计方式，能够以简洁明了的二维信息呈现内容 。于是，扁平化设计应运而生 。
2013 年 iOS7 的诞生，标志着扁平化设计语言正式登上世界舞台 。iOS7 全面抛弃了拟物化设计，将所有图标和界面去掉细节、质感、光影，以简洁的图形、鲜艳的色彩和基础的几何形状构建界面，使整体变得简化和平面化 。
例如，iOS7 中的图标采用了简洁的线条和单一的色彩，不再有立体的效果和复杂的纹理 。这种设计风格不仅提高了信息传达的效率，也让界面更加简洁美观，符合移动设备的使用场景和用户需求 。
此后，扁平化设计迅速成为主流，被广泛应用于各种互联网产品和移动应用中 。
Liquid Glass：苹果的设计革新
Liquid Glass 的诞生
在 2025 年苹果全球开发者大会上，苹果推出了全新的设计语言 Liquid Glass，这一创新性设计的灵感来源于 visionOS ，采用分层系统架构，其圆角设计与设备曲面屏完美契合，质感与动效均模拟真实玻璃的物理特性，拥有绝佳的通透性与光泽感。工具栏、控件和应用界面均采用半透明玻璃材质，搭配光影反射效果，营造出强烈的立体层次感 。
Liquid Glass 的设计，不仅是对视觉美学的一次大胆探索，更是对用户，交互体验的深度思考与重塑。它像是将一块灵动的玻璃，融入到了设备系统之中，每一个元素都仿佛有了生命。当你操作设备时，图标、按钮等元素的动态光影与流体效果，会随着你的动作而变化，就如同在与真实的玻璃制品互动。比如，图标边缘会根据视角变化产生水滴状折射光效，滑动操作时会出现涟漪状粒子扩散动画，给人一种前所未有的新奇感受 。
在系统界面中，无论是锁屏、通知中心还是控制中心，半透明材质的运用使得内容显示更加突出，同时还能保留环境光交互，让你在使用设备时，仿佛周围的环境与屏幕内容融为一体，界限变得模糊。
对比传统设计
与传统的扁平化设计相比，Liquid Glass 带来了截然不同的感受。扁平化设计追求简洁、直观，以简约的图形、鲜艳的色彩和基础的几何形状构建界面，去除了不必要的装饰元素，在一定程度上提高了信息传达的效率和 App 的运行速度。
然而，它也存在一些弊端，比如界面缺乏立体感，用户难以分辨哪些元素是可点击的，所有 App 的外观也较为雷同，缺乏独特性 。
而 Liquid Glass 则模糊了硬件和软件的界限。在采用 Liquid Glass 设计的系统中，当你打开一个应用程序，仿佛是揭开了一层玻璃，看到了藏在后面的丰富内容，应用的图标和界面元素与设备的融合更加自然，不再像是生硬地贴在屏幕上，而是成为了设备的一部分 。
这种设计理念为用户带来了更加沉浸式的体验，让人们在操作设备时，感受到的不仅仅是冰冷的技术，更是一种与数字世界的深度互动，仿佛数字内容就在触手可及的真实空间中 。
现有信息展示模式的局限
二维展示的不合理性
长期以来，我们所接触的信息大多是在二维平面上展示的，仔细思考就会发现，这种方式存在诸多不合理之处。人类是生活在三维空间中的生物，日常体验和感知都是基于三维空间展开的 。然而，我们却长期依赖二维屏幕来获取和展示信息，这就像是戴着一副有局限的眼镜看世界 。
例如，去 4S 店看车和在汽车之家网站上看车也有天壤之别 。在 4S 店，我们可以绕着车走一圈，打开车门，坐进车内，感受它的空间大小、内饰的材质和做工 。
而在网站上，我们只能通过几张图片和文字介绍来了解车的信息，无法获得那种身临其境的体验 。这种差异就好比是品尝美食和看美食图片，看图片只能让我们知道食物的外观，却无法真正感受到它的味道、口感和香气 。
信息的丢失与压缩
从三维空间到二维屏幕的信息呈现，实际上是一种广义上的降维过程，在这个过程中，大量的信息不可避免地丢失了 。
当我们将三维空间中的物体拍摄下来并上传到网上时，原本完整的信息被压缩和简化 。以拍摄一辆汽车为例，照片只能记录下汽车在某个瞬间、某个角度的光影和色彩，而汽车表面的细微纹理、金属的光泽质感、不同部位的材质差异以及它在空间中的立体感等信息都无法完全体现 。
这些丢失的信息，正是我们在现实中能够直接感知到的 “真实感，质感，体验感” 。
“我需要一块二向箔，清理用。”歌者对长老说。
“给。”长老立刻给了歌者一块。——《三体：死神永生》
这种信息的丢失不仅仅影响了我们对物体的直观感受，还在一定程度上限制了我们对信息的理解和分析 。在很多情况下，这些丢失的细节信息可能包含着重要的内容 。
比如在工业设计中，产品的三维模型能够展示出产品的各个细节和结构，设计师可以从不同角度进行观察和修改 。但当将其转化为二维图纸时，一些细节可能会因为投影的问题而变得模糊或难以理解，这就可能导致生产过程中出现误差 。
在医学领域，CT 扫描等技术可以获取人体内部的三维信息，但在二维的图像展示中，医生可能会错过一些关键的细节，影响诊断的准确性 。
未来世界的信息呈现趋势
多元化呈现方式的必然
尽管二维化的信息方式在过去几十年中占据了主导地位，但随着时代的发展和人们对信息需求的不断增长，它已逐渐无法满足人类的信息承载量 。
如今，我们生活在一个信息爆炸的时代，每天都要接触和处理海量的信息 。无论是学习、工作还是娱乐，我们都希望能够更快速、更全面地获取和理解信息 。而二维信息方式的局限性，使得它在面对如此庞大和复杂的信息时显得捉襟见肘 。
以阅读电子书为例，虽然电子书具有携带方便、存储量大等优点，但与纸质书相比，它缺乏那种真实的触感和翻阅的乐趣 。在阅读过程中，我们无法感受到纸张的质感、油墨的香气，也难以通过书页的翻动来直观地把握书籍的进度 。
而且，二维的电子页面在展示一些复杂的图表、图片或排版时，往往无法达到纸质书那样的清晰和生动 。再比如网页和各种 app，它们虽然提供了丰富的信息和便捷的交互功能，但在信息呈现的方式上仍然比较单一 。
大多数网页和 app 都是以平面的形式展示内容，用户需要通过不断地滚动屏幕、点击链接来获取信息，这种方式不仅效率低下，而且容易让用户产生视觉疲劳 。
因此，未来信息的呈现方式，必然会朝着多元化的方向发展，二维与三维展示方式的结合将成为趋势 。通过三维展示，可以更加真实地还原物体的形态、材质和空间关系，让用户获得身临其境的感受 。
而二维展示则可以作为辅助，用于展示一些细节信息、文字说明或操作界面 。这种多元化的呈现方式能够充分发挥二维和三维的优势，为用户提供更加丰富、全面、高效的信息体验 。
现有设备的探索
现在的一些设备已经展现出了信息呈现方式多元化的迹象，苹果的 Vision Pro 便是其中的典型代表 。Vision Pro 作为一款具有开创性的设备，它搭载了先进的空间计算技术，通过融合现实（MR）的方式，为用户带来了全新的信息交互体验 。
戴上 Vision Pro，用户可以进入一个全新的空间，其中的信息不再局限于二维屏幕，而是以三维的形式环绕在用户周围 。
例如，在观看视频时，视频画面不再是平面的矩形，而是可以根据用户的需求和空间环境，以任意大小、形状和位置呈现 。用户可以将视频画面放大到占据整个视野，仿佛置身于电影院中；也可以将其缩小成一个悬浮在空中的小窗口，在观看视频的同时还能处理其他任务 。在浏览网页时，网页内容会以立体的形式展开，用户可以通过手势操作，随意旋转、缩放网页元素，就像在操作真实的物体一样 。这种沉浸式的体验让用户能够更加深入地参与到信息之中，极大地提升了信息的获取和理解效率 。
此外，Vision Pro 还支持多人共享体验 。多个用户可以同时进入同一个虚拟空间，共同浏览信息、交流互动 。比如在进行商务会议时，参会人员可以通过 Vision Pro，在虚拟会议室中面对面交流，共享文档、图表等信息 。
这种全新的交互方式打破了时间和空间的限制，为人们的沟通和协作带来了极大的便利 。苹果 Vision Pro 的出现，不仅是对现有信息呈现方式的一次大胆突破，也为未来设备的发展指明了方向 。它让我们看到了信息呈现多元化的可能性和巨大潜力，相信在不久的将来，会有更多类似的设备出现，推动信息呈现方式的不断创新和发展 。
Web 模拟实现方式实践
模拟思路
借助 H5 强大而灵活的应用能力，我大胆地进行了一次创意尝试，模拟出了低配版的 MR 眼镜效果。
这一设想的核心概念，是在二维平面上巧妙地模拟出三维空间呈现二维信息的独特场景 。
具体的实现思路如下：利用手机摄像头代替我们的眼睛，去敏锐地捕获三维空间中的各种信息 。摄像头就像是我们观察世界的 “数字之眼”，能够将周围的环境以视频的形式记录下来 。
然后，通过先进的渲染技术，将捕获到的空间信息转化为背景板 。这个背景板就像是一个虚拟的舞台，为后续二维软件信息的呈现提供了一个生动的背景 。在这个背景之上，以 Liquid Glass 的独特呈现方式来展示二维软件信息 。Liquid Glass 的设计语言赋予了这些信息一种全新的生命力，使其不再是单调的平面展示，而是具有了立体感和真实感 。
代码实现与样式展示
……
const videoRef = useRef(null);
const [tab, setTab] = useState(6)
useEffect(() => {
// 组件挂载时启动摄像头
startCamera();
const element = document.documentElement;
if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
}
// 组件卸载时关闭摄像头
return () => {
if (videoRef.current && videoRef.current.srcObject) {
videoRef.current.srcObject.getTracks().forEach(track => track.stop());
}
};
}, []);
const startCamera = async () => {
try {
const stream = await navigator.mediaDevices.getUserMedia({
video: {
facingMode: {exact: "environment"} // 强制使用后置摄像头
}
});
if (videoRef.current) {
videoRef.current.srcObject = stream;
// 尝试设置焦距以使用广角
const track = stream.getVideoTracks()[0];
const capabilities = track.getCapabilities();
if (capabilities.zoom) {
const settings = track.getSettings();
if (settings.zoom) {
// 尝试设置较小的缩放值以使用广角
try {
await track.applyConstraints({
advanced: [{zoom: 1}]
});
} catch (err) {
console.log('无法设置缩放级别:', err);
}
}
}
}
} catch (err) {
console.log(err);
}
};
……
……
{/*摄像头背景*/}
<video
ref={videoRef}
autoPlay
playsInline
className={_s.videoWrap}
/>
<div className="liquid_glass-wrapper"
onClick={() => setTab(0)}
style={{width: '54px', height: '54px', '--border-radius': '60px'}}>
<div className="liquid_glass-outer"/>
<div className="liquid_glass-cover"/>
<div className="liquid_glass-sharp"/>
<div className="liquid_glass-reflect"/>
<div className="icon">
<CarOutlined className={_s.icon1}/>
</div>
</div>
……
样式实现
……
.liquid_glass-wrapper {
position: relative;
display: flex;
overflow: hidden;
margin-bottom: 20px;
border-radius: var(--border-radius);
}
.liquid_glass-outer {
position: absolute;
inset: 0;
z-index: 0;
border-radius: var(--border-radius);
mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect x="0" y="0" width="100%" height="100%" rx="0" ry="0" fill="white"/></svg>'),
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect x="5" y="5" width="calc(100% - 10px)" height="calc(100% - 10px)" rx="21" ry="21" fill="white"/></svg>');
mask-composite: exclude;
}
.liquid_glass-cover {
backdrop-filter: blur(2px);
position: absolute;
inset: 0;
z-index: 2;
border-radius: var(--border-radius);
background: rgba(0, 0, 0, 0.12);
}
.liquid_glass-sharp {
position: absolute;
inset: 0;
z-index: 3;
box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.5), inset -1px -1px 0px 0px rgba(255, 255, 255, 0.6);
border-radius: var(--border-radius);
}
.liquid_glass-reflect {
position: absolute;
inset: 1px;
z-index: 2;
box-shadow: inset 2px 2px 6px 2px rgba(255, 255, 255, 0.2), inset -2px -2px 4px -1px rgba(255, 255, 255, 0.2);
border-radius: var(--border-radius);
}
.icon {
z-index: 4;
display: flex;
width: 100%;
align-items: center;
justify-content: center;
}
……
通过这些代码，我们成功地在 Web 端实现了利用手机摄像头捕获空间信息，并以 Liquid Glass 风格呈现二维信息的效果 。当用户打开应用时，手机摄像头实时捕捉周围的环境，视频画面作为背景平铺在屏幕上，而 Liquid Glass 风格的元素则以立体、通透的效果展示在背景之上，为用户带来了一种全新的交互体验 。
目前的模拟只能做到“形像”，但是并不是真实的 Liquid Glass 理念，光影的折射影响效果，未来还需各大浏览器厂商，和 API 去支持呈现，未来前端 Web 开发岗位面临的变成环境，很有可能会从电子屏幕转向空间展示。
参考来源
juejin.cn/post/751461… 作者：limengzhe
总结与展望
苹果从拟物化到扁平化，再到如今 Liquid Glass 的设计语言变革，是技术发展与用户需求共同作用的结果 。Liquid Glass 的出现，不仅是视觉上的革新，更是对未来信息呈现多元化趋势的积极响应 。它让我们看到了在二维与三维融合的道路上，设计与技术结合所能产生的无限可能 。
随着技术的不断进步，未来我们有望看到更多设备和应用采用更加多元化的信息呈现方式 。也许在不久的将来，我们能够通过更先进的设备，实现与信息的自然交互，就像与现实世界中的物体互动一样轻松自如 。无论是在工作、学习还是生活中，这种全新的交互体验都将为我们带来前所未有的便利和乐趣，让我们拭目以待，期待那个更加精彩的数字未来 。
