网站交互设计创意形式
首先了解 Web 端交互支持
Web 端交互围绕计算机为中心。主要涉及键盘鼠标两类设备的交互，个别网站的产品可能会涉及麦克风声音采集或摄像头应用。
1. 鼠标允许的交互
现在的鼠标可以支持更多功能，但是通常来讲需要严格的考虑兼容问题，所以仅以鼠标左右键滚轮滚动以及光标映射选取为主；
光标选中/hover
左键单击
左键双击
左键连击
左键长按
左键按住拖拽
右键单击
右键双击
右键连击
右键长按
右键按住拖拽
滚轮滑动
以上所有交互都可以根据实际场景进行设定，不过鉴于用户习惯，一般不会用到快速的连击交互以及右键的双击、长按或拖拽，这不符合交互手势的舒适度或简化易用的初衷。
2. 键盘交互支持
键盘支持大量的按键交互，除去一些全局的功能按键和组合快捷键，在网页交互应用中常见的还可以分为以下几种情况；
数值、字母、符号输入
某个指定按键单击/双击/连击/长按
用某个指定的或组合按键代表网页上的功能
tab 键切换网页选项
用空格切换下一屏
方位键切换选项或移动窗口视角
ESC 退出视频或全屏查看
在应用键盘按键功能的时候，除去那些作用明确大众悉知的按键功能，其他的按键操作应该保证界面上有指引有提示。
常见的交互动作组合
组合的交互动作常配合不能简单直接完成的任务，这里的组合指有两个及以上交互动作完成的类型，复杂的交互动作尽量少用，且尽可能的为用户提供操作指引，若非必要，费力不讨好；
鼠标左键长按横向拖拽
鼠标左键长按上下拖拽
鼠标左键长按任意拖拽
鼠标左键长按绕中心拖拽
键盘方位键与鼠标点击
键盘指定按键加鼠标点击
多个按键组合使用
指定按键配合鼠标长按
指定按键配合鼠标长按拖拽
组合动作主要分为以上 9 类，鼠标拖拽的组合动作通常会细分来应对界面场景的应用，例如通过横向拖拽将一个竖放的圆柱物体旋转起来，那么垂直的拖拽必然是没办法转动起来的，而且左右还会决定拖拽的方向。
交互影响的元素
简单来讲，无非就是看得见的元素、听得见的元素。听得见的元素无非就一个声音，讲深一点，也就涉及一些音效的交互控制。而看得见的元素则会相对丰富很多，如果再次细分的话还可以归为以下几种情况；
颜色（例如内容被选取时的颜色变化）
文字（所有文字相关的样式及状态）
图形（所有静态可见图形的样式变化）
动画（所有的动态内容或交互动效）
按钮（所有可操作的按钮及多状态呈现）
控件（页面中用于交互的控件元素）
模型（所有可交互的三维内容）
1. 常见变化形式
位置变化、透明度变化、角度变化、大小变化、形状变化、颜色变化、翻转效果、特效变化
网页交互的概念
web 端的交互概念即触发到呈现的过程。用户可以使用交互设备进行事件触发或变量，页面则将内容进行对应的呈现。其中交互过程主要影响的事件由“可交互的元素“、“功能交互“、“转场切换“构成。
页面内容呈现通常分为“默认时“、“选择时“、“运行时”三个时态（鼠标短暂的点击时属于“选择时”，若长按有内容影响则属于“运行时”），因此在网页交互的过程中，我们需要考虑好这三种完整的状态时呈现形式，另外在考虑补充合适的动效进行过滤或信息反馈。归根到底网页的交互概念就是控制内容呈现罢了，这是网页价值的本质。
Web 端内容呈现结构
web 端内容呈现的结构应该算是页面交互的范畴吧，其实上网页的页面并不只是长页面的形式，实际上会有更多种结构可用。因为电脑显示器更大的缘故，web 端结构上比移动端更加灵活，同时根据产品的性质也有需要考虑移动端响应式的需求，一般来讲这些页面结构可以分为以下六类：
上下长屏滚动结构：通过长页面布局内容，页面滚动查看信息
全屏上下切换结构：每次定焦一屏的范围显示内容，通过滚轮或按钮上下切屏
全屏左右切换结构：同样是定焦一屏显示内容，但采取左右切换结构
全屏页面覆盖结构：基于全屏定焦显示，页面通过覆盖式切换或跳转，甚至鼠标滚轮深入或浅出页面。
自适应平铺结构：适用于页面模块小而简单的时候，直接将模块在屏幕内一个个展开即可，一屏放不下时可以换行或继续平铺并定焦
三维场景结构：将内容场景 3D 化，通常导航或部分 UI 控件会在屏幕上固定，然后可以采取定向镜头伸缩查看，也可以是环绕中心与自由移动查看内容信息
网页的组成区块通常分为五大类型，即导航、面包屑、背景、内容呈现、弹出框。菜单导航栏通常分为顶部导航、侧边导航、底部导航、组合导航四大类，也有个别是通过点击弹出的导航。内容布局则更是五花八门了，是板式与技巧的呈现了。
14 种视觉层创意形式
个别产品本身也是创意的一部分，有一些可能界面交互平平，但是却有着魔性或引人关注的产品内容。而这里整理了些比较典型的视觉展现形式和交互创意形式的案例，这些方式通常可以根据产品的定位与特色进行组合设计和开发呈现，让你的网站更富有创意和较好的视觉体验；
1. 几何色块搭配文案
色块搭配标题文案，简约大气有视觉冲击力，再也不用担心没有图片或插画素材了
2. 精美大图背景搭配内容
采用精美大图背景搭配文案或交互控件，精美的图片本身就很抢眼，再搭配标题大字，瞬间就使得页面有冲击感有层次，常见于游戏官网或活动专题
3. 关联插画或图标搭配文案
采用小范围的插画或图标来表达服务或产品优势，搭配文案说明，风格统一精致耐看。常见于服务描述或产品说明模块应用
4. 留白大图搭配文案
将某个产品或其他元素放大显示再结合极简的排版说明，有较好的视觉冲击力和产品凸显效果，同时留白保证呼吸感和减少视觉噪点，使得用户能够更加专注产品图
5. 动态的背景或微动效装饰
应用动态背景或微动效的元素装饰，有较好的内容吸引力或氛围渲染力，可以展现更多的产品细节或丰富画面层次感，不过也比较考验视频本身或动效装饰自身质量
6. 点线面装饰与文案排版
应用简单点线面元素去装饰界面，再结合有对比有版式的文案排版。页面简洁美观，适合简约干净少图的页面模块
7. 栅格化应用与板式跳跃率
应用栅格化与版式跳跃率，使界面整体充满平面艺术，富有节奏感且不显凌乱。在日本的网页设计上有大量应用
9. 充满个性的视觉装扮
采用卡通化、科技感、故障效果、毛玻璃效果、赛博朋克风、手绘插画等视觉风格，来打造符合产品的特殊视觉效果，为网页印象加分，提升品牌感染力
10. 引用 3D 视觉装饰
运用 3D 视觉搭建页面场景，常见的有 3D 图标、3D 动效或 3D 产品大图等，有较强画面立体感和表达能力，视觉新颖让人眼前一亮，也是当前的一种视觉趋势效果
11. 产品元素或其他元素来填充背景
将品牌元素进行弱化处理后作为背景墙，凸显个性和丰富画面，结合微动效可以有进一步的效果增强
12. 矩形陈列或卡片陈列
将内容模块用矩形陈列显示或卡片陈列，Win10 菜单或 WP 系统的手机桌面有较好体现，特点是干净利落模块分明，适合同类模块较多的场景进行排列显示
13. 极致的简约
采用极简的方式呈现内容核心，可以是一张图一段字、一段文案排版等，总之就这么简单的搞定了
14. 魔幻或神秘感界面呈现
如示例网址一样，魔幻且神秘，有着迷之吸引力和趣味性，不过需要慎用，比较恶搞。而适当给出一些神秘感，可以使得页面内容更有吸引力，用户更愿意去点击尝试。
24 种交互层创意形式
主要是关于页面内容元素交互时的创意形式讲解，这里不对交互动效或特效细节进行过多说明，因为怎么去动又或者用什么样的特效去呈现实在数不清说不完，如果有兴趣可以参考一下文中的精选案例视频整理和提供的一些体验合集地址。
1. 光标跟随动画
会使页面上的元素根据光标的位置或移动产生相应变换，增加页面的互动性与趣味，适用于装饰或加强背景层次感，在特定的场景也可以使整套控制 UI 往鼠标移动的方向微微靠近，结合菲兹定律公式，距离的不断缩减也能够加快选中的效率）
2. 鼠标悬浮动画
简单易用的鼠标悬浮动画，用于聚焦显示或 Tooltip 说明，常用与内容选中状态区分或元素细节展示，加上一组好的动效创意非常能够凸显个性，使用户感到惊喜为体验加分
3. 鼠标点击特效
由鼠标点击进行触发，基本样式即点击状态显示，触发后的特效可以是图标动画、光效、音效、界面动画等，游戏场景中较为常见，点击后不仅有光效反馈还有音效附和，这是一种触发反馈效果。
4. 鼠标长按特效
当鼠标长按某个按钮时持续出现的特殊效果，一般是持续鼠标点击的特效或维持某个元素的变化效果，通常对数值持续增减动作较为常见，可以代替连续的点击，交互更轻松。也或者是需要一定的加载时间所以用长按配合
5. 鼠标拖拽特效
通过鼠标点击长按某个元素进行移动的组合交互，一般用于拖拽移动、内容绘制、元素连接等。应用场景广，互动性较高，能为用户带来更多的参与感和趣味性，甚至制造小惊喜
6. 鼠标滚轮巧妙的联动效果
主要用于页面某个值的控制或页面滚动，在页面滚动的时候可以配合控制元素变化来实现更具创意的展现效果，通常元素透明度、位置、大小、序列图都可以控制
7. 鼠标选中自动展开
鼠标经过选项时自动展开选项并聚焦，可以省去鼠标点开的动作，但不适用于选项内容较多且内容密集的场景
8. 按键与鼠标配合触发
通过指定按键和鼠标配合交互进行触发，适用于同界面的复杂交互场景，且存在某些变量需要鼠标控制。如果你的网页内交互丰富且包含变量元素，不妨试试看
9. 模块或分页加载动效
在页面滑动或分页信息加载时，界面构成元素有序的缓入进场。采用流畅的动效演示数据加载的过程，缓解数据加载渲染压力的同时，使得用户可以更加从容不迫地浏览信息，让界面呈现更加精致优雅
10. 趣味转场或加载等候
应用转场效果与 Loading 动画，运用某个元素变大覆盖或页面移动交替转场，而非生硬的直接替换，使得页面切换更有趣味和层级关系体现。再对加载较慢的内容补充 Loading 动画，缓解用户焦虑的同时还能延展品牌信息
11. 大图或多图轮播应用
精美的图片总是想要放大看，看了还想看。运用超大的轮播图展示与沉浸式功能布局，满足用户操作与大图赏析
12. 内容穿插滚动
运用特殊的图层顺序结构，在页面滚动查看时，形成奇妙的元素穿梭视感。通常会穿梭替换背景或让元素接力，这样相比静态写实的页面滚动时会更有层次感
13. 内容自动生成
输入关键内容后，页面自动生成结果进行呈现，整个过程可以是缓慢有序的，适用于降压或画面创意生成的产品，可以让用户感受整个过程与细节变化
14. 游戏互动模式
将产品内容以游戏的形式或交互呈现，让内容充满趣味和互动性，使得用户在参与游戏互动的过程中打破了常规的阅读体验
15. 三维或全景空间
建立一个三维或者全景空间进行查看或操作，再赋予操作按钮或说明，实现 3D 场景的交互与视觉效果，常用与地图全景查看或 3D 游戏应用，可以巧妙的结合产品 3D 模型，打造非凡的互动体验
16. 一镜到底的视角呈现
打造一个非平面的视觉场景。用鼠标点击或滚轮联动交互利用分层的元素变化，营造出由近到远或由上至下的一镜到底的视角穿梭体验。界面场景切换更加自然，还有超强的空间感与趣味性，让人难以忘怀如临其境。
17. 按键交互效果
将某些功能或任务引用按键进行交互或触发。常使用字母、数字、空格、方位键，界面需要有提示对用户进行指导。
18. 个性的模块展现方式
常见的有弹窗、抽屉、卡片展开、转盘等，通过个性轻松的显示结构与交互方式也能让人眼前一亮。
19. 可交互的颜色或图形
对一些颜色或形状元素提供切换或 DIY 的空间，允许用户进行意料之外的交互或配置能力，提升网页趣味性或用户个性化需求满足。
20. 音视频媒体控制
围绕产品介绍的媒体内容，常见有视频或音频且支持基本交互控制，结合场景需求可以丰富交互的形式或更多媒体控制功能，例如长按快进、倒退、剪辑、混音等，常用于娱乐互动场景或音视频类产品。
21. 内容或窗口抖动
通过抖动进行报错或反馈，常见为密码输入错误时或游戏中受到伤害的场景，可伴随音效提示一起。使用场景不广泛，但是也可以进行创意应用，例如抖掉灰尘小游戏，长按元素抖动干净为止。
22. 打造仪式感
结合现实场景中的交互方式，打造相似的线上场景帮助用户共情带入，再配合交互和动效完成类似的动作，为用户带来仪式感和共情效果。
23. 有声交互
通过麦克风采集声音来影响交互，是一种声音的交互，如果网站支持，甚至可以语音交互，是一种少见的网页交互形式，并非传统的音视频控制而已。
24. 镜头交互
通过摄像头授权获取镜头画面进行交互，通常是一些镜头滤镜效果或者增强现实技术结合做交互创意，网页上少见新颖。
