界面模式

Material Design的基础组件我们已经大体了解过了,现在我们看看Material Design在结合这些不同组件的过程中,有哪些套路,也就是有哪些常用的界面设计模式。了解了这些模式,可以帮助设计者们做出合乎开发者实现的方案。

设计的套路有很多,列表-list 分页-tab 网格-Grid 侧边栏 下拉刷新等等。这里只列出几个常见的,更多的方式请参考设计规范,以及其他各种优秀应用的精巧设计。

手机端屏幕大小是有限制的,好的设计会充分利用有限的空间,合理的向用户展示出更多的内容。

侧边栏

侧边栏的设计最早是由国外的第三方开发者设计出来的,在用户中很受欢迎。于是后来被很多开发者采用。从安卓5.0开始,Google就推出了官方的实现方式,并作为一个典型的界面设计方案推荐给了大家。

带侧边栏布局,

 slider_drawer_example

更加具体的规范请参考这里

底部导航栏

通过类似底部导航栏的按钮,让界面切换显示更多的内容。

 bottom_button_patten

这中布局的方式也是苹果iOS的经典布局方式,不知道是Google的原创还是向苹果的致敬。

更加具体的规范请参考这里

分页

与底部导航栏类似,但是是放在界面上方。

 tabs_patten

更加具体的规范请参考这里

动态变化

我个人认为,界面元素和内容的动态变化,是整个Material Design的精髓。它带给了用户极好的视觉体验,是引导用户注意力的最好方法。

动态是通过过渡动画滑动效果来实现的。

过渡动画

在前面的章节已经介绍过了动画的内容,这里就不重复了。

这里就多看几个实际的例子吧。

 navigational-transitions_parent-to-child_patten
 raised_btn_effect

滑动效果

内容切换的时候,尽量的使用滑动的效果。

分页的滑动效果,

 slibing_patten

AppBar的滑动效果,

 appbar_scroll_toolbar