一口吃掉 Material Design

权重不会抢戏的线性按钮

使人有点击欲望的按钮

突出功能的切换按钮

按钮文字应该清晰简洁，不应该让人困惑

卡片式设计（Cards）

卡片式设计同样是Material Design的显著标志。其实卡片式设计我们可以理解为一个小的单元，在这个单元里的信息逻辑关系更加紧密。如果一个单元的信息过多很容易让用户在阅读时发生串行现象，卡片式设计就能有效地规避这个问题。

卡片式设计的组成

卡片式设计包含以下组成部分：1 容器卡容器。它容纳所有卡元素，容器的尺寸由元素占据的空间决定。2 缩略图（可选）。缩略图可以放置头像、图标和logo。3.标题文字（可选）。标题文字通常是卡片中最重要的标题，一般文字较大。4 小标题（可选）。小标题可以放置文章署名或标记位置等信息。5 多媒体（可选）。卡片可以包括各种媒体，包括照片和视频等。6 辅助文字（可选）。通常是对于多媒体的描述信息。7 按钮（可选）。8.图标（可选）。

卡片设计的组成

卡片设计的分割线

如果卡片中的内容元素不属于一个逻辑，那么可以使用一条分割线来分隔成两个区域。但是注意，分割线需要使用非常轻的颜色，并且左右不要通过去，以保证卡片的完整性。

卡片设计的分割线

Owl的页卡设计

纸片（chips）

纸片通常是输入框中多个元素的组合，纸片有选中态和交互态等丰富的交互。比如邮件添加邮件人的操作就是在一个输入框内添加一个纸片的操作，这样的纸片可以承载头像和文字双重信息。

纸片的应用

纸片的交互态

Reply的纸片设计

对话框（Dialogs）

对话框是移动端交互中很重要的一环。Material Design提供了丰富的对话框形式来供我们使用。我们知道对话框可以分为模态对话框和非模态对话框，主要区别是模态对话框需要和人交互，非模态更多是显示提示信息。我们目前介绍的对话框属于模态对话框，稍后介绍的snackbar则属于非模态对话框。

左图为警告对话框，右侧为简单对话框

左侧为确认对话框，右侧为全屏对话框

在用户选择前，禁掉确认功能防止用户点击