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