体验Material Design Lite of Google
July 8 2015

前几天Google推出新的前端UI框架Material Design Lite (MDL),让人眼前一亮。Bootstrap作为大而全的老牌前端UI框架,其泛滥的使用早就让人审美疲劳,偶尔换换口味也不错。我一直以来都比较喜欢的Google的设计风格,卡片式的栅格系统使内容的呈现非常简洁,而细节处动画提升了整体品质。经过一天时间我把Q平台从Bootstrap换到MDL,大致总结如下:

下面是一些需要注意的地方:

MDL的栅格系统跟Bootstrap很像,也是分成十二列。mdl-grid类就像row,而mdl-cell则对应于col-x-y。但不同之处在于,MDL的栅格系统使用flex属性来控制内部块,首先兼容性略差,但是终于解决了不同列等高的问题。如果不需要等高,则要添加mdl-cell--top选项。这些选项在官方文档里只是一略而过,并没有详说,因此可能会碰到不少坑。

MDL的内容核心似乎是它的“卡片”系统。这个卡片类似于Bootstrap中的Panel,但是有更多的格式。经过设计师的设计,这些卡片的文字和图片呈现看起来都很舒服。这也是这类UI框架的核心价值所在。

MDL在一些看起来没那么重要的组件上下了很多工夫,并明白为什么。官方文档上甚至用了整个篇幅来介绍它的文字输入。MDL的导航栏有好几种选择,设计得都非常精美好用,而且比Bootstrap的导航要简洁很多。MDL的所有类名都有mdl-的前缀,这样可以减轻CSS全局命名冲突的问题,这一点要比Bootstrap想得周到。MDL还有一个奇葩的功能,就是可以直接在CSS类中选择背景和文字颜色,甚至还有透明度,比如mdl-color--indigo-900

MDL还有一些小bug。就连自己的官网上有时候底部会出现莫名的白条,或者导航栏错位等等。

MDL的组件太少,竟然连<select>下拉菜单也没有。而且我个人觉得MDL在很多地方只是给了一个大致的模板,而并没有细化。比如说MDL没有Bootstrap中十分好用的hide类,也无法像Bootstrap那样轻松地把文字pull-left或者pull-right,另外我找了半天也没找到如何把内容居中。MDL没有Modal。强调这一点的主要目的在于,我们使用这类UI框架一般都是在个人的小项目上,而在这些小项目上,精力主要都放在数据、逻辑和后台等方面,而不是放在前端的设计上,所以我一般都尽量避免添加自己的CSS。从这个角度看来,Bootstrap以其大而全的库完胜MDL,在添加更多的组件之前,MDL的使用比较受限。

不知道Google对这个库的未来打算怎样,如果以后会有更多可用组件的话,我会强烈考虑使用MDL来作为个人项目的前端框架。

CURRENTLY

Software Engineer at Yahoo!

PREVIOUSLY

Full Stack Engineer at Prosper Marketplace

PREVIOUSLY

Front End Engineer at BillGuard (Acquired by Prosper)