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

用户头像
北京/UI设计师/1年前/498浏览
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图标】积分icon
高级表盘系列UI源文件
【新年UI图标】旅行icon
智能家居中心 简约 UI设计组件库
新拟态风格 UI设计组件库
【新年UI图标】礼物/活动icon
【新年UI图标】相机icon
UI 登录界面设计模板包
UI通用设计素材1
UI界面 组件
钱包ui模板
手表表盘UI系列
APP/小程序商业项目UI模板|99个高保真UI+79个原型
【新年UI图标】美食icon
科技医疗透明柜UI界面设计
高级感金属拟物 UI设计组件库
【新年UI图标】活动icon
户外旅行飞机情侣假日出行
【新年UI图标】银行卡icon
Security Camera UI kit
我的钱包-UI界面设计-app
新能源APP应用UIKit
你可能喜欢
相关收藏夹
地产VI
地产VI
地产VI
地产VI
大家都在看
登录注册