2BAB's Engineering Blog

Lollipop(2) - Material Design Resource

开发的各个流程会用到的 Material Design 资源整合。

For PM


如果能从高保真原型开始那是极好的 ( 星星眼 )。

For Designer


  • Material design 官方文档 必看文档!!!不用多说,英文好的直接忽略下面中文版( 英文不好也要看看啊喂 )。注意看 Metrics & keylines 以及在倒数第二个章节 Resources 里有大量的官方设计参考资源可供下载。

最重要的尺寸规范

请一定优先选择官方资源

  • material-design-icons Google提供的极为完整的各种图标(包含 iOS 各种精度及 SVG )设计资源。

  • Material Design Android .sketch 包含了 App Bars, Tabs, Status Bars, Navigation Bar, Navigation Drawers, Buttons, Grids, Lists, Switches 等等 UI 组件的 Sketch 资源包。

大概在十个月前, 我踏着 +Taylor Ling 走过的道路, 将他制作的 Android UI Design Kit 4.4 移植给 Nexus 4 使用. 一晃将近一年过去, Android 5.0 发布, Nexus 6 开始流行. 显然有很多人认为 Nexus 4 已经是落后的, 被遗忘的设备了.

但是 Nexus 4 作为我最喜欢的 Nexus 设备, 我显然希望 Nexus 4 在手中能够继续焕发活力, 更何况 Google 也依然在给 Nexus 4 推送最新的 Android. 于是早些时候我许下了诺言, 答应不论如何一定会把这套工具更新到 Android 5.0.

等到 Material Design 终于发布正式版的时候, 就到了我兑现这个诺言的时候了. 十个月前我还可以直接从 Taylor 的 Nexus 5 Toolkit 里搬运控件到 Nexus 4 上, 但是 Taylor 还没有做 5.0 的 Toolkit. 所以这个版本里所有的控件都是我自己画的.

于是就有了这么一套设计工具, 给和我一样怀旧的人.

For Developer


For FE

For Android Compatibility

整理这些库的过程中我看了其中一部分的源码,觉得既是一些有趣的库,也是很棒的学习材料。不过就在前两天,突然在一个群里发现了已经有人做了兼容库的整理,并且相当完整。所以就直接抛出整理地址了。

MaterialDesignCenter

这里基于其中一部分我用过或者了解过的做个总结。

Floating Action Button

android-floating-action-button FAB的库我只用过这个,多级菜单的特效在几个FAB里面做的最好,遗憾的是它没有与 ListView 等布局绑定的功能(即另外几个FAB库做的列表滑动时的自动隐藏特效)。

  • 这里的库大部分是实现了 Drawer Indicator 的特效,因为 Android 官方提供的 Support 包里现已经包含了该特效,所以大可不必用它们。

  • 下面有个 MenuAnimation 的库实现的动画没有 FAB 里的回弹效果,还是放弃了。

  • discreteSeekBar 这个拖动的进度条有一定想象空间,不过我还没用。

Tricks

  • SnackBar 这个项目获得了近 600 Star (不是在 MaterialDesignCenter 里的那个)。在我尝试后发现,使用不当时会出现一些莫名奇妙的bug(和 RecyclerView 结合可能会出现永久占位而不显示内容的bug)。而 MaterialDesignCenter 收录的 Kennyc1012 的 SnackBar 似乎没什么人气,还未做尝试。

Ripple

  • RippleEffect 使用中总感觉这个 Ripple 点多了就卡,并且适用范围仅限于类按钮的控件。建议尝试一下另外几个效果绚丽的。

Transition & Vector

  • transitions-everywhere KitKat 和 Lollipop 的 Transition API 的低版本兼容包,可以用它发挥想象做出些有趣的效果。

Dialog

  • MaterialDialog 国人写的一个库,在微博火过几天,可定制性强,用起来也不麻烦。

Reveal

  • CircularReveal 和之前的 Ripple 异曲同工,可以搭配 CardView 等使用。

For iOS Compatibility

不要打我…虽然在 iOS 上实现 Android 的设计并不对。不过也要让大家体会一下有时候只有 iOS 设计稿的时候要 Android 适配的痛苦!

  • MaterialKit 一套 Material Design 的 UI 组件库,作者已经施工了70%。

抛砖引玉


嘛…嘛…其实粗略的看了这些设计规范,设计指南我还是没有悟到 Material 到底是什么 = =,这一点还需要多多努力。

不过类似于 “控件间隔必须是 8dp 的倍数” 的基础尺寸规范,需要每个 Android 开发者、设计者都了解和遵守。

而一些开源第三方库,使用之余研究一下源码会有不小的收获 ~

最后推一个网站,以及一个有意思的人。

锋客网 及其核心成员 @ NovaDNG,他也是《Android App 视觉与体验设计指南》这本书的作者,国内 Android Design 较早的布道者,现就职知乎。贴两个关于他的评价帖 《知乎上关于四次元微博客户端的很多提问、回答、甚至“四次元”的话题都被删了吗?》( 记得查看所有答案 ) , 《如何评价 NovaDNG 放出的知乎新版 Android 客户端的设计图?》

讨论请发邮件到 xx2bab@gmail.com
自由转载-非商用-非衍生-保持署名 | Creative Commons BY-NC-ND 3.0