01

首先了解Web端交互支持

1. 鼠标允许的交互

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

• 光标选中/hover

• 左键单击

• 左键双击

• 左键连击

• 左键长按

• 左键按住拖拽

• 右键单击

• 右键双击

• 右键连击

• 右键长按

• 右键按住拖拽

• 滚轮滑动

2. 键盘交互支持

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

• 数值、字母、符号输入

• 某个指定按键单击/双击/连击/长按

• 用某个指定的或组合按键代表网页上的功能

• tab键切换网页选项

• 用空格切换下一屏

• 方位键切换选项或移动窗口视角

• ESC退出视频或全屏查看

02

常见的交互动作组合

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

• 鼠标左键长按横向拖拽

• 鼠标左键长按上下拖拽

• 鼠标左键长按任意拖拽

• 鼠标左键长按绕中心拖拽

• 键盘方位键与鼠标点击

• 键盘指定按键加鼠标点击

• 多个按键组合使用

• 指定按键配合鼠标长按

• 指定按键配合鼠标长按拖拽

03

交互影响的元素

• 颜色（例如内容被选取时的颜色变化）

• 文字（所有文字相关的样式及状态）

• 图形（所有静态可见图形的样式变化）

• 动画（所有的动态内容或交互动效）

• 按钮（所有可操作的按钮及多状态呈现）

• 控件（页面中用于交互的控件元素）

• 模型（所有可交互的三维内容）

常见变化形式：

• 位置变化

• 透明度变化

• 角度变化

• 大小变化

• 形状变化

• 颜色变化

• 翻转效果

• 特效变化

04

网页交互的概念

05

Web端内容呈现结构

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

1. 几何色块搭配文案

（色块搭配标题文案，简约大气有视觉冲击力，再也不用担心没有图片或插画素材了）

2. 精美大图背景搭配内容

（采用精美大图背景搭配文案或交互控件，精美的图片本身就很抢眼，再搭配标题大字，瞬间就使得页面有冲击感有层次，常见于游戏官网或活动专题）

3. 关联插画或图标搭配文案

（采用小范围的插画或图标来表达服务或产品优势，搭配文案说明，风格统一精致耐看。常见于服务描述或产品说明模块应用）

4. 留白大图搭配文案

5. 动态的背景或微动效装饰

（应用动态背景或微动效的元素装饰，有较好的内容吸引力或氛围渲染力，可以展现更多的产品细节或丰富画面层次感，不过也比较考验视频本身或动效装饰自身质量）

示例地址：https://humaan.com/

6. 点线面装饰与文案排版

（应用简单点线面元素去装饰界面，再结合有对比有板式的文案排版。页面简洁美观，适合简约干净少图的页面模块）

7. 栅格化应用与板式跳跃率

（应用栅格化与板式跳跃率，使界面整体充满平面艺术，富有节奏感且不显凌乱。在日本的网页设计上有大量应用）

9. 充满个性的视觉装扮

（采用卡通化、科技感、故障效果、毛玻璃效果、赛博朋克风、手绘插画等视觉风格，来打造符合产品的特殊视觉效果，为网页印象加分，提升品牌感染力）

10. 引用3D视觉装饰

（运用3D视觉搭建页面场景，常见的有3D图标、3D动效或3D产品大图等，有较强画面立体感和表达能力，视觉新颖让人眼前一亮，也是当前的一种视觉趋势效果）

11. 产品元素或其他元素来填充背景

（将品牌元素进行弱化处理后作为背景墙，凸显个性和丰富画面，结合微动效可以有进一步的效果增强）

12. 矩形陈列或卡片陈列

13. 极致的简约

（采用极简的方式呈现内容核心，可以是一张图一段字、一段文案排版等，总之就这么简单的搞定了）

14. 魔幻或神秘感界面呈现

（如示例网址一样，魔幻且神秘，有着迷之吸引力和趣味性，不过需要慎用，比较恶搞。而适当给出一些神秘感，可以使得页面内容更有吸引力，用户更愿意去点击尝试。）

06

24种交互层创意形式

1. 光标跟随动画

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

2. 鼠标悬浮动画

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

3. 鼠标点击特效

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

4. 鼠标长按特效

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

5. 鼠标拖拽特效

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

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

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

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

7. 鼠标选中自动展开

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

8. 按键与鼠标配合触发

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

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

9. 模块或分页加载动效

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

10. 趣味转场或加载等候

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

11. 大图或多图轮播应用

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

12. 内容穿插滚动

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

13. 内容自动生成

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

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

