文件名称:
华为折叠屏应用开发指导v1.0(最新版本).pdf
开发工具:
文件大小: 1mb
下载次数: 0
上传时间: 2019-10-15
详细说明:本文档为华为官方的华为折叠屏适配文档,同时也可以用于其他的大多数厂家的折叠屏(虽然目前就一个三星也出了折叠屏),1.0版本 文档中可能会遇到一些问题,请关注博客HUAWE!华为折叠屏应用开发指导
文档密级
目录
折叠屏形态概念..
形态概念
·,·····t·,·
适用范围..……
使用对象.
设计指导
架构规范..
折叠屏典型状态信息架构特点
折叠屏展开后的布局变化
典型布局适配:响应式布局变化.
典型布局适配:挪移布局.
.10
典型布局适配:分栏布局
典型布局适配:悬浮态
开发指导
基本要求(含原生相关能力的引用说明)
屏幕兼容性,
应用连续性.
应用分栏开发指导.
多窗口开发指导
拖拽式交可
开放接口使用说明
.27
、开发、调测工具
通过模拟器调试
通过命令模拟调试
测试用例
典型问题案例
黑白边问题
华为保密信息未经授权禁止扩散
第页共页
HUAWE!华为折叠屏应用开发指导
文档密级
导航栏问题.
,“非·p非·
显示截断问题.
按钮缺失问题.
布局效果问趣
页面不自适应调整问题.
页面自动跳转问题
折叠时应用重启、闪退问题
大屏旋转显示异常问题.
应用分屏黑白屏问题.
+·“·
类正方形屏幕视频切全屏设计案例
附录:产品规格.
华为保密信息未经授权禁止扩散
第页共页
HUAWE!华为折叠屏应用开发指导
文档密级
华为折叠屏应用开发指导
关键词:
摘要
缩略语清单:
缩略语
英文全名
中文解释
华为保密信息未经授权禁止扩散
第页共页
HUAWE!华为折叠屏应用开发指导
文档密级
折叠屏形态概念
物珥屏幕概念:
■柔性屏:采用可弯曲、柔韧性佳屏幕,可随意弯曲且不景响使用
■折叠屏:柔性屏的一种,可折叠的屏幕形态,两折,多折等
形态概念
的物理姿态
折叠态:折叠后的形态
展开态:完全展开后的形态
支架态:折叠到完全展开的中间状态,可平稳放置
屏幕的物理切分
展开态下,提供一个完整的大尺寸屏幕
大屏:展开形态下,最大的屏幕,可正常显示应用内容
折叠态和支架态卜,基J折叠后形成的屏幕儿何形态,对屏幕划分为个屏幕区域:
■正面屏幕:折叠常规肜态卜的主要展示屏幕,可常显示应用内容
背面屏幕:折叠常规形态下的次要展小屏幕,可正常显小应用内容
适用范围
华为
系列产品。
使用对象
华为自研及合作三方需要适配折叠屏手机的应用的开发者、设计师、测试、系统工
程师
华为保密信息未经授权禁止扩散
第页共页
HUAWE!华为折叠屏应用开发指导
文档密级
设计指导
架构规范
折叠屏典型状态信息架构特点
屏幕状态
折叠
打开
状态
打开/合上
状态
屏幕形态
屏幕与传统
屏幕纵向可见高度变化不
手机产品相当
大,宽度扩大为接近两
倍,整体形状近似方形
保持布局结杓
横向扩展
挪移布局
信息架构调整
布局设计重构
价值收益
单页面信息单页面信息
结合屏幕特点的新
不变
呈现量增加呈现量增加
布局设计
优化信息架构
提升应用体验,
促进应用的商业价
值提升。
折叠屏产品,最常用的使用状态分为:折叠状态、展开状态
用户通过改变于机当前的使用状态,屏幕内的显示会遵从如下信息架构规则进行切换
◆当前在屏幕上呈现的应用保持运行,不应该出现应用跳出、进程中断、退出到上一层
级、屏幕跳转等体验不连续情况。
◆由于屏幕尺寸发生变化,应用应采用适当的手段对屏幕上内容布局进行优化调整。
◆常见的布局调整样式请见下·节的详细论述。
华为保密信息未经授权禁止扩散
第页共页
HUAWE!华为折叠屏应用开发指导
文档密级
折叠屏展开后的布局变化
信息布局转换
信息架构转换
(对界面信息架构不造成影响)
(改变信息层级关系和跳转路径)
延伸布局
挪移布局
分
栏布局
浮态(悬浮窗,悬浮球
虚线分隔左侧:仅信息布局转换(对界面信息架构不造成影响)
◆纵向布局结构不变;单个元素在行内进行等比缩放;同行内横向空间延伸,可容纳
元素个数增加
◆为适应屏幕的可视区变化,进行版面的重新布局,屏幕内可视化元素进行重新分组,
各组块位置挪移,最终形成均衡的排版
虚线分隔右侧:信息架构变化(改变屏幕内信息层级关系和跳转路径)
◆跨层级,将原来折叠态需要两屏、并通过跳转才能切换的内容,在展开态下的同一屏
中进行同时展示
对交互结构相对复杂、信息形态种类更丰富的应用,借助应用内悬浮态交互元素,在
应用内实现更多架构分支上的信息同屏呈现,或完成应用内的快速跳转切换。
华为保密信息未经授权禁止扩散
第页共页
HUAWE!华为折叠屏应用开发指导
文档密级
典型布局:响应式布局变化
基本布局
对界面布局结构不造成影响)
相对拉伸
相对缩放
延伸布局
◆适应场景
内容呈现型界面,单页面内信息架构扁平,内容元素为单层列表或分组列表结构,如内容
门户网站首页面。
◆适配策略
保持页面元素和模组的基本结构,基于屏幕宽度的増加,在横向增加单行元素。具体响应
式布局的细节方法,可见后续相关章节
◆需注意
首先满足的基木适配要求,如没有视觉元素的过度缩放,界面布局总体保持平衡,同组元
素间距均衡合理:
保持对业务需求的满足,例如分类个数,图形元素的素材尺寸和格式限制,内容数量和运
营能力等不受到冲击。
◆响应式布局的样例:华为应用市场
华为保密信息未经授权禁止扩散
第页共页
HUAWE!华为折叠屏应用开发指导
文档密级
A“d
全部都音乐实工具老变速讯
买用工
用
江湖印时对战
新机必备应用
新机必备应用
折APP
新PPP
回圆日肉回圆回國肉回圆
女液女
选
新些PP
些
日份
折叠态
展开态
内容门户型网页,符合响应式布局的条件。
优先考虑大屏布局适配展开态界面,保持页面整体架构,保持各分组元素的属性、格式
横向可延伸滚动,同组元素数量可显示更多个。
保持各元素物理尺寸不变,横向可以扩`大留白保持视觉均衡,或显示更多同组元素。
从主屏切换到展开态时,通过类似横向延伸的过场动画效果来呈现流畅舒适的过渡。
典型布局:挪移布局变化
挪移布局
◆适应场景:
应用页面类型:内容呈现型,单页面内信息架构层级少,如门户网站首页面,内容详情页
华为保密信息未经授权禁止扩散
第页共页
(系统自动生成,下载前可以参看下载内容)
下载文件列表
相关说明
- 本站资源为会员上传分享交流与学习,如有侵犯您的权益,请联系我们删除.
- 本站是交换下载平台,提供交流渠道,下载内容来自于网络,除下载问题外,其它问题请自行百度。
- 本站已设置防盗链,请勿用迅雷、QQ旋风等多线程下载软件下载资源,下载后用WinRAR最新版进行解压.
- 如果您发现内容无法下载,请稍后再次尝试;或者到消费记录里找到下载记录反馈给我们.
- 下载后发现下载的内容跟说明不相乎,请到消费记录里找到下载记录反馈给我们,经确认后退回积分.
- 如下载前有疑问,可以通过点击"提供者"的名字,查看对方的联系方式,联系对方咨询.