2025苹果iOS系统风格设计 Liquid Glass 设计解析

用户头像
北京/UI设计师/338天前/472浏览
2025苹果iOS系统风格设计 Liquid Glass 设计解析
【前言】
i2025年6月10日凌晨,苹果WWDC开发者大会上,发布了最新的 Liquid Glass(液态玻璃质感)美学性领先行业,颠覆了目前手机操作系统的设计语言表达。Liquid Glass独特的材质表达有些类似于之前热火的毛玻璃质感,iOS 的 Liquid Glass更加通透、清澈、流动,似水的流动感。
作为细节狂魔的苹果,苹果的iOS设计风格一直牵引着国内的手机厂商以及APP界面设计,本文详细解析 iOS26 的设计风格升级点;值得关注的一点是,iOS26发布会后,苹果的股价下跌了1.21%,所以我们也需要客观审视这一美学创新。
【目前大众对「液态玻璃」的质疑主要有以下几种】
1.可读性差
2.截图 Beta 版个别界面觉得丑,例如人像锁屏滑动到特定位置人脸扭曲
3.形式大于功能不适合主流界面系统,炒冷饭,和毛玻璃风格类似
逐一分析了一下:
1.可读性问题可以通过优化材质透明度和文字对比度规避
2.Beta 版存在的意义就是在正式发布前发现并优化小场景
3.至于功能问题,苹果对于形式和功能的分寸感一直拿捏得很好,我们可以放到正文的具体场景中解析
首先我们来看一下视频,直观感受下 Liquid Glass 在iOS界面中的表达:
Current Time 0:00
/
Duration Time 0:00
Progress: NaN%
Playback Rate
1.00x
Liquid Glass作为iOS26全新的设计语言,灵感源于VisionOS的空间计算理念,采用半透明毛玻璃效果,结合动态光影折射、圆角元素以及硬件适配,实现界面与设备的无缝融合。模糊效果对于系统算法和手机性能的要求很高,尤其是这种实时渲染效果,需要底层硬件的强大支持。
 Liquid Glass 4个主要的特征点:
  • 一种 悬浮于内容上方的
  • 与环境实时互动的
  • 全平台统一的
  • 透明玻璃质感的材质
一. 悬浮于内容上方
“悬浮于内容上方”使界面层级清晰,上面一层主要负责互动操作;下面一层主要负责呈现内容
2025苹果iOS系统风格设计 Liquid Glass 设计解析(图ZMTUxMjQwNjg=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
收藏
2025苹果iOS系统风格设计 Liquid Glass 设计解析(图ZMTUxMjQwNzI=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
收藏
控制中心的液态玻璃更像装着流动液体的玻璃瓶,弱化了容器的视觉权重,突出了容器内的视觉权重。但是风险点在于,由于玻璃的透光性太强,在壁纸上文字的可读性会降低很多。
2025苹果iOS系统风格设计 Liquid Glass 设计解析(图ZMTUxMjQwNjQ=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
收藏
2025苹果iOS系统风格设计 Liquid Glass 设计解析(图ZMTUxMjQwNDg=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
桌面组件&涂鸦笔
收藏
二.与环境实时互动的
材质与环境的实时互动让界面保持和谐,材质的颜色跟随环境实时渲染
环境偏亮文字就黑,偏暗就白,保障可读;环境挤尺寸就缩小,空就放大;
被用户关注就展开,否则就缩略;被用户点击就变亮变大
搭配动画让材质更有生命力
2025苹果iOS系统风格设计 Liquid Glass 设计解析(图ZMTUxMjQwNzY=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
动态渲染
收藏
三.全平台统一的
2025苹果iOS系统风格设计 Liquid Glass 设计解析(图ZMTUxMjQwNTI=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
收藏
2025苹果iOS系统风格设计 Liquid Glass 设计解析(图ZMTUxMjQwNTY=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
收藏
2025苹果iOS系统风格设计 Liquid Glass 设计解析(图ZMTUxMjQwNjA=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
桌面组件图标
收藏
四.透明玻璃质感的材质
液态玻璃在“文本放大镜”这块不谋而合,iOS26的“文本放大镜”更接近于我们真实物理世界的放大镜,对比旧版的设计,iOS26的“文本放大镜”被放大的文本和原文本的层级感更强,像一滴水滴在了书上。
iOS26的滑条按键的热区更大,圆润的玻璃质感更贴合滑条的流动性,让用户感觉滑动操作更流畅。
2025苹果iOS系统风格设计 Liquid Glass 设计解析(图ZMTUxMjQwNDA=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
文本放大镜&滑条
收藏
除了iOS26操作系统UI控件风格焕新之外,锁屏也是一大亮点:
【锁屏壁纸-动态排版布局】
国内的手机厂商也一直在锁屏上发力,做智能抠图,智能排版的视觉设计,但iOS惊艳我的地方在于将这种排版布局与交互手势融合在了一起,将视觉美学融入用户的交互操作中。
2025苹果iOS系统风格设计 Liquid Glass 设计解析(图ZMTUxMjQwODA=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
收藏
2025苹果iOS系统风格设计 Liquid Glass 设计解析(图ZMTUxMjQwODQ=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
收藏
2025苹果iOS系统风格设计 Liquid Glass 设计解析(图ZMTUxMjQwODg=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
收藏
2025苹果iOS系统风格设计 Liquid Glass 设计解析(图ZMTUxMjQwOTI=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
收藏
2025苹果iOS系统风格设计 Liquid Glass 设计解析(图ZMTUxMjQwOTY=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
收藏
2025苹果iOS系统风格设计 Liquid Glass 设计解析(图ZMTUxMjQxMDA=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
锁屏壁纸
收藏
2D壁纸变3D
2025苹果iOS系统风格设计 Liquid Glass 设计解析(图ZMTUxMjQxMDQ=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
锁屏壁纸
收藏
2
举报
|
3
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
UI 登录界面设计模板包
钱包ui模板
【新年UI图标】汽车icon
手表表盘UI系列
UI界面 组件
【新年UI图标】优惠券icon
【新年UI图标】游戏/娱乐icon
Security Camera UI kit
智能家居中心 简约 UI设计组件库
新拟态风格 UI设计组件库
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
盲盒APP UI设计
【新年UI图标】影音icon
3D渐变流体抽象矢量UI背景图
【新年UI图标】钱包icon
新能源APP应用UIKit
科技医疗透明柜UI界面设计
UI通用设计素材1
【新年UI图标】银行卡icon
抽象液态渐变UI背景模版
【新年UI图标】珠宝icon
【新年UI图标】30个图标
拟物风质感写实UI卡片合集源文件
你可能喜欢
相关收藏夹
UI
UI
UI
UI
大家都在看
登录注册