请登录后选择模板风格

×
HarmonyOS 发布技术分享:华为折叠屏应用布局技巧揭秘 - Powered by Discuz!

简体中文 繁體中文 English 日本語 Deutsch 한국 사람 بالعربية TÜRKÇE português คนไทย Français

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 387|回复: 0

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

[复制链接]

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

[复制链接]

83

主题

30

回帖

1万

积分

管理员

积分
14499
性别
保密

最佳新人

最后登录
2024-11-29
twelve

83

主题

30

回帖

1万

积分

管理员

积分
14499
性别
保密

最佳新人

最后登录
2024-11-29
twelve 2023-1-12 14:55:03 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

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

×
2019 年,华为发布了首款折叠屏手机,并在此之后陆续推出了多款折叠屏新品。
但在横折的大屏折叠屏手机上,屏幕存在 " 折叠 " 与 " 展开 " 两种状态的特性,让软件开发者在设计 UI 时,不可避免的会面临更大的挑战。
近日,HarmonyOS 开发者官方发布技术分享,揭秘了华为在设计折叠屏应用时,为了确保用户持续体验的开发技巧。
以阅读类场景为例,在场景从折叠(小屏)过渡到展开(大屏)的过程中,最为重要的就是将内容重排之后要定位到用户正在看的位置,保证焦点不发生偏移,提升用户的继续阅读体验。

8d463987a68b6559b35387051c6c5eb0.jpg

为此,开发者可以将页面上的不同元素进行拆解,并采用动态布局理念,针对不同元素的功能性单独设计展开后的变形效果,确保用户的浏览体验。
如文本列表,就可以在展开态下右边加上一列,这样可以有效利用屏幕空间,也能多展示一些内容。

077a1570daca6b2c9a985e8d2eb69dfd.jpg

而上下图文则能够在保持图片高度不变的情况下延伸布局进而显示更多图片,或是将图片和文本通过挪移布局调整为左右布局显示。
此外,针对视频浏览、视频通话等特殊场景,开发者也可以充分利用屏幕展开后更大的空间,为用户带来更具沉浸感的使用体验。

2befedd811486c26c538527f8e5e186f.jpg

整体来说,折叠屏应用开发的核心思路在于确保用户体验的连续性,此外还可以针对特殊应用的特殊需求,进行特定的 UI 调整,以提升用户的沉浸感。

04b237205edb71c7419e8d470552faf9.jpg





011a89a18e80c9c11bef07f86fae61e3.jpg
e31920d44e40dfa6352a39e266871b1c.jpg
5220657ef4f78c2c011a79ed66e09f27.jpg
ef25b1a1c310f101c3a79140fa69c93f.jpg
哈哈哈哈
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|DiscuzX | 晋ICP备16011496号-5|晋ICP备16011496号-5

GMT+8, 2024-12-4 01:21 , Processed in 0.097988 second(s), 25 queries .

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复