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

用户头像
亚洲/学生/9年前/387浏览
2017 Material Design中文完整版:第四章节第一节《布局:原则》
用户头像
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
阅读原文
|
举报
|
2
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
高级感金属拟物 UI设计组件库
UI界面 组件
【新年UI图标】礼物/活动icon
户外旅行飞机情侣假日出行
智能家居中心 简约 UI设计组件库
3D卡通UI界面图标可爱插画免扣素
【新年UI图标】钱包icon
3D渐变流体抽象矢量UI背景图
Security Camera UI kit
APP/小程序商业项目UI模板|99个高保真UI+79个原型
【新年UI图标】秒杀icon
UI 登录界面设计模板包
钱包ui模板
科技医疗透明柜UI界面设计
高级表盘系列UI源文件
【新年UI图标】会员icon
新拟态风格 UI设计组件库
【新年UI图标】体育icon
【新年UI图标】汽车icon
新能源APP应用UIKit
UI通用设计素材1
【新年UI图标】30个图标
【新年UI图标】旅行icon
你可能喜欢
大家都在看
登录注册