万字长文！帮你掌握网页端交互创意 99% 的玩法！

我们探讨 Web 端的交互创意形式，不讲如何制作交互动效，也不针对 B 端或功能型产品讲解。放眼过去大量同质化或跟风的网站风格，空有一副美观的皮囊，却少了些什么，为何不交互创新一下呢？具有创意的交互必然能使一副黑白的画面瞬间点亮色彩。

你可能想有创意的交互能为网页带来什么？

挺多的，我举例：一个连微动效都没有的静态网页你进去后也就看见的这样，那么如果这个网页进去时，内容会有入场动效，你是不是马上能感觉到这个网站有点儿东西，要抄起鼠标探索一番？换言之，好的交互创意甚至能让你产生心流模式，你通过鼠标到处点击，页面上不断的给出动画效果，然后你收获惊喜，最终促使你进行更多的尝试。

好了，说多了，就是希望为更多设计师提供设计思路或执行概念，帮助大家找到更多的创意灵感。

首先了解 Web 端交互支持

Web 端交互围绕计算机为中心。主要涉及键盘鼠标两类设备的交互，个别网站的产品可能会涉及麦克风声音采集或摄像头应用。

1. 鼠标允许的交互

现在的鼠标可以支持更多功能，但是通常来讲需要严格的考虑兼容问题，所以仅以鼠标左右键滚轮滚动以及光标映射选取为主；

• 光标选中/hover
• 左键单击
• 左键双击
• 左键连击
• 左键长按
• 左键按住拖拽
• 右键单击
• 右键双击
• 右键连击
• 右键长按
• 右键按住拖拽
• 滚轮滑动

以上所有交互都可以根据实际场景进行设定，不过鉴于用户习惯，一般不会用到快速的连击交互以及右键的双击、长按或拖拽，这不符合交互手势的舒适度或简化易用的初衷。

2. 键盘交互支持

键盘支持大量的按键交互，除去一些全局的功能按键和组合快捷键，在网页交互应用中常见的还可以分为以下几种情况；

• 数值、字母、符号输入
• 某个指定按键单击/双击/连击/长按
• 用某个指定的或组合按键代表网页上的功能
• tab 键切换网页选项
• 用空格切换下一屏
• 方位键切换选项或移动窗口视角
• ESC 退出视频或全屏查看

在应用键盘按键功能的时候，除去那些作用明确大众悉知的按键功能，其他的按键操作应该保证界面上有指引有提示。

常见的交互动作组合

组合的交互动作常配合不能简单直接完成的任务，这里的组合指有两个及以上交互动作完成的类型，复杂的交互动作尽量少用，且尽可能的为用户提供操作指引，若非必要，费力不讨好；

• 鼠标左键长按横向拖拽
• 鼠标左键长按上下拖拽
• 鼠标左键长按任意拖拽
• 鼠标左键长按绕中心拖拽
• 键盘方位键与鼠标点击
• 键盘指定按键加鼠标点击
• 多个按键组合使用
• 指定按键配合鼠标长按
• 指定按键配合鼠标长按拖拽

组合动作主要分为以上 9 类，鼠标拖拽的组合动作通常会细分来应对界面场景的应用，例如通过横向拖拽将一个竖放的圆柱物体旋转起来，那么垂直的拖拽必然是没办法转动起来的，而且左右还会决定拖拽的方向。

交互影响的元素

简单来讲，无非就是看得见的元素、听得见的元素。听得见的元素无非就一个声音，讲深一点，也就涉及一些音效的交互控制。而看得见的元素则会相对丰富很多，如果再次细分的话还可以归为以下几种情况；

• 颜色（例如内容被选取时的颜色变化）
• 文字（所有文字相关的样式及状态）
• 图形（所有静态可见图形的样式变化）
• 动画（所有的动态内容或交互动效）
• 按钮（所有可操作的按钮及多状态呈现）
• 控件（页面中用于交互的控件元素）
• 模型（所有可交互的三维内容）

1. 常见变化形式

位置变化、透明度变化、角度变化、大小变化、形状变化、颜色变化、翻转效果、特效变化