Google对材料设计精简版的实用介绍

>在2014年，Google发表了材料设计规范，旨在汇总固体设计原理，跨不同平台和设备的一致用户体验以及技术和科学创新。

2015年7月，

看到Google Release Material Design Lite，这是一个前端图书馆，旨在使材料设计外观和感觉更加容易地添加到网站上。

在本文中，我将重点介绍以下材料设计的基本原理和组成部分，以及如何使用材料设计Lite（MDL）库来实施它们：

版式
颜色
布局
卡

钥匙要点

Google的材料Design Lite（MDL）是一个前端库，可简化材料设计美学的实现，使其更容易在各种平台上保持一致的用户体验。 可以使用Google的CDN用于CSS和JavaScript文件，也可以通过自己下载和托管文件，并提供适用于Bower和NPM等各种环境的详细设置说明。

图书馆使用Roboto和Noto字体提供了强大的排版系统，支持各种脚本，并提供预定义的类以应用一致的印刷量表。 MDL提供了可自定义的颜色系统，使开发人员可以从预定义的调色板中选择主要和重音颜色，从而增强了视觉吸引力，同时保持可用性指南。
• 密钥MDL组件（例如布局，卡片和选项卡）旨在响应迅速且模块化，利用Flexbox和BEM方法来促进更结构化和可扩展的CSS体系结构。
• 演示项目
• >本文的演示项目称为Kaptain Kitty。这是一个HTML模板，旨在说明如何将本文中讨论的材料设计概念和MDL组件应用于网页。
。
• >如果您想将材料设计放在其步伐上，那么您将需要您喜欢的代码编辑器和现代最新的浏览器。
>
• 您可以在Codepen上查看演示项目及其源代码：

>在Codepen上使用sitepoint（@sitepoint）的材料设计Lite参见笔模板。

让我们开始。

在您的项目中包括材料设计精简版

>

在您的项目中包括MDL时，您有以下选项：>

• >使用[Google的CDN]（内容输送网络）加载必要的CSS和JavaScript文件。
• >下载缩小的CSS和JavaScript文件并将其托管在您的服务器上。>
>从github上的MDL项目下载并构建源代码。如果您使用Bower来管理项目，则可以在Bower_components文件夹中键入以下命令以安装MDL库文件：Bower install install install seltim inaters-design-lite -save-save-save
• 如果NPM是您选择的软件包管理器，请在Node_modules文件夹中运行以下命令以安装MDL文件：NPM安装材料 - design-lite-save-save-save
• Google建议使用在其CDN上托管的CSS和JavaScript文件。这是您在本文的“演示”页面中找到的方法。
> 首先，在HTML文档的部分中，包括对MDL CSS文件，Google材料设计图标和该项目的样式表的参考，您将在其中添加自己的自定义：

>

接下来，就在关闭标签之前，向MDL JavaScript文件添加引用：>

材料设计中的版式

<span><span><span><link</span> rel<span>="stylesheet"</span>
</span></span><span>      <span>href<span>="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"</span>></span> 
</span><span><span><span><link</span> rel<span>="stylesheet"</span>
</span></span><span>      <span>href<span>="https://fonts.googleapis.com/icon?family=Material+Icons"</span>></span>
</span><span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="css/styles.css"</span>></span></span>

材料设计的类型用于英语和类似英语的语言（拉丁语，希腊语和西里尔字符）是Roboto和Noto。

noto还支持诸如中文，日语和韩语等密集的脚本，以及东南亚和中东语言等高个子脚本，例如阿拉伯语，印地语等。<span><span><span><script</span> src<span>="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"</span>></span><span> </span></span><span><span></span><span><span></script</span>></span></span>要在项目中包含Roboto Font文件，请在HTML文档的部分的顶部添加以下标签：>

对于拉丁语，希腊和西里尔字符，材料设计规范建议的印刷量表为12、14、16、20和34。您可以通过将一组特定类别添加到将MDL添加到标记。

