在 Android 系统中,除了导航抽屉外,还存在另外一种,以侧边展开的方式,承载选项内容的控件类型,这类控件我们称之为侧边面板(Side sheets)

不同于导航抽屉,侧边面板通常由页面的右侧滑出,并且占据屏幕右侧位置。侧边面板是一种有补充内容性质的面板控件,当我们对页面执行筛选、过滤、设置等操作时,如果选项内容的构成元素较为丰富,可以使用侧边面板来完成设计。

侧边面板 (Side sheets) - 图2

分类

侧边面板按照设备属性划分,可归为两类。一类是基于桌面设备而存在的面板类型,这类侧边面板,我们称之为标准侧边面板(Standard side sheets),另外一类侧边面板是基于移动设备而存在的面板类型,这类面板被称为模态侧边面板(Modal side sheets)

侧边面板 (Side sheets) - 图3

构成元素

侧边面板主要由以下元素构成:面板容器(A)、选项内容(B)、模态半透明遮罩层(C),其中选项内容可支持用户灵活定义,一些常见控件可被应用于侧边面板中,例如:单选框、复选按钮、下拉列表、滑块等

侧边面板 (Side sheets) - 图4

动作

1. 触发面板

通常情况下,用户可以通过页面上的某些图标按钮,触发侧边面板

侧边面板 (Side sheets) - 图5

2. 关闭面板

当侧边面板被触发后,有三种方式可退出面板状态

  1. 点击模态透明遮罩、
  2. 手指在屏幕中,右滑至屏幕边缘、
  3. 点击关闭按钮(主要取决于面板是否提供关闭按钮)

侧边面板 (Side sheets) - 图6

3. 内容浏览

侧边面板不支持水平方向滑动,面板上的内容元素只能在在垂直方向上显示,当页面的高度高于屏幕高度时,可以通过上下滑屏方式,来查看全部内容

侧边面板 (Side sheets) - 图7

使用禁忌

侧边面板在设计中常见的错误类型

错误 1:横向显示选项内容

侧边面板不支持水平方向滑动,面板上的内容元素只能在在垂直方向上显示

侧边面板 (Side sheets) - 图8

错误 2:面板状态错误

侧边面板被激活时,页面会进入模态,面板后的内容元素都处于不可用状态

侧边面板 (Side sheets) - 图9

错误 3:侧边面板显示位置不当

侧边面板多显示于屏幕的右侧,而导航抽屉则显示于屏幕左侧。

侧边面板 (Side sheets) - 图10