Material Design 是一种由 Google 设计师于 2014 年推出的响应式设计语言，使用平面设计、体积感视效果和阴影等元素，使 UI 更加自然，同时强调更具有层次感的视觉效果，并丰富多彩的颜色，使得用户在使用 App 的时候，可以更直观、自然地理解不同元素之间的关系，同时获得良好的视觉享受。本文主要分享了 Material Design 在各个 App 场景中的应用实例，以及这些应用实例的体验优化。
Material Design 应用实例
1. 管理类/工具类 App
在这类 App 中，由于涉及到的信息和元素较多，所以需要严格按照 Material Design 的层次性来设计，使得用户可以分级浏览，并且确定哪些元素是更加重要的。比如下面这个邮件 App：
邮件列表在左侧，显示了所有邮件的信息。选中后，右侧出现了邮件的详细信息。左侧邮件列表区域使用了端口栏，可以切换邮件“所有者”，右侧使用了卡片来分割不同区域，包括发件人、附件、邮件内容等等。
在这个邮件 App 中，设计师使用了多种 Material Design 中的设计元素，比如层次性、左侧导航栏、卡片、端口栏、卡片等。这些元素使得用户可以快速、轻松地在邮件列表和详情之间切换，同时在元素之间建立了自然的联系。同时，邮件 App 还加入了一些细节的设计优化，使得用户可以更加方便、高效地使用邮件 App，比如快速编辑邮件、快速搜索邮件等等。
2. 新闻/娱乐类 App
在这类 App 中，Material Design 可以使得整个界面显得更加时尚、个性化。同时加入一些细节的设计优化，使得用户可以更加愉悦地使用这些 App。比如下面这个电影 App：
这个电影 App 中，整个设计风格和调色板强调浓烈的色彩和宏伟的视觉效果，使得用户第一次使用 App 的时候，可以感到很有活力、充满激情。同时，设计师也非常注重细节的衔接和用户体验，比如下拉刷新动画、卡片的跳转效果等等，使得用户可以在使用 App 的时候，感到非常愉悦。
3. 商城 App
在这类 App 中，Material Design 的层次性和卡片设计元素可以使得用户在浏览商品的时候，可以更加轻松、愉悦。比如下面这个服装商店 App：
在这个服装商店 App 中，将顶部工具栏、商品分类、商品列表、商品详情等等元素都使用了卡片来设计，这些卡片之间自然衔接，且可以自适应用户屏幕大小。同时，设计师还加入了一些知名的 Material Design 组件和动画，比如滑动关闭、自适应背景色、卡片展示效果等等，使得整个商城 App 更加美观、有活力。
Material Design 应用体验优化
1. 设计响应标准动画
在使用 Material Design 的过程中，设计响应动画可以使得用户在操作过程中获得及时、自然的反馈。比如当用户点击一个按钮时，设计师可以使用一个标准的 Material Design 动画来表示按钮被点击的反馈。下面是一个 Material Design 标准动画示例：
-- -------------------- ---- ------- ------- ------------------ ----- -- --------- ------- ---------- - -------- ------------- ----------------- -------- ------ ------ ---------- ------- -------- ----- -------------- ----- ----------- - ------ ------ ---------------- ----------- ---------- ---- ------------ - ----------------- ----------------- - -------- ----- ----------- - ---- ---- ---------------- - --------
如上代码所示，当用户点击按钮时会出现一个卡片张开的效果，并且包含一个很自然的阴影视觉效果。这种形式的响应动画可以帮助用户理解操作的效果，同时使得整个 App 更加有生命力的。
2. 简化用户操作
Material Design 的设计思想是简单、清晰、自然的，这也是设计师应该努力去实现的。当用户使用 App 的时候，应该尽量避免让用户进行过多的操作。比如下面这个展示动物信息的小工具 App，用户只需轻轻一点即可轻松切换动物类别：
在这个小工具 App 中，设计师默认展示了五个种类的动物：狗、猫、鹦鹉、老虎和企鹅。用户可以轻轻一点，即可切换到相应的动物。这种简单、自然的交互方式可以使得用户的体验更加愉悦。
3. 设计灵活、多样性组件
由于不同的 App 需要承载的信息和元素是非常不同的，所以设计师需要在使用 Material Design 的同时应该从用户的角度出发，设计出足够灵活、多样化的组件元素，以保证不同的 App 都能够顺利地进行布局和展示。下面这个到达/出发城市选择器就是一个好的例子：
城市选择器包含两个选项卡：到达城市和出发城市，以及一个搜索栏。用户可以直接选择选项卡，也可以直接搜索城市。设计师还在搜索框中追加了一个搜索框下拉框，显示了用户搜索结果的所有城市名称。这种多样性、灵活性的组件设计可以让用户快捷、方便、简单地使用 App。
总结
Material Design 是一种非常有特色的设计语言，与众不同的设计理念和组件元素使得它成为设计师使用的必备工具之一。在设计 Material Design 应用的时候，设计师不光要注重设计的质量，还要注意实际应用体验的优化，使得用户可以愉悦、方便地使用整个 App。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e16fb4f6b2d6eab3c99d45