这就是完整的2022年Android可折叠设备·响应式适配方案

由于在自家应用中做了可折叠设备(折叠屏手机)的适配,本文从UI设计的角度,总结一下最新的Android多设备·响应式适配方案。内容稍长,可以从目录中挑感兴趣的部分阅读。

2022/3/16

这篇文章是由机器翻译生成的

背景·前言

Android OS 与iOS不同,从一开始就被设计为运行在多种设备上。iOS只在自家研发的iPhone、iPad上使用,而Android则被安装在Google之外众多厂商生产的智能手机和平板上,运行在各种各样的环境中。

加之最近 Chromebook (Chrome OS) 和 Windows11 上也能运行Android应用,以及Foldable设备(折叠屏手机)等新产品的发布,可以预见Android今后将在越来越多种类的屏幕尺寸上被使用。

android设备示例能运行Android的设备的一小部分例子

Material Design 也开始重视多设备适配和可折叠设备适配,新增了大量的指南。本次将以官方新增的指南为中心,整理相关内容和链接。

Material Design 3 简要总结 | WEBA

hira.page

那么,可折叠设备(折叠屏手机)究竟是什么?

最近频繁听到的折叠屏手机。它通过具有柔韧性的OLED显示屏,可以让屏幕弯曲并折叠起来(也有采用液晶屏+物理铰链结构的)。

foldable设备示例

可以在小屏幕、大屏幕、纵向2屏、横向2屏等多种状态下使用,因此仅这一台设备就需要考虑相当多种UI状态。简直是设计师的噩梦。

目前价格还非常昂贵,大多比一般高端智能手机贵一倍以上。预计用户数量短期内不会大幅增加,所以暂时不需要太在意可折叠适配本身。

关于Google官方推出”Pixel Fold”设备的传闻也时有时无……。

Android 12L

不过,正如前面所说,大尺寸设备(不仅限于可折叠)的确正在增加。Google已宣布将于2022年下半年推出针对平板优化的OS,即 Android 12L。

12L 的功能和变更点 | Android 12 | Android Developers

developer.android.com

除了通知区域和锁屏的优化外,还增强了分屏功能、任务栏等多任务辅助。其行为似乎在很大程度上受到了iPad OS的影响。

Notification Center 通知·快速设置的双列显示

multitasking 任务栏的显示,通过拖拽实现的分屏

Settings 设置界面的分割

UI设计的应对

那么,从这里开始进入正题。如前所述,我们不仅要应对更大的屏幕,还要考虑分屏等场景下应用会以从未有过的宽高比使用。本次将以自家应用的适配内容和各官方指南为中心,总结一下可以做的应对。

Material Desing 推荐的3个步骤

关于大屏适配,Google官方公开了几篇文章(后述)。其中始终被一致重视的是以下3个步骤。

Layout Grid / 重新审视纵向列网格布局

Column Grid

Material Design 中定义了 Layout Grid。这是从远古的 Web Design 时代就开始使用的概念,把列作为网格规则化之后,可以根据断点(设备宽度)灵活地改变布局。

Adaptive Composition / 让构成元素可缩放

一个屏幕中通常包含多个构成要素(Composition),例如:

Bottom Navigation 等全局菜单
Top App Bars 等信息显示区域
由 Cards 等构成的滚动区域

Material Design 推荐根据屏幕大小来重新审视这些元素的整体布局。

在大屏上排列多个元素时,要通过卡片或分隔线让视觉上能识别出分组
每行最多显示约60个字符,以保证文章的可读性

Composition

包括后述的 Navigation Rail 在内,要根据屏幕大小重新审视构成元素的布局和性质。

Component Behavior / 各组件的应对

Material Design 中,每个 Component 也会根据屏幕灵活地调整自身的行为。例如 Snackbars 在移动设备上会铺满整个屏幕宽度,而在大屏幕上则定义了显示的最大宽度。

Snackbars

在最近的更新中,以下 Component 页面新增了大屏相关的定义。

App bars (top) / Bottom navigation / Buttons / Cards / Dialogs / Image lists / Lists / Menus / Navigation drawers / Bottom sheets / Side sheets / Snackbars / Tabs / Text fields

思考频繁点击元素的位置

