Material Design 是一种通用的设计语言，用于创建美观的、一致的 Web 和移动应用程序。在实际应用时，由于对 Material Design 理解偏差或者未能正确实现，可能会出现一些常见的错误。本文将汇总这些错误并提供修复方法，帮助大家实现更好的 Material Design 版本的 Web 应用程序。
错误 1：忽略了网格系统
在 Material Design 中，网格是一种基本的布局工具，用于在应用程序中组织和排列内容。如果忽略了网格系统，内容可能会变得混乱，难以理解。常见的网格错误包括不合适的间距、未考虑边距，或者元素位置混乱。
修复方法：在设计 Web 应用程序时，始终使用网格系统。确保根据所选的网格大小将内容正确地对齐。应该选择网格大小，并将应用程序中的所有元素与之对齐。这样，您就可以保持一致性，并使应用程序更易于使用。
以下是一个示例，在这个示例中，我们使用flexboxgrid 和 Material Design Lite 创建了一个简单的 Material Design 界面。
--------- -----
------
------
-------------- ---- ---------------
---- ----- ---
----- ---------------- ----------------------------------------------------------------------
----- ---------------- -----------------------------------------------------------------
------- ----- ------------------------------------------------------------
-------
------
---- ------------------
---- ------------
---- ---------------- ------------------ --------------------- -----------------
--- ---------------------------------------- --- -------- ------ ---- ------------
------
------
---- ------------
---- ---------------- ----------
---- --------------- -----------------
---- ------------------------
--- ------------------------------------ --------
------
---- ----------------------------------
----- ----- ----- --- ----- ----------- ---------- ----- -- -- ------ ------- --- ---- ---------- ----- ------------ - --------- ----- ------- -------- ------- ----- -- ----------
------
------
------
---- ---------------- ----------
---- --------------- -----------------
---- ------------------------
--- ------------------------------------ --------
------
---- ----------------------------------
----- ----- ----- --- ----- ----------- ---------- ----- -- -- ------ ------- --- ---- ---------- ----- ------------ - --------- ----- ------- -------- ------- ----- -- ----------
------
------
------
------
---- ------------
---- ------------------
---- --------------- -----------------
---- ------------------------
--- ------------------------------------ ----------
------
---- ----------------------------------
----- ----- ----- --- ----- ----------- ---------- ----- -- -- ------ ------- --- ---- ---------- ----- ------------ - --------- ----- ------- -------- ------- ----- -- ----------
------
------
------
------
------
-------
-------错误 2：不适当的颜色
Material Design 中，颜色是非常重要的视觉元素，它可以增强用户交互和用户体验。不适宜的颜色选择可能影响到用户体验，让应用程序看起来不专业。
修复方法：使用 Material Design 的主色调，辅色，在所有页面和组件中保持一致的颜色选择。这些颜色应该与品牌或设计方案一致。使用颜色选取器或类似的工具可以帮助您选择恰当的颜色。
以下是 Material Design 中的一些颜色定义
----- - ------- -------------------- -------- -------- ---------------------- -------- ------------- -------------------- -------- ------------- ------------------ -------- -------- ----------------------- -------- ------------------------- -------- ----------------------- -------- -------- -------------------- -------- -------- ----------------------- -------- -
错误 3：不同的组件影响到应用的一致性
Material Design 使用一套标准的组件，这样可以确保用户可以准确地预测和使用页面上的元素。如果组件之间的风格不一致，应用可能会变得难以使用。
修复方法：使用 Material Design 的标准组件和样式，在应用程序的所有页面和组件中保持一致的风格。这将确保应用程序具有明显的结构，并使用户可以轻松预测页面上的元素。
以下是一些 Material Design 中的标准组件：
- Buttons
- Cards
- Dialogs
- Lists
- Menus
- Navigation drawers
- Progress indicators
- Sliders
- Snackbars
- Tabs
- Text fields
在下面段代码中，我们展示了如何使用标准的 Material Design 文本框组件：
--------- -----
------
------
--------------- ------ ---- ----- ---------------
----- ---------------- -----------------------------------------------------------------
------- ----- ------------------------------------------------------------
-------
------
----- ---------- -------------------- ---------------- -------------------------------
------ ---------------------------- ----------- -------------
------ ---------------------------- -----------------------------
-------
-------
-------错误 4：忽略了移动端的响应式设计
随着越来越多的用户使用移动设备来访问 Web，响应式设计显得越来越重要。如果忽略了响应式设计，可能会影响到用户体验，并可能导致用户离开应用程序。
修复方法：使用 Material Design 中的响应式设计，以确保应用程序在各种设备上都具有优秀的视觉效果和易用性。在设计应用程序时，应该考虑到不同的屏幕尺寸和设备类型，并相应地进行排版和设计。
以下是一个响应式布局的示例：
--------- -----
------
------
--------------- ------ ---------- ---- ---------------
----- ---------------- ----------------------------------------------------------------------
----- ---------------- -----------------------------------------------------------------
------- ----- ------------------------------------------------------------
-------
------
---- ------------------
---- ------------
---- ---------------- ----------
---- --------------- -----------------
---- ------------------------
--- ------------------------------------ --------
------
---- ----------------------------------
----- ----- ----- --- ----- ----------- ---------- ----- -- -- ------ ------- --- ---- ---------- ----- ------------ - --------- ----- ------- -------- ------- ----- -- ----------
------
------
------
---- ---------------- ----------
---- --------------- -----------------
---- ------------------------
--- ------------------------------------ --------
------
---- ----------------------------------
----- ----- ----- --- ----- ----------- ---------- ----- -- -- ------ ------- --- ---- ---------- ----- ------------ - --------- ----- ------- -------- ------- ----- -- ----------
------
------
------
------
---- ------------
---- ------------------
---- --------------- -----------------
---- ------------------------
--- ------------------------------------ ----------
------
---- ----------------------------------
----- ----- ----- --- ----- ----------- ---------- ----- -- -- ------ ------- --- ---- ---------- ----- ------------ - --------- ----- ------- -------- ------- ----- -- ----------
------
------
------
------
------
-------
-------结论
Material Design 是一种流行的、通用的视觉和交互设计语言，用于为 Web 和移动应用程序创建美观、一致的用户体验。通过正确使用网格系统、颜色、标准组件和响应式设计，可以帮助您避免常见的错误，并实现 Material Design 的设计原则。希望这篇文章能为您提供了有益的指导。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6717c8c7ad1e889fe223d151