结合信息框架对不同元素类型进行视觉设计调整后，再对页面内容的基本交互进行考虑，例如轮播、切换、弹出、展开收起、转场等。之后才是更加细腻的交互创意思考。

1）基本交互发力点

鼠标经过反馈；常见且重要的交互方式，通过鼠标经过时反馈选中状态或提示相关信息

按钮点击反馈；在鼠标点击后，按钮或控件的颜色形状变换效果，用于反馈点击成功，实现眼手体验一致

按钮长按效果；长按状态的动效示意，通过对长按目标加一动画响应进度或持续的状态，而非单纯的变色或样式切换

完善Loading动画；如点击上传下载更新等，出现对应进度条或loading动画帮助用户完善体感

内容入出场动效；页面切换加载或滑动页面后，内容采取动效有序的进入场景定格，而非生硬的静态切换

多内容轮播应用；对Banner或其他多个内容展现，进行轮播交互完善和时间细节控制

2）锦上添花交互发力点

按钮切换动画；通过icon的路径动画表达按钮切换，而非直接的图标对换，更具个性和视觉观赏性

鼠标跟踪动画；可以适当的做一些鼠标跟踪事件，让一些背景或界面元素跟随鼠标律动起来，增强互动

特殊滚轮联动效果；通过鼠标滚动联动其他元素进行交互变化，来呈现更有创意的场景切换或内容展示

内容穿插滚动；将内容分层控制，页面滚动时将元素固定或交替显示，产生穿梭感提升界面层次

响应式展开收起；主要用于二级或下级内容的自动展开，由鼠标经过自动展开并聚焦，减少用户操作

结合音视频媒体控制；在页面中植入音视频内容通过按键或鼠标进行交互或切换，打造互动性更高的媒体传达

趣味转场或页面加载；对页面转场或加载深度优化。采取更有创意的方式或动画来过渡，让视觉体验提升亿点点

内容或窗口抖动报错；合理采用抖动效果进行报错反馈或特殊场景应用，使呆板提示更灵动

可DIY的颜色或图形；提供主题或模块的DIY空间，满足用户编辑符合自己喜好的视觉效果

3）结合产品的场景创意

打造个性的模块呈现方式；结合产品的应用场景打造有个性的呈现方式

打造游戏互动的呈现；将有剧情有故事的产品或内容游戏化，可以让用户趣味互动更加深刻

打造一镜到底的转场；结合鼠标滚轮联动做镜头创意，突出产品细节或内容呈现

打造三维或全景场景；根据产品属性考虑用三维的场景来增强互动与突出产品

打造仪式感交互；利用视觉和交互变化来制作符合产品的应用效果，实现仪式感线上体验

有声交互；比较少见，视产品情况应用，可以使声音产生互动或视觉影响

镜头交互；适合有镜头针对性应用的产品采用，需要授权，要做好隐私说明

补充按钮交互触发；在场景更为复杂交互需求更多后，进行的常规解决方法

补充按键与鼠标配合交互；适合按键触发且需要鼠标控制变量的复杂交互

九、结语

虽然没有手把着手教你做Web端交互创新，但是常见的形式和示例，甚至一些资源都尽心尽力的交代出来了，相信你只要有一定的审美和基本设计能力，结合产品和创意思路，打造一个更好的创意网站不成问题。在此文中大量的提供了创新的方法和形式，视觉效果和交互动效的细节仍有很大的发挥空间。虽然码的字有点多，但是能够消化下来一定能有所帮助，如果还是存在疑问亦可以关注联系作者 [比心]。

更多创意网站案例剪辑参考：https://www.bilibili.com/video/BV1aN411Q7nn 

 

 

 

本文由 @泡泡 原创发布于人人都是产品经理，未经许可，禁止转载

题图来自 pexels，基于 CC0 协议

给作者打赏，鼓励TA抓紧创作！

赞赏

3人打赏