2017 Material design 第四章第一节《原则》

1,240 阅读2分钟

第四章《布局》

一、原则 (Principles)

Material design基于印刷的设计元素(如排版、网格、空间、颜色和图像等)去创建层次结构、情景含义和视觉焦点,这一切都是为了加强用户体验。Material design 采用印刷设计的基本工具(如通用于所有页面的基础网格和结构模板),通过重复的视觉元素、结构网格和跨平台跨屏幕的能力来促进在不同环境中的一致性。这些布局可以适配任何屏幕大小进行缩放,这大大简化了我们创建可扩展性应用的过程。

工作原理

Material design是把纸的物理性质转换到屏幕上,应用的背景类似于一张扁平且不透明的纸。应用的操作行为是模拟纸的物理行为,例如能够改变大小,拖拽和约束在多个sheets中。

构成应用的面的对象在Material design中我们称之为 material或sheets of material。

应用之外的元素(如系统栏)是独立于应用之外的对象,这里不视其为 material 。

关于Material的详细信息,请参阅 Material属性

接缝
两张material sheets间共享的一条公共边隙,我们称之为接缝。有接缝的sheets通常会一起移动。

两张material sheets间的接缝
两张material sheets间的接缝

Steps
两个在不同Z轴位置的独立且重叠的sheets会形成一个step

两个重叠的sheets会形成一个step
两个重叠的sheets会形成一个step

浮动按钮

浮动按钮
浮动按钮是一个与工具栏分离的圆形sheet。

当浮动按钮与step的内容相关时,它可以跨立在这个step上。

浮动按钮跨立于steps上。
浮动按钮跨立于steps上。

当浮动按钮与接缝的内容相关时,它可以跨立在这条接缝上。

永远不要只是为了给浮动按钮提供一个支撑点而引入一条装饰性的接缝。

浮动按钮跨立于接缝上。
浮动按钮跨立于接缝上。

浮动按钮的详细信息,请参阅 浮动按钮