Material Design 是 Google 推出的一种界面设计规范，旨在为开发人员提供一种更加统一和美观的设计风格。使用 Material Design 可以改善 App 的用户体验，提高用户的满意度。本文将介绍如何使用 Material Design 实现 App 的颜色与风格控制。
Material Design 色彩系统
Material Design 鼓励使用细微差别的应用程序配色方案，利用明亮度，饱和度和色彩之间微妙的关系，创造深度和透明度的印象。
色板
Material Design 色板提供了一组基本颜色，可用于构建您的应用程序。这些基本颜色包括主色，辅助色，强调色和文本色。
主要色
一个应用程序通常有一个主要颜色，可以在应用程序中用来标识品牌。使用这种颜色的重点是，它应该是整个应用程序中最常见的颜色。
/* 定义主色 */
$md-primary-color: #2196F3;
/* 应用主色到按钮 */
.btn-primary {
background-color: $md-primary-color;
color: #fff;
}辅助色
辅助色通常用于补充主要颜色。他们可以被使用在比主要颜色中不那么重要的组件上。
-- -------------------- ---- ------- -- ----- -- ----------------- -------- -- -------- -- ---------- - ----------------- ----------------- - -- -------- -- -------- - ------ ----------------- -
强调色
强调色可以用来突出应用程序中的关键元素。在一些情况下，强调色可能与辅助色相同。
/* 定义强调色 */
$md-accent-color: #FF4081;
/* 应用强调色到标题 */
h1 {
color: $md-accent-color;
}文本色
文本色是应用程序中使用的常规文本颜色。
/* 定义文本色 */
$md-text-color: #212121;
/* 应用文本色到主题 */
.theme {
color: $md-text-color;
}更改颜色
更改应用程序的颜色主题可以通过样式表轻松实现。只需更改定义颜色的变量即可为应用程序添加全新的颜色主题。
-- -------------------- ---- ------- -- ------ -- ------------------ -------- -- ------- -- ----------------- -------- -- ------- -- --------------- -------- -- ------ -- ------ - ----------------- ------------------ ------ --------------- -
Material Design 风格
卡片
卡片是 Material Design 中最重要的组件之一，它为应用程序提供了一种简洁和有观感的方式展示数据和信息。
-- -------------------- ---- -------
---- ---- ---
---- ----------------
---- -----------------------
--- --------------------------------
------
---- ------------------------
---------- ---- --------
------
---- ------------------------
------- ---------------- ---------------------------
------
------
---- ----- ---
---- -------------- ---------------
---- ----------------------
---- --------------- ------------
------
---- ------------------------
--- --------------------------------
---------- ---- --------
------
---- ------------------------
------- ---------------- ---------------------------
------
------文字标签
文字标签提供了一种简单的方式来为数据和信息添加对应的标签。
<!-- 基础文字标签 --> <span class="md-text-label">Normal label</span> <!-- 彩色文字标签 --> <span class="md-text-label md-primary">Primary label</span> <span class="md-text-label md-secondary">Secondary label</span>
文字按钮
文字按钮提供了一种简单的方式来为应用程序提供可点击的按钮元素。
<!-- 基础文字按钮 --> <button class="md-button">Normal button</button> <!-- 带颜色的文字按钮 --> <button class="md-button md-primary">Primary button</button> <button class="md-button md-accent">Accent button</button>
总结
本文介绍了如何使用 Material Design 色彩系统和风格来控制应用程序的颜色和风格。希望本文的内容能够为您提供参考，使您能够更好的设计和开发应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6518f74d95b1f8cacd13abe0