如何使用 Material Design 设计带有积分等级的系统？

在现在的互联网时代，许多网站或应用都有一些积分等级系统，这种系统可以帮助网站或应用更好地维护用户积分和等级，并用于更好地维护用户活跃度和交互体验。而在这里，我们将会讲述如何使用 Material Design 设计带有积分等级的系统。

什么是 Material Design？

Material Design 是 Google 推出的设计语言，旨在为设计人员创造具有现代感和科技感的设计风格，并强调了设计的直观性和用户体验。在使用 Material Design 设计风格的网站或应用中，常常会看到许多几何图案、平面颜色以及动画效果等元素，这些元素将形成一个极具美感和现代化的视觉效果。

在学习如何使用 Material Design 设计带有积分等级的系统之前，我们首先需要了解一下 Material Design 中的基础元素和颜色：

Material Design 基础元素：

• 按钮(Button)
• 文本输入框(Text Field)
• 下拉菜单(Dropdown Menu)
• 卡片(Card)
• 图标(Icon)

Material Design 颜色：

在 Material Design 中，主色调（Primary Color）和辅色调（AccentColor）两种颜色在网站或应用中是经常使用的，主色调通常用于顶部导航栏、底部导航栏等一些大块区域，而辅色调则常常用于按钮、链接等需要强调的元素。

具体颜色代码见下表：

在了解了 Material Design 的基础元素和颜色之后，我们就可以开始设计我们的积分等级系统。

设计过程步骤：

1. 设计积分等级图标
2. 创建卡片元素来呈现用户等级信息
3. 创建按钮元素用于用户升级积分等级

设计积分等级图标

在设计过程中，我们首先需要为不同的积分等级设计一些独特的图标。我们可以使用 Sketch 或者 Adobe Illustrator 等工具来创建这些图标。这些图标通常是由一些简单的几何图形组成，比如圆形、三角形、正方形等。

我们可以使用 Material Design 的颜色来填充这些图标，并确保图标设计与主题颜色和网站或应用的其余元素相匹配。

创建卡片元素来呈现用户等级信息

在这一步中，我们需要创建一个卡片元素来展示用户正在使用的积分等级，以及他们可以升级到的下一个等级。这个卡片通常使用 Material Design 中的卡片元素创建。

卡片中需要显示的用户等级信息通常包括以下几个元素：

• 用户名或昵称
• 用户级别图标
• 当前积分数
• 下一个等级所需积分数

我们将使用 div 标签和 material-icons 异步框架来创建用户级别显示元素，如下所示：

<div class="user-level">
    <span class="material-icons level-icon">badge</span>
    <span class="level-name">Level 23</span>
</div>

我们可以使用 CSS 和 Material Design 颜色来为每个元素添加样式，例如：

-- -------------------- ---- -------
----------- -
    ---------- -----
    ------------ ----
    ------ -----
    ------------ ----
-

----------- -
    ---------- -----
    ------ --------
-

创建按钮元素用于用户升级积分等级

在这一步中，我们要为用户提供升级积分等级的按钮。这个按钮通常使用 Material Design 中的按钮元素创建。按钮应该明显标识出用户当前的积分和下一个可升级的等级所需积分，以便用户可以在不减少他们当前的积分的情况下升级他们的等级。

我们将使用 button 标签和 material-icons 异步框架来创建积分升级按钮，如下所示：

<button class="btn">
    <span class="material-icons">add_box</span>
    <span class="btn-text">Upgrade to Level 24</span>
    <span class="current-point">Current: 5248</span>
    <span class="next-point">Next: 6588</span>
</button>

我们可以使用 CSS 和 Material Design 颜色来为每个元素添加样式，例如：

-- -------------------- ---- -------
---- -
    ----------------- --------
    -------------- ----
    ------ -----
    ---------- -----
    ------------ ----
    -------- -----
    ----------- -----
-

---- --------------- -
    ------ -----
    ---------- -----
    --------------- -------
-

--------- -
    ------------ ----
-

--------------- ----------- -
    -------- ------
    ----------- ----
-

结论

Material Design 是一个强大的设计语言，它不仅可以为网站或应用提供美观的外观，而且还可以为用户提供出色的用户体验。当我们设计一个带有积分等级的系统时，Material Design 可以让它看起来非常现代和高科技。我们需要注意的是，我们需要了解 Material Design 的基础元素和颜色，并使用合适的设计工具来创建我们所需的元素。总之，使用 Material Design 来设计积分等级系统将提高用户体验，从而使整个网站或应用的运营更加成功。

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