不久前华为发布了业界首份《折叠屏UX设计规范》,详细的介绍折叠屏的特性和体验要求,并根据不同的页面布局方式和场景提供针对性的设计说明。 为了帮助开发者高效完成适配工作,软件绿色联盟特别邀请了华为资深UX设计专家,从以下三个方面:①折叠屏应用基础体验UX规范、②单页面布局设计规范、③组合页面设计规范,为大家深度解读《折叠屏UX设计规范》。 接下来请看①折叠屏应用基础体验UX规范的内容: 一 应用基础体验要求 由于折叠屏手机具有折叠态和展开态随时切换的特性,在切换前后对连贯性有明确要求,其适配的标准不仅仅是兼顾手机/平板模式那么简单。 除了上面提到的界面信息展示,以新技术主导的折叠屏设备背后,更多挑战则是深入折叠屏设备的用户交互层面。屏幕宽窄的变化给交互设计也会带来相关的变化。在做用户交互的过程中,应该避免哪些情况发生? 设备特征适配: 由于折叠屏在展开态下的屏幕显示比例接近方屏,因此横屏的体验跟手机和平板不同,需要做对应的适配。针对方屏,应用需要满足如下要求: 支持横竖屏显示。 横竖屏布局一致。
单页面布局提供的高度直观、高效实用的导航将有助于确保为用户提供最佳体验,特别是在应用在屏幕可自由切换的折叠屏手机上时 在上篇《折叠屏 ① | 华为资深专家解读折叠屏应用基础体验要求》中,为开发者详细讲解了应用基础体验要求 一 界面信息架构及布局设计 关于折叠屏手机,我们不妨先提出一个问题:当智能手机在手机和平板两种形态之间来回切换时,它的交互会是怎样的?在折叠态下,基本系统交互信息架构沿袭了普通手机竖屏的定义。 同时,由于多个任务在同屏同时运行,跨窗口之间的信息拖拽和传递也成为了可能。 相对而言,折叠屏的大屏优势能够展示更多的内容,充裕的空间也为探索更多交互可能提供了条件。 适配规则:首先判断布局的区域的是否有明显的“宽高特征”,即横纵比是否大于4:3;其次判断横向宽度,是否能容得下若干个元素,如果容得下就左右排布,容不下就上下排布。 无论折叠屏设备是折叠还是展开,单页面布局设计提供的高度直观、高效实用的效果将有助于为用户提供最佳体验。 ·END·
本文给大家介绍一下 Android 开发中和折叠屏相关的一些概念,以及如何进行折叠屏的适配。 折叠屏适配 折叠屏之所以需要适配,是因为我们的应用有可能在运行的过程中,所在的屏幕尺寸发生了变化,这种情况对现有项目多少都会产生一些问题。 所以折叠屏适配的本质是:当应用运行时,屏幕的尺寸、密度或比例发生了变化,应用能够继续在变化后的屏幕上正常显示和正常运行。 展开后的分辨率 2200x2480,用这种方式模拟了折叠屏展开的切换。 最后可以更近一步,给大屏幕设计另一套 UI,在折叠屏切换时切换 UI。 下面是一些相关的参考资料: Google - 打造适用于可折叠设备的应用 华为折叠屏应用开发指导 三星折叠屏应用开发指导
概 述 折叠手机是智能手机的一种造型,柔性AMOLED屏幕是折叠手机的突破关键。智能手机行业迎来“折叠屏时代”,各大手机厂商积极布局。 早在2018年10月底,国内柔性屏生产商柔宇科技就推出了全球首款折叠屏手机FlexPai(柔派)。 2019年2月份,三星和华为相继发布了旗下第一款折叠屏手机:GalaxyFold和MateX,并亮相世界移动通信大会(MWC),揭开了“折叠屏手机时代”的帷幕。 另外,折叠屏智能手机在手机市场找到最适合自己的位置也需要一定的时间,而且就算找到自己的位置,折叠屏智能手机也会和普通智能手机长期共存,而这并不像很多人观点中那样必须要一种取代另一种的局面。 柔性AMOLED屏幕是折叠手机和穿戴手机的突破关键。但是,柔性折叠屏手机商用还不是太成熟。 首先,柔性折叠屏手机太贵。柔宇科技最早发布的可折叠手机价格还不到万元,已被称为天价手机。
除了苹果之外,华为、oppo、小米等国内主流的智能手机品牌都已早早布局折叠屏市场,折叠屏噱头居高不下,vivo终究无法做到置身事外。 (配图来自Canva可画) vivo需要折叠屏 2022年4月11日,vivo发布首款折叠屏手机vivo X Fold,正式入局折叠屏赛道。 就在今年3月,vivo决定撤销市场反响逐渐走低的NEX系列产品,及时止损,而这同时也意味着vivo需要更多新的高端产品进行补位。不难猜测,折叠屏正背负着vivo弥补高端产品线的使命。 小乙MAX统计数据显示,在2022年4月份折叠屏手机前10排行榜中,OPPO Find N以9316部的销量位居第一,荣耀Magic V和三星Z Flip3分别以6185部和5477部位居第二、第三,华为 不过相信各家经过多轮的产品试炼之后,折叠屏手机的体验、价格终究能对上大众的口味,折叠屏市场也能引发一波换机潮。
文章目录 一、Android、Flutter 折叠屏适配 二、展开大屏适配 三、折叠主屏适配 四、折叠副屏适配 五、折叠屏动态热切换适配 五、拉伸布局 六、X 轴自适应适配 七、布局重构 八、Android 、Flutter 中的程序配置 1、屏幕自适应配置 2、设置切换屏蔽宽高比不重启适配 3、设置最大最小屏幕比例 一、Android、Flutter 折叠屏适配 ---- 华为的 Mate X 折叠屏有 3 种形态 : 展开形态 ( 大屏 ) : 屏幕宽高比 8:7.1 , 近似于正方形 ; 分辨率为 2480 \times 2200 ; 折叠形态 ( 主屏 ) : 屏幕宽高比 19.5 , C 中上下出现黑边 , D 中四周出现黑边 , 都不能出现 ; 三、折叠主屏适配 ---- 折叠主屏 就按照 全面屏的样式进行适配 ; 折叠状态下 , 主屏要填充满整个屏幕 , 如 A 样式 ; B 中左右两遍留出空白 , C 中下面留出空白 , 不可取 ; 四、折叠副屏适配 ---- 折叠副屏 的 屏幕分辨率是 25:9 , 是长条形的 ; 华为官方建议 , 该屏幕不以全屏显示 , 在副屏模式下
7月30日,由软件绿色联盟联合华为举办的零基础高效适配折叠屏在线沙龙中,来自华为的折叠屏项目经理闫鸿飞在《折叠屏连续性和拖拽适配介绍》议题中就上述问题进行了讲解,并结合典型案例分享了折叠屏连续性和拖拽的开发与调试 ,帮助开发者高效适配折叠屏。 根据国内TOP1000主流应用折叠屏测试报告数据显示,当前折叠屏应用适配率为90%,整体表现优异,为后续应用功能创新打下了坚实的基础。 问题3:折叠展开或者分屏后显示异常 当应用设置了页面不重启,但是在onConfigurationChanged方法中没有动态调整布局时,会导致折叠展开或者分屏后显示异常,这时应用的窗口宽度发生变化。 下载地址:https://developer.android.google.cn/studio/preview 3)屏幕 在非折叠屏手机上可以通过命令修改手机的屏幕分辨率来进行模拟调试,详细方法可见下图
视频的动态图上我们可以发现,三星的折叠屏手机是屏内折叠设计,将屏幕折叠后手机的外部还有一块屏幕显示内容,但是尺寸不大。 三星发布的这款手机,实际上拥有两块屏幕,可折叠的 Infinity Flex 显示屏为内屏,而折叠以后的外屏就相对较小一些。 利用这种柔性显示技术,App 可以做到折叠屏设备上的适配工作。 但是 Foldables 来了,就完全不一样了,通过折叠屏设备的两种变体效果:双屏设备和单屏设备,当折叠时,它看起来是一部手机,而当它展开时,它就变成了一台平板。 既然 Google 已经表示将要对折叠屏进行支持,我们就先猜想一下,最终会以什么样的形式进行支持。
在此之前,软件绿色联盟已经推出了折叠屏UX设计规范系列阐述的针对单页面内的动态布局方式外,其实还可以利用组合页面设计。组合页面设计让布局设计更加生动有趣,淡化单调的设计,赋予页面更强的生命力。 一起来看看规范的详细内容吧~ 一 组合页面设计 不管是哪种折叠方式,对用户来说是新增了一块可折叠的屏幕,而这新增的屏幕使得1+1大于2,手机能变换为平板。 UX设计师首先需要思考折叠屏在展开态不仅可以在单页面内呈现更多的内容,还可以将不同页面的内容同时显示,为用户创造新的操作体验。 2.悬浮窗面板 悬浮面板 3.侧边栏 从属信息默认以侧边栏形式显示,通过界面比例和视觉效果表现从属关系,不影响主要信息的展示,同时能快速浏览或操作从属信息。 以上内容为《折叠屏UX设计规范》中的组合页面设计规范及应用内多任务的相关内容。 ·END·
应用开发者可以参考这些样例,结合自己的应用的业务类型及具体的业务场景,完成在折叠屏产品上的最佳界面适配和创新设计。 界面设计应充分利用折叠屏的展开态的大屏优势进行设计,带给用户沉浸式浏览的体验。 另外,很多视频播放类应用还保留有普通手机的横屏全屏沉浸播放模式,在折叠屏展开态,此模式出于兼容性的需要,可以保留,但因为折叠屏展开态的长宽差异不大,将屏幕转90度可以获得很小的播放面积收益,但因此造成的用户转动手机带来的负面体验却很大 3.快速浏览与视频播放组合页面 视频类应用,尤其是小视频类应用,用户经常会碰到在宫格阵列或瀑布流的视频缩略图列表界面寻找感兴趣的视频,点击后打开观看的情况,这种场景的架构在折叠屏展开态中体现为基本形态“ 随着折叠屏手机的发布,我们看到未来手机的形态可能会朝着柔性手机方向发展,那么,让我们来思考一件事:对于折叠屏上的移动应用使用场景,UX设计师可以探索怎样的设计模式呢?
最近维护了将近的一年的微信小程序(某知名企业),突然提出要兼容折叠屏,这款小程序主要功能一些图表汇总展示,也就是专门给一些领导用的,也不知道为啥领导们为啥突然喜欢用折叠屏手机了,一句话需求,苦的还是咱们程序员 开始,在 Windows、Mac、车机、安卓 WMPF 等大屏设备上运行的小程序可以支持大屏模式。 css的长度单位大部分用的 rpx,窄屏和宽屏展示差异出入较大,别说客户不认,自己这关就过不了,简直都不忍直视,整个乱成一片,尤其登录页,用了定位,更是乱上加乱。 在宽屏上,rpx变大,窄屏上rpx变小。随后看到这句话特别符合我的需求,哈哈 省事 省事 省事策略2省事,设计师按750px屏宽出图,程序员直接按rpx写代码即可。但策略2的实际效果不如策略1好。 if (id.startsWith('~@/')) { return path.resolve(process.env.UNI_INPUT_DIR, id.substr(3)
小米昨日发布的mix fold 2,又将折叠屏幕推向公众视野,折叠屏幕有哪些优缺点呢? 今天以OLED为主,介绍下屏幕接口的组成,屏幕接口电路部分主要包括电源、IO和通信引脚3大类。 现在市场上使用的折叠手机,由于需要折叠,表面不能有坚硬的玻璃盖板,因此在折叠位置容易出现折痕。 IIC/SPI用于与屏幕上的触控进行通信,MIPI用于传输屏幕的显示数据,为了降低功耗,当屏幕显示内容不变,也就是静态画面时,MIPI往往不工作,静态画面已经存储到屏幕内部存储中,比如手机的AOD息屏显示功能 所谓兵马未动,粮草先行,凡事都要有个先后顺序,CPU、相机和屏幕的电源也不例外,毕竟心急吃不了热豆腐,因此我们需要对上电和下电的时序进行测试,如下图所示,否则的话屏幕就可能在亮屏或息屏时异常闪烁,甚至屏幕无法正常显示
在本篇文章中主要描述了全民K歌在折叠屏适配上的探索与常见的适配方案梳理。 引 现如今,移动端屏幕的发展可谓迅猛百花齐放! 在之前,我们已经适配了:不同比例、圆角、挖孔、刘海… 是时候,让我们开始适配折叠屏吧! 本篇文章主要介绍折叠屏的基础概念及几种适配方案;同时涵盖了全民K歌在折叠屏上的适配探索与实际效果。 折叠屏 折叠屏,顾名思义,其显示屏采用柔性技术,可在使用时对屏幕进行折叠、展开的操作。目前以华为、三星生产的设备为代表。 屏幕折叠主要分:内折、外折、两折、多折等不同折叠方式。 扩展适配-多显示屏 对于折叠屏来说,往往并不仅仅是一张屏幕的展开与折叠操作(屏幕的部分显示与全部显示的区别),还有一张屏幕切换到另外一张屏幕的情况。 总结 可以看出Google也在每次的版本更新中不断对不同的屏幕进行适配,从刘海、挖孔调整顶部状态栏高度、安全区域,再到折叠屏、多显示屏、多应用分屏等不同场景。
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]]]]
最近数码圈最热闹的爆料之一,莫过于小米下一代折叠屏的消息——代码库中现身的神秘机型、代号“lhasa”的未知设备,还有最让人关注的玄戒O3自研芯片,种种线索都指向疑似小米MIX Fold 5的新品。 那么,小米自研芯片沉寂一段时间后,跳过O2直接上O3,还敢用在折叠屏这种高端机型上,背后是自研实力的底气,还是急于在卷疯的折叠屏市场破局的无奈? 一、自研芯片+折叠屏,押注高端差异化 这次爆料最核心的看点,无疑是玄戒O3芯片与折叠屏的绑定。 但也不能盲目乐观,玄戒O3的前景,还有这款折叠屏的竞争力,都还有不少未知数。 但自研之路从不是一蹴而就,玄戒O3的实际表现、折叠屏的交互优化、定价策略,都会影响它的成败。作为消费者的我们,不妨多些耐心,看最终的实际体验和效果如何,而非爆料中的参数和噱头。
携程App作为一款在线旅行服务性软件,已成功适配折叠屏手机,快来和我一起看看有哪些创新体验吧。 相较于平板设备,折叠屏设备有多尺寸、多比例的屏幕优势,其问世促进了智能手机外观形态上的发展。 一部设备两个状态,这是传统手机做不到的,面对与传统手机的天然差异,因此折叠屏手机在设计变化上,会针对大屏需重新调整布局结构,在设计重点上也优先对华为折叠屏手机进行设计升级。 在单屏与双屏之间,大多数用户最终都选择双屏的方案,因为双屏给用户惊喜,发挥了折叠屏手机的优势,显示更多信息,体验感更舒适。下面一起来看携程App在折叠屏设备里的适配场景演示。 针对折叠屏手机,UX设计师将可视化元素进行重新分组,各组块位置挪移,最终形成均衡的排版。 优点:利用折叠屏大屏幕优势,为用户显示更多信息。 3.门票页面 设计方式:分栏布局 将列表页置于左侧,详情页置于右侧,左侧景点卡片与右侧详情强关联,点击列表第一个景点详情,右侧会切换出左侧景点对应的景点详情。
折叠屏虽距离普及可能还有很长一段路,大多数公司还未将折叠屏列入适配的范围,但是提前研究下折叠屏的适配还是极好的。 折叠屏手机概况 华为Mate X ? 折叠屏适配的本质 当老板下令说:“我们的产品要适配折叠屏”,不同的人会有不同的反应: 产品和设计 如何更好的利用空间? 如何展示才不会使页面显得空洞? 展开和折叠时分别怎么展示? 展开后如何过渡? 从以上折叠屏手机的情况来看,折叠屏手机的适配其实就是一个响应式设计的问题,而响应式设计有一个比较公认9条的基本原则,折叠屏手机的适配至少要满足这9项基本原则。 3.相对单位 ? 为了适应不同屏幕尺寸和不同使用场景,使用绝对单位容易出现问题 。常见的相对单位有em、rem、ch、ex、vw、vh、vmax、vmin。 4.断点 ? 3)屏幕变宽带来的新的体验 比如说,在折叠屏展开状态的模式下,你将可以一边看直播,一遍看相关产品,二者相互不影响。 ?
三星 Galaxy Z TriFold 采用向内折叠设计,两侧相互折叠以保护主显示屏。该机还添加了多种屏幕提示和振动功能,若用户折叠设备的方式不正确,会自动发出提醒。 Galaxy Z TriFoldGalaxy Z TriFold 的内屏采用的是10英寸的Dynamic 2X AMOLED屏幕,支持120 Hz 的刷新率,用户可在三个竖屏程式并排状态下创作、多视窗状态下调整视窗大小清晰观看重要资讯 不论是展开还是折叠,Galaxy Z TriFold 都具备明亮的显示效果,外屏亮度最高可达2,600 nits,主屏幕最高亮度则可达1,600 nits。 值得一提的是,三星 Galaxy Z TriFold折叠屏主屏+副屏触控与超窄侧边指纹方案是由汇顶科技提供,助力三星打造更沉浸的巨屏交互与便捷解锁体验。 面向多折叠手机超薄柔性屏带来的挑战,汇顶针对这一全新形态推出高定制化触控方案,并以差异化价值和旗舰性能获得三星高度认可。该方案具备高负载驱动能力以及出色的抗显示噪声干扰性能。
OPPO入局折叠屏手机不算早,但一上来就瞄准了折叠屏手机令人望而却步的价格痛点——毕竟,一个三星Galaxy Z Fold3的主板维修价格就能去到6300元了。 折叠屏手机的原生问题 探讨OPPO新机能否一鸣惊人前,需要对折叠屏手机市场“真伪需求”的争议有个清楚认知。 折叠屏手机是厂商们一轮又一轮内卷的产物。 据产品经理回忆,Find N的屏幕尺寸是历时3个月、尝试过26版整机方案、制作了120多个模型机、做过十几次调研后的结果。 不过根据报道,华为今年将有两款折叠屏旗舰机发布,其中3月会发布首款搭载国产UTG的外折版本折叠屏,反击之策或许正在路上。 另一个巨头三星,它的侧重点和华为MATE X2几乎是相反的。 三星Z FOLD系列已经到了第3代,外屏虽然也能用,但狭长的机身实在提供不了多好的使用体验,更像是个装饰品。 但无论如何,三星是全球折叠屏手机市场的最大赢家。
近日,天马微电子官方发布消息,宣布成功在行业内首发了一种折叠屏屏下光学指纹识别解决方案。 同时,全屏解锁无需固定解锁位置,将改善传统光学指纹识别技术需频繁点亮OLED屏幕固定识别区域而导致的烧屏残影问题,延长OLED屏幕寿命。