包括页面中的图片、视频、卡片、按钮、字体、弹出框等通用基础体验设计要求。
推荐 |
不推荐(图片过大导致一屏幕显示的信息太少) |
推荐 |
不推荐(内容放大导致一屏幕显示的信息太少) |
代码示例
为了保证您的应用程序在展开/折叠过程无缝切换,您需要做应用连续性的设计,以确保您的应用程序任务不中断。以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
展开态图标和字体大小不应发生明显变化,在保证可读性的基础上,建议保持跟折叠态一样的大小。若一定要发生大小变化,则最大不要超过1.2倍。为确保有较好的可读性,展开态单屏文本长度不超过40字,推荐36字左右。
推荐 |
不推荐(字体过大导致一屏幕显示的信息太少) |
展开态的图片/视频应适应页面的宽度、间距、列数等因素进行适配显示,不能造成信息量的明显减少
常见的图片/视频可以分为三种类型:
第一种:运营类图片/视频,通常是Banner的运营广告或分类入口。
(1)在展开态下,增加运营类内容的显示列数。
(2)若展开态放大显示图片/视频,务必确保该图片/视频不超过屏幕的1/2高度。
推荐(采用自适应布局、挪移布局或重复布局) |
不推荐(运营类图片太大导致一屏幕显示的信息太少) |
第二种:首页的内容缩略图片/ 视频。例如,音视频媒体类应用首页双列/瀑布流布局中的图片/视频、新闻资讯类应用首页图文布局中的图片/视频等。
(1)宫格或瀑布流布局的图片/视频/卡片:建议在展开态增加显示列数为原来的两倍。特殊情况如展开态显示三列,则单个图片/视频/卡片高度不超过1/2屏幕高度。
(2)上下图文布局:建议在展开态平铺显示更多图片/视频内容或让图片/视频内容居左/居右/居中对齐。单张图片/视频最高不超过屏幕的1/3高度,但是采用宫格样式聚合显示的图片/视频整体,最高不超过屏幕的1/2高度。
推荐(展开态重复布局,增加显示列数为原来的两倍) |
不推荐(视频直接放大导致一屏幕显示的信息太少) |
推荐(首页的缩略图片高度不超过1/3屏幕高度,居左对齐) |
推荐(有多张图片时平铺展示,首页缩略图片高度不超过屏幕的1/3高度) |
不推荐(图片放大导致一屏幕显示的信息太少) |
第三种:详情页的具体内容图片/ 视频,是内容消费的主体,一般是各类内容的子页面,用于展示更多详细信息。
(1)详情页展开态的内容图片/视频可适当等比放大且居中/居左/居右对齐。
(2)详情内容带文字时,图片/视频高度建议不超过屏幕的80%;详情内容仅图片/视频时,图片/视频高度不超过1屏幕。超长图等特殊情况除外。
(3)有多个图片/视频时,详情页展开态的内容图片/视频横向排列。
推荐(带图文的内容详情,图片高度不超过屏幕高度的80%) |
不推荐(图片过大,一屏幕内看不到完整信息) |
推荐(图片一屏幕内显示完整) |
不推荐(图片一屏幕内显示不完整) |