Material Design 风格造型详解：让 APP 更加美观、人性化-JavaScript中文网-JavaScript教程资源分享门户

随着移动设备的普及，App 的用户体验越来越受到重视。一个好的用户体验可以让用户更加愉悦地使用 App，从而提升用户的满意度，增加使用率。而 Material Design 是谷歌在设计移动端APP中推出的一种设计风格，其具有鲜明的特点和优势，旨在提升用户体验。

一、什么是 Material Design

Material Design 是一种由 Google 推出的设计风格，具有现代感和科技感，简洁、明快、直观，强调材质、深度、投影和动画等元素，使用户感受到身临其境的真实性。同时，Material Design 还着重注重用户动作的反馈和流畅感，让用户在使用过程中愉悦、方便。Material Design 不仅仅适用于移动端 App，也可用于 PC 端的网站。

下面是 Material Design 的几个重要特点：

1.材质感

材质感是 Material Design 最显著的特点之一。在这种设计风格下，所有的 UI 元素都像是以实体材料为基础创造出来的。比如，按钮会有一些阴影和凸起，卡片看起来像是由纸张、纱布、草布或者金属等材料制作而成，用户甚至可以想象出它们的手感。

2.深度感

Material Design 通过用户体验的“隔层阴影”和“抬起来”的状态来创造出视觉深度。每个元素的投影效果都看起来很自然，具有明显的前后关系，这提高了用户理解和操作愉悦度。

3.动画

动画是 Material Design 的另一重要特性之一。在 Material Design 中，动画可以增加应用程序的舒适度和纵深感。例如，当你触摸一个按钮时，按钮会在点击过程中变深，并“升起”一点以表明按钮被按下，并在松开时恢复其原始状态。这样可以使用户感觉更加真实。

二、Material Design 的样式和颜色

如同其他设计风格一样，Material Design 的风格也是可以实现的。当然，Google 已经提供了无数的素材，组件和资源，这些资源都遵循 Material Design 的风格，并可用于构建你的应用程序。

在 Material Design 中，颜色对于 UI 的设计非常重要，为整体设计打下了基础。Material Design 强调颜色的最大对比度，以及颜色深浅互相搭配的协调性。同时，Material Design 官方网站也提供了 Palette API 来生成一组由单一的主色调生成的可用颜色。

Material Design 中使用的颜色，基本上都是展现现实的不同材质、光线、深度层次造成的微妙视觉效果。以下是 Material Design 官网上给出的主要颜色：

下面是 Material Design 官方网站上的颜色工具：

除了基本色彩之外，Material Design 中还有一些风格样式，例如文字，段落，图标和照片的一些特殊设计等。下面是一些关于 Material Design 中的样式的示例代码。

1.按钮的样式

以下代码是 Material Design 风格的一个例子，它显示了官方主题应用中的标准按钮基本样式，包括样式，形状等。

// www.javascriptcn.com code example
<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:textColor="@color/white"
        android:text="Default" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:background="@drawable/btn_inverse_gray"
        android:textColor="@color/white"
        android:text="Inverse Gray" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:background="@drawable/btn_inverse_purple"
        android:textColor="@color/white"
        android:text="Inverse Purple" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:background="@drawable/btn_wide_black"
        android:textColor="@color/white"
        android:text="Wide Black" />
</LinearLayout>

2.卡片布局

卡片布局是 Material Design 中一个重要的 UI 组件。它通过视觉的阴影和深度搭配，形成清晰的分层次规律的布局显示。

以下是使用卡片布局实现的一个简单示例：

// www.javascriptcn.com code example
<android.support.v7.widget.CardView

    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="4dp"
    app:cardBackgroundColor="@color/cardview_dark_background"
    android:layout_marginTop="10dp"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    app:cardElevation="5dp"
    app:cardMaxElevation="6dp"
    app:contentPadding="5dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:scaleType="centerCrop"
            android:src="@drawable/bg_login" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="CardView Example"
            android:textSize="@dimen/text_size_large"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="10dp"
            android:textColor="#FFFFFF"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="A simple example of CardView"
            android:textSize="@dimen/text_size_medium"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="5dp"
            android:textColor="#FFFFFF"/>

    </LinearLayout>
</android.support.v7.widget.CardView>

通过卡片布局，可以更好地展示 UI 的层次感和深度，增强用户交互体验。

三、Material Design 的意义和应用

Material Design 风格的设计，是为了让手机界面、界面元素和App的所有UI元素、动画和操作变得更加美观、人性化。同时，Material Design 的观念是用户在操作过程中，可以感受到如同操作物品本身的流畅感，从而提升了用户的体验。

随着 Material Design 风格在 Google 如此多的产品中的应用，该设计风格已经成为了设计师们应当了解并掌握的设计工具，包括 Android 开发者。Material Design 组件、资源和规范的使用，可以帮助开发者提高设计水平，开创更美观、人性化的用户体验。

总之，在今天的移动互联世界，一个好看、优雅、人性化的设计，对于推广您的应用非常重要。基于 Material Design 风格的设计，可以让您快速而有效地达到您的目标。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d6a60ca941bf7134c6cdcd

Material Design 风格造型详解：让 APP 更加美观、人性化