Skip to content

设计细节

下方留有空白区域。浮层主体与页面底部留有一定距离,方便拇指点击该区域关闭浮层;同时也适应不同设备的底部 R 角曲率,保证浮层主体不会有任何遮挡。

两侧留空不贴边。母页面有时候会设计成两边填满的圆角卡片形式,此时会跟 Layer 的样式非常相似,两侧留空的设计能在任何情况下都最大限度地跟母页面做强区分。

浮层状态平滑转换

利用浮层标题实现按钮和浮层之间的平滑转换。

浮层不能凭空出现。必须是用户主动与UI交互后的产物。此处按钮的点击与浮层的打开形成了因果关系。

Min Height
Max Height

浮层主体尺寸

宽度固定,高度可变。

最小的宽高比是1:1。过小的浮层没有存在的必要。此时应该考虑在母页面上用其他的方式去实现需求。切勿滥用浮层。

Page Content
Layer Content Area
(Default)
Layer Content Area
(Maximum)

内容区域

默认边距让浮层内容刚好与母页面内容对齐。

同时亦可自定义以最大限度使用整个浮层主体区域。

横向布局

设计稿 - Figma 原件