界面模式
Material Design
的基础组件我们已经大体了解过了,现在我们看看Material Design
在结合这些不同组件的过程中,有哪些套路,也就是有哪些常用的界面设计模式。了解了这些模式,可以帮助设计者们做出合乎开发者实现的方案。
设计的套路有很多,列表-list
分页-tab
网格-Grid
侧边栏
下拉刷新
等等。这里只列出几个常见的,更多的方式请参考设计规范,以及其他各种优秀应用的精巧设计。
手机端屏幕大小是有限制的,好的设计会充分利用有限的空间,合理的向用户展示出更多的内容。
侧边栏
侧边栏的设计最早是由国外的第三方开发者设计出来的,在用户中很受欢迎。于是后来被很多开发者采用。从安卓5.0开始,Google就推出了官方的实现方式,并作为一个典型的界面设计方案推荐给了大家。
带侧边栏布局,
![slider_drawer_example](http://7xrwhw.com1.z0.glb.clouddn.com/slider_drawer_example.png)
更加具体的规范请参考这里。
底部导航栏
通过类似底部导航栏的按钮,让界面切换显示更多的内容。
![bottom_button_patten](http://7xrwhw.com1.z0.glb.clouddn.com/bottom_button_patten.gif)
这中布局的方式也是苹果iOS的经典布局方式,不知道是Google的原创还是向苹果的致敬。
更加具体的规范请参考这里。
分页
与底部导航栏类似,但是是放在界面上方。
![tabs_patten](http://7xrwhw.com1.z0.glb.clouddn.com/tabs_patten.png)
更加具体的规范请参考这里。
动态变化
我个人认为,界面元素和内容的动态变化,是整个Material Design
的精髓。它带给了用户极好的视觉体验,是引导用户注意力的最好方法。
动态是通过过渡动画
和滑动效果
来实现的。
过渡动画
在前面的章节已经介绍过了动画的内容,这里就不重复了。
这里就多看几个实际的例子吧。
![navigational-transitions_parent-to-child_patten](http://7xrwhw.com1.z0.glb.clouddn.com/navigational-transitions_parent-to-child_patten.gif)
![raised_btn_effect](http://7xrwhw.com1.z0.glb.clouddn.com/raised_btn_effect.gif)
滑动效果
内容切换的时候,尽量的使用滑动的效果。
分页的滑动效果,
![slibing_patten](http://7xrwhw.com1.z0.glb.clouddn.com/slibing_patten.gif)
AppBar的滑动效果,
![appbar_scroll_toolbar](http://7xrwhw.com1.z0.glb.clouddn.com/appbar_scroll_toolbar.gif)
本文是《从设计到实现-手把手教你做android应用开发》系列文档中的一篇。感谢您的阅读和反馈,对本文有任何的意见和建议请留言,我都会尽量一一回复。
如果您觉得本文对你有帮助,请推荐给更多的朋友;或者加入我们的QQ群348702074和更多的小伙伴一起讨论;也希望大家能给我出出主意,让这些文档能讲的更好,能最大化的帮助到希望学习开发的伙伴们。
除了CSDN发布的文章,本系列最新的文章将会首先发布到我的专属博客book.anddle.com。大家可以去那里先睹为快。
同时也欢迎您光顾我们在淘宝的网店安豆的杂货铺。店中的积木可以搭配成智能LED灯,相关的配套文档也可以在这里看到。
这些相关硬件都由我们为您把关购买,为大家节省选择的精力与时间。同时也感谢大家对我们这些码农的支持。
最后再次感谢各位读者对安豆
的支持,谢谢:)