Material design小结

会有一股神秘感。 提交于 2020-05-01 03:18:49

https://www.google.com/design/spec/material-design/introduction.html

开源项目,第一个感觉更合适一点,虽然github不如第二个:

一、动画(Motion):

  • 动画应该快速的
  • 运动距离不同,时间也应该不同,不能清一色相同的时间
  • 手机:一般在300ms以内,全屏幕or复杂动画控制在375ms内;平板时间要比手机长30%,穿戴要比手机短30%;pc应该控制在150ms-200ms(复杂的动画会丢帧,更快的速度可以减弱丢帧)
  • 进入屏幕应该是弧线向上或向下(贴边上下)或者沿单一轴线(直线)进入或者退出并加快一些
  • 进入屏幕使用减速:先快后慢(deceleration curve),退出屏幕使用加速:先慢后快(acceleration),都控制在300ms内
  • 如果是暂离屏幕保持立刻和返回位置一致并使用sharp curve缓动,如果是永久离开屏幕可以设置不同位置(进入和离开位置不同)
  • 相对运动:要避免抢眼、剧烈运动、破坏性,所以使用standard curve缓动
  • 各种缓动效果(curve),参看:easing
  • 还有很多细节无法用文字描述,需要看官方的动画演示

二、样式 (Style)

  • 官方提供了调色板下载并提供了几套风格下载
  • 定义了Primary color(主色)、Secondary color(次要色)、Accent color(强调色)、Alternative accent colors(二选一的强调色)、Text and background colors(文字和背景色),建议用透明度来控制亮度,而不用灰色控制,提供了几个风格的建议,比如亮色背景建议:
  • 图片分类成:产品图标、系统图标

三、组件 

  • 底部导航,3-5个导航,文字描述简洁,尽量别换行(但不要减小大小而不换行),选中项图标可以大一些,显示文字,颜色和大小保持一致,下拉的时候隐藏顶部和底部导航,向上拉的时候显示顶部和底部导航,图标和间距,单个导航maxwidth 168dp,minwidth80dp,左右间距12dp,上6-8dp,下10dp:
  • 列表间距:

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!