首页 > 其他分享 >Material Design简介

Material Design简介

时间:2022-10-22 18:00:24浏览次数:90  
标签:颜色 样式 简介 Material 形状 Design 组件 设计

介绍

Material 是 Google 创建的一个设计系统,旨在帮助团队为 Android、iOS、Flutter 和 Web 构建高质量的数字体验。

原则

材料是隐喻

Material design的灵感来自物理世界及其纹理,包括它们如何反射光线和投射阴影。Material surfaces重新构想了纸张和墨水的介质。

  • Bold, graphic, intentional
    材质设计由印刷设计方法(排版、网格、空间、比例、颜色和图像)指导,以创建让观看者沉浸在体验中的层次结构、意义和焦点。

  • Motion provides meaning
    Motion通过微妙的反馈和连贯的过渡来集中注意力并保持连续性。当元素出现在屏幕上时,它们会通过交互来转换和重新组织环境,从而生成新的转换。

组件

Material组件是用于创建用户界面的交互式构建基块,并包括一个内置状态系统,用于传达聚焦、选择、激活、错误、悬停、按下、拖动和禁用状态。组件库可用于 Android、iOS、Flutter 和 Web。
组件可满足一系列接口需求,包括:

组件参考资料

主题

Material主题可让您轻松自定义Material设计以匹配品牌的外观和感觉,并具有用于自定义颜色、版式样式和拐角形状的内置支持和指导。可以轻松修改按钮等Material组件的颜色、排版和形状,以匹配您的品牌。

主题参考资料

Material主题指南
使用Material主题的app样例

颜色

Material的颜色系统 是将颜色应用于 UI 的有组织的方法。全局颜色样式具有语义名称和组件中定义的用法 - 主要、次要(品牌颜色)、表面、背景和错误。

每种颜色还具有互补色,用于放置在其“之上”的元素,以促进一致性和可访问的对比度。

排版

Material 设计type scale 提供了13 种版式样式涵盖从标题到正文文本和题注的所有内容 。每种样式在界面中都有明确的含义和预期应用。

可以修改重要属性(如字体、字体粗细和字母大小写)以匹配您的品牌和设计。

形状

应用形状样式有助于引导注意力或识别组件、传达其状态以及表达您的品牌。

所有材料组件都根据其大小(小、中、大)分组到形状类别中。这些全局样式提供了一种快速更改类似大小的组件的形状的方法。

您可以使用形状自定义工具 生成自己的形状样式。

参考文档

Material System

material-dashboard-pro-angular2

标签:颜色,样式,简介,Material,形状,Design,组件,设计
From: https://www.cnblogs.com/guoapeng/p/16816817.html

相关文章

  • Material Design基础 - Pixel Density
    像素密度(PixelDensity)一英寸屏幕上存在的像素数称为像素密度。屏幕像素密度和分辨率因平台而异。屏幕密度变化高密度屏幕的每英寸像素数比低密度屏幕的多。因此,相同......
  • Material Design基础 - 响应式布局网格
    响应式布局网格MaterialDesign的响应式布局网格可根据屏幕大小和方向进行调整,确保布局的一致性。Columns,gutters,andmargins响应式布局网格由三个元素组成:Columns,......
  • Material Design基础 - spacing methods
    spacingmethodsspacingmethods使用基线网格、关键线、填充和增量间距来调整比率、容器和触摸目标。基准网格8dp网格所有组件都与移动设备、平板电脑和台式机的8dp方......
  • Material Design基础 - Surfaces
    MaterialSurfacesMaterial设计具有三个维度的品质,这些品质反映在其对表面(Surfaces)、深度和阴影的使用中。Materialenvironment在真实世界中,物体可以堆叠或相互接触,......
  • Material Design 基础 - 文字排版
    文字系统(Thetypesystem)使用排版尽可能清晰有效地呈现您的设计和内容。文字类型标尺(Typescale)质感设计的文字类型标尺包括一系列对比样式可满足产品及其内容的需求......
  • Material Design基础 - Light and shadows
    光线和阴影materialsurface阻挡光源时会投射阴影。在material设计环境中,虚拟灯光照亮UI。关键灯光创建更清晰的方向性阴影,称为关键光阴影。环境光从各个角度出现,以创建......
  • Material Design 基础 - Layout
    理解layoutmaterial设计布局使用统一的元素和间距,以鼓励在多种平台、环境和屏幕尺寸之间的一致性。原则Predictable(可预测的)使用直观且可预测的布局,并具有一致的U......
  • Material Design 基础 - 导航
    说明导航允许用户在应用程序中移动。导航类型导航是在应用程序的屏幕之间移动以完成任务的行为。它是通过几种方式实现的:专用导航组件、将导航行为嵌入内容以及平台功能......
  • vite Ant Design Vue 动态主题
    简单记录一下。官网地址:https://www.antdv.com/docs/vue/customize-theme-cnantd全局化配置:https://www.antdv.com/components/config-provider-cn开始没懂怎么去使用,查......
  • Java基本数据类型占用字节大小简介说明
    转自:​​http://www.java265.com/JavaMianJing/202205/16515929083261.html​​下文笔者讲述Java中基本数据类型占用字节大小的简介说明,如下所示基础数据类型是所有数据类......