iOS 和 Android 规范解析:底部浮层(上)

Google Material Design设计规范和iOS设计规范中,都有从底部向上出现的浮层组件。在Android中,是底板(Bottom Sheet);在iOS规范中,是上拉菜单(Action Sheets)和活动视图(Activity Views)。由于内容较多,本文介绍MD中的底板组件;iOS中的两个组件,将在下一篇文章中进行介绍。

Google Material Design Guideline

在MD规范中,底板分为两种:固定底板和模态底板。它们的区别,主要在状态是否固定——固定底板的状态是固定的,和应用界面在同一层级;而模态底板的状态是临时的,其层级位于应用界面之上。举个栗子:

另外,我们看一下MD规范给出的各部件的高度示意图,可以发现,模态底板的高度是很高的(16DPs);原图中没有给出固定底板的高度示意,我添加了一下(蓝色部分,0DPs):

MD规范中各部件的高度示意图

也就是说,如果两种底板同时出现,模态底板是压在固定底板的上面的(别想多了,呵呵呵)。

另外还有一个区别:模态底板出现的时候,页面会自带蒙层;固定底板出现的时候没有蒙层。

下面详细说一下两种底板。

固定底板(Persistent Modal Sheet)

固定底板主要用于以下两种情况:

  1. 在当前页展示新内容;
  2. 展示与主要内容同等重要的新内容。

固定底板示例

对于不同尺寸的设备,MD规范也给出了详细的说明:

  • 对于手机,不论正常或者横置的情况,固定底板都占满100%的宽度。
  • 对于平板,则要依据内容的多少决定固定底板是否占满100%宽度:

![](iOS 和 Android 规范解析:提示框(Toast)对比
iOS 和 Android 规范解析——警告框(Alerts)
iOS 和 Android 规范解析:底部浮层(上)
iOS 和 Android 规范解析——底部浮层(下)

作者:新设计青年,德国海龟一枚:turtle: ,曾任职于腾讯微生活、网易、宜信等公司。现为爱奇艺高级交互设计师。微信公众号:新设计青年。

关键字:产品经理, 产品设计

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部