Material Design 标注图

 最近发现自己在实现产品需求时,在界面元素的细节部分把握不够准确,经常被leader告知需要微调一下界面元素的各类尺寸.虽然导致这个因素的最重要的原因是我场的设计太懒,不给标注,但是作为一个终端工程师,了解并掌握足够的设计相关的知识还是十分必要的,于是最近就开始研究其google的Material Design设计风格.
 本篇文章主要是收集一些MD风格的设计标注图和注意事项,主要内容都来自于重磅教程！帮你全面彻底搞定MATERIAL DESIGN的学习笔记.

MD风格的精髓在于
把物理世界的体验带进屏幕,去掉现实的杂质和随机性,保留保留其最原始纯净的形态、空间关系、变化与过渡，配合虚拟世界的灵活特性，还原最贴近真实的体验，达到简洁与直观的效果

 其实以我现在的理解就是:

• 界面元素的层次性
• 交互时强调带有意义并且具有现实特性的动画
• 两种纯色作为应用的基本颜色

 这篇只是收藏MD风格中关于一些特定界面元素的标注图以备以后使用

文字排版

常用字号：

• 12sp 小字提示
• 14sp（桌面端13sp） 正文/按钮文字
• 16sp（桌面端15sp） 小标题
• 20sp Appbar文字
• 24sp 大标题
• 34sp/45sp/56sp/112sp 超大号文字

 长篇幅正文，每行建议60字符（英文）左右。短文本，建议每行30字符（英文）左右。

常用尺寸

所有可操作元素最小点击区域尺寸：48dp X 48dp。
栅格系统的最小单位是8dp，一切距离、尺寸都应该是8dp的整数倍。以下是一些常见的尺寸与距离：

• 顶部状态栏高度：24dp
• Appbar最小高度：56dp
• 底部导航栏高度：48dp
• 悬浮按钮尺寸：56x56dp/40x40dp
• 用户头像尺寸：64x64dp/40x40dp
• 小图标点击区域：48x48dp
• 侧边抽屉到屏幕右边的距离：56dp
• 卡片间距：8dp
• 分隔线上下留白：8dp
• 大多元素的留白距离：16dp
• 屏幕左右对齐基线：16dp

• 文字左侧对齐基线：72dp
  

  Button sheets

  
  

  Buttons

   按钮分为悬浮按钮,凸起按钮和扁平按钮

• 悬浮按钮的操作都是正向操作

• 建议只用一个悬浮按钮
• 悬浮按钮可以贴在纸片边缘或者接缝处，但不要贴在对话框、侧边抽屉和菜单的边缘
• 悬浮按钮不能被其他元素盖住，也不能挡住其他按钮
• 列表滚动至底部时，悬浮按钮应该隐藏，防止它挡住列表项
  悬浮按钮的位置不能随意摆放，可以贴着左右两边的对齐基线

Cards

• 卡片统一带有2dp的圆角
• 同时展现多种不同内容
• 卡片内容之间不需要进行比较
• 包含了长度不确定的内容，比如评论
• 包含丰富的内容与操作项，比如赞、滚动条、评论
• 本该是列表，但文字超过3行

• 本该是网格，但需要展现更多文字
  

  Dialogs

• 注意有些对话框点击周围会消失,但是有些是不会消失的

• 对话框的四周留白比较大，通常是24dp。
  

  Dividers

• 列表中有头像、图片等元素时，使用内嵌分隔线，左端与文字对齐。

• 没有头像、图标等元素时，需要用通栏分隔线。
• 谨慎使用分隔线，留白和小标题也能起到分隔作用。能用留白的地方，优先使用留白。分隔线的层级高于留白。

Lists

• 列表由行构成，行内包含瓦片。如果列表项内容文字超过3行，请改用卡片。如果列表项的主要区别在于图片，请改用网格。
  
  

  Pickers

  
  

  Progress & activity

• 进度条分为确定时间和不确定时间,不同的类型,动画效果不同

• 进度条可以使用在一些本来就有的元素上,比如悬浮按钮

Snackbars

Text fields

NavigatorBar