Material Design（三）--组件

Material Design–组件

1. 浮动操作按钮 FAB

• 浮动操作按钮是 Material Design 中最明显的标志了
• 同时它也是当前页面最重要的操作，（比如在邮箱的页面中，FAB 很可能是发邮件的按钮）
• 并且一个页面中只建议有一个 FAB。

• △ FAB在APP的右下角位置并且常驻屏幕

• △ FAB是一个页面中最显眼的设计，但并不是每个页面都需要FAB
• 浮动操作按钮强制使用圆形样式。

• 不要给浮动操作按钮添加额外的维度。

• FAB的尺寸
  • FAB 默认尺寸 (56 x 56dp) 和 Mini尺寸 (40 x 40dp)都可以选择，在不同的页面和不同的情况下我们可以使用不同大小的FAB
• 可交互的FAB
  • FAB 可以是一个跳转走的功能，也可以是一个展开子菜单。点击前是某个图标的样式，点击后 FAB本身变成了关闭按钮，而且会弹出2个以上的子菜单图标矩阵。

• 扩展形FAB
  • 这种悬浮按钮我们好像已经很熟悉了，可您可能不知道它也是 FAB！这种带文字异形并且不随屏幕滚动的按钮属于扩展形的 FAB。

2. 底部应用栏

• 底部应用栏是放置一些 FAB、导航等的功能性图标，
• 并且讲究排版的节奏感。

• 底部应用栏的组成
  • ①容器；
  • ②导航抽屉控制；
  • ③浮动操作按钮（FAB）；
  • ④动作图标；
  • ⑤更多菜单控件。

• △ 底部应用栏上的图标必须为2个以上（不算FAB）

• 底部应用栏的层级
  • ①容器（0dp）；
  • ②底部信息栏（6dp）；
  • ③底部应用栏（8dp）；
  • ④浮动按钮（12dp）;
  • ⑤页卡（16dp）。

3. 顶部应用栏

• 顶部应用栏中标题并非居中而是像报纸一样左对齐的，这是因为 Material Design 认为阅读应该如在报纸上一样按照从左到右的顺序排列。
• 并且图标左侧最多可放置一个系统图标，右侧可放置多个系统图标。

• 顶部应用栏的组成
  • ①顶部栏容器；
  • ②抽屉式导航图标（可选）；
  • ③ 标题（可选）；
  • ④系统图标（可选） ；
  • ⑤更多按钮（可选）。

4. 卡片式设计

• 其实卡片式设计我们可以理解为一个小的单元，在这个单元里的信息逻辑关系更加紧密。
• 如果一个单元的信息过多很容易让用户在阅读时发生串行现象，卡片式设计就能有效地规避这个问题。
• 卡片式设计的组成
  • 1、容器卡容器。它容纳所有卡元素，容器的尺寸由元素占据的空间决定。
  • 2、缩略图（可选）。缩略图可以放置头像、图标和logo。
  • 3、标题文字（可选）。标题文字通常是卡片中最重要的标题，一般文字较大。
  • 4、小标题（可选）。小标题可以放置文章署名或标记位置等信息。
  • 5、多媒体（可选）。卡片可以包括各种媒体，包括照片和视频等。
  • 6、辅助文字（可选）。通常是对于多媒体的描述信息。
  • 7、按钮（可选）。
  • 8、图标（可选）

5. 模态对话框

• 模态对话框是移动端交互中很重要的一环。
• Material Design 提供了丰富的对话框形式来供我们使用。

6. Tab 选项卡

• Tab 选项卡可以方便地在不同视图间浏览和切换。
  6.1 移动端的选项卡

6.2 pc端的选项卡

6.3 选项卡特性

• 格式规范：

• 超过选项卡最大长度的长标签可以在被截断之前换行到第二行。
• 选项卡不要互相嵌套。
• 高亮与可见内容对应的选项卡。
• 将选项卡分层组合在一起。将一组选项卡与其内容相关联。
• 保持选项卡与其内容相邻，以保持两者之间的联系。

6.4 选项卡类型
固定选项卡

可滚动选项卡

见官网

7. 按钮
   7.1、 按钮类型

• 浮动操作按钮：一个圆形的按钮，在点击时会改变海拔高度和触发涟漪效果，如果它非常重要、并且会被经常用到，可以使用浮动操作按钮

• 浮动按钮：典型的方形纸片按钮，点击后改变海拔高度和触发涟漪效果

• 扁平按钮：点击时会有涟漪效果，但不会改变海拔高度

内容	按钮类型
对话框	使用 扁平按钮
内联按钮	可以使用 浮动按钮 或 扁平按钮
始终可见	如果你的应用需要一个对用户始终可见的功能按钮，可以使用浮动操作按钮

Material Design–组件我这里就介绍这么多，如还想继续了解详情可查看官网Material Design官网