布局 原则

原则

Material Design 指南源于印刷领域的设计元素 —— 排版、网格、留白、规模、颜色和图像 —— 来建立结构和意义,并专注于带给用户沉浸式的体验。Material Design 采用来自印刷设计的工具,如基准网格和结构模板,通过重复视觉元素,结构网格以及跨平台和屏幕尺寸的间距,促进跨平台的一致性。这些布局可以适配任何屏幕尺寸,这就让可扩展的应用更加简单。

纸片的用法 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

在 Material Design 中,纸张的物理属性被转移到了屏幕中。应用的背景质感就像纸片一样平且不透明,应用的行为也模仿纸片,可以改变尺寸、拖动以及把多个纸片黏合在一起。

构成应用的表面在本文中就被称为材料或材料片。

应用之外的元素,比如系统状态栏,独立于应用的内容上方,它们不能被当作材料来对待。

更多关于材料的内容请参考材料属性.

缝隙

两片材料的共同边缘被称作缝隙。一旦越过缝隙,它们就会合并成一个。

两片材料的缝隙

阶层

两个 z-坐标(深度)不同的卡片会产生部分重叠,这样形成了阶层。此时两个材料的移动是相互独立。

两片部分重叠的材料构成的阶层

浮动操作按钮 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

浮动操作按钮

浮动操作按钮是独立于工具栏的圆形纸片。相当于希望用户去使用的操作。

如果与阶层中的内容创建相关,那么 FAB 是可以跨越阶层的。


跨阶层的浮动操作按钮

如果与两个卡片的内容都相关,那么 FAB 是可以跨缝隙的。

不要把 FAB 当做是缝隙的装饰品。


跨缝隙的浮动操作按钮

更多内容请参考浮动操作按钮.