【设计趋势】iphone duo 折叠屏交互设计新时代

用户头像
北京/UI设计师/3天前/557浏览
【设计趋势】iphone duo 折叠屏交互设计新时代
【前言】
随着iPhone Duo的发布,除了手机硬件的新形态外,最引人注目的是交互动效上的丝滑体验,将折叠屏开合的爽点最大化。本文主要拆解iPhone Duo 交互设计,来看看交互设计师可以从中学到些什么?在适配折叠屏时需要注意些什么?
【目录】
1.折叠屏的不同形态,对应的是不同的使用姿态
2.外屏空间短,控件移动至右侧
3.一枚图标,重新定义了iPhone的信号栏
4.半折状态下,界面操作避开中间弯曲区域
5.控件移动到右侧后,内容的居中方式也需重新考量
6.动效过渡是折叠屏物理逻辑的升级
7.设计思考
Apple设计团队在《Design for iPhone Duo》里,讲了一套贯穿正太设备的设计思路:APP
要跟随屏幕大小、折叠状态和摆放方式调整,同时保持功能和操作逻辑一致。
一. 折叠屏的不同形态,对应的是不同的使用姿态
iPhone Duo可以合拢、展开、半展开、自行立起,这些姿态对应着不同的浏览和操作方式,界面设计需要重新考虑内容的位置,手指的触达距离,以及操作设备时的稳定性。
【设计趋势】iphone duo 折叠屏交互设计新时代(图ZMTU4OTA3NTI=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
收藏
二.外屏空间短,控件移动至右侧
区别与传统安卓厂商对于折叠屏的保守适配方式,iPhone Duo率先将信号栏、标签栏、工具栏、返回按钮等导航控件移动到右侧,给左侧内容腾出更多的纵向空间,方便右手操作。
【设计趋势】iphone duo 折叠屏交互设计新时代(图ZMTU4OTExMDg=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
收藏
【设计趋势】iphone duo 折叠屏交互设计新时代(图ZMTU4OTA4NDQ=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
收藏
三. 一枚图标,重新定义了iPhone的信号栏
“三合一”的设计是最具话题性的热点,融合了WiFi、蜂窝信号、电量3个图标。这个小球的精妙之处在于3种不同信息共享空间,并保留各自独立的识别方式。
在实际项目中,图标设计的难度在于甲方产品希望一个新图标能完全替代文字表述,接受不了抽象和概括,所以往往不是设计师没有创意,而是和业内拉通是最安全的选择。
【设计趋势】iphone duo 折叠屏交互设计新时代(图ZMTU4OTExNzY=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
收藏
四.半折状态下,界面操作避开中间弯曲区域
当iPhone Duo像一本书,文字和图片向两侧重新排布,让中分的物理弯曲成为界面布局的自然分割,按钮和其他可点击的元素也会向两侧移动,便于操作。
当iPhone Duo竖立放在桌上使用时,交互的元素会移动到下下半屏,让用户的交互操作有桌面支撑,保持设备稳定。
五.控件移动到右侧后,内容的居中方式也需重新考量
  1. 对于大多数浏览内容的界面,需要单独为右侧控件留出空间
【设计趋势】iphone duo 折叠屏交互设计新时代(图ZMTU4OTA3NDQ=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
收藏
2. 对于不需要滚动,以画面为主的沉浸式界面,仍可以相对整个屏幕居中
【设计趋势】iphone duo 折叠屏交互设计新时代(图ZMTU4OTA3NDg=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
收藏
六.动效过渡是折叠屏物理逻辑的升级
iPhone Duo的内外屏切换动效最近一直是刷屏般的热度,动效设计运用的是错觉拼接的原理,类似于《笼中窥梦》的效果,让软件贯穿硬件。
比起动效设计本身,苹果团队对于软件交互的重视才是更可贵的。在实际项目中,动效落地需要投入较大的人力资源和时间成本来打磨细节,很多研发团队在开源节流的情况下,首先裁掉的就是动效设计,觉得用户关注不到。
但实际上,动效成为了此次iPhone Duo的一个很大的亮点,因为这个动效恰好击中了用户开合屏幕的爽点上,属于精准打击了。
Phone Duo 和安卓折叠屏最大的不同是什么?
华为Pura系列、荣耀Magic V系列折叠的逻辑是内屏灭,外屏亮;视觉上就是关闭了一个屏幕,开启了一个新的屏幕,用户感知到的是两台设备在来回调,并没有感知到一个屏幕自身在进行变形。
动效设计很好的支撑起了这种变形过程,让用户把折叠理解成同一内容的尺寸变化,减弱再点亮另一块。
【设计趋势】iphone duo 折叠屏交互设计新时代(图ZMTU4OTExODA=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
收藏
【设计趋势】iphone duo 折叠屏交互设计新时代(图ZMTU4OTExODQ=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
《笼中窥梦》
收藏
七.设计思考
1.当外屏拉起键盘,外屏还好用吗?打开微信后,还能同时看到多少上文?
【设计趋势】iphone duo 折叠屏交互设计新时代(图ZMTU4OTExMTY=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
收藏
2. iPhone Duo 固定1:1的背后取舍了什么?会导致哪些场景受限?
什么样的场景适合1:1?通常是两份内容无明显主次之分,需要对照着同时查看,左右同权是更高效的。但是类似于资料+聊天、视频+笔记、地图+聊天,通常是有较为明显的主次之分的,在1:1的规则下会有局限性。
iPhone Duo可能是出于以下的考虑:
1)半屏宽度接近于一个普通手机屏,固定画布宽度更接近于APP已经适配的尺寸
2) 中间尺寸越多,适配越复杂;任意拖动会产生更多宽度,开发者需要逐个处理
3)少一些尺寸变化,展开与收起更容易保持布局切换的稳定
3
举报
|
2
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
Security Camera UI kit
钱包ui模板
【新年UI图标】珠宝icon
UI 登录界面设计模板包
新能源APP应用UIKit
【新年UI图标】影音icon
智能家居中心 简约 UI设计组件库
手表表盘UI系列
UI界面 组件
新拟态风格 UI设计组件库
户外旅行飞机情侣假日出行
【新年UI图标】秒杀icon
科技医疗透明柜UI界面设计
盲盒APP UI设计
3D卡通UI界面图标可爱插画免扣素
高级表盘系列UI源文件
我的钱包-UI界面设计-app
【新年UI图标】汽车icon
【新年UI图标】会员icon
UI应用平面图标
高级感金属拟物 UI设计组件库
【新年UI图标】30个图标
UI通用设计素材1
你可能喜欢
相关收藏夹
大家都在看
登录注册