vivo折叠屏适配指南2

通过分屏和悬浮小窗实现在大屏的跨应用拖拽,减少用户在应用之间来回切换,更高效地进行多任务处理,提高生产力

跨应用拖拽

跨应用拖拽可以让用户将一个应用中的图像、文档或文件拖拽到另一个应用中。

通过分屏和悬浮小窗实现在大屏的跨应用拖拽,减少用户在应用之间来回切换,更高效地进行多任务处理,提高生产力。

跨应用拖拽.png

关于跨应用拖拽的适配:https://developer.android.com/guide/topics/ui/drag-drop

三、典型场景

3.1 影音娱乐

影音娱乐类场景以大量影音内容资源带来的沉浸式体验为主。

3.1.1 视频资源平台

首页推荐

娱乐影音-视频资源平台.png

视频列表页

娱乐影音-视频列表页推荐.png
娱乐影音-视频列表页不推荐.png

3.1.2 短视频/直播互动页

娱乐影音-直播互动页.png

3.1.3 音乐播放界面

娱乐影音-音乐播放.png

3.1.4 视频播放界面(悬停)

3.2 资讯阅读

资讯阅读类场景以信息的聚合为主,需利用屏幕优势,确保用户对关键信息浏览、理解的完整和高效。

3.2.1 首页布局:左右图文结构

3.2.2 首页布局:上下图文结构

资讯阅读-首页布局:上下图文结构.png

3.2.3 资讯详情页

资讯阅读-资讯详情页.png
资讯阅读-资讯阅读.png
咨询详情页-不推荐.png

3.3 生活服务

生活服务类场景广泛地包含了购物、饮食、出行、学习等用户日常生活的各个方面。

3.3.1 首页列表

生活服务-首页列表 -推荐.png
生活服务-首页列表 -不推荐.png

3.3.2 详情页面

生活服务-详情页面 -应用多窗.png
生活服务-详情页面 -全屏.png

3.4 通讯社交

社交通讯类场景主要包括:文字交流为主的IM对话、图像视频通话、社交动态等场景。

3.4.1 文字交流为主(IM对话)

通讯社交-文字交流为主(IM对话).png
通讯社交-文字交流为主(IM对话)全屏.png

3.4.2 图像·视频通话

通讯社交-视频通话.png

3.4.3 社交动态

首页结构:推荐

通讯社交-社交动态-首页结构.png
通讯社交-社交动态-详情页 -不推荐.png

详情页

可根据实际情况,自由选择应用多窗的两种交互规则。请参考基础适配原则-交互方式-多窗口交互(2.7)

通讯社交-社交动态-详情页.png
通讯社交-社交动态-全屏详情页.png
通讯社交-社交动态-详情页 -不推荐.png

3.5 效率办公

效率办公类场景以高效的体验,辅助和提升工作者的办公效率为主。

效率办公.png

3.6 H5页面

H5页面以其便利的特性,广泛应用于小程序和网页版应用。

H5页面-推荐.png
H5页面-不推荐1.png
H5页面-不推荐2.png

3.7 金融理财

用户在金融理财类场景中,需确保大屏信息呈现所带来的高效与舒适。

同时,需保障用户办理金融业务过程中的易用性。

3.7.1 首页布局

金融理财-首页.png
金融理财-首页-不推荐.png

3.7.2 股票·走势详情页

股票·走势详情页.png

3.8 游戏

根据不同的游戏类型和场景,优化大屏布局,在呈现与交互层面给用户带来愉悦的体验。

同时,考虑到用户在玩游戏时长时间握持设备,在设计展开态布局时,应根据不同的交互区做适配优化。

请参考交互方式(2.5)-合适的交互区

游戏-不推荐1.png
游戏-不推荐2.png
游戏-不推荐3.png

四、测试应用

4.1 设备尺寸

可在 Android Studio 中基于以下设备规格信息进行测试。

屏幕类型对角线长度(英寸)比例分辨率(像素)
主屏(展开态)8.034:3.551916*2160
副屏(折叠态)6.5321:9 1080*2520
设备尺寸.png

编辑:yimen,如若转载,请注明出处:https://www.yimenapp.com/kb-yimen/11272/

部分内容来自网络投稿,如有侵权联系立删

(0)
上一篇 2022年11月21日 下午3:54
下一篇 2022年11月21日 下午4:05

相关推荐