不久前华为发布了业界首份《折叠屏UX设计规范》,详细的介绍折叠屏的特性和体验要求,并根据不同的页面布局方式和场景提供针对性的设计说明。 为了帮助开发者高效完成适配工作,软件绿色联盟特别邀请了华为资深UX设计专家,从以下三个方面:①折叠屏应用基础体验UX规范、②单页面布局设计规范、③组合页面设计规范,为大家深度解读《折叠屏UX设计规范》。 接下来请看①折叠屏应用基础体验UX规范的内容: 一 应用基础体验要求 由于折叠屏手机具有折叠态和展开态随时切换的特性,在切换前后对连贯性有明确要求,其适配的标准不仅仅是兼顾手机/平板模式那么简单。 除了上面提到的界面信息展示,以新技术主导的折叠屏设备背后,更多挑战则是深入折叠屏设备的用户交互层面。屏幕宽窄的变化给交互设计也会带来相关的变化。在做用户交互的过程中,应该避免哪些情况发生? 设备特征适配: 由于折叠屏在展开态下的屏幕显示比例接近方屏,因此横屏的体验跟手机和平板不同,需要做对应的适配。针对方屏,应用需要满足如下要求: 支持横竖屏显示。 横竖屏布局一致。
单页面布局提供的高度直观、高效实用的导航将有助于确保为用户提供最佳体验,特别是在应用在屏幕可自由切换的折叠屏手机上时 在上篇《折叠屏 ① | 华为资深专家解读折叠屏应用基础体验要求》中,为开发者详细讲解了应用基础体验要求 一 界面信息架构及布局设计 关于折叠屏手机,我们不妨先提出一个问题:当智能手机在手机和平板两种形态之间来回切换时,它的交互会是怎样的?在折叠态下,基本系统交互信息架构沿袭了普通手机竖屏的定义。 同时,由于多个任务在同屏同时运行,跨窗口之间的信息拖拽和传递也成为了可能。 相对而言,折叠屏的大屏优势能够展示更多的内容,充裕的空间也为探索更多交互可能提供了条件。 规则: 4个columns时使用4个columns; 8个columns时使用6个columns; 12个column时使用8个columns。 无论折叠屏设备是折叠还是展开,单页面布局设计提供的高度直观、高效实用的效果将有助于为用户提供最佳体验。 ·END·
本文给大家介绍一下 Android 开发中和折叠屏相关的一些概念,以及如何进行折叠屏的适配。 折叠屏适配 折叠屏之所以需要适配,是因为我们的应用有可能在运行的过程中,所在的屏幕尺寸发生了变化,这种情况对现有项目多少都会产生一些问题。 所以折叠屏适配的本质是:当应用运行时,屏幕的尺寸、密度或比例发生了变化,应用能够继续在变化后的屏幕上正常显示和正常运行。 展开后的分辨率 2200x2480,用这种方式模拟了折叠屏展开的切换。 最后可以更近一步,给大屏幕设计另一套 UI,在折叠屏切换时切换 UI。 下面是一些相关的参考资料: Google - 打造适用于可折叠设备的应用 华为折叠屏应用开发指导 三星折叠屏应用开发指导
除了苹果之外,华为、oppo、小米等国内主流的智能手机品牌都已早早布局折叠屏市场,折叠屏噱头居高不下,vivo终究无法做到置身事外。 (配图来自Canva可画) vivo需要折叠屏 2022年4月11日,vivo发布首款折叠屏手机vivo X Fold,正式入局折叠屏赛道。 数据显示,在2018至2021年间,三星发布了8部折叠屏机型,华为发布了4部。而据IDC数据,在2021年中国折叠屏手机市场份额中,华为占49.3%,排位第一,三星占28.8%,排第二。 折叠屏主打高端市场,其竞争逻辑主要在“质”而不在“量”,vivo开局不利更大的原因或许是用户认为其折叠屏产品价格和品质还不相匹配。 不过相信各家经过多轮的产品试炼之后,折叠屏手机的体验、价格终究能对上大众的口味,折叠屏市场也能引发一波换机潮。
早在2018年10月底,国内柔性屏生产商柔宇科技就推出了全球首款折叠屏手机FlexPai(柔派)。 2019年2月份,三星和华为相继发布了旗下第一款折叠屏手机:GalaxyFold和MateX,并亮相世界移动通信大会(MWC),揭开了“折叠屏手机时代”的帷幕。 柔性AMOLED屏幕是折叠手机和穿戴手机的突破关键。但是,柔性折叠屏手机商用还不是太成熟。 首先,柔性折叠屏手机太贵。柔宇科技最早发布的可折叠手机价格还不到万元,已被称为天价手机。 展开为平板状态后,Mate X 拥有一块 8 英寸、分辨率为 2480 × 2220 的屏幕,无论是折叠还是展开状态下都拥有较窄的边框及较高的屏占比;官方称在展开为平板状态下,其最薄处仅有 5.4mm, 折叠时是一个手机形态,展开后变成一个平板状态。折叠屏手机既解决了携带的便利性问题,又满足了对平板大屏幕的需求。看上去很美。 华为 Mate X 展开后是 8 英寸的平板。折叠之后?是 6.6 英寸。
文章目录 一、Android、Flutter 折叠屏适配 二、展开大屏适配 三、折叠主屏适配 四、折叠副屏适配 五、折叠屏动态热切换适配 五、拉伸布局 六、X 轴自适应适配 七、布局重构 八、Android 3 种形态 : 展开形态 ( 大屏 ) : 屏幕宽高比 8:7.1 , 近似于正方形 ; 分辨率为 2480 \times 2200 ; 折叠形态 ( 主屏 ) : 屏幕宽高比 19.5 2480 \times 892 ; 二、展开大屏适配 ---- 屏幕展开后 , 处于屏幕宽高比 8:7.1 状态下 , 屏幕要完全填充整个屏幕 , 如下图的 A 的样式 ; B 中左右出现的黑边 , C 中上下出现黑边 , D 中四周出现黑边 , 都不能出现 ; 三、折叠主屏适配 ---- 折叠主屏 就按照 全面屏的样式进行适配 ; 折叠状态下 , 主屏要填充满整个屏幕 , 如 A 样式 ; , 就需要自动切换屏幕样式 ; 如 : 当前是 折叠状态主屏 打开应用 ( 此时宽高比 19.5:9 ) , 突然将手机打开开 , 变为 展开状态大屏 ( 此时宽高比 8:7.1 ) , 官方要求应用的布局要实时切换成
7月30日,由软件绿色联盟联合华为举办的零基础高效适配折叠屏在线沙龙中,来自华为的折叠屏项目经理闫鸿飞在《折叠屏连续性和拖拽适配介绍》议题中就上述问题进行了讲解,并结合典型案例分享了折叠屏连续性和拖拽的开发与调试 ,帮助开发者高效适配折叠屏。 根据国内TOP1000主流应用折叠屏测试报告数据显示,当前折叠屏应用适配率为90%,整体表现优异,为后续应用功能创新打下了坚实的基础。 2)安卓模拟器 从Android Studio 3.5Canary版本开始,开发者可创建一个运行Q Beta 2版本的折叠屏虚拟设备,其支持的硬件配置分别为7.3英寸(折叠后为4.6英寸),以及8英寸( 建议开发者选择8英寸的设备来模拟适配华为的MateX折叠屏手机。
北京时间 11 月 8 日,三星在旧金山向开发者发布了一款可折叠屏幕手机三星,型号为Infinity Flex Display。 视频的动态图上我们可以发现,三星的折叠屏手机是屏内折叠设计,将屏幕折叠后手机的外部还有一块屏幕显示内容,但是尺寸不大。 三星发布的这款手机,实际上拥有两块屏幕,可折叠的 Infinity Flex 显示屏为内屏,而折叠以后的外屏就相对较小一些。 利用这种柔性显示技术,App 可以做到折叠屏设备上的适配工作。 但是 Foldables 来了,就完全不一样了,通过折叠屏设备的两种变体效果:双屏设备和单屏设备,当折叠时,它看起来是一部手机,而当它展开时,它就变成了一台平板。
在此之前,软件绿色联盟已经推出了折叠屏UX设计规范系列阐述的针对单页面内的动态布局方式外,其实还可以利用组合页面设计。组合页面设计让布局设计更加生动有趣,淡化单调的设计,赋予页面更强的生命力。 一起来看看规范的详细内容吧~ 一 组合页面设计 不管是哪种折叠方式,对用户来说是新增了一块可折叠的屏幕,而这新增的屏幕使得1+1大于2,手机能变换为平板。 UX设计师首先需要思考折叠屏在展开态不仅可以在单页面内呈现更多的内容,还可以将不同页面的内容同时显示,为用户创造新的操作体验。 (2)为了保证分栏左右两侧内容呈现的均衡,页面的分割线位置可以由系统或应用进行规范化定义(例如纯文字类型的分栏左右页面宽度比例设为4:6,或采用栅格布局系统在8栅格下采用3:5的比例)。 以上内容为《折叠屏UX设计规范》中的组合页面设计规范及应用内多任务的相关内容。 ·END·
应用开发者可以参考这些样例,结合自己的应用的业务类型及具体的业务场景,完成在折叠屏产品上的最佳界面适配和创新设计。 界面设计应充分利用折叠屏的展开态的大屏优势进行设计,带给用户沉浸式浏览的体验。 另外,很多视频播放类应用还保留有普通手机的横屏全屏沉浸播放模式,在折叠屏展开态,此模式出于兼容性的需要,可以保留,但因为折叠屏展开态的长宽差异不大,将屏幕转90度可以获得很小的播放面积收益,但因此造成的用户转动手机带来的负面体验却很大 左右页面完成两个不同任务,相互之间还可以借助内容拖拽等能力进行快速的信息交换,充分发挥折叠屏展开态的屏幕形态优势。 随着折叠屏手机的发布,我们看到未来手机的形态可能会朝着柔性手机方向发展,那么,让我们来思考一件事:对于折叠屏上的移动应用使用场景,UX设计师可以探索怎样的设计模式呢?
最近维护了将近的一年的微信小程序(某知名企业),突然提出要兼容折叠屏,这款小程序主要功能一些图表汇总展示,也就是专门给一些领导用的,也不知道为啥领导们为啥突然喜欢用折叠屏手机了,一句话需求,苦的还是咱们程序员 开始,在 Windows、Mac、车机、安卓 WMPF 等大屏设备上运行的小程序可以支持大屏模式。 css的长度单位大部分用的 rpx,窄屏和宽屏展示差异出入较大,别说客户不认,自己这关就过不了,简直都不忍直视,整个乱成一片,尤其登录页,用了定位,更是乱上加乱。 在宽屏上,rpx变大,窄屏上rpx变小。随后看到这句话特别符合我的需求,哈哈 省事 省事 省事策略2省事,设计师按750px屏宽出图,程序员直接按rpx写代码即可。但策略2的实际效果不如策略1好。 return id } }, 'autoprefixer': { overrideBrowserslist: ["Android >= 4", "ios >= 8"
小米昨日发布的mix fold 2,又将折叠屏幕推向公众视野,折叠屏幕有哪些优缺点呢? 现在市场上使用的折叠手机,由于需要折叠,表面不能有坚硬的玻璃盖板,因此在折叠位置容易出现折痕。 同时,没有坚固的玻璃盖板保护,折叠屏幕的表面看起来凹凸不平,容易产生划痕,甚至指甲扣一下都会留下指甲印。 转回我们的话题,除去电源之外,还有一些简单的IO引脚,比如复位引脚和异常中断引脚。 IIC/SPI用于与屏幕上的触控进行通信,MIPI用于传输屏幕的显示数据,为了降低功耗,当屏幕显示内容不变,也就是静态画面时,MIPI往往不工作,静态画面已经存储到屏幕内部存储中,比如手机的AOD息屏显示功能 所谓兵马未动,粮草先行,凡事都要有个先后顺序,CPU、相机和屏幕的电源也不例外,毕竟心急吃不了热豆腐,因此我们需要对上电和下电的时序进行测试,如下图所示,否则的话屏幕就可能在亮屏或息屏时异常闪烁,甚至屏幕无法正常显示
在本篇文章中主要描述了全民K歌在折叠屏适配上的探索与常见的适配方案梳理。 引 现如今,移动端屏幕的发展可谓迅猛百花齐放! 在之前,我们已经适配了:不同比例、圆角、挖孔、刘海… 是时候,让我们开始适配折叠屏吧! 本篇文章主要介绍折叠屏的基础概念及几种适配方案;同时涵盖了全民K歌在折叠屏上的适配探索与实际效果。 折叠屏 折叠屏,顾名思义,其显示屏采用柔性技术,可在使用时对屏幕进行折叠、展开的操作。目前以华为、三星生产的设备为代表。 屏幕折叠主要分:内折、外折、两折、多折等不同折叠方式。 E5%88%86%E5%B1%8F,-%E4%B8%BA%E4%BA%86%E6%9B%B4%E6%9C%89%E6%95%88 兼容模式 兼容模式很好理解,就是系统发现APP并不能完美适配对应屏幕时采取的一种保守策略 扩展适配-多显示屏 对于折叠屏来说,往往并不仅仅是一张屏幕的展开与折叠操作(屏幕的部分显示与全部显示的区别),还有一张屏幕切换到另外一张屏幕的情况。
IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-1258501/b880f7191538de17f3c8aa78c8453cb2 .png|imageAlt^0|0|1|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@$A|L|B|M|1|N]]|C|@]]]|D|@$5|E|F|G|C|$H|I|J|-4]]]]
携程App作为一款在线旅行服务性软件,已成功适配折叠屏手机,快来和我一起看看有哪些创新体验吧。 相较于平板设备,折叠屏设备有多尺寸、多比例的屏幕优势,其问世促进了智能手机外观形态上的发展。 一部设备两个状态,这是传统手机做不到的,面对与传统手机的天然差异,因此折叠屏手机在设计变化上,会针对大屏需重新调整布局结构,在设计重点上也优先对华为折叠屏手机进行设计升级。 适配场景演示 携程App采用观察+访谈的形式,邀请用户使用折叠屏手机,观察使用情况和操作方式,测试他们对首页方案的反馈。结果显示,用户操作折叠屏方式趋于平板,所有人都使用双手,一手持机一手操作。 在单屏与双屏之间,大多数用户最终都选择双屏的方案,因为双屏给用户惊喜,发挥了折叠屏手机的优势,显示更多信息,体验感更舒适。下面一起来看携程App在折叠屏设备里的适配场景演示。 针对折叠屏手机,UX设计师将可视化元素进行重新分组,各组块位置挪移,最终形成均衡的排版。 优点:利用折叠屏大屏幕优势,为用户显示更多信息。
折叠屏虽距离普及可能还有很长一段路,大多数公司还未将折叠屏列入适配的范围,但是提前研究下折叠屏的适配还是极好的。 折叠屏手机概况 华为Mate X ? 折叠屏适配的本质 当老板下令说:“我们的产品要适配折叠屏”,不同的人会有不同的反应: 产品和设计 如何更好的利用空间? 如何展示才不会使页面显得空洞? 展开和折叠时分别怎么展示? 展开后如何过渡? …… 因此对于我们开发同学来说,对折叠屏的适配首先要确定一个预期,即要先确定好交互和设计,才能评估工作。因此“折叠屏的适配先是一个设计问题,然后才是一个适配问题”。 从以上折叠屏手机的情况来看,折叠屏手机的适配其实就是一个响应式设计的问题,而响应式设计有一个比较公认9条的基本原则,折叠屏手机的适配至少要满足这9项基本原则。 使用哪种根据实际情况决定,无所谓好坏,对于折叠屏适配来说肯定是手机优先。 8.web字体vs系统字体 ? 想让自己的网站拥有炫酷的 Futura 或 Didot 效果吗?那就是用 web 字体吧。
三星 Galaxy Z TriFold 采用向内折叠设计,两侧相互折叠以保护主显示屏。该机还添加了多种屏幕提示和振动功能,若用户折叠设备的方式不正确,会自动发出提醒。 不论是展开还是折叠,Galaxy Z TriFold 都具备明亮的显示效果,外屏亮度最高可达2,600 nits,主屏幕最高亮度则可达1,600 nits。 在硬件配置上,Galaxy Z TriFold 搭载了高通Snapdragon 8 Elite Mobile Platform for Galaxy处理器,内置 5,600 mAh 三电池系统,支持45W 值得一提的是,三星 Galaxy Z TriFold折叠屏主屏+副屏触控与超窄侧边指纹方案是由汇顶科技提供,助力三星打造更沉浸的巨屏交互与便捷解锁体验。 面向多折叠手机超薄柔性屏带来的挑战,汇顶针对这一全新形态推出高定制化触控方案,并以差异化价值和旗舰性能获得三星高度认可。该方案具备高负载驱动能力以及出色的抗显示噪声干扰性能。
折叠屏疯狂内卷,OPPO新机虚不虚? 来源|智能相对论 作者|XL 2021年的年尾,折叠屏手机市场再度火热。 折叠屏手机的原生问题 探讨OPPO新机能否一鸣惊人前,需要对折叠屏手机市场“真伪需求”的争议有个清楚认知。 折叠屏手机是厂商们一轮又一轮内卷的产物。 当时市场上各种分析折叠屏可以预见的爆发。但实际上折叠屏手机自诞生以来就陷入了“叫好不叫座”的窘境。 华为发布的首款纵向折叠旗舰手机P50 Pocket,晶钻白、曜石黑的8GB+256GB版本售价为8988元,相比此前华为Mate X2 17999元的起售价,已经很接地气,甚至让人疑惑华为也打起了价格战 参考资料: 《华为、三星、OPPO折叠屏“斗法”》,韭菜财经 《折叠屏手机,又一个8848?》,虎嗅市值榜 《Google的折叠屏手机为何“胎死腹中”?》
近日,天马微电子官方发布消息,宣布成功在行业内首发了一种折叠屏屏下光学指纹识别解决方案。 同时,全屏解锁无需固定解锁位置,将改善传统光学指纹识别技术需频繁点亮OLED屏幕固定识别区域而导致的烧屏残影问题,延长OLED屏幕寿命。
一、引言:折叠屏时代的布局革新鸿蒙系统自 2019 年问世以来,以其微内核全场景分布式架构迅速覆盖 18 大垂直领域,5000 + 头部应用启动原生鸿蒙版本开发,生态设备数量超 7 亿台。 与此同时,折叠屏设备作为移动交互的新形态,尽管 2024-2025 年市场出现阶段性调整,但凭借大屏多任务优势仍具广阔前景。 在此背景下,FoldSplitContainer 组件从 API version 12 开始提供专业的折叠屏布局解决方案,支持二分栏 / 三分栏在展开态、悬停态、折叠态的智能区域控制,成为鸿蒙折叠屏开发的核心组件 二、基础入门:组件核心架构2.1 组件概述FoldSplitContainer 是鸿蒙专为折叠屏设计的分栏布局组件,通过声明式 API 实现多状态布局适配:展开态:全屏二分 / 三分栏布局悬停态:上下分栏并避开折痕区折叠态 随着鸿蒙生态的完善,FoldSplitContainer 将成为全场景应用的标配组件,助力开发者打造极致的折叠屏交互体验。