header_v1.7.40

2017 Material Design中文完整版:第四章节第一节《布局:原则》

1年前发布

翻译文章 / 多领域 / 教程
D27_ 翻译,如需商业用途或转载请与D27_联系,谢谢配合。

【站酷首发】10大章79小节重译!半年心血只为让更多人正确认识、学习MD。由于单篇文章字数限制,全文将分为N篇文章陆续发布。

第四章《布局》  


一、原则 (Principles)  

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

 

- 工作原理  

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

 

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


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

 

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


接缝

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

17295951022ba8012193a325c031.jpg

两张material sheets间的接缝


Steps

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

583059510272a8012193a3dbe93d.jpg

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


- 浮动按钮  

浮动按钮

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


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

4a3a59510285a8012193a39f5af9.jpg

浮动按钮跨立于steps上。

 

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


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

f70359510296a8012193a31b2c61.jpg

浮动按钮跨立于接缝上。


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


0

    文章信息

    • 文章标签

    没有新消息

    提示文案

    提示文案

    提示失败
    提示成功