做了十年的iOS交互,被折叠屏iPhone Duo推翻了?

0 评论 132 浏览 0 收藏 9 分钟

苹果首款折叠屏iPhoneDuo发布后,适配的iOS不再把每款机型都当作上下带导航栏的竖屏,标签栏、工具栏与操作按钮被移到右侧易达区域。本文从体验设计角度分析这次适配带来的连锁变化。

苹果首款折叠屏iPhone终于发布了。作为一名用户体验设计师,在我看来硬件只是整个产品的一部分。

更值得关注的变化在于软件层面:适配后的iOS不再将每款iPhone都视为“上下带导航栏的竖屏模式”。

在iPhone Duo上,标签栏、工具栏和操作按钮都移到了屏幕容易触及的右侧区域,为需要滚动浏览的内容释放出更多纵向空间。

01 快速认识iPhone Duo

iPhone Duo是一款采用书本式折叠设计的手机,拥有两块超视网膜XDR显示屏,而且两块显示屏的宽高比相同。

  • 一块5.4英寸的外屏,用于设备闭合时的日常单手操作
  • 一块 7.6 英寸的内屏,展开后使用。这也是迄今为止尺寸最大的iPhone屏幕。

iOS 已经针对这种屏幕尺寸进行了更新。过去位于屏幕下面的元素,现在都放在了屏幕的右侧。这样在用户切换屏幕状态时,屏幕上就有更多的空间可以用来显示内容了。

无论设备是闭合还是展开状态,屏幕上都会有更多的空间可以用来显示内容。

苹果官方的设计原则非常明确:你本质上仍是在为 iPhone设计应用,那些熟悉的iOS设计模式依然适用。

真正的变化在于:布局需要适配不同尺寸、在两块屏幕间保持体验一致,并且在设备折叠过程中始终保证控件易于触碰。

02 App应用未适配情况

在讲设计原则之前,我们不妨先看看问题所在。

目前已有大量的应用能在Duo上运行,但大多都还没有适配新的显示特性。最终呈现出典型的兼容模式效果:竖屏手机尺寸的UI被“放在”更大的屏幕中央,剩余区域被黑边填满。

在外屏上,这个问题表现得更隐蔽。内容靠左排布在较窄的区域里,屏幕右侧大片空间被浪费。

在内屏上,这个问题则更难被忽视。我们花钱买了苹果最大的iPhone屏幕,结果一半的区域却毫无用处。

还有一些应用虽然占据了更多的屏幕空间,但仍保留着传统的界面控件布局习惯:底部标签栏悬浮在内容之上,主要操作按钮集中在顶部,完全没有利用Duo主打 “侧边控件” 的设计模式。

这就是适配工作的意义所在。如果没有适配,Duo就算不上是一次真正的“新 iPhone体验”。它给人的感觉就像是将旧版iPhone的UI套在了新硬件上而已。

03 围绕尺寸而非姿态做设计

用户会以多种姿势握持、放置iPhone Duo:闭合、完全展开、像书本一样半折叠、立在桌面等等。

从设计角度出发,核心结论是:你不需要为每一种折叠姿态都做一套专属布局。苹果的建议是依托尺寸类(Size Classes)进行设计:

  • 外屏对应「紧凑宽度(Compact width)」
  • 内屏对应「常规宽度(Regular width)」

基于这两个基础尺寸,就能覆盖所有折叠姿态的布局逻辑,不用再设计一大堆不同折叠角度的页面。

苹果自带的邮件App就是这种设计思路的典型案例。在外屏上,它是聚焦的单栏视图;在内屏上,同一款应用可以呈现更丰富的层级——列表与详情并排展示,但整体产品体验依然连贯统一。

这也是需要设计师发力的地方:打造一种连续、自适应的体验,而不是靠铰链拼接起来的两个独立应用。

04 控件移至屏幕右侧的UX变化

这是我认为最值得反复强调的变化。

由于 Duo 的外屏相比传统 iPhone 更宽、更短,系统将工具栏、标签栏和导航控件都移到了屏幕右侧。这既最大化了内容的纵向展示空间,也让操作按钮都落在拇指更容易触达的范围内。

当设备展开进入横屏状态时,这些控件通常也会保留在侧边,保证用户在内外屏切换时体验一致。

多年来,iPhone的UX逻辑一直是“顶部导航+底部标签栏”。Duo 正在挑战这种用户操作习惯:

  • 安全区域比以往任何时候都更重要,因为内容空间不再是对称的;
  • 工具栏的布局方式是关乎用户体验的重要决策,例如哪些保留可见,哪些收进更多选项;
  • 控件应靠近它所作用的内容,而非默认全部堆到尾部侧边;
  • 熟悉的界面布局依然很重要,避免用户每次折叠设备都要重新学习界面。

在分屏布局中,最后一点尤为重要。左侧屏幕中的控件可以保留在左侧区域内,右屏幕的操作按钮则放在右侧边缘。

和前面未适配的例子相比,体验天差地别:一种是UI在和硬件形态较劲,另一种则是真正围绕用户的握持习惯设计。

05 设计师的适配落地步骤

如果明天要评审一款应用的Duo适配方案,我不会从画六种折叠姿态的界面开始。

我会从这几点入手:

  • 梳理界面控件:目前有哪些操作放在顶部或底部?移到侧边之后会发生什么?
  • 明确紧凑版与常规版的差异:内屏上可以承载哪些额外的层级或信息密度?
  • 保障折痕处的可达性:设备半开时主要操作要避开铰链区域
  • 最后再探索双屏场景:多任务、双屏联动、铰链交互这些能真正创造价值的特性

这个顺序很重要。那些未适配的App体验不好,不是因为缺少巧妙的铰链动画,而是因为它们还在用旧 iPhone 的屏幕逻辑做设计。

作者:Clip设计夹 公众号:Clip设计夹

本文由 @Clip设计夹 原创发布于人人都是产品经理。未经作者许可,禁止转载

题图来自 Unsplash,基于CC0协议

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
海报
评论
评论请登录
  1. 目前还没评论,等你发挥!