网页设计中，24 种交互层创意形式

今天我们来看一下网页设计中24 种交互层创意形式，主要是关于页面内容元素交互时的创意形式讲解，这里不对交互动效或特效细节进行过多说明，因为怎么去动又或者用什么样的特效去呈现实在数不清说不完，如果有兴趣可以参考一下文中的精选案例视频整理和提供的一些体验合集地址。

1. 光标跟随动画

会使页面上的元素根据光标的位置或移动产生相应变换，增加页面的互动性与趣味，适用于装饰或加强背景层次感，在特定的场景也可以使整套控制 UI 往鼠标移动的方向微微靠近，结合菲兹定律公式，距离的不断缩减也能够加快选中的效率）

示例网址： https://www.bilibili.com/



示例地址： https://home.miui.com/  即时渲染粒子动画与鼠标跟踪



2. 鼠标悬浮动画

简单易用的鼠标悬浮动画，用于聚焦显示或 Tooltip 说明，常用与内容选中状态区分或元素细节展示，加上一组好的动效创意非常能够凸显个性，使用户感到惊喜为体验加分

示例地址： https://www.makemepulse.com/



示例地址： https://www.eone-time.com/ 如果是一个完整动画缓慢播放完会更有叙述性



3. 鼠标点击特效

由鼠标点击进行触发，基本样式即点击状态显示，触发后的特效可以是图标动画、光效、音效、界面动画等，游戏场景中较为常见，点击后不仅有光效反馈还有音效附和，这是一种触发反馈效果。

示例地址： https://lab.hakim.se/checkwave/



4. 鼠标长按特效

当鼠标长按某个按钮时持续出现的特殊效果，一般是持续鼠标点击的特效或维持某个元素的变化效果，通常对数值持续增减动作较为常见，可以代替连续的点击，交互更轻松。也或者是需要一定的加载时间所以用长按配合

示例网址： https://lab.hakim.se/bacterium/01/ 通过长按持续增加细菌圆点



5. 鼠标拖拽特效

通过鼠标点击长按某个元素进行移动的组合交互，一般用于拖拽移动、内容绘制、元素连接等。应用场景广，互动性较高，能为用户带来更多的参与感和趣味性，甚至制造小惊喜

示例内容：阿里内测的 Real 3D



示例地址： http://fff.cmiscm.com/#!/section/sheeps



6. 鼠标滚轮巧妙的联动效果

主要用于页面某个值的控制或页面滚动，在页面滚动的时候可以配合控制元素变化来实现更具创意的展现效果，通常元素透明度、位置、大小、序列图都可以控制

示例地址： https://www.eone-time.com/



示例地址： https://www.apple.com.cn/macbook-pro-16/ Apple 国内官网



7. 鼠标选中自动展开

鼠标经过选项时自动展开选项并聚焦，可以省去鼠标点开的动作，但不适用于选项内容较多且内容密集的场景

示例网址： http://www.antro.ca/en/



8. 按键与鼠标配合触发

通过指定按键和鼠标配合交互进行触发，适用于同界面的复杂交互场景，且存在某些变量需要鼠标控制。如果你的网页内交互丰富且包含变量元素，不妨试试看

示例地址： https://lab.hakim.se/bacterium/01/ 鼠标拖拽配合空格键长按



9. 模块或分页加载动效

在页面滑动或分页信息加载时，界面构成元素有序的缓入进场。采用流畅的动效演示数据加载的过程，缓解数据加载渲染压力的同时，使得用户可以更加从容不迫地浏览信息，让界面呈现更加精致优雅

示例地址： https://www.apple.com.cn/macbook-pro-16/ #Apple 国内官网



10. 趣味转场或加载等候

应用转场效果与 Loading 动画，运用某个元素变大覆盖或页面移动交替转场，而非生硬的直接替换，使得页面切换更有趣味和层级关系体现。再对加载较慢的内容补充 Loading 动画，缓解用户焦虑的同时还能延展品牌信息

示例地址： https://teatrlalka.pl/en



11. 大图或多图轮播应用

精美的图片总是想要放大看，看了还想看。运用超大的轮播图展示与沉浸式功能布局，满足用户操作与大图赏析

