兰亭妙微ui设计公司分享:做了十年 iOS 交互,折叠屏 iPhone Duo 正在重构设计范式

全文速览

兰亭妙微ui设计公司分享:苹果首款折叠机型 iPhone Duo 正式登场。硬件形态之外,真正带来变革的是 iOS 交互逻辑的迭代:iOS 不再默认把所有 iPhone 都定义为「顶部导航 + 底部标签栏」的传统竖屏设备。在 iPhone Duo 上,标签栏、工具栏、操作控件迁移至拇指更易触及的屏幕右侧,释放纵向滚动空间,为折叠形态下的内容展示创造更多可能性。

一、快速读懂 iPhone Duo

image.png

iPhone Duo 采用书本式内折方案,搭载两块比例一致的超视网膜 XDR 显示屏:

  • 5.4 英寸外屏:设备闭合状态,主打单手便捷操作;
  • 7.6 英寸内屏:完全展开使用,也是迄今为止尺寸最大的 iPhone 屏幕。image.png

iOS 针对双屏硬件完成交互更新:原本分布在屏幕底部的界面控件,迁移至屏幕侧边,无论设备处于闭合还是展开,最大化留给内容的显示面积。

苹果的设计立场十分清晰:它依旧是一台 iPhone,成熟的 iOS 设计模式仍然有效。真正的改变在于:布局需要兼容多套屏幕尺寸,在内外屏切换过程维持体验连贯,同时保证各类控件在折叠不同状态下,都能够被轻松触碰。

二、未适配应用的真实痛点

 

image.png

 

目前绝大多数 App 可以直接在 iPhone Duo 上运行,但大量应用尚未针对折叠特性做专门适配,暴露出兼容模式的诸多短板:

不少 App 直接将传统竖版 iPhone 界面居中放置在大屏内,屏幕两侧填充黑边。

  • 在外屏:内容整体靠左,右侧大片屏幕空间被白白浪费;
  • 在内屏:用户拥有更大尺寸的屏幕,却有近半显示区域无法被利用。

 

image.png

还有一部分应用虽然填满屏幕,但依旧固守旧版交互习惯:底部标签栏悬浮于内容之上,核心操作控件集中在页面顶部,完全没有利用 Duo「侧边控件」的全新交互逻辑。

这正是适配工作的价值所在。如果缺少针对性优化,iPhone Duo 就只是把旧版 iPhone UI 强行套进新硬件,无法发挥折叠设备的体验优势。

三、以尺寸为核心,而非折叠姿态做设计

 

用户握持 iPhone Duo 的方式丰富多样:闭合、完全展开、书本式半折、桌面立放……

设计师不必为每一种折叠角度单独定制一套界面。苹果给出的核心思路,依托Size Classes(尺寸类)完成响应式布局:

  1. 闭合外屏 → 紧凑宽度 Compact Width
  2. 展开内屏 → 常规宽度 Regular Width

依靠这两套基础尺寸,就可以覆盖全部折叠姿态的布局逻辑,规避大量冗余页面开发。

系统自带邮件 App 就是典型范本:外屏呈现简洁的单栏浏览;展开内屏之后,升级为列表‑详情双栏并排,信息层级更加丰富,整套体验连贯统一。

折叠屏设计追求的,是一套连续自适应的完整体验,而不是两块屏幕靠铰链生硬拼接成两个独立 App。

四、控件右移:iOS 交互的重大转向

image.png

这是本次迭代最值得设计师重视的 UX 变革。

iPhone Duo 外屏相比传统 iPhone,更宽、纵向高度更短。系统将工具栏、标签栏、导航控件统一挪至屏幕右侧。一方面释放纵向内容区域,另一方面把高频操作放在右手拇指舒适可达的范围;设备展开之后,这套侧边控件逻辑继续沿用,保障内外屏切换时交互认知不会断裂。

过去十年 iPhone 已经形成根深蒂固的习惯:顶部导航 + 底部标签栏。而 iPhone Duo 正在打破这套固有范式,带来几点关键设计提醒:image.png

  1. 安全区域的权重进一步提升,界面可用空间不再对称;
  2. 工具栏布局需要重新权衡:哪些控件常驻显示,哪些收纳进更多选项;
  3. 控件尽量靠近它所作用的内容,不要简单粗暴全部堆到侧边;
  4. 保留用户熟悉的交互记忆,不要让用户每一次折叠开合,都要重新学习界面。

在分屏场景中,该原则尤为关键:左分栏的操作控件留在左侧区域,右分栏操作按钮放在右边缘。

适配与未适配,是两种截然不同的体验:前者让 UI 顺应硬件与人的握持习惯;后者则是界面在和硬件形态互相 “对抗”。

五、设计师落地适配的实操步骤

评审 iPhone Duo 适配方案,不要一上来就绘制五六种折叠姿态的高保真界面,可以按照这个优先级推进:

  1. 盘点现有界面控件:梳理当前放在顶部、底部的全部操作按钮,评估迁移至侧边之后会产生哪些连锁变化;
  2. 区分紧凑 / 常规两套尺寸差异:思考在内屏的宽屏环境下,可以增加哪些信息层级、提升信息密度;
  3. 规避铰链折痕区域:设备半折状态,核心交互控件避开中间铰链位置;
  4. 最后探索折叠特有场景:多任务、双屏联动、铰链动效等增值特性。

很多未适配 App 体验糟糕,问题往往不在于缺少炫酷铰链动画,而是仍在用传统直板 iPhone 的思维,去设计折叠设备。

 

 

转载:站酷

 

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档