【3.2】MDBootstrap--炫耀你的网页

一、Material Design的认知

http://colachan.com/post/3416 (强烈推荐)

Material Design 是google定义的一套设计语言,为了让手机,电脑,平板给人呈现的美观效果统一。 啥有不说了,先拿个Material Design的框架练练手吧,这里我选择的基于bootstarp 的material design。

material design的核心思想,就是把物理世界的体验带进屏幕。去掉现实中的杂质和随机性,保留其最原始纯净的形态、空间关系、变化与过渡,配合虚拟世界的灵活特性,还原最贴近真实的体验,达到简洁与直观的效果。

按照我的理解就是:

  1. 材质的空间感
  2. 动画: 每次点击,需要有相应的动画,比如:水波,转场
  3. 颜色: 颜色不宜过多。选取一种主色、一种辅助色(非必需),在此基础上进行明度、饱和度变化,构成配色方案。
  4. 图标
  5. 图片
  6. 文字 英文字体使用Roboto,中文字体使用Noto。
  7. 布局
  8. 组件

二、bootstarp 的material design

1.安装

首先下载:

https://mdbootstrap.com/download/mdb-free/440jd233sdf%5Egt4nc%28srjgzz%26x/MDB-Free.zip

打开index.html

https://mdbootstrap.com/mdb-quick-start/

2.使用细节

天呐撸,这里面有完美的教程,花一个上午了解一下每个功能某块,需要那部分的时候,直接抄袭就好了

https://mdbootstrap.com/

3.注意事项

我比较喜欢的几个模板:

常用的一些组件(可以直接拿来用的组件)

参考资料:

https://mdbootstrap.com/getting-started/

http://colachan.com/post/3416 (强烈推荐)

9个目前流行的Material Design前端框架 http://www.shejidaren.com/top-material-design-frameworks.html

药企,独角兽,苏州。团队长期招人,感兴趣的都可以发邮件聊聊:tiehan@sina.cn
个人公众号,比较懒,很少更新,可以在上面提问题,如果回复不及时,可发邮件给我: tiehan@sina.cn