从 Android 5.0 Lollipop 开始，Google 开始推行 Material Design，这种使用大胆颜色、高对比度和现代化动画的设计语言，逐渐被越来越多的应用和网站采用。虽然 Material Design 看起来简单而直观，但实际上也有很多细节需要注意，下面将介绍 Material Design 中应该避免的陷阱。
1. 过度使用动画效果
Material Design 的动画效果是其设计语言的一大特色，但是过度使用动画效果则容易让用户感到烦躁。动画效果应该被用来增加交互体验和操作的反馈，而不是用来花式炫技或者掩盖加载速度等问题。如果你的应用或者网站有复杂的动画效果，应该考虑增加用户可以关闭动画的选项，或者在设计时就减少动画的使用量。
以下是正确和错误使用动画效果的示例代码：
---- -------- ---
------- ---------- ------------ --------------------------------
------ ------------------- --------------------
---- ---- ---
--------
---- -------- ---
---- -------------
---- ------------------- --------------------
--
------
----------- ------------
---- ----------------- ----------------
---- ---- ---
------
-------------
------2. 忽略无障碍性（Accessibility）
无障碍性是指为残障人士（如视力、听力、肢体上的障碍等）提供特殊的使用体验，能使其顺畅地使用你的应用或者网站。在采用 Material Design 的时候，应该注意不要忽略无障碍性，这需要使用一些辅助技术和标准。例如，在设计按钮时，应该为按钮添加 aria-label 属性，这样在屏幕阅读器读取页面时，它们能够正确解读按钮的含义。
以下是正确和错误处理无障碍性的示例代码：
---- -------- --- ------- ---------- ------------ ---------------- -- --------- ------------- --------- ---- -------- --- ------- ---------- ------------- -- --------- ------------- ---------
3. 忽略响应式设计
响应式设计是指能够根据屏幕尺寸和设备类型对应用或者网站进行适配。在使用 Material Design 的时候，应该注意不要忽略响应式设计。除了可以用 CSS 媒体查询对页面进行响应式设计，还可以使用一些 Material Design 相关框架和库，如 Materialize、Vuetify 等。
以下是正确和错误处理响应式设计的示例代码：
---- --------- ---
---- ------------
---- --------------- ----------
---- --- ---
------
---- --------------- ----------
---- ---- ---
------
------
---- --------- ---
---- ----------------
---- --- ---
------
---- ----------------
---- ---- ---
------结论
在使用 Material Design 进行应用或者网站的设计时，应该注意这些陷阱。过度使用动画效果会降低用户体验，忽略无障碍性会影响残障人士的使用，忽略响应式设计则不能兼容所有设备。正确使用 Material Design 可以提高用户体验，将应用或者网站推向更高一级。希望这篇文章能够提供一些指导和启示。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6731d26a0bc820c5823a9bbd