HDC2024分论坛+原生精致_传播版_part4.pdf

1、宫格布局-列数设计基于人因研究的建议，确定内容的显示数量窄屏宽屏瀑布流首页宫格布局-适配效果直板机平板折叠屏在保证用户清晰阅读的基础上，随着屏幕宽度的变化增加/减少内容的显示数量瀑布流首页StorageProp(currentBreakpoint)Watch(onBreakpointChange)currentBreakpoint:string=smState gridColumn:string=1fr 1fr onBreakpointChange()/update gridColumnbuild()Grid().columnsTemplate(this.gridColumn).gesture

2、(PinchGesture().onActionUpdate()=/update gridColumn )宫格布局-双指缩放瀑布流首页通过双指缩放进行布局列数的调整，从而满足效率型和大图浏览型的不同用户诉求挪移布局播放页播放-沉浸式的收听屏幕宽度增加内容稀疏、留白过多挪移布局-适配效果将需要用户滑动/点击才能看到的内容，直接展现出来，方便用户的选择，进而提高收听转化率播放页直板机折叠屏平板StorageProp(currentBreakpoint)currentBreakpoint:string=sm build()GridRow(columns:sm:4,md:8 )GridCol(span

3、:sm:4,md:4 )this.PlayControlView()if(this.currentBreakpoint!=sm)GridCol(span:md:4 )this.RecommendView()挪移布局-适配效果播放页重复布局内容列表列表结构，便户快速查找屏幕宽度增加屏效较低，未能体现大屏的优势重复布局-适配效果增加显示列数，提高用户查找内容的效率直板机折叠屏平板内容列表重复布局-适配效果内容列表StorageProp(currentBreakpoint)currentBreakpoint:string=sm build()List().lanes(getBreakpointOpt

4、ion(this.currentBreakpoint,sm:1,md:2 )挪移布局 VS 重复布局如何选择【挪移布局】：将与当前页面强相关、但因屏幕尺寸限制，而被隐藏/收起的内容展示出来减少用户滑动/点击的操作提前曝光相关内容如何选择挪移布局 VS 重复布局【挪移布局】：将与当前页面强相关、但因屏幕尺寸限制，而被隐藏/收起的内容展示出来被遮挡的内容可获得更多曝光上下布局改为左右布局挪移布局 VS 重复布局【重复布局】：对于结构较为相似的列表/表单，重复布局可提高页面内容的查找使用效率方便用户快速查找提高内容的曝光效率如何选择如何选择方便用户快速查找提高内容的曝光效率挪移布局 VS 重复布局【

5、重复布局】：对于结构较为相似的列表/表单，重复布局可提高页面内容的查找使用效率悬停态折叠屏-展开态播放页折叠屏-悬停态悬停态显示正在播放节目的封面、主播信息、专辑信息等上半屏-查看区域下半屏-交互区域播放/暂停、节目切换、定时、倍速等节目控制按钮播放页悬停态显示正在播放节目的封面、主播信息、专辑信息等上半屏-查看区域下半屏-交互区域点击页签查看与该节目相似的其他推荐内容播放页State foldStatus:display.FoldStatus|null=null aboutToAppear()display.on(foldStatusChange,(data:display.FoldStat

6、us)=this.foldStatus=data )build()if(display.isFoldable()&this.foldStatus=display.FoldStatus.FOLD_STATUS_HALF_FOLDED)buildHalfFoldedUi()else buildNormalUi()挪移布局（悬停适配）悬停态字幕配合音频内容实时同步滚动，帮助用户理解内容（后续版本演进）播放页可前往 HarmonyOS NEXT 官网查阅HarmonyOS设计规范HarmonyOS最佳实践多适配规范华为2012欧拉部菲尔兹Lab资深技术专家天视窗