上一年 小米Mix 全面屏手机推出时,得到了业界和用户的双重认可,小米也引领了「全面屏」手机的风潮。今年年初,随着三星S8的发布,表明了业界开始普及全面屏手机的信号。作为全面屏手机的引领者,小米将在近期推出更多全面屏手机,追求更大的屏幕比例,更高的屏占比。这些变化也影响了手机软件的设计,最值得开发者关注的,是以下两点:

  • 更大的屏幕高宽比

  • 虚拟导航键

更大的屏幕高宽比

以三星S8为例,屏幕比例为18.5:9,从下图可以看到,在1080P的分辨率下,比标准的16:9屏幕,足足多了300像素。开发者需要作一些优化,以充分利用更大的显示空间。

标准屏幕(16:9)与三星S8屏幕(18.5:9)对比

1.声明 Maximum Aspect Ratio

Android 标准接口中,支持应用声明其支持的最大屏幕高宽比(maximum aspect ratio)。具体声明如下,其中的 ratio_float 被定义为是高除以宽,以16:9为例,ratio_float = 16/9 = 1.778 (18.5:9则为2.056)。

<meta-data android:name="android.max_aspect"
android:value="ratio_float" />

若开发者没有声明该属性,ratio_float 的默认值为1.86,小于2.056,因此这类应用在三星S8上,默认不会全屏显示,屏幕两边会留黑,如下图:

今日头条在S8的效果

因此建议开发者声明 Maximum Aspect Ratio > 2 或更多。值得一提的是,如果应用的 android:resizeableActivity 已经设置为 true,就不必设置 Maximum Aspect Ratio 了。详见官方文档 Declaring maximum aspect ratio

2.避免内容拉伸/变形

从16:9变成18.5:9,图片往往被会拉伸变形(如下图的淘宝开屏图),此问题常见于开屏素材。开发者应使用更灵活的布局,以适应不同的屏幕比例。

淘宝开屏拉伸

3.充分利用屏幕空间

以三星S8为例,比标准的屏幕多出了300像素的区域,开发者应充分利用这些空间显示更多内容。如下图,王者荣耀已修改了 Maximum Aspect Ratio,在全面屏有更宽阔的游戏视野。

王者荣耀对比2

虚拟导航键(Navigation bar)优化

1.虚拟导航键样式

为了实现更高的屏占比,屏幕内的虚拟导航键就成了标准功能,如何让其应用界面在视觉上统一,同样需要开发者的积极适配。Android 已经有相关接口允许开发者自定义虚拟键的样式,以下是可供选择的样式。

虚拟键的样式

关于使用哪种样式,我们有以下建议:

建议1:如果页面含有复杂背景/纹理,建议设置为透明

桌面和通话界面

建议2:含「底部Tab」的页面,建议将虚拟键设置为「底部Tab」的颜色

相机和小米商城

建议3:不含「底部Tab」的页面,建议使用背景颜色

多看阅读

由于一个应用内含有多种不同的页面,我们希望开发者能当前页面的情况,来选择合适的虚拟键样式,以保证视觉的统一美观。

2.如何修改虚拟键样式

调用以下接口即可 window.setNavigationBarColor (int color)。在调用该接口时,还需要设置一些flag,详见该接口的注释说明(即下文):

/**
 * Sets the color of the navigation bar to {@param color}.
 *
 * For this to take effect,
 * the window must be drawing the system bar backgrounds with
 * {@link android.view.WindowManager.LayoutParams#FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS} and
 * {@link android.view.WindowManager.LayoutParams#FLAG_TRANSLUCENT_NAVIGATION} must not be set.
 *
 * If {@param color} is not opaque, consider setting
 * {@link android.view.View#SYSTEM_UI_FLAG_LAYOUT_STABLE} and
 * {@link android.view.View#SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION}.
 * <p>
 * The transitionName for the view background will be "android:navigation:background".
 * </p>
 */
public abstract void setNavigationBarColor(@ColorInt int color);

常见问题

1.这些改动是仅针对 MIUI 系统吗?

不是。上述提及的均是 Android 标准接口,且早在几年前就已经存在。因此开发者的适配工作,可以直接在其余 Android 手机中生效。我们相信全面屏会是往后手机设计的趋势,这非常值得开发者做好相关的适配工作。

2.如何测试?

目前市面上有三款主要的全面屏手机,小米Mix,三星S8,LG G6。分别说明一下测试方法:

#小米Mix

进入「设置 > 更多设置 > 按键」,开启「虚拟键可隐藏」设置项,然后在虚拟键区域下滑即可隐藏虚拟键。之后可在 17:9 的屏幕比例下运行任意应用,以观察应用的表现。

#三星S8

进入「设置 > 显示 > 全屏应用程序」,找到相关应用,开启选项即可。之后可以在 18.5:9 的屏幕比例下观察应用的表现

#LG G6

进入「Settings >  Display > App scaling」,找到相关应用,选择「Full screen(18:9)」,即可在 18:9 的屏幕比例下观察应用的表现

结语

以上便是全面屏带来的影响,更大的屏幕高宽比,默认使用虚拟键。全面屏带来的是更高的屏占比,更好的视觉冲击力,正逐渐成为手机业界的主流趋势,希望开发者能够积极拥抱变化,做好针对性的优化,为用户提供更好的用户体验。谢谢!