MaterialDesign的组件前篇

组件是 Material Design 区别于 iOS 等其他设计的重要标识，当我们看到 FAB 时我们就知道这是 Material Design；当我们看到底部栏的独特设计时我们也能知道这是 Material Design。想做一款原汁原味的 Material Design 就要了解组件的特征。让我们开始吧！

1. 悬浮球 FAB（Buttons: floating action button）

• 悬浮球可能是 Material Design 中最明显的标志了。一个圆圆的小球固定在屏幕的某个位置，它特别显眼，同时它也是当前页面最重要的主线操作，比如在邮箱的页面中，FAB 很可能是发邮件的按钮。并且一个页面中只有一个 FAB，这让这个小球更加显眼了。
  
  
  
  • FAB在APP的右下角位置并且常驻屏幕。
    
  
  
  • FAB的尺寸
    
    FAB 默认尺寸 (56 x 56dp) 和 Mini尺寸 (40 x 40dp)都可以选择，在不同的页面和不同的情况下我们可以使用不同大小的FAB。
  
  
  • 可交互的FAB
    
    FAB 可以是一个跳转走的功能，也可以是一个展开子菜单。这个有趣的交互是从Path应用中学到的：点击前是某个图标的样式，点击后 FAB本身变成了关闭按钮，而且会弹出2个以上的子菜单图标矩阵。
    
  
  
  • 扩展形FAB
    
    这种带文字异形并且不随屏幕滚动的按钮属于扩展形的 FAB。
    
    
  
  
  
  

2.底部应用栏（App bars: bottom）

• 底部应用栏用于显示屏幕底部的导航和按键操作。放置一些 FAB、导航等的功能性图标，并且讲究排版的节奏感。
  
  
  
  • 底部应用栏上的图标必须为2个以上（不算FAB）
    
  
  
  
  


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

3.顶部应用栏（App bars: top）

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


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


• 顶部应用栏可以嵌入图片
  
  
  
  • 为了减少视觉层级，顶部应用栏中也可以嵌入图片来增强界面的整体感。图为一个使用了嵌入图片顶部栏的照片应用。
    
  
  
  
  

4.按钮（Buttons）

• 按钮是最常见的元素，在这里 Material Design 为我们提供了多种多样的按钮设计风格。由于不同的功能和环境，按钮可以使用：①纯文字按钮（这种按钮只有加粗带色彩的文字，可以理解为可点击的链接）；②线性按钮（这种按钮有一个线框来说明点击区域，比较不显眼）；③填充按钮（这种按钮较为明显）；④切换按钮（这种按钮使用率低于其他按钮形式）。
  

补充

• 样式（Style）
  
  
  
  • 色彩 - Color
    
    
    
    • UI调色板:以一些基础色为基准，通过填充光谱来为Android、Web和iOS环境提供一套完整可用的颜色。基础色的饱和度是500。
      
    
    
    • UI颜色使用:选择你的调色板
      
    
    
    
    
  
  
  • 字体排版 - Typography
    
    
    
    • Roboto 自从Ice Cream Sandwich发布以来，Roboto都是Android系统的默认字体集。在这个版本中，将Roboto做了进一步全面优化，以适配更多平台。宽度和圆度都轻微提高，从而提升了清晰度，并且看起来更加愉悦。
      
    
    
    
    
  
  
  • 图标 - Icons
    
    
    
    • 系统图标或者UI界面中的图标代表命令、文件、设备或者目录。系统图标也被用来表示一些常见功能，比如清空垃圾桶、打印或者保存。
    
    
    • 系统图标的设计要简洁友好，有潮流感，有时候也可以设计的古怪幽默一点。要把很多含义精简到一个很简化的图标上表达出来，当然要保证在这么小的尺寸下，图标的意义仍然是清晰易懂。
      
    
    
    
    
  
  
  • 图像 - Imagery
    
    
    
    • 在material design中，图像（无论是绘画还是摄影）都应该是组建而成而并非人为策划的，看起来神奇并且不显得过度制作。这种风格乐观，愉悦，坦率,质感，深度，让人意想不到的色彩运用， 这些原则都旨在创建目的性强，美丽又有深度的用户界面。