(30 hackdays day 10) Material design - 可用的Material

Google的Material Design出来一阵子了，但是不是感觉还是个看不见摸不着的概念？按照Google的说法

Material Design is a specification for a unified system of visual, motion, and interaction design that adapts across different devices.

Material应该是一个跨平台的，统一视觉，动画和交互设计的基本模型。好吧，工程师思维作祟，为什么听起来像bootstrap呢。还有，什么Material is the metaphor，Swift out，到底咋实现呀...

于是，几个Ionic Framework和AngularJS的核心开发者站了出来，开始了一个酷酷的项目Material。这个项目目前还处于初期高度活跃时期，所以最好不要在自家成熟系统上玩耍。

写过Angular跟很多现有控件打交道的人都会体会到它们之间的“代沟”。除了各种$scope.$apply以外，Angular崇尚的组件复用，Directive等经常会反而成为整合的绊脚石。所以很早就有个项目Angular-UI试图把一些常用的，跟Angular整合很好的组件统计在一起，让大家各取所需。但后来不知为何，这网站并没有成为Angular Directive的集散地。

后来Polymer，Dart出来了，感觉Google下决心要彻底改造前端技术了。但囿于之前GWT的失败，我总觉得Google也就适合做做新语言，Compiler之类的，直接做前端界面总是会被骂碎。

但这次看了Material这个项目的Demo（好多东西）以后，我真心感到，Google工程师审美提高了...

Material组成

按照作者所说

Our goal is to deliver a lean, lightweight set of AngularJS-native UI elements that implement the material design system for use in Angular SPAs.

Material项目的目的是提供一系列实现了Material设计系统的Angular原生的UI控件（想象一下再也不用$scope.$apply来让这世界刷新了）。Component里面有目前提供的控件列表。其中，Card，mdToast，TextField都是做的比较好玩的（想象一下一个页面也能用Android的Toast）。

写了个小登陆框，用了md-card, md-text-float, md-button。用了几个Directive就搞定了。虽然感觉还是比Bootstrap写的麻烦一些，但出来这些交互还是挺爽的。

其实Firstname应该是粉红色，很漂亮的粉红色。然后点击TextField以后Firstname会上去，空出位置来，动画也是挺赞的。

另外，赞一下他们的文档。他们的文档是用dgeni写的。需要装一下然后build一下就能看到。Demo里获取例子的源码也方便了很多，点击右上角的Source就可以。直接看Angular出来的HTML就是作死。

最后，这个Google的家伙是这个项目里的一员：https://plus.google.com/+NaomiBlack/posts/bCS9DSPdVug

嗯，我知道今天的文章很水...但...也算写了好吗！