例如，将.mdl-typography-display-2添加到

>>

和.mdl-typography-display-1中，分别添加了45px和34px的字体尺寸值：

> MDL有许多类具有印刷量表，可访问性和可读性原则的类。这使得更容易显示美丽的文本内容，无论使用用于访问它的设备而言，它都可以读取愉快的内容。

<span><span><span><link</span> rel<span>="stylesheet"</span>
</span></span><span>      <span>href<span>="http://fonts.googleapis.com/css?family=Roboto:400,100,500,300italic,500italic,700italic,900,300"</span>></span></span>

>

>有关排版课程的完整列表，请访问GitHub上的MDL版式组件页面。

为您的MDL项目选择颜色

请注意MDL库样式表文件名：。名称指向样式表中实现的材料设计调色板。默认调色板使用靛蓝作为原色，粉红色作为重音颜色。但是您不会被这些。以下是Material Design关于如何制定自定义调色板以及如何使用MDL实施的建议。

材料设计颜色原理

材料设计喜欢结合大胆和柔和的色彩，阴影和亮点：

颜色应该是出乎意料且充满活力的。

Google材料设计规范

但是，这并不等于在网页上溅起随机颜色。相反。

材料设计提供了各种美丽的调色板，可以和谐地一起使用。为了使选择颜色更容易，调色板中的每种颜色都有一个数字标签以及十六进制的颜色值来识别它。材料设计指南表示500种颜色是原色。其他颜色最好用作强调颜色。

>

>为网站制定自定义颜色选择时，材料设计建议您从主要调色板中挑选三种色调，并从次要调色板中挑选一种口音颜色。这是一个示例：

>将重点颜色的使用限制为链接，主操作按钮以及某些组件（例如开关和滑块）。避免使用重音颜色进行身体文本：

>此外，材料设计指南会使用页面大面积和应用程序栏中的重音颜色来劝阻。尤其重要的是不要在浮动动作按钮和背景下使用相同的颜色：>

>现在您对材料设计颜色指南有了深入的了解，现在该为您的MDL项目做出了很棒的颜色选择了。这是如何。

>自定义材料设计中的默认调色板

>您可以以以下两种方式从默认的indigo-pink调色板切换到自己的自定义调色板。

>

如果您使用的是Google的CDN，就像我在本文中的演示中所做的那样，请按照以下步骤：：

>在HTML页面的部分中的标签的HREF属性内找到MDL样式表文件的URL

>替换

indigo

用您选择的原色和