单手使用智能手机时,应避免把频繁使用的点击元素放在手指够不到的顶部。此外在可折叠设备上,下方图中的2号区域被认为是最容易点击的区域。3号虽然位于下方,但被认为是非常难以点击的区域,不推荐放置FAB等元素。

Tap Area 参考: Foldables – Material Design 3

另外,如果把重要元素放得太靠下,在中等宽高比的屏幕上可能无法进入首屏,被隐藏起来。

Hidden CTA

这部分需要在布局逻辑上下功夫,例如从底部开始计算位置等。

输入设备的考量

Android的响应式适配,不仅仅是适配各种屏幕尺寸。如前所述,考虑到也会在 Chromebook 和 Windows 上使用,应用还可能被鼠标和键盘操作。

Input

因此,理想情况下应当支持悬停和点击时的交互、Tab键移动元素、Enter键执行等操作。这部分如果使用Material Design相关的库实现,很多情况下会自动支持。

此外,可能还需要考虑:

视频应用是否需要支持空格键播放/暂停等键盘快捷键
游戏应用是否要支持手柄输入
是否考虑使用触控笔/手写笔

Table Top Mode 适配

参考: Foldables – Material Design 3

可折叠设备可以横向折叠,立在桌上使用。这时上半部分播放视频,下半部分显示控制器,使用起来非常方便。

主要适用于视频播放或视频通话场景。这是可折叠设备专属的适配,优先级看起来不高。

Sliding Pane Layout

在设置型界面、或者从列表→详情页跳转的界面中,可以考虑采用Sliding Pane Layout把列表和详情左右并排显示。

two-pane

iPad的设置应用中也采用了这种界面。Android 12L 中同样计划在设置界面中采用。

尺寸变化时的Motion

当屏幕尺寸发生变化时,通过对新增或删除的元素进行恰当的动画处理,可以让用户更容易理解UI的变化。

参考: Foldables – Material Design 3

不过,需要频繁应对尺寸变化的也就只有可折叠设备,优先级估计还是会被往后推。

Adaptive Type Scale

这是 Material Design 3 中定义的、可以动态调整尺寸的字体规则。

Adaptive Type Scale Image

通过为每个设计令牌(Headline、Body等变量)定义尺寸规则,设计与实现就能基于共同的规则动态地改变字体大小。但是Android的字体在每台设备上的预装字体都不一样,而且文字大小往往使用sp(Scalable Pixel)实现,情况相当复杂,实际操作起来恐怕会比较麻烦。

排版设计–Material Design 3

m3.material.io

以模态窗口形式显示

通过把特定界面以模态窗口的方式显示,可以复用与移动应用相同的布局。例如U-NEXT应用中,作品的详情页就以细长的模态形式显示,几乎复用了与移动端相同的布局。

U-NEXT Modal

虽然不能用于所有界面,但这是一个能减少设计与开发成本的小技巧。

这是大约2年前被加入 Material Design 的新Component。

Navigation rail - Material Design

material.io

在U-NEXT应用中,当横向宽度达到600dp以上时,会用它来替代 Bottom Navigation 显示。

顺便一提,关于实现层面的经验,我们公司的Android工程师做了一份幻灯片总结。

意外简单?Navigation rail 引入心得 - Speaker Deck

speakerdeck.com

采用 Side Sheet

这同样是 Material Design 的Component。虽然在移动应用中也可以使用,但因为它能在不完全遮挡屏幕的前提下显示附加元素,与大屏设备搭配尤其合适。

Sheets: side - Material Design

material.io

U-NEXT应用中,电子书阅读器的目录:

在移动端使用 Full-screen Dialogs
在平板上使用 Side Sheets

来显示。

避开铰链

在可折叠设备的展开屏幕上,中央铰链周边48dp范围内,应避免放置可点击元素。

Hinge

常见的反例是,把 Modal Dialog 直接叠加在中央铰链上显示。

缩短手指的移动距离

在大屏幕上,要意识到手指的移动距离会变长。通过在用户操作过的UI元素附近显示弹出窗,可以让用户更高效地完成操作。

参考: Samsung Developers

案例研究

Google在以下网站整理了可折叠·大屏适配应用的案例。非常有参考价值,推荐看一遍。

大屏案例介绍 | Android 开发者 | Android Developers