大家好,欢迎回到我们的设计干货系列。
在前两期,我们分别梳理了iOS 26的设计参数大全和字体排版规范详解。今天,我们将聚焦iOS 26设计中视觉冲击力最强的两个部分——图标系统与UI控件。
iOS 26被誉为自iOS 7以来最大的一次设计革新,苹果首次在超过10年后对系统图标进行了全面重绘。与此同时,控件系统也全面拥抱“液态玻璃”设计语言,悬浮、通透、动态光效成为新常态。
本文将为你详细拆解iOS 26的图标与控件设计规范,附可直接使用的参数表格,帮助新手快速掌握这套全新的设计语言。
iOS 26的图标设计基于全新的“液态玻璃”设计哲学。这不仅是视觉风格的更新,更是苹果统一各平台设计语言的重要一步。
核心特点:
通透感:图标采用半透明分层设计,透出底层的壁纸,形成“玻璃面板”效果
动态光效:图标的玻璃层会随设备移动产生微妙的光影变化,添加动态定向光效果
深度感:通过多层叠加和阴影,营造出图标悬浮在屏幕上的视觉感受
iOS 26最大的变化之一:所有平台图标形状统一。
| 统一圆角矩形 | ||
| 与iOS相同 | ||
设计参数:
圆角半径:约为图标宽度的20%
安全区域:圆形元素需从边缘向内缩进一定距离,确保视觉平衡
裁剪方式:系统自动应用圆角蒙版,设计师提交正方形图标即可
iOS 26为用户提供了前所未有的图标自定义能力:
| 默认样式 | ||
| Clear(透明) | ||
| Tinted(着色) |
Clear模式细节:
浅色模式:图标调暗下方壁纸亮度
深色模式:保持透明,叠加更深的图层确保可读性
自动模式:根据系统外观自动切换
Tinted模式实现方式:
自动匹配:识别iPhone机身颜色(如iPhone 16 Pro的沙漠钛金属色)
自动匹配:识别官方MagSafe保护壳颜色
手动选择:在设置中选择任意颜色或从壁纸中提取
虽然iOS 26引入了新的视觉效果,但基础尺寸要求保持不变:
| 1024×1024 px | ||
重要提示:iOS 26支持分层图标格式(.icon文件),通过Xcode 26的Icon Composer编译,可实现深色/浅色/清晰/着色多种模式的自动切换。
为了让图标在各种系统效果下都能保持清晰可辨,苹果更新了设计指南:
一个清晰的想法:用户应在1秒内理解图标含义,避免多个小符号堆砌
强对比度:前景与背景必须有足够对比,因为系统会叠加玻璃效果
简洁的轮廓:复杂的细节会被玻璃效果模糊,确保主体形状简洁
避免文字:小字号文字在系统缩放和效果叠加后会无法识别
不要预加圆角:系统会自动应用圆角蒙版,提交正方形图标即可
新旧系统对比:在iOS 18及以前运行的图标不会获得液态玻璃效果,仍保持传统扁平样式。这意味着需要为不同系统版本设计兼容方案。
iOS 26的控件系统全面升级,核心变化是:控件从“贴附”界面变为“悬浮”在界面之上。
| 62pt | ||
设计要点:
状态栏只存在黑白两种颜色,系统根据背景自动选择高对比度方案
设计师需确保设计稿中状态栏与背景对比度足够
重要变化:iOS 26取消了首页指示器的默认显示方案!
以前:始终显示底部横条
现在:只在用户交互时暂时出现
设计建议:可以完全不在设计稿中绘制这个控件
iOS 26的按钮风格发生重大转变:从文字按钮转向SF Symbols图标按钮。
| SF Symbols图标 | ||
| 大圆角/胶囊 | ||
代码实现示例(供开发参考):
swift
let closeButton =UIBarButtonItem( barButtonSystemItem:.close, target:self, action:#selector(closeButtonTapped))// 系统自动在iOS 26+渲染为液态玻璃风格,在旧版本保持传统样式[citation:5]
苹果在iOS 26中重新定义了工具栏的概念:
只要是一组水平排列在页面顶部或底部的控件,都叫工具栏——甚至包括传统的导航栏!
工具栏可包含三类元素:
当前界面的标题/副标题
导航控件(后退前进、页面指示器、搜索栏)
按钮和菜单
悬浮式标签栏是iOS 26的标志性更新:
| 悬浮 | ||
| 95pt | ||
设计参数:
距离底部边距:21pt
控件区域高度:62pt
完整区域高度:95pt(包含悬浮空间)
iOS 26对编辑菜单进行了简化:
以前:带指向内容的小箭头
现在:去掉小箭头,边框整体变成圆角
默认命令:剪切、复制、全选、翻译等
为配合液态玻璃风格,开关样式做了调整:
以前:有厚度感的拟物风格
现在:扁平细长的滑轨样式,模拟玻璃质感
状态:开/关,通常配合文字说明作用对象
| 更细 | ||
分段控制器用于在不同视图间切换,iOS 26版本特点:
按钮宽度相等(均分)
可融入毛玻璃背景
支持互斥选择或同时启用(如文本属性)
iOS 26对日期选择器进行了精细化设计:
两种形态:
折叠态:仅显示核心信息(如“Apr 1, 2025 9:41 AM”)
展开态:显示完整月份视图(含星期、日期数字)和时间选择栏
视觉适配:
浅色模式:浅色背景+深色文本
深色模式:深色背景+浅色文本
进度指示器分为两类:
可估算进度:用于可预估剩余数值的场景(下载、数据统计)
不可估算进度:用于加载、刷新等场景(转圈动画)
即Banner指示器(那一排小圆点),iOS 26中可:
用于Banner轮播指示
用于主屏桌面页面滚动指示
可组合在工具栏中
重要变化:iOS 26允许动作表单从别处的按钮上弹出来,不再局限于底部弹出。
以前:总是从底部弹出,覆盖黑色遮罩
现在:可从触发按钮处弹出(如发送邮件时的取消按钮)
破坏性操作:用红色标出
警报用于重要操作的二次确认或系统状态提醒:
删除确认
登出确认
取消订阅
权限请求
设计建议:警报基本使用iOS提供的系统样式即可,无需自定义。
菜单需用户交互后展示,以节省空间的方式组织多项命令:
常见类型:
上下文菜单:选中对象后出现对应命令选项
主屏幕快捷操作:长按App图标后出现
| 统一圆角矩形 | ||
| 更大 | ||
图标预加圆角:系统会自动应用圆角蒙版,提交正方形图标即可
图标包含文字:小字号在系统缩放后会无法识别
忽略透明模式测试:Clear模式下图标需足够简洁才能保持可识别
标签栏还贴底:iOS 26应采用悬浮标签栏,留出底部边距
还在画首页指示器:iOS 26已默认隐藏,可以不画
导航栏还用文字按钮:新规范鼓励使用SF Symbols图标
图标设计保持简洁轮廓,确保在各种系统效果下清晰可辨
提交1024×1024正方形PNG,让系统处理圆角和效果
标签栏留出底部21pt边距,采用悬浮设计
导航按钮优先考虑SF Symbols
测试图标在Clear和Tinted模式下的表现
iOS 26的图标与控件设计规范,标志着苹果设计语言的一次重大跃迁:
图标层面:十年来的首次全面重绘,统一各平台设计语言,引入液态玻璃效果和动态光效,同时为用户提供Clear和Tinted等前所未有的自定义选项。
控件层面:全面拥抱悬浮设计,标签栏不再贴底、首页指示器默认隐藏、按钮转向图标为主、开关更加扁平——所有变化都指向一个目标:让界面更通透、更轻盈、更像“液态玻璃”。
对于设计师而言,掌握这套规范意味着:
图标设计:简洁轮廓+强对比度,为系统效果留出空间
控件使用:悬浮式标签栏是标配,底部留白是新常态
新旧兼容:考虑iOS 18及以前的降级显示方案
如果你正在设计iOS 26的新项目,建议将悬浮标签栏、大圆角按钮、SF Symbols导航图标作为标配,并充分利用新的图标自定义能力,让产品既有苹果的原生质感,又有独特的个性表达。
下一期,我们将带来iOS 26的交互动效设计规范,敬请期待。