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

2024-2-11    前端达人

RecyclerView作为Android最常用的控件,相信大家都比较熟悉。而作为设计师的我们,又改怎么利用身边有限的资源进行简约高效的动效列表设计呢?本篇文章轻松带你玩转Android列表动效设计~

郑重声明:本文从设计角度说明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出自己手上项目及用了这个开源项目实现的真机版的效果图:

 

 

效果图:

94fd574874cc6ac72525aea088a8.jpg

c0aa574874db32f875a4294790d4.jpg

 

 

真机上的效果:

 

 

 

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

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

 

 

a76857487b6232f875a4296f5cd2.jpg

 

 

po上链接:

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

 

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

 

2c54574877bc6ac72525aef831ff.jpg

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

 

 

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

 

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司

银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发



作者:vintuvintu
链接:https://www.zcool.com.cn/article/ZNDA4OTky.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

分享本文至:

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档