扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
一篇看懂网页端交互创意怎么做
2021-03-16 栏目：行业资讯 查看()
编辑导读：在浏览一些网页的时候，感觉空有一副美观的皮囊，却少了些什么。为什么不交互创新一下呢？比如从这个网页进去时，内容会有入场动效，用户就会很惊喜。那么，网页端交互创意怎么做呢？本文将从九个方面进行深入分析，希望对你有帮助。
我们探讨Web端的交互创意形式，不讲如何制作交互动效，也不针对B端或功能型产品讲解。放眼过去大量同质化或跟风的网站风格，空有一副美观的皮囊，却少了些什么，为何不交互创新一下呢？具有创意的交互必然能使一副黑白的画面瞬即点亮色彩。
你可能想有创意的交互能为网页带来什么？
挺多的，我举例一个连微动效都没有的静态网页你进去后也就看见的这样，那么如果这个网页进去时，内容会有入场动效，你是不是马上能感觉到这个网站有点儿东西，要抄起鼠标探索一番？换言之，好的交互创意甚至能让你产生心流模式，你通过鼠标到处点击，页面上不断的给出动画效果，然后你收获惊喜，最终促使你进行更多的尝试。
好了，说多了，就是希望为更多设计师提供设计思路或执行概念，帮助大家找到更多的创意灵感。
注：下文中有大量示例网址需要翻墙体验。
文章很长也很肝，图文并茂视频GIF样样有！所以大量GIF来袭警报，流量大户请入座。
一、首先了解Web端交互支持Web端交互围绕计算机为中心。主要涉及键盘鼠标两类设备的交互，个别网站的产品可能会涉及麦克风声音采集或摄像头应用。
现在的鼠标可以支持更多功能，但是通常来讲需要严格的考虑兼容问题，所以仅以鼠标左右键滚轮滚动以及光标映射选取为主；
光标选中/hover
左键单击
左键双击
左键连击
左键长按
左键按住拖拽
右键单击
右键双击
右键连击
右键长按
右键按住拖拽
滚轮滑动
以上所有交互都可以根据实际场景进行设定，不过鉴于用户习惯，一般不会用到快速的连击交互以及右键的双击、长按或拖拽，这不符合交互手势的舒适度或简化易用的初衷。
2. 键盘交互支持键盘支持大量的按键交互，除去一些全局的功能按键和组合快捷键，在网页交互应用中常见的还可以分为以下几种情况；
数值、字母、符号输入
某个指定按键单击/双击/连击/长按
用某个指定的或组合按键代表网页上的功能
tab键切换网页选项
用空格切换下一屏
方位键切换选项或移动窗口视角
ESC退出视频或全屏查看
在应用键盘按键功能的时候，除去那些作用明确大众悉知的按键功能，其他的按键操作应该保证界面上有指引有提示。
二、常见的交互动作组合组合的交互动作常配合不能简单直接完成的任务，这里的组合指有两个及以上交互动作完成的类型，复杂的交互动作尽量少用，且尽可能的为用户提供操作指引，若非必要，费力不讨好；
鼠标左键长按横向拖拽
鼠标左键长按上下拖拽
鼠标左键长按任意拖拽
鼠标左键长按绕中心拖拽
键盘方位键与鼠标点击
键盘指定按键加鼠标点击
多个按键组合使用
指定按键配合鼠标长按
指定按键配合鼠标长按拖拽
组合动作主要分为以上9类，鼠标拖拽的组合动作通常会细分来应对界面场景的应用，例如通过横向拖拽将一个竖放的圆柱物体旋转起来，那么垂直的拖拽必然是没办法转动起来的，而且左右还会决定拖拽的方向。
三、交互影响的元素简单来讲，无非就是看得见的元素、听得见的元素。听的见的元素无非就一个声音，讲深一点，也就涉及一些音效的交互控制。而看得见的元素则会相对丰富很多，如果再次细分的话还可以归为以下几种情况；
颜色（例如内容被选取时的颜色变化）
文字（所有文字相关的样式及状态）
图形（所有静态可见图形的样式变化）
动画（所有的动态内容或交互动效）
按钮（所有可操作的按钮及多状态呈现）
控件（页面中用于交互的控件元素）
模型（所有可交互的三维内容）
1.位置变化、2.透明度变化、3.角度变化、4.大小变化、5.形状变化、6.颜色变化、7.翻转效果、8.特效变化
web端的交互概念即触发到呈现的过程。用户可以使用交互设备进行事件触发或变量，页面则将内容进行对应的呈现。其中交互过程主要影响的事件由“可交互的元素“、“功能交互“、“转场切换“构成。页面内容呈现通常分为“默认时“、“选择时“、“运行时”三个时态(鼠标短暂的点击时属于“选择时”，若长按有内容影响则属于“运行时”)，因此在网页交互的过程中，我们需要考虑好这三种完整的状态时呈现形式，另外在考虑补充合适的动效进行过滤或信息反馈。归根到底网页的交互概念就是控制内容呈现罢了，这是网页价值的本质。
web端内容呈现的结构应该算是页面交互的范畴吧，其实上网页的页面并不只是长页面的形式，实际上会有更多种结构可用。因为电脑显示器更大的缘故，web端结构上比移动端更加灵活，同时根据产品的性质也有需要考虑移动端响应式的需求，一般来讲这些页面结构可以分为以下六类；
上下长屏滚动结构；
通过长页面布局内容，页面滚动查看信息
全屏上下切换结构；
每次定焦一屏的范围显示内容，通过滚轮或按钮上下切屏
全屏左右切换结构；
同样是定焦一屏显示内容，但采取左右切换结构
全屏页面覆盖结构；
基于全屏定焦显示，页面通过覆盖式切换或跳转，甚至鼠标滚轮深入或浅出页面，文中一镜到底的示例便是如此
一镜到底示例位置《24种交互层创意形式->16.一镜到底的视角呈现》
自适应平铺结构；
适用于页面模块小而简单的时候，直接将模块在屏幕内一个个展开即可，一屏放不下时可以换行或继续平铺并定焦
三维场景结构；
将内容场景3D化，通常导航或部分UI控件会屏幕上固定，然后可以采取定向镜头伸缩查看，也可以是环绕中心与自由移动查看内容信息
网页的组成区块通常分为五大类型，即导航、面包屑、背景、内容呈现、弹出框。菜单导航栏通常分为顶部导航、侧边导航、底部导航、组合导航四大类，也有个别是通过点击弹出的导航。内容布局则更是五花八门了，是板式与技巧的呈现了。
14种视觉层创意形式
个别产品本身也是创意的一部分，有一些可能界面交互平平，但是却有着魔性或引人关注的产品内容。而这里整理了些比较典型的视觉展现形式和交互创意形式的案例，这些方式通常可以根据产品的定位与特色进行组合设计和开发呈现，让你的网站更富有创意和较好的视觉体验；
1. 几何色块搭配文案（色块搭配标题文案，简约大气有视觉冲击力，再也不用担心没有图片或插画素材了）
示例地址：https://minimalmonkey.com/ #是个技术栈，有多种交互代码资料哦
（采用精美大图背景搭配文案或交互控件，精美的图片本身就很抢眼，再搭配标题大字，瞬间就使得页面有冲击感有层次，常见于游戏官网或活动专题）
示例图源：https://dribbble.com/shots/6157473-C4D-Essential-Training-Part-2/attachments/1320261
（采用小范围的插画或图标来表达服务或产品优势，搭配文案说明，风格统一精致耐看。常见于服务描述或产品说明模块应用）
示例地址： #国内
（将某个产品或其他元素放大显示再结合极简的排版说明，有较好的视觉冲击力和产品凸显效果，同时留白保证呼吸感和减少视觉噪点，使得用户能够更加专注产品图）
（应用动态背景或微动效的元素装饰，有较好的内容吸引力或氛围渲染力，可以展现更多的产品细节或丰富画面层次感，不过也比较考验视频本身或动效装饰自身质量）
示例地址：
https://www.ferrari.com/zh-CN/auto/car-range?from=GWvideo #国内
示例地址：https://humaan.com/
（应用简单点线面元素去装饰界面，再结合有对比有板式的文案排版。页面简洁美观，适合简约干净少图的页面模块）
示例地址：
（应用栅格化与板式跳跃率，使界面整体充满平面艺术，富有节奏感且不显凌乱。在日本的网页设计上有大量应用）
示例地址：https://www.uzabase.com/jp/
（采用卡通化、科技感、故障效果、毛玻璃效果、赛博朋克风、手绘插画等视觉风格，来打造符合产品的特殊视觉效果，为网页印象加分，提升品牌感染力）
示例地址：?chapter=1 #用怀旧复古的风格呈现历史故事
（运用3D视觉搭建页面场景，常见的有3D图标、3D动效或3D产品大图等，有较强画面立体感和表达能力，视觉新颖让人眼前一亮，也是当前的一种视觉趋势效果）
示例地址：https://www.aliyun.com/?utm_content=se_1008364713 #国内地址
（将品牌元素进行弱化处理后作为背景墙，凸显个性和丰富画面，结合微动效可以有进一步的效果增强）
示例地址： #国内
（将内容模块用矩形陈列显示或卡片陈列，Win10菜单或WP系统的手机桌面有较好体现，特点是干净利落模块分明，适合同类模块较多的场景进行排列显示）
示例地址： #矩形分割的模块入口
（采用极简的方式呈现内容核心，可以是一张图一段字、一段文案排版等，总之就这么简单的搞定了）
示例地址：
（如示例网址一样，魔幻且神秘，有着迷之吸引力和趣味性，不过需要慎用，比较恶搞。而适当给出一些神秘感，可以使得页面内容更有吸引力，用户更愿意去点击尝试。）
示例地址：
示例地址：https://onedesigncompany.com/work #很多内容你不用鼠标选中，根本不知道有什么等着你
主要是关于页面内容元素交互时的创意形式讲解，这里不对交互动效或特效细节进行过多说明，因为怎么去动又或者用什么样的特效去呈现实在数不清说不完，如果有兴趣可以参考一下文中的精选案例视频整理和提供的一些体验合集地址。
1. 光标跟随动画（会使页面上的元素根据光标的位置或移动产生相应变换，增加页面的互动性与趣味，适用于装饰或加强背景层次感，在特定的场景也可以使整套控制UI往鼠标移动的方向微微靠近，结合菲兹定律公式，距离的不断缩减也能够加快选中的效率）
示例网址：https://www.bilibili.com/ #国内地址
示例地址：https://home.miui.com/ #国内 即时渲染粒子动画与鼠标跟踪
（简单易用的鼠标悬浮动画，用于聚焦显示或Tooltip说明，常用与内容选中状态区分或元素细节展示，加上一组好的动效创意非常能够凸显个性，使用户感到惊喜为体验加分）
示例地址：https://www.makemepulse.com/
示例地址：https://www.eone-time.com/ #如果是一个完整动画缓慢播放完会更有叙述性
（由鼠标点击进行触发，基本样式即点击状态显示，触发后的特效可以是图标动画、光效、音效、界面动画等，游戏场景中较为常见，点击后不仅有光效反馈还有音效附和，这是一种触发反馈效果）
示例地址：https://lab.hakim.se/checkwave/
（当鼠标长按某个按钮时持续出现的特殊效果，一般是持续鼠标点击的特效或维持某个元素的变化效果，通常对数值持续增减动作较为常见，可以代替连续的点击，交互更轻松。也或者是需要一定的加载时间所以用长按配合）
示例网址：https://lab.hakim.se/bacterium/01/ #通过长按持续增加细菌圆点
（通过鼠标点击长按某个元素进行移动的组合交互，一般用于拖拽移动、内容绘制、元素连接等。应用场景广，互动性较高，能为用户带来更多的参与感和趣味性，甚至制造小惊喜）
示例内容：阿里内测的 Real 3D
示例地址：
（主要用于页面某个值的控制或页面滚动，在页面滚动的时候可以配合控制元素变化来实现更具创意的展现效果，通常元素透明度、位置、大小、序列图都可以控制）
示例地址：https://www.eone-time.com/
示例地址：https://www.apple.com.cn/macbook-pro-16/ #Apple国内官网
（鼠标经过选项时自动展开选项并聚焦，可以省去鼠标点开的动作，但不适用于选项内容较多且内容密集的场景）
示例网址：
（通过指定按键和鼠标配合交互进行触发，适用于同界面的复杂交互场景，且存在某些变量需要鼠标控制。如果你的网页内交互丰富且包含变量元素，不妨试试看）
示例地址：https://lab.hakim.se/bacterium/01/ #鼠标拖拽配合空格键长按
（在页面滑动或分页信息加载时，界面构成元素有序的缓入进场。采用流畅的动效演示数据加载的过程，缓解数据加载渲染压力的同时，使得用户可以更加从容不迫的浏览信息，让界面呈现更加精致优雅）
示例地址：https://www.apple.com.cn/macbook-pro-16/ #Apple国内官网
（应用转场效果与Loading动画，运用某个元素变大覆盖或页面移动交替转场，而非生硬的直接替换，使得页面切换更有趣味和层级关系体现。再对加载较慢的内容补充Loading动画，缓解用户焦虑的同时还能延展品牌信息）
示例地址：https://teatrlalka.pl/en
（精美的图片总是想要放大看，看了还想看。运用超大的轮播图展示与沉浸式功能布局，满足用户操作与大图赏析）
示例地址：https://www.carpediemsantorini.com/
郑重申明：勤人信息以外的任何单位或个人，不得使用该案例作为工作成功展示！