文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

Material Design的概述与环境

概述 Material Design 是我们将经典的设计原则和科技、创新相结合而创造的设计语言。这份文档会随着我们对 Material Design 的探索而不断更新。...原则 Material 是一种隐喻 通过构建系统化的动效和空间合理化利用，并将两个理念合二为一，构成了实体隐喻。...精心选择色彩、图像、选择合乎比例的字体、留白，力求构建出鲜明、形象的用户界面，让用户沉浸其中。 Material Design 设计语言强调根据用户行为凸显核心功能，进而为用户提供操作指引。...环境 Material design 是一个包含光线、材料和投射阴影的三维环境。 所有的材料对象都包含 x、y、z 三个维度。 所有的材料对象都有一个 Z 轴厚度。...3D 世界 材料所处的环境是一个 3D 空间，这意味着每个对象都有 x、y、z 三维坐标属性，z 轴垂直于显示平面，并延伸向用户视角，每个材料都有 z 轴厚度，标准是 1dp，相当于一个屏幕密度为 160

1.1K50
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    Material Design 在 Android 中的应用

    最终决定分享主题为『Material Design In Android』。因为之前毕设项目趣闻中有用到「Support Design」库中的控件，所以写起来会顺手一点。...整体结构: 什么是 Material Design Material Desing的特点 从四个特点结合Android的应用剖析 在我的公司「口袋」项目中的应用 当然内容需要看官方的文档和其他资料加上总结才能完成...，所以在此感谢一下文章的帮助： Material Design 学习笔记 Material Design 官网介绍文档 Material Design 中文介绍 Material Design in Android...那我把链接再列出一下： Material Design`官网介绍文档 Material Design 中文介绍 当你把官网的内容大致浏览一遍，相信也对MD有个初步的了解，当然要想全部弄懂的话，还得需要消化一阵子...跟随着15年Android 5.0的问世，谷歌设计师们还给我们带来的一系列的具有Material Design风格控件。这些控件被统一放置在support design库中，以供开发中使用。

    2.1K20

    Material Design Lite ，简洁惊艳的前端工具箱

    Material Design Lite简介 本文主要介绍Material Design设计语言的HTML/CSS/JS部分实现。   对应每一小节的在线练习地址如下，大家可以去试试。...Material Design 如果说拟真代表设计语言的一个极端，而扁平代表设计语言的另一个极端，那么Material Design则居于两者之间更偏右的位置： ?...因此，Material Design 并不是单纯的扁平化，它在保留了扁的控件的同时，采用了立体的虚拟空间， 简言之，Material Design的核心是：扁而不平。...在页面中要使用图标字体，只需要应用上面定义的material-icons样式： material-icons">face 上面的示例创建了一个笑脸图标，face用来指定要显示的图标.../design/icons/ 六、排版/Typography Material Design提供了11种规格的文字样式供不同场景下排版使用: ?

    1.6K30

    基于Material Design风格开源的Avalonia UI控件库

    前言 今天大姚给大家分享一款基于Material Design风格开源、免费（MIT License）的Avalonia UI控件库：Material.Avalonia。...它使用自己的渲染引擎绘制UI控件，确保在Windows、macOS、Linux、Android、iOS和WebAssembly等不同平台上具有一致的外观和行为。...这意味着开发人员可以共享他们的UI代码，并在不同的目标平台上保持统一的外观和感觉。 项目特点 功能描述：提供了一套完整的Material Design样式和控件，用于定制Avalonia应用程序。...控件支持：几乎涵盖了所有Avalonia控件的Material Design风格，以及额外的控件如Snackbars、侧面板、浮动按钮、卡片、对话框等，并且支持黑暗和亮色主题主题切换。...易于配置：支持在设计时和运行时轻松配置颜色板，遵循Material Design指南。 图标支持：全面支持Material Design图标包（需单独安装，以保持库体积小巧）。

    87710

    Material Design Lite，简洁惊艳的前端工具箱

    本文主要介绍Material Design设计语言的HTML/CSS/JS部分实现。...从下面的对比图中，我们可以体会到两种设计语言的差异： Material Design 如果说拟真代表设计语言的一个极端，而扁平代表设计语言的另一个极端，那么Material Design则居于两者之间更偏右的位置...不同控件之间的层级关系会使用阴影作为表示，而阴影的深浅，代表的正是这个 控件在 Z 轴的高度： 二、材料/Material Material Design 里的材料/Material实际上是一种虚构出来的材料...样式： material-icons">face 上面的示例创建了一个笑脸图标，face用来指定要显示的图标，也可以 使用其对应的数字编码： material-icons...Material Design提供了11种规格的文字样式供不同场景下排版使用: Material Design Lite 在MDL中，使用样式类mdl-typography–{name}声明文本的排版样式

    1.3K10

    Waves：类Material Design 的圆形波浪（涟漪）点击特效插件

    Google Material Design 相信你也了解不少了，但目前无论是应用端还是网页端，可参考案例尚少。...本着补充《Material Design 一些相关中文资料/资源收集汇总》一文的目的，介绍一款类Google Material Design 的圆形波浪（涟漪）点击特效插件Waves。...Google Material Design 中有一个特效，点击某个色块区域会有圆形波浪（涟漪）渐现放大的效果（当然，对应应用端则为触摸事件）。...Waves 就是这么一款在网页上实现该特效的javascript 插件。 ? ?...另外：Tutsplus上有一篇文章详细介绍了实现该效果的方法，Recreating the Touch Ripple Effect as Seen on Google Design，不妨一看：点击查看

    1.9K70

    基于Material Design风格开源、免费的WinForms UI控件库

    前言 今天大姚给大家分享一个基于 Google 的 Material Design 风格开源、免费的.NET WinForms UI控件库：MaterialSkin。...WinForms介绍 WinForms是一个传统的桌面应用程序框架，它基于 Windows 操作系统的原生控件和窗体。...通过简单易用的 API，开发者可以快速构建基于窗体的应用程序，并且可以利用多种控件和事件来实现应用程序的功能和交互。...项目介绍 MaterialSkin是一个基于 Google 的 Material Design 风格开源、免费的.NET WinForms UI控件库，提供了一系列基于Material Design的UI...控件，如复选框、单选按钮、列表视图等，使得开发者可以轻松地构建出符合Material Design规范的WinForms应用程序。

    72410

    一篇博客让你了解Material Design的使用

    Material Design的基本概念 Material Design是Google设计的一套视觉语言，将优先的经典的设计原理与科技创新相结合，为开发者提供一套完成视觉和交互设计规范。...移动设备是这套设计语言的基础对象，让用户在不同的平台、不同尺寸的设备上能保持一致的体验。 Material Design强调交互上的即时反馈，即对于用户的触控等行为app需要给出即时的反应。...同时Material Design要求应用给用户带入感，让用户在使用时是沉浸在当前的应用当中。...Google从动画、颜色、样式、触控反馈、布局等多个方面给出了Material Design的设计要求。...Snackbar的详细使用参见《轻量级控件SnackBar使用以及源码分析》 TextInputLayout 布局： design.widget.TextInputLayout

    4.3K30

    基于Material Design风格开源、免费的WinForms UI控件库

    前言 今天大姚给大家分享一个基于 Google 的 Material Design 风格开源、免费的.NET WinForms UI控件库：MaterialSkin。...WinForms介绍 WinForms是一个传统的桌面应用程序框架，它基于 Windows 操作系统的原生控件和窗体。...通过简单易用的 API，开发者可以快速构建基于窗体的应用程序，并且可以利用多种控件和事件来实现应用程序的功能和交互。...项目介绍 MaterialSkin是一个基于 Google 的 Material Design 风格开源、免费的.NET WinForms UI控件库，提供了一系列基于Material Design的UI...控件，如复选框、单选按钮、列表视图等，使得开发者可以轻松地构建出符合Material Design规范的WinForms应用程序。

    76410

    MudBlazor：基于Material Design风格开源且强大的Blazor组件库

    项目介绍 MudBlazor是一个基于Material Design风格开源、免费（MIT License）、功能强大的Blazor组件框架，注重易用性和清晰的结构。...它非常适合想要快速构建Web应用程序的 .NET 开发人员，无需费力地处理 CSS 和 JavaScript。由于MudBlazor完全使用C#编写，因此你可以自由地调整、修复或扩展该框架。...Blazor是一个使用 .NET框架和C#编程语言Razor语法构建Web应用程序的UI框架，它可以用于构建单页应用（SPA）和 Web服务，它使用编译的C#来操纵HTML DOM来替代JavaScript...Blazor 的目标是让开发人员使用C#编程语言来编写 Web 应用程序，使得C#程序员可以在一个熟悉的编程语言中完成整个应用程序的开发。这样既可以提高开发效率，也可以减少学习成本。...rel="stylesheet" /> 将以下内容添加到 Program.cs 的相关部分

    55810

    基于Material Design风格开源、易用、强大的WPF UI控件库

    前言 今天大姚给大家分享一款基于Material Design风格开源、免费（MIT License）、易于使用、强大的WPF UI控件库：MaterialDesignInXamlToolkit。...项目介绍 MaterialDesignInXamlToolkit 是一个开源、易于使用、强大的 WPF UI 控件库，旨在帮助开发人员在 C# 和 VB.Net 中实现 Google 的 Material...Design 风格的用户界面。...该框架提供了一组丰富的控件、样式和效果，使开发人员能够轻松创建现代化、具有吸引力的应用程序。 WPF介绍 WPF 是一个强大的桌面应用程序框架，用于构建具有丰富用户界面的 Windows 应用。...它提供了灵活的布局、数据绑定、样式和模板、动画效果等功能，让开发者可以创建出吸引人且交互性强的应用程序。

    1.4K10

    MudBlazor：基于Material Design风格开源且强大的Blazor组件库

    项目介绍 MudBlazor是一个基于Material Design风格开源、免费（MIT License）、功能强大的Blazor组件框架，注重易用性和清晰的结构。...它非常适合想要快速构建Web应用程序的 .NET 开发人员，无需费力地处理 CSS 和 JavaScript。由于MudBlazor完全使用C#编写，因此你可以自由地调整、修复或扩展该框架。...Blazor是一个使用 .NET框架和C#编程语言Razor语法构建Web应用程序的UI框架，它可以用于构建单页应用（SPA）和 Web服务，它使用编译的C#来操纵HTML DOM来替代JavaScript...Blazor 的目标是让开发人员使用C#编程语言来编写 Web 应用程序，使得C#程序员可以在一个熟悉的编程语言中完成整个应用程序的开发。这样既可以提高开发效率，也可以减少学习成本。...坑已挖，欢迎大家踊跃提交PR推荐或自荐（让优秀的项目和框架不被埋没）。

    78310

    Flutter Hello World

    我就要来解释一下啦： // 引入 Material Design 设计语言（基于 Dart 的 flutter 版本） import 'package:flutter/material.dart';...解释： Material Design 设计语言（基于 Dart 的 flutter 版本），Material Design 是由 Google 推出的全新的设计语言。...我们缺少了必要的代码实现，那就先来个最简单的 [home]，所以可以将代码修改为： // 继承自 StatelessWidget class MyApp extends StatelessWidget...我们在来看看源码，看看这到底是个什么东西： 我们来看到这一句： Creates a visual scaffold for material design widgets....（Text），行（Row），列（Colum）等（具体实现） 所以只要 Widget 提供了所需的内容给 Scaffold，那么 Scaffold 就会实现为对应的设计标准 Material。

    1.5K10

    Material Design技术分享

    第一部分是针对Material Design的个人总结，第二部分是近段时间接触到符合Material Design风格的控件以及动画总结。...Part1:什么是Material design   自2014年谷歌在I/O大会发布Material Design，至今已经两年多，其遵循纸片与墨水的视觉设计，并将物理运动带入到UI设计中，google...因此Material Design并不是去拟物化的设计。许多人会将把扁平化与拟物化对立起来，其实两者并不是对立关系。扁平化其实也有纸片设计的元素，只不过缺少物理世界的立体感。   ...一、环境   Material环境是基于三维立体空间，每一个处于界面显示的UI对象都有一个三维坐标(x,y,z)，一般来说在手机平面显示的位置相对于用户来讲只有平面xOy，但是有了z轴的加入，用户视角就变得更加立体...以上是简单总结Material Design的核心思想，目前关于Material Design其实还存在很多争议，其设计风格鲜明，贴近真实体验，界面简洁而直观，但是目前google官方提供的设计规范有限

    2.6K60

    Flutter 全栈式——页面框架

    Material Design是由Google推出的全新设计语言，这种设计语言旨在为手机、平板电脑等平台提供更一致、更广泛的外观和感觉。...Material Design是一种有质感的设计风格，还会提供一些默认的交互动画。...对于没有相关基础的人，在正式学习App的UI之前，建议先了解Material Design相关的知识 关于Material Design设计风格的资料 MaterialApp MaterialApp代表使用...中的 ActionBar body Widget 当前页面所显示的主要内容 floatingActionButton Widget Material中所定义的FAB，是一个悬浮的功能按钮 floatingActionButtonLocation...默认为 ThemeData.scaffoldBackgroundColor bottomNavigationBar Widget 显示在底部的导航栏 bottomSheet Widget 底部永久性显示的提示框

    3.9K30
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券