简约高效的动效列表设计:一分钟搞定 Android 列表常见需求

5,939 阅读2分钟

郑重声明:本文从设计角度说明Android列表动效设计问题,含前端技术,码农慎喷,我是萌妹纸~

相信设计师在设计到关于列表的动效问题的时候会很头痛,例如列表该如何出现,又该怎样结束~

a3fe57486d726ac72525ae6680f5.jpg

对于码农哥哥来说也有很大的困扰,那就是,拿到设计稿的时候,对于动效师提出的各种五花八门的动效感觉就是:我去年买了个表。那么代码哥哥怎么能够更加高效的把设计稿实现呢?看完今天这篇文章相信你会有额外的收获~

4c7257486d2332f875a429097bbb.jpg

首先在这里要感谢icon和页面的设计师璀瑶女士和码农哥cmychad(文章后面会提到)~

在我们公司项目开展的时候,分配给我的项目中有大量的列表设计及动效设计,开始的时候感觉无从下手,但是自从在github上发现码农哥哥cmychad的一个开源项目(项目名称:BaseRecyclerViewAdapterHelper)的时候,真的是欣喜若狂,在项目实施的时候,公司的安卓开发遍用上了这个开源项目进行开发~

5157574870486ac72525aec9049c.jpg

po上cmychad码农哥哥的链接:

 https://github.com/CymChad/BaseRecyclerViewAdapterHelper

那这个动效是怎样展示的呢?

f6145748719332f875a429f0e67d.jpg

从上面的GIF图可以看出

  • 对于开发来说:优化Adapter代码(减少百分之70%代码)

  • 添加点击item点击、长按事件、以及item子控件的点击事件

  • 添加加载动画(一行代码轻松切换5种默认动画)

  • 添加头部、尾部、下拉刷新、上拉加载(感觉又回到ListView时代)

  • 设置自定义的加载更多布局(对于开发)

  • 添加分组(随心定义分组头部)

  • 自定义不同的item类型(简单配置、无需重写额外方法)

  • 设置空布局(比Listview的setEmptyView还要好用!)

UI设计师从此只要考虑样式问题,开发也不怕各种古灵精怪的动效了~分分钟秒杀各类列表动效问题~

4032574872ff32f875a429efc92a.jpg

下面po出自己手上项目及用了这个开源项目实现的真机版的效果图:

效果图:

c0aa574874db32f875a4294790d4.jpg

真机上的效果:

项目内很多列表的表现都是参照码农哥哥cmychad的项目:BaseRecyclerViewAdapterHelper

真的很好用~今天在谷歌浏览器里面逛的时候竟然发现在Google Play上也能看到~

a76857487b6232f875a4296f5cd2.jpg

po上链接:

https://play.google.com/store/apps/details?id=com.chad.baserecyclerviewadapterhelper

(我就是这么大方~哈哈~)

2c54574877bc6ac72525aef831ff.jpg

分分钟带你飞离扰人的列表动效问题~设计狮们,喊上你们的程序猿来试试吧~相信你会感叹,为啥我不早点用上BaseRecyclerViewAdapterHelper呢~

当然,除了感叹,我有一个不成熟的小建议~那就是你或许也可以在下面轻轻的点赞~我会很感动的!