4、华为MateX折叠屏UX适配指导 季昀

Razor

2019/07/03 发布于 技术 分类

安卓绿色联盟 

文字内容
1. MateX折叠屏UX适配指导 Security Level:
2. 目录 • 折叠屏简介 • 体验价值挖掘 • 典型页面分析 • 华为的能力开放 • FAQ(问题交流)
3. 折叠屏Mate X的特点
4. Mate X 折叠屏简介 三屏五态  主屏、副屏、大屏 展开态(大屏) 支架态  折叠正面态、折叠背面态、展开态、 支架态、横屏态 主屏 副屏
5. Mate X 屏幕形态简介 展开态 (8:7.1) 折叠态 (19.5:9) 折叠态 (25:9)  展开态,全屏点亮工作  折叠主屏态:折叠态,主屏工作  折叠副屏态:折叠态:副屏工作 分辨率:2200x2480 比例:8 : 7.1 尺寸:8寸(水平宽度13.5mm) 分辨率:1148x2480 比例:19.5 : 9 尺寸:6.6寸 分辨率:892x2480 比例:25 : 9 尺寸:6.6寸
6. 折叠屏体验价值挖掘
7. 折叠屏体验价值挖掘 • 更加沉浸式的体验—展开态 • 利用多窗口多任务—展开态 • 快速操作—折叠态
8. Mate X 典型状态信息架构特点
9. 折叠屏展开后的布局变化
10. 经典模式:水平方向延伸 • 内容门户型网页,符合响应式布局的条件。 • 优先考虑大屏布局适配展开态界面,保持页 面整体架构,保持各分组元素的属性、格式 • 横向可延伸滚动,同组元素数量可显示更多 个。 • 保持各元素物理尺寸不变,横向可以扩大留 白保持视觉均衡,或显示更多同组元素。 • 从主屏切换到展开态时,通过类似横向延伸 的过场动画效果来呈现流畅舒适的过渡 折叠态 (主屏) 展开态
11. 经典模式:重复 利用屏幕的宽度优势,将相同属性的布局元素 (例如:歌单列表,应用列表等),横向并列同 时排布。
12. 经典模式:挪移
13. 响应式布局的经典模式:分栏(Mater-Detail) • 折叠态:两个层级 • 展开态:合并为一个层级 折叠态 (主屏) 展开态
14. 典型场景分析
15. 内容展示型页面:内容扩展 内容展示型页面,用户主要诉求是搜索和方便浏览更多内容,因此将该页面扩展成全屏可展示更多的内容,以便用户浏览。 另外需根据最佳交互区域安排控件,根据最佳视觉区域安排内容。页面内的内容,可根据应用本身的业务诉求,做响应式布局。 折叠态 展开态 APP Bar search 子类1 子类2 子类3 子类… Secondary navigation 控件的布局需要考虑最佳 交互区和最佳视觉区 search 子类1 子类3 子类2 子类4 子类5 1 2 3 4 5 6 搜索条拉长,方便进 行输入 • Content Bottom 类1 类2 类3 类4 primary navigation 类1 类2 类3 类4 • 内容可根据业务 诉求,利用容器 进行布局
16. 列表浏览型页面:分栏 列表浏览型页面,左边显示列表内容,右边显示内容详情,用户可以在不同内容详情进行快速切换,避免跳转感。 展开态 折叠态 APP Bar search 子类1 子类2 子类3 示例 search 子类1 子类2 子类3 List 1 List 1 List 1 Content List 2 List 2 List 1 ################ List 3 List 3 List 4 List 4 %%%%%%%%% %%%%% Button
17. 内容操作型页面:多任务 内容操作型页面,左边显示主任务,右边显示分支任务,可以避免中断主任务,给用户带来更沉浸体验; 另外,左边显示主任务,右边显示下一级任务,可减少页面间的跳转,提高页面转换率; 折叠态 展开态 内容页 List 1 List 1 Content List 1 List 1 ############### ############### %%%%%%%%% %%%%% %%%%%%%%%% %%%% Button 1 Function Button Button 1 分 支 任 务 子 功 能 子 功 能 1 子 功 能 2 内容页 Button 2 子 功 能 3 …
18. 应用内多任务
19. 展示更多内容,并行多个任务? 应用内分栏 多任务 子任 子任 务A 务B 通过多窗口实现分栏,展示更多 具有确定性和临时性的两 内容,快速导航,完成一个任务 个任务并行 同屏内多窗口显示:将多个Activity同时显示?
20. 应用内多窗口实现分栏 应用场景是列表+子列表+详情,例如: 1. 设置列表-设置详情 2. 聊天好友列表-会话详情 设置是一个典型的在大屏上可以用分栏设计的例子,双窗口显 示,并没有多任务,用户目的只有一个:找个某个设置项。 3. 新闻列表-新闻详情 4. 视频列表-视频详情
21. 应用内多窗口实现多任务 内容操作型页面,左边显示主任务,右边显示分支任务,可以避免中断主任务,给用户带来更沉浸体验; 另外,左边显示主任务,右边显示下一级任务,可减少页面间的跳转,提高页面转换率; 折叠态 展开态 内容页 List 1 List 1 子 功 能 List 1 List 1 ############### ############### %%%%%%%%% %%%%% %%%%%%%%%% %%%% Button 1 Button 1 分 支 任 务 子 功 能 1 子 功 能 2 内容页 Button 2 子 功 能 3 …
22. 华为开放的应用内多窗口能力
23. 应用内多窗口—基础分屏 支持两种分屏模式(1)通用导航模式 (2)自定义模式  通用导航模式(AnAn+1) Back 桌面 启动应用 经过N步跳转 X 新窗口打开 X A X A1 新窗口打 开 Back A B A B1 新窗口打开 B C B C1 Back Back • 右分屏永远是最后一个窗口。 • 任何时候,从左分屏打开的新页面,都会将右分屏的页面替换掉 • 任何时候,从左分屏触发Back,左右分屏中的所有Activity都将退出
24. 应用内多窗口—基础分屏 支持两种分屏模式(1)通用导航模式 (2)自定义模式  自定义模式 1.应用采用配置 “Activity对”的方式标识业务在特定状态下需要分屏展示。如“A-B”,A上 启动B,触发分屏(A左B右)。但B启动A,不启动分屏。 2.一旦进入分屏后, 如当前屏幕显示为 “A B” 。 a)若配置了B-C , 则B触发C,B左移,C右显 b)若没有配置C, 则无论左右触发,都右侧显示 From To 备注 From To 备注 A B A上启动B,触发分屏。B启动A,不启动分 屏; A B A上启动B,触发分屏。B启动A,不启动分 屏; 未配置B->C,根据默认策略,第一期都右 屏显示;第二期,会支持不配置情况下使用 全屏显示,提供给应用选择。 B C 如果此时B已经在右分屏,B触发C,B左移, C右显 触发分屏 右分屏叠加 若未配置B->C, 则无论左右屏触发,都右侧显示 历史左移 若已配置B->C,历史左移,新页面右屏进入
25. 问题交流
26. 交互体验 横竖区分不明显,切换变得“鸡肋" 转屏 现状: 用户点击全屏, 触发屏幕选择 切换全屏视频,需要旋转屏幕 痛点: 强制横屏,用户不得不旋转设备, 但实际上 设备的比例接近正方形,用户无法从切换到 横屏中得到“好处” 现状1:全屏前 现状1:全屏后 需广大应用开发者一起来 • 针对此场景如何优化? • 为提高开发适配效率, 希望华为做什么?
27. 多窗口交互—Drag & Drop 源App拖出 • 增加长按、拖动事件监听 • 拖动的影子处理:实现DragShadowBuilder • 指定数据MIEI Type,构建ClipDescription • Manifest中声明Provider,使数据能共享 • 用户触发,启动拖放 目标App接收 • 设置OnDragListener,针对start, enter, location, 等拖放Action 作出UI响应处理 • 在Drop action 中判断数据类型,读取数据,将数据呈现在目标控 件中 Android的多窗口拖放 触发拖拽Drag • 播放动效 增加Drag监听 拖拽过程中 • 影子跟随 进入放置区 • 交互提示 放置Drop • 播放动效 接收处理逻辑
28. 问题交流 1. 对更大的屏幕空间, 如何设计可以提升用户体验? 2. 应用内多任务, 您的应用有哪些应用场景? 3. 需要华为提供什么支持?