🚀 公告演示 全新视觉的Wordpress主题,基于 Astro架构!后台可编辑 点击查看 →
按 Ctrl + D 收藏本站 或 拖动LOGO到书签栏
还没有任何内容
Hello,这里是Clip设计夹,今天分享的是「iPhone Duo适配设计」。
苹果首款折叠屏iPhone终于发布了。作为一名用户体验设计师,在我看来硬件只是整个产品的一部分。
更值得关注的变化在于软件层面:适配后的iOS不再将每款iPhone都视为“上下带导航栏的竖屏模式”。
在iPhone Duo上,标签栏、工具栏和操作按钮都移到了屏幕容易触及的右侧区域,为需要滚动浏览的内容释放出更多纵向空间。
iPhone Duo是一款采用书本式折叠设计的手机,拥有两块超视网膜XDR显示屏,而且两块显示屏的宽高比相同。
iOS 已经针对这种屏幕尺寸进行了更新。过去位于屏幕下面的元素,现在都放在了屏幕的右侧。这样在用户切换屏幕状态时,屏幕上就有更多的空间可以用来显示内容了。无论设备是闭合还是展开状态,屏幕上都会有更多的空间可以用来显示内容。
苹果官方的设计原则非常明确:你本质上仍是在为 iPhone 设计应用,那些熟悉的iOS设计模式依然适用。
真正的变化在于:布局需要适配不同尺寸、在两块屏幕间保持体验一致,并且在设备折叠过程中始终保证控件易于触碰。
在讲设计原则之前,我们不妨先看看问题所在。
目前已有大量的应用能在Duo上运行,但大多都还没有适配新的显示特性。最终呈现出典型的兼容模式效果:竖屏手机尺寸的UI被“放在”更大的屏幕中央,剩余区域被黑边填满。
在外屏上,这个问题表现得更隐蔽。内容靠左排布在较窄的区域里,屏幕右侧大片空间被浪费。在内屏上,这个问题则更难被忽视。我们花钱买了苹果最大的iPhone屏幕,结果一半的区域却毫无用处。
还有一些应用虽然占据了更多的屏幕空间,但仍保留着传统的界面控件布局习惯:底部标签栏悬浮在内容之上,主要操作按钮集中在顶部,完全没有利用 Duo 主打「侧边控件」的设计模式。
这就是适配工作的意义所在。如果没有适配,Duo就算不上是一次真正的“新 iPhone体验”。它给人的感觉就像是将旧版iPhone的UI套在了新硬件上而已。
用户会以多种姿势握持、放置iPhone Duo:闭合、完全展开、像书本一样半折叠、立在桌面等等。
从设计角度出发,核心结论是:你不需要为每一种折叠姿态都做一套专属布局。苹果的建议是依托尺寸类(Size Classes)进行设计:
基于这两个基础尺寸,就能覆盖所有折叠姿态的布局逻辑,不用再设计一大堆不同折叠角度的页面。
苹果自带的邮件App就是这种设计思路的典型案例。在外屏上,它是聚焦的单栏视图;在内屏上,同一款应用可以呈现更丰富的层级——列表与详情并排展示,但整体产品体验依然连贯统一。
这也是需要设计师发力的地方:打造一种连续、自适应的体验,而不是靠铰链拼接起来的两个独立应用。
这是我认为最值得反复强调的变化。
由于 Duo 的外屏相比传统 iPhone 更宽、更短,系统将工具栏、标签栏和导航控件都移到了屏幕右侧。这既最大化了内容的纵向展示空间,也让操作按钮都落在拇指更容易触达的范围内。当设备展开进入横屏状态时,这些控件通常也会保留在侧边,保证用户在内外屏切换时体验一致。
多年来,iPhone的UX逻辑一直是“顶部导航+底部标签栏”。Duo 正在挑战这种用户操作习惯:
在分屏布局中,最后一点尤为重要。左侧屏幕中的控件可以保留在左侧区域内,右屏幕的操作按钮则放在右侧边缘。
和前面未适配的例子相比,体验天差地别:一种是UI在和硬件形态较劲,另一种则是真正围绕用户的握持习惯设计。
如果明天要评审一款应用的Duo适配方案,我不会从画六种折叠姿态的界面开始。我会从这几点入手:
这个顺序很重要。那些未适配的App体验不好,不是因为缺少巧妙的铰链动画,而是因为它们还在用旧 iPhone 的屏幕逻辑做设计。
喜欢这篇内容吗?点击评论
普通照片也能出彩!12个高审美Skill解锁8种视觉玩法
豆瓣年度推荐图书小程序
电商设计提效了!8组案例教你用AI批量做全套主图
黑神话悟空主题壁纸小程序
马里奥主题壁纸小程序
做了十年的iOS交互,被折叠屏iPhone Duo推翻了?
奖励已发放至卡包中
Hello,这里是Clip设计夹,今天分享的是「iPhone Duo适配设计」。
苹果首款折叠屏iPhone终于发布了。作为一名用户体验设计师,在我看来硬件只是整个产品的一部分。
更值得关注的变化在于软件层面:适配后的iOS不再将每款iPhone都视为“上下带导航栏的竖屏模式”。
在iPhone Duo上,标签栏、工具栏和操作按钮都移到了屏幕容易触及的右侧区域,为需要滚动浏览的内容释放出更多纵向空间。
二、快速认识iPhone Duo
iPhone Duo是一款采用书本式折叠设计的手机,拥有两块超视网膜XDR显示屏,而且两块显示屏的宽高比相同。
iOS 已经针对这种屏幕尺寸进行了更新。过去位于屏幕下面的元素,现在都放在了屏幕的右侧。这样在用户切换屏幕状态时,屏幕上就有更多的空间可以用来显示内容了。无论设备是闭合还是展开状态,屏幕上都会有更多的空间可以用来显示内容。
苹果官方的设计原则非常明确:你本质上仍是在为 iPhone 设计应用,那些熟悉的iOS设计模式依然适用。
真正的变化在于:布局需要适配不同尺寸、在两块屏幕间保持体验一致,并且在设备折叠过程中始终保证控件易于触碰。
三、App应用未适配情况
在讲设计原则之前,我们不妨先看看问题所在。
目前已有大量的应用能在Duo上运行,但大多都还没有适配新的显示特性。最终呈现出典型的兼容模式效果:竖屏手机尺寸的UI被“放在”更大的屏幕中央,剩余区域被黑边填满。
在外屏上,这个问题表现得更隐蔽。内容靠左排布在较窄的区域里,屏幕右侧大片空间被浪费。在内屏上,这个问题则更难被忽视。我们花钱买了苹果最大的iPhone屏幕,结果一半的区域却毫无用处。
还有一些应用虽然占据了更多的屏幕空间,但仍保留着传统的界面控件布局习惯:底部标签栏悬浮在内容之上,主要操作按钮集中在顶部,完全没有利用 Duo 主打「侧边控件」的设计模式。
这就是适配工作的意义所在。如果没有适配,Duo就算不上是一次真正的“新 iPhone体验”。它给人的感觉就像是将旧版iPhone的UI套在了新硬件上而已。
四、围绕尺寸而非姿态做设计
用户会以多种姿势握持、放置iPhone Duo:闭合、完全展开、像书本一样半折叠、立在桌面等等。
从设计角度出发,核心结论是:你不需要为每一种折叠姿态都做一套专属布局。苹果的建议是依托尺寸类(Size Classes)进行设计:
基于这两个基础尺寸,就能覆盖所有折叠姿态的布局逻辑,不用再设计一大堆不同折叠角度的页面。
苹果自带的邮件App就是这种设计思路的典型案例。在外屏上,它是聚焦的单栏视图;在内屏上,同一款应用可以呈现更丰富的层级——列表与详情并排展示,但整体产品体验依然连贯统一。
这也是需要设计师发力的地方:打造一种连续、自适应的体验,而不是靠铰链拼接起来的两个独立应用。
五、控件移至屏幕右侧的UX变化
这是我认为最值得反复强调的变化。
由于 Duo 的外屏相比传统 iPhone 更宽、更短,系统将工具栏、标签栏和导航控件都移到了屏幕右侧。这既最大化了内容的纵向展示空间,也让操作按钮都落在拇指更容易触达的范围内。当设备展开进入横屏状态时,这些控件通常也会保留在侧边,保证用户在内外屏切换时体验一致。
多年来,iPhone的UX逻辑一直是“顶部导航+底部标签栏”。Duo 正在挑战这种用户操作习惯:
在分屏布局中,最后一点尤为重要。左侧屏幕中的控件可以保留在左侧区域内,右屏幕的操作按钮则放在右侧边缘。
和前面未适配的例子相比,体验天差地别:一种是UI在和硬件形态较劲,另一种则是真正围绕用户的握持习惯设计。
六、设计师的适配落地步骤
如果明天要评审一款应用的Duo适配方案,我不会从画六种折叠姿态的界面开始。我会从这几点入手:
这个顺序很重要。那些未适配的App体验不好,不是因为缺少巧妙的铰链动画,而是因为它们还在用旧 iPhone 的屏幕逻辑做设计。
喜欢这篇内容吗?