5个优秀的材料设计实例

At the same time Google released their Lollipop version of the Android OS, they also introduced a new visual design language known simply as Material Design. The goal? To create a cohesive design standard that could work across all of Google’s various products. It has a set of principles and styles, along with plenty of rules to define the exact layout. Today we’re going to look at Material Design and what it seeks to achieve. After an overview of the language, we’ll then look at five excellent examples of Material Design in action so you can decide if it’s right for your website.

在Google发行其Lollipop版本的Android OS的同时，他们还引入了一种新的视觉设计语言，简称为Material Design。 目标？ 创建一个可以在所有Google各种产品中使用的统一设计标准。 它具有一组原则和样式，以及用于定义确切布局的大量规则。 今天，我们将研究材料设计及其追求的目标。 在对语言进行概述之后，我们将看一下五个实际的Material Design示例，以便您确定是否适合您的网站。

什么是材料设计？ 概述 (What is Material Design? An Overview)

The primary goal of Material Design is to create experiences that are accessible, practical, and usable. Google has an ongoing and constantly-updated document that helps designers familiarize themselves with the practice.

材料设计的主要目标是创造可访问，实用和可用的体验。 Google拥有一个不断更新的文档 ，可帮助设计人员熟悉这种做法。

Looking at the document, these are the primary goals of Material Design:

查看文档，这些是材料设计的主要目标：

• Establish a visual language that is informed by the practices of good design and incorporates the innovation brought about by technology and science.
  建立一种视觉语言，以良好的设计实践为基础，并融合技术和科学带来的创新。

• Develop a single system that creates a unified experience across multiple devices, platforms, and screen sizes. Mobile is key, but this also extends to touch, voice, mouse, keyboard, and other input methods.

  开发单个系统，以跨多个设备，平台和屏幕尺寸创建统一的体验。 移动是关键 ，但这也扩展到触摸，语音，鼠标，键盘和其他输入法。

Starting with these goals in mind, the next step is to look at the principles that Material Design champions:

从这些目标出发，下一步是研究Material Design倡导的原则：

• Material itself is a metaphor for the design elements. Visual cues and aspects of the design should be grounded in reality.
  材料本身就是设计元素的隐喻。 视觉提示和设计方面应立足于现实。

• Employ all major tenets of modern web design including use of typography, space, colors, images, and so on.

  运用现代网页设计的所有主要原则，包括使用排版，空间，颜色，图像等。

• Motion = meaning, which means that objects with movement or animation should never disrupt or take away from the primary user experience. Instead, they should complement it.
  运动=含义，这意味着具有运动或动画效果的对象绝不应干扰或脱离主要的用户体验。 相反，他们应该对此进行补充。

Overall, the principles of Material Design are informed by materials as they exist in the real world. Objects within your design should exist in a theoretical 3D space of sorts.

总体而言，材料设计原理是由现实世界中存在的材料提供的。 设计中的对象应该存在于理论上的3D空间中。

Next, we’ll take a look at a few of the major categories of Material Design:

接下来，我们将研究材料设计的几个主要类别：

颜色选择和版式实践 (Color Choices and Typography Practices)

In terms of color and text, Material Design takes much of the best practices from standard flat design. In this sense, the color choices are typically bold and stand out from standard color choices. Simple, but equally bold typography is also recommended.

在颜色和文字方面，材料设计采用了标准平面设计中的许多最佳实践。 从这个意义上讲，颜色选择通常是粗体的，并且在标准颜色选择中脱颖而出。 还建议使用简单但同样大胆的字体。

Here’s an excerpt from Google’s document on the subject: “Color is inspired by bold color statements juxtaposed with muted environments, taking cues from contemporary architecture, road signs, pavement marking tape, and sports courts,” according to material design documentation. “Emphasize bold shadows and highlights. Introduce unexpected and vibrant colors.”

以下是Google关于该主题的文档的摘录： “材料的色彩灵感来自与静音环境并列的大胆色彩，从当代建筑，道路标志，路面标尺和运动场中汲取了灵感，”据材料设计文档提供。 “强调大胆的阴影和高光。 引入意想不到的鲜艳色彩。”

