介绍
Material 是 Google 创建的一个设计系统,旨在帮助团队为 Android、iOS、Flutter 和 Web 构建高质量的数字体验。
原则
材料是隐喻
Material design的灵感来自物理世界及其纹理,包括它们如何反射光线和投射阴影。Material surfaces重新构想了纸张和墨水的介质。
-
Bold, graphic, intentional
材质设计由印刷设计方法(排版、网格、空间、比例、颜色和图像)指导,以创建让观看者沉浸在体验中的层次结构、意义和焦点。 -
Motion provides meaning
Motion通过微妙的反馈和连贯的过渡来集中注意力并保持连续性。当元素出现在屏幕上时,它们会通过交互来转换和重新组织环境,从而生成新的转换。
组件
Material组件是用于创建用户界面的交互式构建基块,并包括一个内置状态系统,用于传达聚焦、选择、激活、错误、悬停、按下、拖动和禁用状态。组件库可用于 Android、iOS、Flutter 和 Web。
组件可满足一系列接口需求,包括:
- 显示:使用卡片、列表和工作表等组件放置和组织内容。
- 导航:允许用户使用导航抽屉和选项卡等组件在产品中移动。
- 操作:允许用户使用浮动操作按钮等组件执行任务。
- 输入:允许用户使用文本字段、chips和选择控件等组件输入信息或进行选择。
- 通信:使用snackbars、横幅和对话框等组件提醒用户注意关键信息和消息。
组件参考资料
- [组件指南](https://material.io/components/)涵盖用法、行为和规范的组件指南
- 适用于 Android、iOS、Web 和 Flutter 的开发人员文档和代码
- 参考资料页面上有Figma格式的可下载设计文件
主题
Material主题可让您轻松自定义Material设计以匹配品牌的外观和感觉,并具有用于自定义颜色、版式样式和拐角形状的内置支持和指导。可以轻松修改按钮等Material组件的颜色、排版和形状,以匹配您的品牌。
主题参考资料
Material主题指南
使用Material主题的app样例
颜色
Material的颜色系统 是将颜色应用于 UI 的有组织的方法。全局颜色样式具有语义名称和组件中定义的用法 - 主要、次要(品牌颜色)、表面、背景和错误。
每种颜色还具有互补色,用于放置在其“之上”的元素,以促进一致性和可访问的对比度。
排版
Material 设计type scale 提供了13 种版式样式涵盖从标题到正文文本和题注的所有内容 。每种样式在界面中都有明确的含义和预期应用。
可以修改重要属性(如字体、字体粗细和字母大小写)以匹配您的品牌和设计。
形状
应用形状样式有助于引导注意力或识别组件、传达其状态以及表达您的品牌。
所有材料组件都根据其大小(小、中、大)分组到形状类别中。这些全局样式提供了一种快速更改类似大小的组件的形状的方法。
您可以使用形状自定义工具 生成自己的形状样式。
参考文档
material-dashboard-pro-angular2
标签:颜色,样式,简介,Material,形状,Design,组件,设计 From: https://www.cnblogs.com/guoapeng/p/16816817.html