pink
• >带有您喜欢的口音颜色。
• 例如，假设您从材料设计调色板中选择的颜色是蓝绿色，则是琥珀色的口音。以下是Google CDN上托管的MDL样式表的URL。

  <span><span><span><link</span> rel<span>="stylesheet"</span>
  </span></span><span>      <span>href<span>="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"</span>></span> 
  </span><span><span><span><link</span> rel<span>="stylesheet"</span>
  </span></span><span>      <span>href<span>="https://fonts.googleapis.com/icon?family=Material+Icons"</span>></span>
  </span><span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="css/styles.css"</span>></span></span>

  你完成了！

  >如果您希望在服务器上托管编译和缩小的MDL文件，则MDL网站已涵盖您。在这里，您可以找到自定义和预览工具，该工具使您可以从交互式色轮中选择一个主要的和强调的调色板。然后，您可以为所选主题下载CSS，然后将其直接插入您的项目：>

  

  >本文的HTML演示使用默认的indigo-Pink调色板，但是您可以使用上面概述的任何一种方法自由尝试尝试不同的颜色选择。

  >

  > MDL布局组件

  MDL提供许多常用的Web组件，包括布局，按钮，卡片，开关等。开始使用材料Design Design Lite的布局组件开始构建HTML模板的结构。

  mdl将整个布局包含在容器元素中，并带有.mdl-layout .mdl-js-layout。

  首先在您的HTML文档的开头标签之后添加以下代码片段：
  MDL使用CSS Flexbox进行布局。 .mdl-layout元素是一个弹性容器，并将flex方向属性设置为列。

  布局组件包括以下四个子组件：>

  <span><span><span><script</span> src<span>="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"</span>></span><span>
  </span></span><span><span></span><span><span></script</span>></span></span>

  导航布局
  网格
  选项卡
  • >页脚
  使用标签进行导航
  >您可以从以下选项中进行选择来构建导航：
  • >
  透明标头
  固定抽屉，没有标题
  固定标头
  • 固定的标头和抽屉
  • 滚动标头
  • 瀑布标头 - 在页面滚动上收缩的标头。
  >您可以自由查看上面的“ MDL导航布局”部分上的选项，并尝试每个项目进行项目。
  • 对于本文随附的HTML演示，我选择了使用选项卡组件的标签导航。选项卡的优点在于，尽管内容分为相互排斥的屏幕，但所有部分均在同一页面上。这意味着，当用户单击选项卡式导航链接时，他们无需等待服务器在浏览器中加载新页面。所有内容都可以立即获得，从而为现场访问者创造了愉快的体验。
  • >快速构建标签标题布局，请按照以下步骤：：
  >在您之前编码的布局容器元素中添加两个类 - .mdl-layout-固定 - 固定标头和.mdl-layout-固定-TABS：>

  请注意MDL如何使用名称bem类组织CSS。如果您不熟悉BEM方法论，请大规模与BEM合作 - Patrick Catanzariti的顶级开发人员的建议提供了一项出色的概述。

  接下来，代码部分如下：

  >
  最后，您需要添加相应的内容面板：

  >

  <span><span><span><link</span> rel<span>="stylesheet"</span>
  </span></span><span>      <span>href<span>="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"</span>></span> 
  </span><span><span><span><link</span> rel<span>="stylesheet"</span>
  </span></span><span>      <span>href<span>="https://fonts.googleapis.com/icon?family=Material+Icons"</span>></span>
  </span><span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="css/styles.css"</span>></span></span>

  带有.is-Active类的面板，默认情况下将显示。

  > 在抽屉组件中放置额外内容
  演示还使用抽屉部分。抽屉是一个侧面面板，您可以单击按钮隐藏和显示。您也可以选择保持抽屉打开和修复，以使其内容始终保持在全视图中。>

  >抽屉非常适合添加小部件，共享按钮和额外的导航链接到网页，而无需混乱设计。

  使用您之前添加的代码段，就在

  部分之后，写下代码以在布局中添加抽屉组件：
  >
  在行动中查看这些片段或检查演示项目的源代码以完整实现标签导航和抽屉组件。

  <span><span><span><script</span> src<span>="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"</span>></span><span>
  </span></span><span><span></span><span><span></script</span>></span></span>

  材料设计Lite Grid

  材料设计Lite使用12列网格进行桌面屏幕，平板电脑的8列网格（最高800px）和4列网格，用于移动屏幕尺寸（高达500px）。

  >您将网格列包裹在一个带有.mdl网格的容器元素内：

  默认情况下，网格列容器元素跨越屏幕的整个宽度。如果这不是您想要的，那取决于您在样式表中定义其宽度。

  例如，本文的演示项目同时实现了全屏和居中的盒子：

  <span><span><span><link</span> rel<span>="stylesheet"</span>
  </span></span><span>      <span>href<span>="http://fonts.googleapis.com/css?family=Roboto:400,100,500,300italic,500italic,700italic,900,300"</span>></span></span>

  通过将每个部分包装在不同的.mdl-Grid元素中，并为盒装部分提供一个额外的自定义类，以CSS最大宽度为960px。

  html：

  和CSS：

  >另外，如果您想在网格列之间没有边距，则MDL有一个方便的类，您可以将其添加到网格列容器元素 - .mdl-grid-no-spacing：

  <span><span><span><h1</span> class<span>="mdl-typography--display-2"</span>></span>Title<span><span></h1</span>></span>
  </span><span><span><span><p</span> class<span>="mdl-typography--display-1"</span>></span>
  </span>  Sub-title
  <span><span><span></p</span>></span></span>

  >
  这将为您提供类似的东西：

  <span><span><span><link</span> rel<span>="stylesheet"</span>
  </span></span><span>      <span>href<span>="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.teal-amber.min.css"</span>></span></span>

  <span><span><span><div</span> class<span>="mdl-layout mdl-js-layout"</span>></span>
  </span>  <span><!-- All your template markup goes here -->
  </span><span><span><span></div</span>></span></span>

  接下来，您通过在.mdl-cell类中添加

  元素来构建.mdl-Grid元素内部的列。这是3列网格的代码：>

  如果您想覆盖默认列大小，则需要添加一个.mdl-cell - {number} -col类，数字为1到12。这是2列网格的代码：

  >在Codepen上查看实时演示。

  <span><span><span><div</span> class<span>="mdl-layout
  </span></span></span><span><span>            mdl-js-layout mdl-layout--fixed-header
  </span></span><span><span>            mdl-layout--fixed-tabs<span>"</span>></span>
  </span><span><span><span></div</span>></span></span>

  如果您的设计需要它，则MDL提供方便的实用程序类，以在特定的屏幕尺寸上隐藏列：

  • .mdl-cell--hide-desktop隐藏了桌面屏幕尺寸（大于840px）
  的列
  • .mdl-cell-挡板图将列的列在平板电脑屏幕尺寸（大于480px）上
  >
  • > .mdl-cell-隐藏电话隐藏了移动屏幕大小（小于480px）
  的列

  要查看此操作，请在不同的屏幕大小上查看演示项目的欢迎部分。您很快会注意到，列表旁边物品旁边的装饰性粉红色圆圈在小屏幕上不可见：>

  

  

  材料设计Lite卡组件

  > Card UI模式已经越来越流行了一段时间，尤其是由于Pinterest等网站。

  这是材料设计定义卡组件的方式：

  卡是一张材料，可作为更详细信息的切入点。一张卡可以包含有关单个主题的照片，文字和链接。

  材料设计规范
  

  >您可以将不同类型的内容添加到一张卡中，但请确保与核心主题有关。另外，避免在卡中放置过多的信息或太多链接和按钮。相反，将用户指向专用页面，在该页面上，您将有关该主题的更多详细信息。

  这是您可以使用MDL卡组件将简单卡添加到页面上的方法：

  <span><span><span><link</span> rel<span>="stylesheet"</span>
  </span></span><span>      <span>href<span>="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"</span>></span> 
  </span><span><span><span><link</span> rel<span>="stylesheet"</span>
  </span></span><span>      <span>href<span>="https://fonts.googleapis.com/icon?family=Material+Icons"</span>></span>
  </span><span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="css/styles.css"</span>></span></span>

  >您将卡内容包装在容器元素中，其中包括.mdl-card类。 .mdl-shadow- {number} dp类让您可以控制落下阴影的深度：在此类中添加3、4、6、8或16，将导致更深的落下阴影。

  接下来，您为以下卡部分添加一个容器：>

  卡标题，使用.mdl-card__title类

  • 卡媒体，使用.mdl-card__media类
  使用.mdl-card__supporting-text类
  • card文本内容
  如果您的卡包含一个操作按钮或类似元素，则使用.mdl-Card__actions类使用卡的卡操作。
  • >
  • >最后，您用适当的内容充实了这个结构
  这是codepen上的实时摘要：

  请参阅codepen上的sitepoint（@sitepoint）的笔材料设计Lite卡。

  >您还可以通过将适当的.mdl-card类添加到带有.mdl-cell类的元素中，将网格单元格变成卡组件

  >您可以在随附的演示项目中找到这种方法。这是实现响应式瓷砖布局的好方法：

  <span><span><span><script</span> src<span>="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"</span>></span><span>
  </span></span><span><span></span><span><span></script</span>></span></span>

  结论

  本文全部旨在探索Google的材料设计Lite库，并将其付诸实践，以真实的HTML Web模板。 MDL不是一个全面的框架，例如Bootstrap。它没有您的应用程序最可能需要的所有组件和样式。因此，期望自己编写某些功能。

  > 但是，图书馆仍在不断发展，这可能会在以后的发行版中给我们一些新的东西感到惊讶。此外，网络为设计师和开发人员提供了丰富的材料设计生态系统，其中大多数是免费的。

  >您可以将本文的HTML模板与MDL网站上的模板一起使用，作为开始尝试MDL并构建您自己的出色材料设计项目的另一种资源。

  >查看我们最好的材料UI主题指南。

  >

  什么是材料设计精简版（MDL），它与材料设计有何不同？

  材料设计精简版（MDL）是Google开发的设计理念，旨在为所有设备提供统一的用户体验和平台。它是材料设计的较轻版本，这是一种综合设计系统，结合了制作数字体验的理论，资源和工具。尽管材料设计是一种完整的设计语言，其中包括大量工具，准则和组件，但MDL是该系统的子集，提供了更简单，更轻巧的框架，易于实现。这对于想要创建现代，时尚的用户界面而没有完整材料设计系统的复杂性的开发人员特别有用。

  >

  >我如何开始使用材料设计Lite？使用材料设计精简版，您需要在项目中包含MDL CSS和JavaScript文件。这些文件可以从官方MDL网站下载，也可以直接从内容交付网络（CDN）下载。包含这些文件后，您可以开始使用HTML代码中的MDL组件。 MDL网站提供了全面的文档和示例，以帮助您了解如何使用每个组件。

  >材料设计精简版的关键组成部分是什么？

  材料设计Lite Lite包含您的各种组件可以用来构建用户界面。这些包括按钮，复选框，文本字段，滑块等。每个组件旨在提供一致，现代的外观和感觉，并且可以自定义以满足您的特定需求。 MDL网站为每个组件提供详细的文档，包括代码示例和使用指南。

  我可以将材料设计精简版用于商业项目吗？它是根据Apache许可证2.0许可的，只要您遵守许可证的条款。

  材料设计Lite是一个轻巧，易于使用的框架，可提供现代，时尚的外观和感觉。它旨在使用简单，直接的API和全面的文档易于实现。与其他设计框架相比，MDL不那么全面，但也不那么复杂，这对于那些想要一个没有完整框架的开销的开发人员来说，它是一个不错的选择。

  是材料设计精简版。与所有浏览器兼容？

  材料设计Lite的设计旨在与所有现代浏览器兼容，包括Chrome，Firefox，Safari和Edge。但是，在较旧的浏览器或不完全支持现代网络标准的浏览器中，它可能无法正常工作。

  我可以自定义材料设计精简版以适合我的品牌吗？高度可定制。您可以更改颜色，字体和其他设计元素，以匹配品牌的视觉标识。 MDL网站提供了有关如何自定义框架以满足您需求的详细指南。

  >

  >材料设计精简版支持响应式设计吗？

  是的，材料设计Lite Lite Lite支持响应式设计。它包括一个响应式网格系统，该系统允许您创建适合不同屏幕尺寸和方向的布局。这使得创建在台式机和移动设备上看起来都很好的网站和应用程序变得容易。

  我如何为材料设计精简版做出贡献？欢迎社区的贡献。您可以通过报告错误，建议新功能或提交代码更改来做出贡献。所有贡献都应遵循该项目的贡献指南，该指南可在MDL网站上找到。

  >

  >我在哪里可以找到更多资源来了解材料设计精简版？开始。它为所有MDL组件提供了全面的文档，代码示例和使用指南。此外，还有许多在线教程，文章和视频可以帮助您更多地了解MDL以及如何在项目中有效使用它。

以上是Google对材料设计精简版的实用介绍的详细内容。更多信息请关注PHP中文网其他相关文章！