#个人总结 #视觉设计 # App 自如 APP 的 banner 有重力感应效果，立体感非常强，视觉效果超棒。 # Web ## 布局 ### 左右布局 #### 纯色+素材 适用于素材不够长时 ![image.png](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20230314132916.png) ## 视觉 ### 1. 真实素材+手绘元素 ![image.png](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20230314133124.png) ### 与第二屏过渡效果 #### 元素叠压过渡 ![image.png](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20230314133152.png) #### 渐变过渡 ![image.png](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20230317073632.png) #### 图片撕纸效果. ![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/图片撕纸效果.png) ### 2. 多素材点缀 ![image.png](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20230314133245.png) ### 3. 渐变叠加 通过增加主题色渐变来体现主题，并保持良好的标题可读性。 ![image.png](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20230314133326.png) ^374301 ### 4. 纯色或渐变色块 ![image.png](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20230314133414.png) ^bfab64 ![image.png](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20230314133429.png) #### 融入品牌图形元素 ![[Pasted image 20210731093329.png]] ![Pasted image 20210731093355|](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/Pasted%20image%2020210731093355.png) ### 5. 使用品牌图形蒙版 mask ![image.png](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20230314133510.png) ### 6. 轴测图 2.5D ![image.png](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20230330125904.png) ## 动效 ^49a900 ### 3D 重力感应 ![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/2021-08-15%2011.21.27.gif) ### 几何图形展示 ![[heroani.mp4]] ^1d1d28 ### 全屏视频背景 ![[全屏视频背景案例01.mp4]] ^0cc66a ### 全屏图片逐渐放大/缩小 ^dbe351 ![[图片逐渐scale.mp4]] ^98db66 ### 动态的文本输入 ^7f3d36 ![CleanShot 2023-03-14 at 13.16.24.gif](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/CleanShot%202023-03-14%20at%2013.16.24.gif) ^7b7db2 ## 资源 - [Banner排版设计，正确的打开姿势 (qq.com)](https://mp.weixin.qq.com/s/JUUxl0GNDsy2tzHhrsvc4g) 总结的很全有 10 几个模式