(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 FrameworkAngularJS的核心开发者站了出来,开始了一个酷酷的项目Material。这个项目目前还处于初期高度活跃时期,所以最好不要在自家成熟系统上玩耍。

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

后来PolymerDart出来了,感觉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里面有目前提供的控件列表。其中,CardmdToastTextField都是做的比较好玩的(想象一下一个页面也能用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

嗯,我知道今天的文章很水…但…也算写了好吗!

发表评论

Fill in your details below or click an icon to log in:

WordPress.com 徽标

You are commenting using your WordPress.com account. Log Out /  更改 )

Google+ photo

You are commenting using your Google+ account. Log Out /  更改 )

Twitter picture

You are commenting using your Twitter account. Log Out /  更改 )

Facebook photo

You are commenting using your Facebook account. Log Out /  更改 )

w

Connecting to %s

在WordPress.com的博客.

向上 ↑

%d 博主赞过: