搞定长滚动网页设计的四个技巧

搞定长滚动网页设计的四个技巧

长滚动页面和无尽滚动网页已经完全出现，甚至可以说已经摆脱了发展趋势，成为一种基本的设计方案。他们的时尚不是偶然的。当用户向下滚动页面时，必要的内容和信息内容当然会显示出来，整个过程一般不容易涉及额外的、不必要的交互。

长滚动页面有以下优点:

流线型导航栏

更容易展现短篇，具有吸引用户的特点。

优秀的手机设备兼容模式

长滚动页面的流行和移动设备的普及之间有一个直接的逻辑关系:显示屏越小，相同内容必须呈现的页面越长。

现阶段手机机器和设备基本都在使用触摸屏，交互技术以触摸和手动为主。自然，长滚动页面也不是没有缺陷，但是下面的例子和最佳实践可能会帮助你在设计长滚动页面时尽可能地考虑用户的期望。

一、应用视觉效果案件线索

根据视觉效果案例线索的提示，让用户知道大部分内容位于产品详情页。

作为一个长的滚动页面，如果你想让用户快速理解它的 *** 作方法，就应该有效地应用原语来展示它的基本原理。比如向下的箭头符号或者“向下滚动”的字样，都是可用性极佳的视觉效果案例线索，只需要告诉用户向下滚动即可。

向下的箭头符号向用户表明大部分内容将在正下方。

二、让导航栏选择项自始至终由此可见

滚动长页面对用户的很大障碍在于用户在整个浏览页面的过程中非常容易迷失。造成这种情况的原因有很多。导航栏的缺失及其元素的混乱很可能会损害浏览体验，让用户感到茫然或不安。

在构建长滚动页面的情况下，请自始至终记住，用户在整个浏览过程中必须保持“方向感”，换句话说，必须使用导航栏来指定浏览的位置。对于这个事情，浮动导航栏其实是一个非常非常好的解决方案。它会显示信息的当前位置，它会自始至终浮在显示屏的一个特殊部分供用户查看。

如果由于显示屏的室内空房间而无法添加导航条，那么就要优先考虑兼顾自动跳转类型的导航条设计方案:

将自动跳线连接放在显示器的右侧。

因为手机显示器的规格较小，固定的导航条会占据显示器很大的室内空空间。因此，比较有效的设计方案是在用户向下浏览时隐藏导航栏，在用户准备返回顶部向上浏览时让导航栏出现。

在脸书客户端，向下浏览时导航栏会隐藏，向上浏览时会显示。

三、设计方案分页查询

决定页面长度的关键因素应该是你展示的内容，而不是页面长度必须增加多少内容。

和其他网页一样，滚动网页可以用来讲小故事，它展示的小故事要更流畅，更线性。过去的传统页面，在页面的结构下，不同的内容被拉伸，隐藏在不同的连接和按钮后面，用户往往先看到所有页面的组织结构。在长滚动页面中，你需要的是用不同的方式展现内容，随着用户滚动逐渐呈现。像 LeMugs一样，每一个分页查询都包含信息内容，融合了动画的实际效果，并以滚动的方式打开，使得所有的长滚动页面看起来都非常有趣。

提示:尽量减少分页查询的总数，这将简化所有的导航栏。即使是很长的滚动页面也不可能包含100个分页查询吧？

四、融合动漫实际效果

有趣动画的实际效果是你的设计方案与用户产生情感联系的关键途径。长滚页的设计方案可以复杂，也可以简单，良好的交互可以让长滚动画特效变得精致，而动画特效是最重要的粘合剂。动画的实际效果使用户能够使所有的网站看起来更有吸引力，这增强了用户在整个搜索过程中的幸福感，提高了他们的整体感觉。

比如可以在一个很长的滚动页面中加入视差滚动效果或者滚动触发的动画效果，让滚动本身变成一件有趣的事情，让用户知道接下来会发生什么。

五、用视差动画特效而言小故事

一般视差造成市场前景和情境的因素之间的速度差，进而构造出动态的视觉冲击。视差的实际效果本身并不复杂，只是涉及到不同的元素，再加上不同的移动方式和速度所产生的不同的实际效果，视差滚动可以产生各种不同的实际效果。如果用长滚动页来叙述一个小故事，在中间加入视差滚动动画效果可以让整个叙述更加流畅。当然最重要的是会加强用户的参与度。

视差滚动可以创造出美丽的三维视觉效果。

六、总结

在这个以内容为导向的时期，长卷页面展现了更加沉浸式的用户体验，使得UI设计对内容的服务项更强，在设计方案中融入了许多新技术和理念，更加致力于用户的整体目标，使网页具有即时性、多样性和内容的多样性。

注:阅读相关网站基本建设方法的文章，请移至网站建设教程频道栏目。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zz/767440.html