![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/Jobs%20%20Pitch.jpg) 标签： #经验杂谈 日期：2022-09-04 ## 视觉 ### 视差滚动 ![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/HealthyTintedHartebeest-mobile.gif) ### 空间感，有 Z 轴叠压 - Aircall ![Outbound Call Center Software For Sales Teams Aircall.jpg](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/Outbound%20Call%20Center%20Software%20For%20Sales%20Teams%20%20Aircall.jpg) - Zoho CRM![Zoho CRM Top-rated Sales CRM Software by Customers.jpg](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/Zoho%20CRM%20%20Top-rated%20Sales%20CRM%20Software%20by%20Customers.jpg) ### Hero 全屏+透明导航栏 [[焦点区域 Hero Section#^0af008]] - 高度 100%屏幕 - 一般是视频背景，或者高品质大气图片 ^120336 - 透明的[[顶部导航栏 Top Navigation bar]] #### 图片 ![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/Pasted%20image%2020211016230545.png) #### 视频 ![CleanShot 2023-10-31 at 21.54.30.gif](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/CleanShot%202023-10-31%20at%2021.54.30.gif) ### 注重背景纹理 很多优秀的作品，背后会有很符合氛围的细腻背景，例如一个红酒类的 Web 设计，可能会用到有质感的复古的纹理。 [[感觉画面单调时如何处理？#^145e9b]] ### [[元素破界 Break The Frame]] 平面中将一个元素重出边界达到的视觉效果，让画面显得更有灵性![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/Pasted%20image%2020211030114019.png) ## 交互 ### 鼠标的设计 - 一般会有一个有趣的鼠标，还有很好玩的hover状态。 - hover到不同的元素，会做一些特殊的处理，例如hover到新闻卡片上，出现read。 ### 3D 感应 一般都会有的 3D 感应，随着鼠标移动，3D 元素变化角度 ### 可操作元素 Pitch 招聘页面地球可以拖拽旋转。![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/Pasted%20image%2020211010184630.png) ### 列表交互 #### 文字列表 hover 出现或切换图片 ![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/2021-05-17%2023.45.12.gif) 来源自 Pitch![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/2021-10-10%2018.46.59.gif) [Portray: Perosonal Portfolio](https://portray.framer.website/) ![CleanShot 2023-10-21 at 11.12.31.gif](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/CleanShot%202023-10-21%20at%2011.12.31.gif) #### 图片列表，hover 变成动态视频或者 GIF ![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/2021-08-17%2023.44.05.gif) ## 音效 身临其境 ### 文字随着语音同步前进 案例 1. [Vita Architecture - About](https://vitaarchitecture.com/about) ![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/2021-07-29%2023.45.53.gif) 2. [Khaby Lame - ICON Magazine Presents Social Media Superstar](https://khaby.iconmagazine.de/) ![image.png](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20230123135710.png) ## 动效 顶尖的网页，在滚动过程中，总有一种很丝滑的感觉，甚至有点卡。 - [[页面转场动画]] ^b021c8 ### [[页面模块切换衔接与滚动动效]] - [[待分类有趣创意的动效设计]] - [[常见文字动效设计]] ### 滚动的文字 #### 自然滚动 ![](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/2021-05-26%2023.50.32.gif) #### 随着界面垂直方向的 scroll，带动文字的横向移动。 ### [[网页潮流动态设计元素]]