目录

基础体验

包括页面中的图片、视频、卡片、按钮、字体、弹出框等通用基础体验设计要求。

通用基础体验设计

根据上文提到的体验诉求,对比于普通屏幕手机,为了保证体验连续,需要满足以下基础体验要求:

[h2]信息展示完整(下面应该是两个场景,要分开)

[h2]交互不中断

代码示例

为了保证您的应用程序在展开/折叠过程无缝切换,您需要做应用连续性的设计,以确保您的应用程序任务不中断。以MateXs 2 为例,最佳的体验为,应用在展开切换过程中,不发生应用的重启,且切换之前的任务和应用相关状态得以保存和延续。

折叠展开的动作,会触发对smallestscreensize、screensize和screenlayout的配置更改。每当发生配置更改时,默认情况下会销毁并重新创建整个activity。

推荐您通过注册监听系统configchanges消息,不重启应用的情况下处理配置更改,您需要向manifest中添加android:configchanges属性,其中至少包含以下值:

< activity
    android: name == ".MyActivity"
    android: configChanges = "screenSize|smallestScreenSize|screenLayout" />

您需要复写 onConfigurationChanged() 方法,通过该方法的Configuration参数获得屏幕的分辨率等信息,就可以针对不同比例屏幕下的应用界面布局做相应调整,如切换布局、调整控件位置和间距等。

@Override
public void onConfigurationChanged(Configuration newConfig) {
super.onConfigurationChanged(newConfig);
    Log.i("test", "newConfig.screenHeightDp:" + newConfig.screenHeightDp +
", newConfig.screenWidthDp" + newConfig.screenWidthDp);
//根据屏幕分辨率信息调整应用的布局
    ...
}

如果您的应用必须进行重新走生命周期来以响应屏幕切换,需要进行状态的保存和恢复。

您可以通过OnSaveInstanceState()和ViewModel对象来进行之前状态保存和后续的恢复。即,在销毁activity之前,通过onSaveInstancesState()存储状态, 在onCreate() or onRestoreInstanceState()进行状态的恢复。

Note:不要在OnDestroy()中调用finish()或其他自行终止进程。这将导致应用程序在设备折叠或展开时关闭、闪退等问题。

详细信息请参阅Android开发者指南:https://developer.android.com/guide/topics/resources/runtime-changes

[h2]横竖屏旋转适配

折叠屏在展开态下的屏幕显示比例接近正方形,基于此特征,应用设计和开发时需要做如下考虑:

关键元素适配

展开态图标和字体大小不应发生明显变化,在保证可读性的基础上,建议保持跟折叠态一样的大小。若一定要发生大小变化,则最大不要超过1.2倍。为确保有较好的可读性,展开态单屏文本长度不超过40字,推荐36字左右。

推荐

不推荐(字体过大导致一屏幕显示的信息太少)

[h2]图片/视频适配

展开态的图片/视频应适应页面的宽度、间距、列数等因素进行适配显示,不能造成信息量的明显减少

常见的图片/视频可以分为三种类型:

第一种:运营类图片/视频,通常是Banner的运营广告或分类入口。

(1)在展开态下,增加运营类内容的显示列数。

(2)若展开态放大显示图片/视频,务必确保该图片/视频不超过屏幕的1/2高度。

推荐(采用自适应布局、挪移布局或重复布局)

不推荐(运营类图片太大导致一屏幕显示的信息太少)

第二种:首页的内容缩略图片/ 视频。例如,音视频媒体类应用首页双列/瀑布流布局中的图片/视频、新闻资讯类应用首页图文布局中的图片/视频等。

(1)宫格或瀑布流布局的图片/视频/卡片:建议在展开态增加显示列数为原来的两倍。特殊情况如展开态显示三列,则单个图片/视频/卡片高度不超过1/2屏幕高度。

(2)上下图文布局:建议在展开态平铺显示更多图片/视频内容或让图片/视频内容居左/居右/居中对齐。单张图片/视频最高不超过屏幕的1/3高度,但是采用宫格样式聚合显示的图片/视频整体,最高不超过屏幕的1/2高度。

推荐(展开态重复布局,增加显示列数为原来的两倍)

不推荐(视频直接放大导致一屏幕显示的信息太少)

推荐(首页的缩略图片高度不超过1/3屏幕高度,居左对齐)

推荐(有多张图片时平铺展示,首页缩略图片高度不超过屏幕的1/3高度)

不推荐(图片放大导致一屏幕显示的信息太少)

第三种:详情页的具体内容图片/ 视频,是内容消费的主体,一般是各类内容的子页面,用于展示更多详细信息。

(1)详情页展开态的内容图片/视频可适当等比放大且居中/居左/居右对齐。

(2)详情内容带文字时,图片/视频高度建议不超过屏幕的80%;详情内容仅图片/视频时,图片/视频高度不超过1屏幕。超长图等特殊情况除外。

(3)有多个图片/视频时,详情页展开态的内容图片/视频横向排列。

推荐(带图文的内容详情,图片高度不超过屏幕高度的80%)

不推荐(图片过大,一屏幕内看不到完整信息)

推荐(图片一屏幕内显示完整)

不推荐(图片一屏幕内显示不完整)

[h2]弹出框适配

弹出框在应用设计中较为常见,例如红包、广告等,建议展开态和折叠态弹出框保持相同的大小,或大小变化最大不超过1.2倍。

推荐(弹出框保持折叠态大小)

不推荐(展开态弹出框过大,导致显示不全或无法交互)

[h2]其他控件适配

页面中的其他界面元素,例如按钮、输入框等,建议展开折叠时高度按照字体大小的缩放比例进行缩放,或大小变化最大不超过1.2倍,宽度根据元素本身的响应式规则进行设计,部分元素(例如按钮)保持等比缩放,部分元素(例如列表、输入框)对宽度进行适当延伸,最宽不超过整个窗口的宽度。