大数跨境

iPhone Duo官方设计资源来了!抢先拆解3个神仙交互,原来折叠屏该这么用

iPhone Duo官方设计资源来了!抢先拆解3个神仙交互,原来折叠屏该这么用 优设AIGC
2026-09-12
7
导读:苹果开发者官网上线了全新章节与配套视频,甚至把iPhone Duo 展开与合上状态的高清 PNG 和 PSD 素材都打包放了出来

近日,iPhone Duo 引发设计圈热议。苹果此次推出的软件方案,成功理顺了双屏交互的逻辑,其完整度与系统性超出预期。针对以往折叠屏软件规范缺失、开发者仅机械拉伸界面的痛点,苹果在发布会后迅速上线了全新的开发者指南及配套视频,并提供了 iPhone Duo 展开与闭合状态的高清 PNG 和 PSD 素材。

以下梳理核心资料,并深度解析此次最具价值的三个交互细节。

无与伦比的翻折动效

iPhone Duo 内屏展开瞬间的 Liquid Glass 动效令人惊艳。不同于传统折叠屏画面的突兀闪现或生硬拉伸,苹果采用了类似揭开磨砂毛玻璃的细腻处理。

随着设备展开,半透明虚化效果随开合角度流动淡出,折叠中线徐徐消散,内容顺畅融合为整块开阔画布。动效随铰链角度无级变化,将物理材质的折叠完美映射至软件界面。

此外,右上角沿用了十余年的状态栏也被精简。蜂窝网络、WiFi 及电池电量三图标被合并为一枚信息胶囊:底部四点展示信号,中间嵌入 WiFi 图标,外围半圆进度条显示电量。这一复合组件既节省了侧边空间,又确保信息一目了然。

控件布局右移优化

苹果将底部标签栏和顶部工具栏旋转 90 度并移至屏幕右侧,这是一项关键的交互决策。

合上状态下设备屏幕变宽变矮,若沿用上下横条布局,垂直可视区域将大幅缩减。苹果将返回按钮、标题、标签栏等整合为右侧垂直控件区,最大化保留了中间完整的纵向内容空间。

从手感考量,对于右手单手握持用户,高频点击图标均位于大拇指舒适扇区内,无需调整姿势即可轻松操作左上角返回键或顶部功能,显著提升了操作便捷性。

屏幕折痕的系统级适配

区别于安卓阵营对硬件折痕的规避,苹果在软件层面将中间弧面转化为设计元素。

当手机半折叠时,系统底层自动将内容向两侧推开,使中间隆起的弧面自然成为排版中轴线,实现两边阅读互不干扰。更关键的是,按钮、输入框等交互组件会自动避开折痕区域,平滑推移至两侧平整区,彻底消除了误触尴尬。该避让机制已封装在系统原生组件中,开发者调用即可获得一致的高级体验。

此特性还衍生出灵活的使用姿态:立置模式下,上半屏展示视频或内容,下半屏作为控制板,甚至可利用镜面反射增强视觉效果。

官方设计规范资源

建议开发者重点研读 Apple 人机界面指南(HIG)中的《Designing for iPhone Duo》专题,其中详细规定了尺寸类别、折叠姿态避让及侧边栏重构原则。

同时推荐观看 Tech Talks 系列讲座:

核心设计拆解

由 Apple 设计师 Marcos 和 Vince 主讲,详细解析外屏、内屏及半折叠姿态下的界面变化规律。

控制栏体验提升

演示导航栏、工具栏和标签栏在侧边垂直排列时的溢出规则与优先级控制。

自适应布局实战

解答如何围绕铰链物理区域构建自适应响应式界面。

优秀的交互设计不应掩盖硬件局限,而应顺应物理特性。iPhone Duo 证明,硬件形态的进化需要更深度的交互语言承载。面对新规则,建议开发者尽早熟悉官方资源,为未来生态做好准备。

【声明】内容源于网络
0
0
优设AIGC
加入小鸡AI探秘队,每日用热点解锁AI知识。优设网已运营13年,国内专业设计师及AI创作者平台。
内容 11594
粉丝 0
优设AIGC 加入小鸡AI探秘队,每日用热点解锁AI知识。优设网已运营13年,国内专业设计师及AI创作者平台。
总阅读179.0k
粉丝0
内容11.6k