多达75%的网站可信度来自其设计，而 94% 的第一印象也与设计相关。
具有简洁布局、严谨的配色和直观架构的网站可为用户提供卓越的体验，好的设计是潜在的转化机器和建立信任的机器。
而除了这些，现在很多网站开始把目光转移到交互动效设计，交互设计作为新秀横空出世。在这几乎人人都可以说上两句“用户体验”的信息社会，交互动效可以说是越来越“卷”，在本文中，我们来看看一些优秀的网站交互设计案例，和对浏览用户产生的印象。
1. 几何图形组合
突出特点：
雅致的强调色
锐利的线条和交替的明暗块
虽然该网站的整体印象是其丰富的留白空间，但它的吸引力在于将其与微妙的运动效果和循环动画、锐角对象和雅致的强调色相结合。
一旦开始滚动，主菜单导航就会从浅色模式切换到深色模式。交替的黑白块有助于突出某些重点内容。
2. 卧室里的自然
突出特点：
大量的空白
艺术和文案都突出了品牌的独特卖点
他们产品的自然元素一目了然，在网站的打开屏幕上出现了迷雾森林的形象，并伴随着合适的品牌宣传语“卧室中的自然”。在右上角，一个非常规的带圆圈的汉堡菜单图标打开了一个全屏导航，其中包含很少的文本和大量的空白区域。打开时，动画按钮还会将副本从“菜单”切换到“关闭”。
向下滚动页面，它对消息传递的使用变得非常明显。没有多余的文字，没有过多的视觉或书面内容的负担。
3. 国际航空与航天学院
突出特点：
醒目的颜色组合
主菜单上的流畅动画
快速加载界面
国际航空与航天培训学院纽瓦克 (IASTI) 网站提供了令人惊叹的色彩搭配、简单的导航和快速的用户体验。鉴于其“天体”性质，该网站主要是海军蓝色，带有醒目的霓虹蓝绿色和紫色和蓝色色调。
虽然大部分是静态的，但该网站通过动画主菜单图标变得栩栩如生，该图标遍布屏幕的右上方，以创建弯曲的视觉效果。该网站的主要页面在白色背景下以黑色字体清晰突出。
4. 室内设计
突出特点：
Shou屏大图
标志和菜单融为一体
简洁的布局
网站以在整个屏幕上显示的高分辨率专业照片拉开了用户旅程的序幕。白色logo和右上角的菜单图标与图像融为一体。
网站的其余部分使用非常简单的布局和设计，在图像后面排列成一列的短文本块。鼠标悬停效果将照片从另一个角度或位置更改为同一家的不同呈现方式。
屏幕两侧是两个文本链接：建筑和室内。他们将访问者带到专门针对这些不同专业领域的网站部分。
5. 空气消毒器
突出特点：
没有导航菜单
轻盈、通透的感觉
o3mist是一款家用空气除臭消毒器。他们的网站传达了通常与臭氧水发生器和类似物体相关的干净、最小的图像。
这些照片——以及整个网站覆盖——都被赋予了“朦胧”的感觉，这是另一个品牌印象。柔和的白色和蓝色色调、干净的字体和装饰的水滴与产品的优雅设计相得益彰。
没有菜单导航，整个用户旅程都在一个页面上完成。但是右侧有几个导航工具，例如进度指示器和支持按钮。
6. 全球媒体网络
突出特点：
打破常规的布局
强调色的优秀搭配
制作精良的动画
全球媒体网络 Wavemaker 的网站以冗长的交互式介绍开始，邀请用户通过点击来“突破”新的动效，同时传递创造性的信息来放大公司的工作内容。
登陆主页后，用户面临一个选择：点击代表公司工作、人员和故事的三张图片，或者前往以华丽效果在整个屏幕上打开的主菜单。
虽然大部分是深色的，但该网站也使用白色和橙色的强调色。三者形成鲜明对比，营造出非常鲜明的外观，让参观者的眼睛既愉悦又放松。
7. 赛车手旅程
突出特点：
醒目的绿色调
“快速”设计表示主题的运动
光滑的主菜单
卢卡斯·迪·格拉西 (Lucas Di Grassi) 是巴西 E 级方程式赛车手，在其辉煌的职业生涯中也参加过一级方程式赛车，该网站涵盖了他的整个职业生涯和偏离轨道的旅程。
该网站最初是黑白绿相间的，当用户滚动浏览不同的几何元素、曲线和角线时，该网站呈现出一些色块和运动，其中包含驾驶员预告时刻的视频片段。该网站是双语的，可以从英语无缝跳转到葡萄牙语。
主菜单在整个屏幕上打开，并在用户将鼠标悬停在链接上时以绿色效果为链接设置动画。
8. 克罗因
突出特点：
Shou屏复古 3D 美学
不一样的风格组合
动画和静态元素的混搭
这个网站一上线就轰动啦一时：迷幻的背景，带有缓慢旋转的光泽金属品牌标志，可以追溯到计算机生成的 3D 动画的早期。单击左上角的明暗模式开关会立即创建默认主题的“负片”。
全屏菜单打开一个黑色面板，左侧对齐大的白色文本。悬停效果将排版转换为轻量版。向下滚动，该网站呈现出更精致的基调：动画背景和视频、“邋遢”效果、各种字体和鼠标悬停效果都是该网站的亮点。
9. 奥西彭科
突出特点：
每个部分都被整齐地划分
精致的几何网格
炫酷的介绍动画
数字设计师 Roman Osypenko 的个人网站以一个华丽的动画显示他的名字开始，然后打开一个主要以黑暗为主题的网站，上面有一张带有轻微颗粒效果的棱镜照片，由右侧的粘性水平主菜单做布局的补充。
网站遵循一种划分板块的模式，每个板块都专注于 Osypenko 的职业生涯：他的技能、视频展示、设计方法等等。这些板块实际上由遵循非常精致的几何形状的线条分隔。
始终使用现代且清晰的无衬线字体，最后以捕获潜在客户的提交表单结束。
10. 设计工作室
突出特点：
自定义插图
极简设计
除了照片，没有其他颜色
黑色的自定义无衬线字体用于所有标题、菜单项和其他文本元素。主菜单导航从右上角的汉堡图标打开，包含网站的页面链接和手工插图。
该网站上唯一的彩色元素是图片。它们以 3 列的形状均匀排列。主页的其余部分包含更多自定义插图（其中一些是动画的），这些插图传达了该机构在做设计时不同阶段的工作计划。
11. 建筑设计网站
突出特点：
海量图像和折叠菜单
图片的水平卷轴展示
极简菜单
在Shou屏上方，全屏图像轮播显示，展示了公司的主要创作。只有左角的公司Shou字母缩写和右角的菜单在Shou屏展示。
在折叠菜单里，公司设计的建筑物类型被分好类型，并以水平移动的卷轴展示。这些卷轴的非常缓慢的移动使参观者可以轻松地查看每个建筑模型而无需暂停。
与公司相关的新闻部分结束了主页，并添加了除图像之外唯一的色彩。
本期优秀案例就分享就到这里了，你最喜欢哪个交互动效呢？