随着iPhone Duo的发布,除了手机硬件的新形态外,最引人注目的是交互动效上的丝滑体验,将折叠屏开合的爽点最大化。本文主要拆解iPhone Duo 交互设计,来看看交互设计师可以从中学到些什么?在适配折叠屏时需要注意些什么?
Apple设计团队在《Design for iPhone Duo》里,讲了一套贯穿正太设备的设计思路:APP
要跟随屏幕大小、折叠状态和摆放方式调整,同时保持功能和操作逻辑一致。
iPhone Duo可以合拢、展开、半展开、自行立起,这些姿态对应着不同的浏览和操作方式,界面设计需要重新考虑内容的位置,手指的触达距离,以及操作设备时的稳定性。
区别与传统安卓厂商对于折叠屏的保守适配方式,iPhone Duo率先将信号栏、标签栏、工具栏、返回按钮等导航控件移动到右侧,给左侧内容腾出更多的纵向空间,方便右手操作。
“三合一”的设计是最具话题性的热点,融合了WiFi、蜂窝信号、电量3个图标。这个小球的精妙之处在于3种不同信息共享空间,并保留各自独立的识别方式。
在实际项目中,图标设计的难度在于甲方产品希望一个新图标能完全替代文字表述,接受不了抽象和概括,所以往往不是设计师没有创意,而是和业内拉通是最安全的选择。
当iPhone Duo像一本书,文字和图片向两侧重新排布,让中分的物理弯曲成为界面布局的自然分割,按钮和其他可点击的元素也会向两侧移动,便于操作。
当iPhone Duo竖立放在桌上使用时,交互的元素会移动到下下半屏,让用户的交互操作有桌面支撑,保持设备稳定。
对于大多数浏览内容的界面,需要单独为右侧控件留出空间
2. 对于不需要滚动,以画面为主的沉浸式界面,仍可以相对整个屏幕居中
iPhone Duo的内外屏切换动效最近一直是刷屏般的热度,动效设计运用的是错觉拼接的原理,类似于《笼中窥梦》的效果,让软件贯穿硬件。
比起动效设计本身,苹果团队对于软件交互的重视才是更可贵的。在实际项目中,动效落地需要投入较大的人力资源和时间成本来打磨细节,很多研发团队在开源节流的情况下,首先裁掉的就是动效设计,觉得用户关注不到。
但实际上,动效成为了此次iPhone Duo的一个很大的亮点,因为这个动效恰好击中了用户开合屏幕的爽点上,属于精准打击了。
Phone Duo 和安卓折叠屏最大的不同是什么?
华为Pura系列、荣耀Magic V系列折叠的逻辑是内屏灭,外屏亮;视觉上就是关闭了一个屏幕,开启了一个新的屏幕,用户感知到的是两台设备在来回调,并没有感知到一个屏幕自身在进行变形。
动效设计很好的支撑起了这种变形过程,让用户把折叠理解成同一内容的尺寸变化,减弱再点亮另一块。
1.当外屏拉起键盘,外屏还好用吗?打开微信后,还能同时看到多少上文?
2. iPhone Duo 固定1:1的背后取舍了什么?会导致哪些场景受限?
什么样的场景适合1:1?通常是两份内容无明显主次之分,需要对照着同时查看,左右同权是更高效的。但是类似于资料+聊天、视频+笔记、地图+聊天,通常是有较为明显的主次之分的,在1:1的规则下会有局限性。
1)半屏宽度接近于一个普通手机屏,固定画布宽度更接近于APP已经适配的尺寸
2) 中间尺寸越多,适配越复杂;任意拖动会产生更多宽度,开发者需要逐个处理
3)少一些尺寸变化,展开与收起更容易保持布局切换的稳定