前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Material的布局原则

Material的布局原则

原创
作者头像
Jean
发布2018-10-30 11:56:46
1K0
发布2018-10-30 11:56:46
举报
文章被收录于专栏:Web行业观察Web行业观察

原则

Material Design 指南通过源自印刷领域的设计元素 – 例如排版、网格、空白、缩放、颜色,和图像 – 来建立层次结构和传达所要表达的含义,并专注于带给用户沉浸式的体验。Material Design 采用来自印刷设计领域的工具,如基准网格和结构模版,通过重复视觉元素,结构网格以及跨平台和屏幕尺寸的间距,促进不同环境下设计的一致性。这些布局可通过缩放来适应任何屏幕大小,这简化了创建可扩展应用的过程。

纸片工作原理

在 Material Design 中,纸片的物理特性被转移到了屏幕中。应用的背景类似于一张平坦、不透明质地的纸片,应用的行为也模仿纸片,可以改变大小、拖动及把多个纸片粘合在一起。

在本规范中,构成应用的表面被成为材料或材料片。

应用之外的元素,例如系统状态栏,和应用内容是分开的,不会被视为材料。

更多关于材料的细节,详见材料属性

接缝

两片材料的公共边缘被成为接缝。当通过接缝连接时,它们会一起移动。

两片材料的接缝

阶层

两个 Z 轴位置不同的材料片重叠时,会形成阶层。这两个材料会相互独立移动。

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

浮动操作按钮

浮动操作按钮

浮动操作按钮是和工具栏分离的圆形纸片。它表示单个被提升的操作。

如果它和阶层中的内容创建有关,则可以跨越一个阶层。

跨阶层的浮动操作按钮

如果浮动操作按钮与两个材料的内容都有关,则可以跨越接缝。

不要引入一个装饰用的接缝,来为浮动操作按钮提供锚点。

跨接缝的浮动操作按钮

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 原则
  • 纸片工作原理
  • 接缝
  • 阶层
    • 浮动操作按钮
    • 浮动操作按钮
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档