网页设计中的滚动交互新技巧

本文格式为Word版，下载可任意编辑——网页设计中的滚动交互新技巧网页设计中的滚动交互新技巧

假设你想让你的网页用户停留时间足够长，你首先理应让内容好玩，让等待也足够好玩才行。下面给大家介绍网页设计色调搭配技巧，一起来学习吧!

网页设计中的滚动交互新技巧

重生的滚动交互

理由很简朴，移动端设备的兴起，让滚动交互重获新生。随着移动端用户数量逐步超过桌面端的用户数量，UI和UX设计师会不断地针对交互和UI举行调整。移动端的用户是如此之多，滚动交互的重要性就显得越来越明显。

与此同时，另外一件事情也显得分外重要。为了确保能够尽可能多、尽可能便当地访问互联网，裁减页面跳转，尽量通过滚动欣赏来提高效率，这也是滚动交互热度提升的一个重要理由。社交媒体中常见的动态加载技术的展现，让用户可以一边滚动欣赏一边加载自适应的内容，成为了可能。

此外，我们之前一向重视的首屏，在今天貌似也没有那么重要了。研究说明，用户真的不介意向下滚动欣赏大量的内容，换句话说，页面的全体内容都会在用户的滚动欣赏过程中逐步开展，首屏的重要性无疑被稀释了。

当然，如今的滚动需要相应的技术支持，也正是在CSS和JS技术有所进展之后，滚动交互才被界定为真正有意义的设计模式。在此之前，通过滚动交互来视觉化地呈现故事，本身是一件相对困难的事情，随后技术的进展，让繁杂的UI布局，微妙的动效和特效参与到滚动交互过程中，从而有了今天的全新的滚动交互。

不过一旦打定借助长滚动式的页面来呈现故事的时候，那么你就要充分运用一切手段图形、动画、图标等，借用电影般的表现力和戏剧化的起承转合，将用户的吸引力牢牢地拉扯住。

事实上，一些混合型的设计正在占据滚动交互的主流。就像UXPin的首页，页面采用的是长滚动式设计，但是其中包含了一个固定不动的窗口，而窗口内的内容是随着滚动而变更的。这种全新的滚动交互模式带来的体验和以往传统的滚动式交互截然不同。

滚动式交互适合你吗?

每种技术、每款工具都有其特定的使用环境，相应的，有人会热爱它们，有人会厌恶它们，这都是很自然的事情。所以，在你使用全新的滚动交互的时候，你需要对于自己的产品、需求和滚动交互本身有足够明显的判断。

滚动交互的优点：

·激励交互。不同的交互和元素会不断刺激用户，是一种好玩的故事呈现方式，激励用户与页面举行互动，更加是视差滚动。

·更加快速。滚动交互比起繁杂的页面条状更加高效，并不会减缓或者限制整个用户体验。

·引诱用户。滚动式的设计会促进用户交互，提高用户的停留时间，让用户持续挖掘对他们有吸引力的内容。

·响应式设计。这些页面挑弄广场能够兼容不同尺寸、不同设备屏幕，滚动式交互本身就有助于简化设备和屏幕尺寸间的差异。

·手势交互。滚动交互始终同触摸机制结合在一起，向下滚动页面比起使用向下按钮要便当得多，在移动端上尤其是如此。

·愉悦体验。较少的点击和直觉式的'交互，加上好玩的内容和多样的动效，滚动交互给用户带来的体验是愉悦的。

滚动交互的缺陷：

·顽固的用户。不要问为什么，总会有一片面用户抗拒新东西。尽管如此，新的滚动交互照旧广泛地普及开来。尤其是在移动端上，而且大量用户已经习惯了这一技术。

·SEO上的缺陷。大量的内容被搜集到了一个页面当中，对于SEO可能会有负面的影响。

·迷失方向。用户可能会在滚动欣赏过程中迷失方向，这是客观存在的问题。

·导航困难。大量的内容被搜集到一页当中，用户无法像以前一样“回到”上一页。通常可以借助顶部或者侧边的固定导航，来解决这个问题。

·访问速度。诸如视频和动效这种多样、繁杂而又占空间的内容要加载，在访问和加载速度上可能不如以前那么网站那么快速。

·没有页脚。绝大多数可以无限滚动的网站都通常没有设置页脚，所以，我们可以设计一个常驻底部的页脚，除开这些优缺点，长滚动式的网页在某些特定的功能上分外突出。

它分外适合用来呈现内容，以及：

·承载大量的移动端内容

·呈现频繁更新的内容博客和微博客

·以单一方式呈现大量内容譬如信息图表

·由于信息负荷量大而不适合呈现富媒体加载时间长

诸如社交媒体这样的网站适合长滚动页面来呈现，而类似电商类网站，需要导航来导向特定内容的网站，那么适合使用相对保守的页面导航设计，并且操纵页面长度。

和大量设计趋势一样，不要由于你看到别的网站采用了这些趋势，你就将它套用到自己的网站上，你照旧需要针对自己的网站来举行衡量，否那么实际效果会分外糟糕。

滚动交互最正确实践

长滚动页面，视差特效等设计模式是最近4年内才展现的，通过这几年的试错和市场验证，我们已经拥有了一些颇为值得参考的最正确实践：

1、不要畏缩长滚动页面替代传统的短页面。让内容来操纵页面长度，而非其他方式。

2、考虑使用悬浮导航。使用悬浮式的导航能让用户在长滚动页面中更轻易定位和页内跳转。

3、建议使用设计元素来给用户以视觉指引。譬如箭头、动效、按钮之类的元素，简朴快速地引导用户，让他们明白如何使用。有些网站甚至会增加文字说明，诸如“Scrollformore”。

4、假设使用文字说明的话，尽量使用切实的词汇，诸如点击按钮、滚动等。

5、稍加钻研，了解用户是如何滚动页面的。譬如，你可以借用GoogleAnalytics的“页内分析”，来了解有多少用户翻页查看了更多的内容。根据数据，你可以作出更有针对性的改版设计。

6、长滚动并不是说毫无限制。你并不需要在一个页面内塞入500页书的内容，陈述你的故事，然后终止。

7、专注于你的用户和目标。创造长滚动页面的时候，理应明白用户也是需要方向感的，所以，你理应通过设计让他们知道所处的位置，能够通过合理的导航跳转到其他的位置。

8、参与视觉线索。

以滚动为主交互的设计，是一把双刃剑，用对与用好是同样重要的。

未来：无页面式设计

在长滚动页面中，用户通常不会涉及到页面间的跳转。留心查看最近几年的趋势，最常用的移动端设备，我们的手机，在界面尺寸上根本上稳定下来了，在小屏幕上的滚动交互，将