In essence, everything we know and love about color theory is intact here, but it’s important to revisit the basics before learning something new.

从本质上讲，我们对色彩理论了解和喜爱的一切都完整无缺，但是在学习新东西之前重温基础知识很重要。

布局和设计选择 (Layout and Design Choices)

The layout and design choices for Material Design tend to mimic those from print. Grids and structured layouts are encouraged and recommended. Google provides guidelines for where to place specific elements and how large they should be for maximum effectiveness.

材料设计的布局和设计选择倾向于模仿印刷设计。 鼓励并推荐使用网格和结构化布局。 Google提供了有关将特定元素放置在何处以及为最大效率而应放置的大小的指南。

The biggest risk here is following the guidelines too closely and coming across as generic or too similar to other uses of the design. There should be some variety in this regard while still staying within the general boundaries of Material Design.

这里最大的风险是过于严格地遵循准则，并且与设计的其他用途一样通用或过于相似。 在这方面应该有一些变化，同时仍应位于“材料设计”的一般范围之内。

整体可用性 (Overall Usability)

The ultimate goal of Material Design is to point out and utilize patterns that allow for maximum usability and accessibility. At a quick glance, many of the provided elements will come across as too basic to veteran designers.

材料设计的最终目标是指出并利用允许最大可用性和可访问性的模式。 快速浏览一下，其中提供的许多元素对于资深设计师而言都是太基础了。

Even so, the principles that guide the user experience are worth looking at, regardless of your skill level. This thought process also calls to mind very real issues with accessibility. How do we design for users who cannot hear or see specific colors?

即便如此，无论您的技术水平如何，都值得研究指导用户体验的原理。 这种思考过程还使人想到了关于可访问性的非常实际的问题。 我们如何为无法听到或看到特定颜色的用户设计？

Options like high contrast, magnified screens, or even voice control can all contribute to a more universal design. In the end, Google’s approach is a little heavy-handed for designers who have experience, but whether it’s for a refresh, or to aid a beginner, there are some good ideas here.

诸如高对比度，放大的屏幕甚至语音控制之类的选项都可以有助于实现更通用的设计。 最后，对于有经验的设计师来说，Google的方法有些笨拙，但是无论是刷新还是帮助初学者，这里都有一些好主意。

Now, let’s take a look at some examples of websites that are adhering to Material Design principles, and how that affects the user experience.

现在，让我们看一些遵循Material Design原理的网站示例，以及它们如何影响用户体验。

5个实际材料设计示例 (5 Examples of Material Design in Action)

These examples take the three-dimensional and simplified approach that Material Design champions. This is a popular option for startup companies as it offers a fresh and clean layout for their website.

这些示例采用了Material Design倡导的三维简化方法。 对于初创公司来说，这是一种流行的选择，因为它为他们的网站提供了一个全新而干净的布局。

Let’s take a look:

让我们来看看：

1. Wohn Beratung维也纳 (1. Wohn Beratung Wien)

Our first example of Material Deisgn is a slice from the Wohn Beratung Wien homepage. The website itself is laid out with modular elements and simple typography. Where we see the material design truly shine is the use of the floating elements in the center of the screen.

我们的Material Deisgn的第一个示例是Wohn Beratung Wien主页的一部分。 网站本身采用模块化元素和简单的版式进行布局。 我们看到的材料设计真正闪耀的地方是在屏幕中央使用了浮动元素。

As you can see, there’s a defined sense of 3D space and the overlapping design provides a nice focal point for the eyes. Furthermore, the CTA button benefits from bold colors and conrast, in addition to seemingly floating above the other boxes.

如您所见，3D空间具有明确的定义，重叠的设计为眼睛提供了一个不错的焦点。 此外，CTA按钮除了看起来漂浮在其他框上方之外，还受益于大胆的颜色和对比。

The navigation bar floats on the right side of the screen with simple icons to take users to other pages. As you scroll down the website, you find these self-contained modules that each offer their own information and CTA.

导航栏浮动在屏幕的右侧，带有简单的图标，可将用户带到其他页面。 向下滚动网站时，您会发现这些独立的模块，每个模块都提供自己的信息和CTA。

2. Jetradar (2. Jetradar)

