Clippp的第31篇交互日记
Banner轮播图大家肯定都很熟悉,几乎每个App首页都有这样的资源位,这些轮播图精心设计后,虽然版式上很丰富,但往往都是通过卡片式呈现,用户左右滑动来查看。那么除了这种单一的呈现,还有更好的展示方式吗?自如也许有更好的答案。
进入自如App首页,会发现当用户在不同的角度上看Banner时会看到明显的错位移动,Banner上的文字、元素像是有独立的分层,移动手机会有联动的视差效果,加上一些小元素的设计冲出了Banner图的边限,给人一种裸眼3D的效果。
那这种联动的裸眼3D效果是怎么实现的呢?
首先是依靠设计图的分层,将前景元素与背景进行分离,但彼此还会有联动效果;其次是位移的变化,借助手机上的陀螺仪传感器获取当前手机对应的倾角,计算出背景和前景的移动距离,产生不同程度的位移,达到裸眼3D的效果。
💡小思考:
简单的Banner设计也能有很创新的呈现方式,自如的Banner更像是设计与技术的综合体,缺了设计元素的构思或者技术实现的支持,可能都达不到这样好的效果。
好的设计能给人反思,我想自如的设计便是这样,让人反思如何打破一层不变的条条框框,让人反思设计与技术的碰撞还会产生哪些化学反应,让人反思设计的边界到底是什么…
轮播图Banner还有哪些具有创新性的呈现呢?欢迎你的思考和想法~
慢慢来比较快,如觉得有帮助,
欢迎在看&转发,谢谢!
Tips:这里会持续更新设计知识,包括但不限于交互日记、设计法则、答疑解惑、优质资源…感兴趣的同学可以扫码加入,一起成长⬇️
1、进入公众号后台,点击“素材下载”即可领取设计资源合集。
添加微信, 邀你进设计成长群