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:
- 列表间距:
来源:oschina
链接:https://my.oschina.net/u/107233/blog/674460