交互式网站是指以各种方式和效果与用户进行交互的参与性站点体验。我们通过一些示例示例仔细研究它们为什么运行良好。

网站加载时间是用户浏览网站的最大障碍之一。不管您花费多少金钱和精力来建立一个出色的网站，如果加载一个页面要花费两秒钟以上的时间，那么用户离开页面的可能性就更大，而数据却不多。
 
以此方式，用户可能会负面地感到加载时间很长。

但是，加载屏幕可能是一个机会。它正在引起用户的注意，所以让我们充分利用它。

加载屏幕是一个特殊的惊喜机会，可以用动画打动用户。这是展示品牌个性，吸引和激发用户的新机会。

来源Dribbble

来源Dribbble

在许多情况下，使用技术来显示在加载栏中访问页面之前的剩余时间，以使用户了解其进度。

理想情况下，加载屏幕可以提供有趣和互动的体验，例如在您等待时玩游戏。

来源Dabble

重要的是，加载并不总是给用户带来负面的体验。有时，它可能是网站上最令人兴奋的部分。

通过动画滚动组织信息

滚动是用户最简单，最直观的交互方式之一。

让我们看一些利用滚动动画使用户感觉到网站内动态运动的典型技术。

作者Janos Nyujto

来源Dribbble

滚动触发动画

当用户滚动浏览网站时触发特定动画的技术。这是一件神奇的事，将视觉效果变为现实，给人一种错觉，即网站随着用户的移动而实时移动。

 

视差滚动（也称为非对称滚动）

作为类似的技术，视差滚动也是一种流行的技术。当用户滚动浏览页面时，屏幕上的两个对象以不同的速度移动。

前景物体通常比背景物体移动得快，从而导致类似3D的移动深度。

来源Dribbble

来源Dribbble

滚动页面过渡

此技术跳至下一个屏幕或内容，并更改了整个页面，而不是传统的平滑滚动。这不仅合并了新的页面元素，而且在某些情况下还引入了完全不同的调色板，每次滚动时都带来新的惊喜。

来源Dribbble

来源Dribbble

滚动动画可以帮助用户以清晰的内容层次和结构来理解和打动。

 

使用滑块和图像轮播中断垂直移动

随着移动应用滑动次数的增加，旋转和显示网站内容的轮播在网站上变得越来越普遍。

通过合并水平滚动，这是使用户摆脱垂直滚动的无休止单调的必要手段。

通过利用轮播功能，您无需将所需的信息一次性打包到一个页面中，而是可以将网站的各个元素组织成一小块，以便用户可以一点一点地浏览它们。

当内容格式相似时，此技术特别有用，它使您可以查看产品图像，配置文件，用户评论等。这对于引入诸如颜色不同的产品之类的变体也将很有用。

对于轮播动画，请考虑各种样式，例如简单的左右移动，卡片随机播放类型，复古轮播类型等，如参考示例中所示。

让我们打破导航菜单

除了滑动以外，汉堡菜单是移动应用程序中的常见趋势之一，并且在常规网站上普遍存在。用户很清楚导航菜单并不总是可见的，但是可以根据需要进行操作。

许多设计人员会利用全屏导航，因为用户更喜欢查看菜单。这使您可以实现巨大的字体，缩略图，花式悬停动画等。

考虑可以强调导航菜单的设计，例如正常隐藏它并在需要时将其放大。

 

用问卷形式代替查询表格

输入用户信息是使用网站最麻烦的部分。通常，用户不愿意在网站上提供其信息。为了缓解这种情况，请尝试使用问答式调查，而不要填写顽固而平淡的表格。

越来越多的网站采用交互式问题格式来注册和登录表单。通过使问题易于理解和熟悉以及根据需要选择答案，可以减轻用户的负担。通过一次提出一个问题，用户可以感觉好像在对话中。

 

当心微观互动

适度和小动作是交互式网站设计中动画的关键。由于动画的目的通常是反馈给用户的，因此可以在不知不觉中最有效地使用它是可以理解的。

过多关注的动画可能会引起用户的注意，并且反馈不佳。这就是微交互作用的体现。

当用户与页面进行交互时，微交互可以表示较小的移动，并且具有广泛的类别和样式。例如，将鼠标悬停在某物上，关闭窗口，拉动以刷新页面，星级，书签，通知，添加到购物车，单击图标等等。

流行的微交互动画包括将按钮更改为绿色，将图标更改为选中标记，以及类似冲击波的悬停式可爱点击。

微交互的目的是让用户知道页面更改已成功，因此请尝试设计一种简单有效的动画。

最后

它曾是怎样的？用户访问网站的目的不同，但最终，他们不仅要找到所需的信息，还要对其进行体验。

为什么不使用用户参与式交互并通过参考此处介绍的提示来创建一个有吸引力的网站。

原作者： Jamahl Johnson