14. 游戏互动模式

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

15. 三维或全景空间

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

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

16. 一镜到底的视角呈现

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

17. 按键交互效果

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

示例地址：https://www.julianabrams.co.uk/ #基于键盘即可完成所以浏览

18. 个性的模块展现方式

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

19. 可交互的颜色或图形

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

20. 音视频媒体控制

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

示例地址：http://because-recollection.com/london-grammar #一个优秀的媒体交互网站

21. 内容或窗口抖动

22. 打造仪式感

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

示例地址：https://issuu.com/matskafte/docs/mathias_skafte_andersen_portfolio_f #书籍预览的场景打造

23. 有声交互

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

24. 镜头交互

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

07

网页创新设计的方法

1. 开发者的痛点与解决方案

2. 网页创新设计的策略考虑

》敏捷开发：

08

网页框架如何搭配创意形式

1. 明确产品定位

• 企业官网风格较为庄重正式，个性化体现少且相对板正些；

• 品牌网内容是多元化的，视觉与交互都更具个性化，没有太多表现限制，传递品牌优势或能力为主；

• 营销网站更加体现产品或业务能力，并且都有相关咨询或消费入口，图片插画应用不会少；

• 门户网站是指提供某类综合性互联网信息资源并提供有关信息服务的应用系统，内容多紧凑型；

• 论坛相关又称BBS，是聚集用户进行资讯、情感、娱乐等领域的电子公告系统，导航多，偏资讯；

2. 信息框架决定板式细节

• 补充插画搭配文案，采用小范围插画弥补单调

• 多张图可陈列摆放或通过大小对比叠加摆放，也以栅格化错位摆放，再适当的配合切换控件

• 小图片配合加大文案叠加显示，突出文字，图片为辅

• 在能够保证内容播放清晰的情况下可以多个陈列摆放，鼠标移入目标时可以直接播放达到视频预览效果

通常图文视频混合的情况很少见，视觉焦点不好控制，其中视频做背景是最好处理的，但内容信息不易过多：

• 视频做背景，少量图文或按钮搭建页面框架，确保视频内容不被过分遮挡，也能较好兼容这些元素

• 在视频未播放前，也可以叠加遮照与相关图文信息或按钮控件，点击播放按钮后，收起即可

• 通过鼠标悬浮选中目标后，Tips浮框显示额外的图文视频信息或按钮控件即可

• 小范围播放视频支持全屏，使得图片文字视频能够在有限的范围显示更多有效内容

• 半沉浸式全屏视频交互，采用幽灵式风格将图文按钮控件等往屏幕边缘分布，留出核心区域交互视频或观看

因为是三维的场景，所以需要考虑到三维场景下的视角形式与操作方式：

• 固定视角，有一个固定的场景和视角，可以通过交互使场景的内容发生变化，内容和操作可以轻量化

• 穿梭视角，通过交互场景中的图或模型，形成向前后穿梭的效果，适合多层内容逐步查看或过程演变

• 自由视角，控制元素或视角在场景中自由移动，或者围绕某个元素全景查看，适合细节展示或空间体验

• 固定操作，指固定的操作按钮布局或通过键盘控制场景变化，适合场景中效果简易有规律的产品

按钮是网页中最常见的交互控件，是页面扭转或功能启用的基础：

• 色块按钮，色块式的按钮，有视觉明显易触达的优点

• 线性按钮，用于弱化显示或透出背景内容时较为常见的按钮样式

• 鼠标悬浮按钮，不直接显示而通过鼠标经过相关模块时显示对应按钮

控件组适用于复杂场景的任务交互，通常由多个按钮或控件单元组成，特点就是控件单元多模块占比大：

• 覆盖式卡片，通过卡片承载控件，控件多了就用更大的卡片呗

• 幽灵式控件，线性样式展示控件来兼容背景，并结合鼠标悬浮加强选择样式

• 为控件留白，留出控件交互的区域，通常采用留白或纯色背景来陈列控件组

• 鼠标悬浮展开，结合图标或直接隐藏，在鼠标悬浮选中时显示相关控件详情

• 展开收起式控件组，小面积显示核心控件，配合展开收起按钮隐藏更多

3. 交互创意如何下手

1）基本交互发力点

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

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

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

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

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

2）锦上添花交互发力点

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

09 

结语

在此文中大量的提供了创新的方法和形式，视觉效果和交互动效的细节仍有很大的发挥空间。虽然码的字有点多，但是能够消化下来一定能有所帮助，如果还是存在疑问亦可以关注联系作者