网页端交互创意到底该怎么做?(上)

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

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

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

注：下文中有大量示例网址需要翻墙体验。

文章很长也很肝，图文并茂视频GIF样样有！所以大量GIF来袭警报，流量大户请入座。

一、首先了解Web端交互支持

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

1. 鼠标允许的交互

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

1. 光标选中/hover
2. 左键单击
3. 左键双击
4. 左键连击
5. 左键长按
6. 左键按住拖拽
7. 右键单击
8. 右键双击
9. 右键连击
10. 右键长按
11. 右键按住拖拽
12. 滚轮滑动

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

2. 键盘交互支持

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

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

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

二、常见的交互动作组合

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

1. 鼠标左键长按横向拖拽
2. 鼠标左键长按上下拖拽
3. 鼠标左键长按任意拖拽
4. 鼠标左键长按绕中心拖拽
5. 键盘方位键与鼠标点击
6. 键盘指定按键加鼠标点击
7. 多个按键组合使用
8. 指定按键配合鼠标长按
9. 指定按键配合鼠标长按拖拽

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

三、交互影响的元素

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

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

1. 常见变化形式

1.位置变化、2.透明度变化、3.角度变化、4.大小变化、5.形状变化、6.颜色变化、7.翻转效果、8.特效变化

四、网页交互的概念

web端的交互概念即触发到呈现的过程。用户可以使用交互设备进行事件触发或变量，页面则将内容进行对应的呈现。其中交互过程主要影响的事件由“可交互的元素“、“功能交互“、“转场切换“构成。页面内容呈现通常分为“默认时“、“选择时“、“运行时”三个时态(鼠标短暂的点击时属于“选择时”，若长按有内容影响则属于“运行时”)，因此在网页交互的过程中，我们需要考虑好这三种完整的状态时呈现形式，另外在考虑补充合适的动效进行过滤或信息反馈。归根到底网页的交互概念就是控制内容呈现罢了，这是网页价值的本质。

五、Web端内容呈现结构

web端内容呈现的结构应该算是页面交互的范畴吧，其实上网页的页面并不只是长页面的形式，实际上会有更多种结构可用。因为电脑显示器更大的缘故，web端结构上比移动端更加灵活，同时根据产品的性质也有需要考虑移动端响应式的需求，一般来讲这些页面结构可以分为以下六类；

上下长屏滚动结构；

通过长页面布局内容，页面滚动查看信息

全屏上下切换结构；

每次定焦一屏的范围显示内容，通过滚轮或按钮上下切屏

全屏左右切换结构；

同样是定焦一屏显示内容，但采取左右切换结构

全屏页面覆盖结构；

基于全屏定焦显示，页面通过覆盖式切换或跳转，甚至鼠标滚轮深入或浅出页面，文中一镜到底的示例便是如此
一镜到底示例位置《24种交互层创意形式->16.一镜到底的视角呈现》

自适应平铺结构；

适用于页面模块小而简单的时候，直接将模块在屏幕内一个个展开即可，一屏放不下时可以换行或继续平铺并定焦

三维场景结构；

将内容场景3D化，通常导航或部分UI控件会屏幕上固定，然后可以采取定向镜头伸缩查看，也可以是环绕中心与自由移动查看内容信息

网页的组成区块通常分为五大类型，即导航、面包屑、背景、内容呈现、弹出框。菜单导航栏通常分为顶部导航、侧边导航、底部导航、组合导航四大类，也有个别是通过点击弹出的导航。内容布局则更是五花八门了，是板式与技巧的呈现了。