示例地址： https://www.carpediemsantorini.com/



12. 内容穿插滚动

运用特殊的图层顺序结构，在页面滚动查看时，形成奇妙的元素穿梭视感。通常会穿梭替换背景或让元素接力，这样相比静态写实的页面滚动时会更有层次感

示例地址： http://www.sehsucht.berlin/mailme/



示例地址： http://kenjiendo.com/news/



13. 内容自动生成

输入关键内容后，页面自动生成结果进行呈现，整个过程可以是缓慢有序的，适用于降压或画面创意生成的产品，可以让用户感受整个过程与细节变化

示例地址： https://www.solaas.com.ar/dreamlines/ 输入关键词后页面会自动生成迷幻的动态画面



示例地址： http://fluky.io/ 输入选项后生成转盘随机抽取，别再问我选哪个好！转就是了



14. 游戏互动模式

将产品内容以游戏的形式或交互呈现，让内容充满趣味和互动性，使得用户在参与游戏互动的过程中打破了常规的阅读体验

示例地址： https://dccxi.com/trust/



15. 三维或全景空间

建立一个三维或者全景空间进行查看或操作，再赋予操作按钮或说明，实现 3D 场景的交互与视觉效果，常用与地图全景查看或 3D 游戏应用，可以巧妙的结合产品 3D 模型，打造非凡的互动体验

示例地址： http://2017.makemepulse.com/



示例地图： https://map.baidu.com/@13371285.96,3516997.92,19z 百度地图的全景查看



16. 一镜到底的视角呈现

打造一个非平面的视觉场景。用鼠标点击或滚轮联动交互利用分层的元素变化，营造出由近到远或由上至下的一镜到底的视角穿梭体验。界面场景切换更加自然，还有超强的空间感与趣味性，让人难以忘怀如临其境。

示例地址： http://www.ohdeergames.com/



17. 按键交互效果

将某些功能或任务引用按键进行交互或触发。常使用字母、数字、空格、方位键，界面需要有提示对用户进行指导。

示例地址： https://www.julianabrams.co.uk/ 基于键盘即可完成所有浏览，需搭梯子访问



18. 个性的模块展现方式

常见的有弹窗、抽屉、卡片展开、转盘等，通过个性轻松的显示结构与交互方式也能让人眼前一亮。

示例地址： http://go-wander.org/397_fela_kim



示例地址： http://fff.cmiscm.com/#!/main



19. 可交互的颜色或图形

对一些颜色或形状元素提供切换或 DIY 的空间，允许用户进行意料之外的交互或配置能力，提升网页趣味性或用户个性化需求满足。

示例地址： https://ant-design.gitee.io/docs/spec/introduce 可自定义的主题色



20. 音视频媒体控制

围绕产品介绍的媒体内容，常见有视频或音频且支持基本交互控制，结合场景需求可以丰富交互的形式或更多媒体控制功能，例如长按快进、倒退、剪辑、混音等，常用于娱乐互动场景或音视频类产品。

示例网址： https://aidn.jp/se/#0



21. 内容或窗口抖动

通过抖动进行报错或反馈，常见为密码输入错误时或游戏中受到伤害的场景，可伴随音效提示一起。使用场景不广泛，但是也可以进行创意应用，例如抖掉灰尘小游戏，长按元素抖动干净为止。



22. 打造仪式感

结合现实场景中的交互方式，打造相似的线上场景帮助用户共情带入，再配合交互和动效完成类似的动作，为用户带来仪式感和共情效果。

示例地址： https://issuu.com/matskafte 书籍预览的场景打造，需搭梯子访问。



23. 有声交互

通过麦克风采集声音来影响交互，是一种声音的交互，如果网站支持，甚至可以语音交互，是一种少见的网页交互形式，并非传统的音视频控制而已。

示例地址： http://www.bbboooooommm.com/ 搞点声音就能动起来



24. 镜头交互

通过摄像头授权获取镜头画面进行交互，通常是一些镜头滤镜效果或者增强现实技术结合做交互创意，网页上少见新颖。

示例地址： https://mrdoob.com/#/125/multiuser_sketchpad