自 2019 年公布了第一款折叠屏手机以来,华为不断创新,接连推出多款折叠屏新品。折叠屏手机越来越受到宽广用户的青眼,其市场占有率也随之高速增长。而对利用开发者来说,在折叠屏上“如何提供更优良的利用体验”也曾经成为必须直面的问题。
目前市场上的折叠屏手机次要分为两大类:一类是大折叠屏手机,开展之后近似正方形,屏幕很大;另一类是小折叠屏手机,开展时跟一般手机一样大,折叠的时候十分玲珑。
本篇内容次要针对大折叠屏手机,从根底的体验间断和三个维度的体验增值为大家开展介绍如何打造优良的折叠屏利用体验。首先阐明折叠屏设计中的体验要害——体验间断。
体验间断:从折叠态到开展态的体验要害
顾名思义,折叠屏手机是能够折叠的,有折叠和开展这两种状态。
折叠屏两个状态(左图为折叠态、右图为开展态)
在利用的理论应用场景下,用户会进行肯定频率“折叠到开展”、“开展到折叠”操作。利用在此期间就须要为用户提供“间断的体验”,以保障用户应用该利用体验不中断。
上面举两个具体的场景为大家介绍。
1、拍摄时:开展后拍摄参数不扭转
拍照取景的时候,用户开展折叠屏心愿看得更清晰。此时开展态取景范畴、照片比例等参数设置放弃不变,让用户只需聚焦于取景框外面的人物或风物。
拍摄时体验间断(左图为折叠、右图为开展)
2、浏览时:开展后焦点不偏移
阅读文章的时候,用户开展折叠屏心愿取得更佳的浏览体验。此时开展态将内容重排之后要定位到用户正在看的地位,保障焦点不产生偏移,晋升用户的持续浏览体验。
浏览时体验间断(左图为折叠、右图为开展)
同样的,从开展到折叠时利用也须要提供“间断的体验”,做到状态不失落、焦点不偏移。体验增值:开展态下利用的进阶体验在折叠屏开展时,通过精心的设计能够为用户提供三种令人愉悦的增值体验:显示更多内容、显示更加沉迷、操作更加高效。
体验增值
上面为大家联合示例逐个阐明。
1、显示更多内容:采纳动静布局
显示更多内容的要害是采纳动静布局,HarmonyOS 折叠屏设计规范中提供了六种动静布局规定,通过这些布局规定的应用或组合,就能够做到在开展态下显示更多的内容。
动静布局规定(左图为自适应动静布局、右图为响应式动静布局)
通常一个页面上有多种类型的内容,咱们须要依据每种内容的特点来采纳适合的动静布局规定。
首先以一个内容类利用的首页为例,阐明如何让这个页面显示更多的内容。示例中的这个页面蕴含了组合控件、Banner 卡片、入口图标、宫格卡片这四个版块,咱们别离看看每一个版块应该采纳哪种布局规定。
利用首页
组合控件:这个控件由顶部页签和下方的搜寻框组合而成,可通过挪移布局、绝对拉伸、延长布局进行宽屏适配,占用更少的界面空间或显示更多的页签数量。不倡议间接放大导致显示过大。
组合控件设计参考(左图为可参考范式、右图为不倡议)
Banner 卡片:可通过延长布局、翻新款式在一行显示更多的 Banner 卡片,要防止单张 Banner 卡片间接放大显示过高的问题。
Banner 卡片设计参考(左图为可参考范式、右图为不倡议)
入口图标:可通过延长布局、绝对拉伸、挪移布局做到平衡地显示适合的图标数量,须要防止在开展态左右留白过大、一排显示的入口图标太多、以及间接放大等成果很差的做法。
入口图标设计参考(左图为可参考范式、右图为不倡议)
宫格卡片:可通过显示更多列数来达到在宽屏下放弃图片大小和数量的均衡,横向的卡片能够绝对缩放,但须要防止竖向卡片的绝对缩放导致单张卡片过高,也须要防止减少的列数太多导致卡片信息过密。
宫格卡片设计参考
宫格卡片不倡议设计(显示过大、信息过密)
再举一个新闻类利用开发示例,咱们能够基于文本列表、左右图文、高低图文这三种状况调整。
新闻类利用首页
文本列表:在开展态下左边加上一列,这样能够无效利用屏幕空间,也能多展现一些内容。
文本列表设计参考(文本列表:单列变双列)
左右图文:通过绝对拉伸来适配宽屏显示,也能够在绝对拉伸的同时利用宽屏劣势显示更多内容。
左右图文列表设计参考(文本 / 左右图文列表:绝对拉伸)
高低图文:在放弃图片高度不变的状况下延长布局进而显示更多图片,或是将图片和文本通过挪移布局调整为左右布局显示。
高低图文列表设计参考(左图为图片延长布局、右图为挪移布局)
2、显示更加沉迷:更大尺寸适配在折叠屏开展态,屏幕变大的同时,屏幕上可利用的区域也变得更多。上面通过视听体验中的视频页面、浏览页面、通话页面、游戏页面示例,为大家阐明如何打造更为“沉迷式”的开展体验。
视频页面:视频相干的按钮、弹幕等辅助信息在视频核心内容之外的空白区域显示,提供更沉迷、无遮挡的大尺寸视频播放体验。
视频页面(更沉迷不遮挡的大尺寸视频)
浏览页面:在信息流浏览页面,显示范畴更大,提供更沉迷的大图片或大视频的浏览体验,同时也确保了不低于折叠态或一般手机的浏览效率。
浏览页面(更沉迷的图片 / 视频浏览)
通话页面:通过双窗口翻新,把对方和本人的视频并列显示,实现更沉迷的视频通话体验。
通话页面(更沉迷的双窗口视频通话)
游戏页面:开展态相比折叠态,有了更大的视线范畴,咱们能够显示更多的游戏画面内容,以实现更沉迷的体验。但要防止为了谋求沉迷感导致游戏画面被裁剪。
3、操作更加高效:缩小全屏跳转
在开展态下,还能够通过分栏、悬浮面板、侧边栏、长期双窗口等办法为用户带来更加高效的操作体验。
分栏:实现更高效的页面切换,防止全屏页面跳转。
悬浮面板、侧边栏:通过悬浮面板疾速筛选、侧边栏疾速预览,缩小全屏页面的跳转和页面的来回切换。
长期双窗口:通过长期双窗口,能够实现双工作的并行。
例如在直播场景下,能够通过双窗口实现“一边看直播、一边购物”,实现从筛选商品到下单领取的购物全流程。
总结
本篇内容联合示例为大家介绍了体验间断、显示更多内容、显示更加沉迷、操作更加高效等折叠屏利用体验的要害设计办法,心愿可能为开发者提供无效的设计参考,帮忙开发者打造更为优良的利用体验。
本篇内容的所有办法和案例在 HarmonyOS 折叠屏设计规范中都有具体的介绍,同时因为篇幅无限,局部折叠屏设计规范中的内容并未在本篇文章中提及,包含电商类和 H5 广告长图的宽屏适配案例,以及针对影音娱乐、社交通信、新闻浏览、生存服务等场景的设计范式等。