京东6.18大促主会场领京享红包更优惠

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 886|回复: 1

HarmonyOS 发布技术分享:华为折叠屏应用布局技巧揭秘

[复制链接]

1611

主题

740

回帖

6663

积分

论坛元老

积分
6663
发表于 2022-12-26 10:55:41 | 显示全部楼层 |阅读模式 来自 河南郑州
2019 年,华为发布了首款折叠屏手机,并在此之后陆续推出了多款折叠屏新品。( {: d/ b  P; |7 p, X9 U
但在横折的大屏折叠屏手机上,屏幕存在 " 折叠 " 与 " 展开 " 两种状态的特性,让软件开发者在设计 UI 时,不可避免的会面临更大的挑战。
/ Z& x! B9 W* g6 v5 Y! w9 J近日,HarmonyOS 开发者官方发布技术分享,揭秘了华为在设计折叠屏应用时,为了确保用户持续体验的开发技巧。
+ V5 K$ v0 w+ ?) V5 C' V以阅读类场景为例,在场景从折叠(小屏)过渡到展开(大屏)的过程中,最为重要的就是将内容重排之后要定位到用户正在看的位置,保证焦点不发生偏移,提升用户的继续阅读体验。
$ b, Q- R9 a/ g
- L- K9 f, }% R" ]* `& N/ }1 \, E% ~+ `# f- ?9 L5 I6 n7 |! m9 C: o

0 u. Z- S# a0 k, W3 ~5 y6 E为此,开发者可以将页面上的不同元素进行拆解,并采用动态布局理念,针对不同元素的功能性单独设计展开后的变形效果,确保用户的浏览体验。
( M6 t$ h- f6 o如文本列表,就可以在展开态下右边加上一列,这样可以有效利用屏幕空间,也能多展示一些内容。  H" |. }; U; X; i2 |' T

) w. ?# Y! _1 M/ Z3 B% g" i  s; z9 J
1 C. X1 Y/ x5 o$ N% S- k; \, g1 E" v3 z- x4 O% Q4 ^  b$ n# y
而上下图文则能够在保持图片高度不变的情况下延伸布局进而显示更多图片,或是将图片和文本通过挪移布局调整为左右布局显示。% z" ^) |; V1 z' c; n0 P. f
此外,针对视频浏览、视频通话等特殊场景,开发者也可以充分利用屏幕展开后更大的空间,为用户带来更具沉浸感的使用体验。; G1 S# w' j8 {9 L7 }; i$ r2 ^' T' r

* u* `: |& F. G. k! R
/ C6 R$ i' M8 G/ `$ X4 [1 e7 V/ _: ]/ `/ i) h4 \* }
整体来说,折叠屏应用开发的核心思路在于确保用户体验的连续性,此外还可以针对特殊应用的特殊需求,进行特定的 UI 调整,以提升用户的沉浸感。
- d/ D& U2 |9 m% D. [" ~; V) E
0 q6 m3 t' Z) V4 j4 g* T1 A$ f  H

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

×

帖子地址: 

梦想之都-俊月星空 优酷自频道欢迎您 http://i.youku.com/zhaojun917
回复

使用道具 举报

1598

主题

709

回帖

6633

积分

论坛元老

积分
6633
发表于 2022-12-26 11:55:37 | 显示全部楼层 来自 河南郑州
为什么其它产品如ps5、苹果…国内媒体天天提出问题,鞭策、指导友商,反而自家品牌无一差评,无任何问题!
梦想之都-俊月星空 优酷自频道欢迎您 http://i.youku.com/zhaojun917
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|梦想之都-俊月星空 ( 粤ICP备18056059号 )|网站地图

GMT+8, 2026-10-17 01:18 , Processed in 0.037033 second(s), 25 queries .

Powered by Mxzdjyxk! X3.5

© 2001-2026 Discuz! Team.

快速回复 返回顶部 返回列表