Next up, we have the mobile version of the Jetradar website, which is a search engine for flights. Material Design is employed here in two ways: vibrant color, and extreme usability. At the top, we can place our origin and destination and beneath that are the dates.

接下来，我们有Jetradar网站的移动版本，它是航班的搜索引擎。 这里以两种方式采用Material Design：鲜艳的色彩和极高的可用性。 在顶部，我们可以放置出发地和目的地，在其下方是日期。

Very simple and clean, with good contrast between the white background and the gray text. The floating button in the bottom corner utilizes a bright color and a floating style that helps it stand out as the clear path forward.

非常简单干净，在白色背景和灰色文本之间具有很好的对比度。 底角的浮动按钮采用了鲜艳的色彩和浮动样式，有助于使其在前进的道路上脱颖而出。

3. 印花布 (3. Stamplay)

Here we have a site that is both simple and mobile-friendly. Notice the verticality of the design. Everything flows together in a column shape that keeps the reader descending through the page. There are two CTAs in total: one in the screenshot above, and another at the bottom of the page.

在这里，我们有一个既简单又易于移动的网站。 注意设计的垂直性。 一切都以圆柱形状汇聚在一起，使读者可以逐页浏览。 总共有两个CTA：一个在上面的屏幕截图中，另一个在页面底部。

These buttons have a very subtle floating animation when you mouse over them. It provides the sense of movement that imparts meaning and reinforces the function of the button as something interactive.

当您将鼠标悬停在这些按钮上时，它们会有非常微妙的浮动动画。 它提供了运动感，赋予了意义，并增强了按钮的交互性。

As we scroll down through the page, there are simple and colorful icons used, along with dark text on a white background to ultimately create a seamless flow of information. Finally, the bottom of the page there’s a final layout of features, reinforced by simple icons and a second CTA.

当我们向下滚动页面时，将使用简单且彩色的图标以及白色背景上的深色文本，以最终创建无缝的信息流。 最后，页面底部是功能的最终布局，并通过简单的图标和第二个CTA进行了增强。

4. Android (4. Android)

Sometimes the best place to go is straight to the source. In a world where Apple’s simplistic approach encourages a strong user experience, Material Design seeks to meet similar needs through an equal level of simplicity.

有时候，最好的去处就是直接寻找源头。 在Apple的简单化方法鼓励强大的用户体验的世界中，Material Design试图通过同等的简化程度来满足类似的需求。

Here we can see a slide from the Android homepage. The graphic of the phone casts a shadow and provides depth to the image without actually being three-dimensional. The typography is classic dark text on a light background, and the CTA button stands out with a vibrant and violet color choice.

在这里，我们可以看到Android主页上的幻灯片。 手机的图形会投射阴影，并为图像提供深度，而实际上并不是三维的。 排版是浅色背景上的经典深色文本，CTA按钮以鲜艳的紫色选择脱颖而出。

5. I / O 2015 (5. I/O 2015)

Here we have another example straight from the source. This is a screenshot from the Google I/O 2015 page that employs Material Design to the fullest. The images in the background as used to create a visually enticing experience, while the floating boxes help the text integrate into the overall design.

在这里，我们直接从源头获得另一个示例。 这是Google I / O 2015页面的截图，该页面充分利用了Material Design。 背景中的图像用于创建视觉诱人的体验，而浮动框则有助于将文本集成到整体设计中。

最后的想法 (Final Thoughts)

Material Design is Google’s answer to the long-standing crown that Apple has held in regards to a universally accessible user experience. While this style began on Android apps, it has since made its way into the field of web design.

Material Design是Google长期以来为苹果树立的，旨在实现普遍可访问的用户体验的王冠的答案。 尽管这种风格开始出现在Android应用程序上，但此后逐渐进入了网页设计领域。

These tips and examples will give you the understanding you need to take these concepts and make them your own. How do you incorporate Material Design into your web design? Let us know in the comments!

这些技巧和示例将使您理解采用这些概念并使它们成为自己所需的知识。 您如何将Material Design纳入您的网页设计中？ 让我们在评论中知道！

翻译自: https://www.script-tutorials.com/5-excellent-examples-of-material-design/