4、华为MateX折叠屏UX适配指导 季昀
2020-03-01 692浏览
- 1.MateX折叠屏UX适配指导 SecurityLevel:
- 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. 需要华为提供什么支持？
