Material Design 是一种由 Google 设计的设计语言，旨在提供一种趋近自然的设计风格，旨在为现代应用程序提供连续和有意义的用户体验。尽管 Material Design 提供了许多优秀的准则，但在实践中我们仍然会遇到许多 UI 问题。本文将会介绍一些 Material Design 实践中常见的 UI 问题及其解决方式。
问题 1：平面化设计带来的困扰
Material Design 大力倡导平面化设计，使得整个设计变得美观、现代化、简单、优雅。但是，平面化设计也会带来一些问题。最大的问题之一就是在没有阴影或其它必要的视觉引导的情况下，导致元素之间的混淆和凌乱感。
一种解决方案是为每个元素添加灰色边框，这将改善平面化设计时的各种排版问题，并减少元素之间的混淆。除此之外，我们还可以使用 Material Design 提供的一些组件，如按钮、标签和文本框等来区分各个元素。
<!-- 使用灰色边框来区分元素 --> <div style="border: 1px solid #e3e3e3; padding: 10px;"> <h3>标题</h3> <p>内容</p> </div> <!-- 使用 Material Design 风格的按钮来区分元素 --> <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">按钮</button>
问题 2：动画效果的正确使用
Material Design 提到了各种动画效果。过渡效果用于使UI在不同状态之间更加流畅，反应更加灵敏和直观。同时，这些效果也增强了用户理解和行动的能力。不过，如何正确使用这些动画效果也是关键问题之一。
一种常见的问题是过渡效果的效果太慢或太长，这会耗费用户的时间和耐心，降低应用程序的适用性。对于这种情况，我们可以调整过渡效果的时间，使其既不过快也不过慢，保持合适的时间长度。
-- -------------------- ---- ------- -- --------- ---- --- ---- -- ------------ - ----------- - --- --- - ---------------- ----------------- -------- -------- --- ----- -------------- ---- ------ ----- ---------- ----- ------------ ----- ------------ ------- ----------- ------- ---- -
问题 3：使用大量不同颜色的应用程序
在 Material Design 应用程序中，每个颜色都表示特定的语义。如果您的应用程序使用多种颜色，将会给用户造成视觉上的混乱。为了解决这个问题，应该使用少量的主要颜色和辅助颜色来区分元素。
一种好的解决方案是使用 Material Design 提供的调色板。调色板以一个主颜色为基础，配合多个辅助颜色。主颜色用于突出重点的 UI 元素，辅助颜色用于较少的时间使用，例如错误提示或警告。
<!-- Material Design 颜色调色板 --> <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-red.min.css"> <!-- 使用 Material Design 主色调来突出元素 --> <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">按钮</button> <!-- 使用一个辅助颜色来提示用户 --> <p style="color: #ff4081;">错误！</p>
结论
Material Design 提供了许多优秀的设计风格和实践，可以帮助我们创建美观、现代化的应用程序。但是，在实践中，我们仍然会遇到许多 UI 问题。为了解决这些问题，我们必须小心并借鉴 Material Design 的优秀设计理念。正确地使用边框、调色板和动画效果等方法，能够使我们的应用程序更加易于使用和理解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67170549ad1e889fe21f2665