现如今长页面乃至瀑布流页面开始越来越受到用户的青睐，其突然的走红不是没有原因的。长页面允许用户在快速阅读的模式下在短时间内获取更多的信息，而且交互模式非常简单，用户只需滚动鼠标或者滑动手指，新的内容就会不断加载出来。

为什么是长页面？

 长页面更能创建沉浸式用户体验，因为相比于点击“下一页”按钮，直接滚动或者滑动对于用户来说操作更加简单，而且滑动的精准程度远比点击链接和按钮要好得多。此外进入下一个页面，意味着用户进入了一个新的“环境”，重复的熟悉过程会分散用户的注意力。

哪些产品适合长页面？

1 长页面适合展示叙事性内容，内容都处于同一级别，而且可以线性排布。

2 展示连续冗长内容，而且被分为几个单独页面展示的用户体验比单页要差。其中最典型的一个例子就是教程页面。有的教程会比较长，而且上下步关联性强，如果分页展示会对理解造成障碍。比如你看到一个C4D教程，第5步会用到第4步里的知识，这时候如果要跳转页面回到第4步去看就会显得很麻烦。

首屏设计

长页面想要获得成功，就要鼓励用户往下拉，因为长页面的大部分信息需要用户不断下拉去获取。这个就意味着长页面的首屏要做的足够出色，这样才能吸引用户往下滑动。一般首屏我们会放banner，首屏设计其实主要就是banner设计。那么如何才能设计出优秀的长页面banner呢？

1 相关性

这是最基本的，然而却是最容易被我们忽视的。我们做banner，除了手绘插画，还喜欢用摄影图来做背景。因为版权原因，我们更喜欢去国外网站找素材。我们会犯一个错误，就是只找那些好看。诚然好看的页面更能吸引用户驻足停留，但是图文不符会让用户感觉自己受到了欺骗。

2 功能性

现在设计都讲究功能性，功能性插画，功能性动画。单纯意义上作为花瓶来进行点缀的设计元素很容易被用户忽视。我们尽量给页面中每一个元素都赋予其价值，具有存在意义。

3 情绪化设计

首屏是用户对一个长页面的第一印象，第一印象所产生的情感会一直伴随你整个长页面的浏览过程。用户在进行决策的时候，情感往往会超越理性。

导航栏

当我们创建一个长页面的时候，为了避免用户在使用过程中迷失，我们应该时刻给用户展示导航栏。让用户对于位置感（当前所处的位置）和方向感（可能的路径）有一个了解。但是传统导航栏有一个缺点，导航栏处于页面顶部，当向下滑动的时候，导航栏就会就移上去，用户就看不到了。为了解决这个问题，我们应该对导航栏进行浮动处理，无论你的页面如何滑动，导航栏所处的位置都是不变的。

就像我前面说的，因为手机屏幕比较小，导航栏占据的屏幕空间相对来说就会比较大。在用户进行下拉浏览页面内容的时候，我们可以考虑隐藏导航栏，当用户向上滑动的时候，再显示导航栏。

返回按钮

为了避免用户迷路，除了导航栏，我们还应该做到合理使用“返回”按钮。比如，我们在浏览一个电商网站，发现这个商品不错就点进去了解一下。感觉不太满意以后，我们点击页面左上角的“返回”按钮。这时我发现返回到了商品列表顶部，而不是我之前浏览到的位置。这意味着我又要重新下拉到之前浏览到的位置。这种反人类的设置很容易让用户抓狂。

相比而言，Flickr就做的很好。用户在浏览图片时看到一个自己感兴趣的，点进去之后用户再返回，系统会记住你之前浏览位置，并且返回到那个位置。

跳转功能

长页面的内容其实是可以被分为不同的模块的，比如操作教程类页面。这个情况下，用户需要一个跳转的功能。因为当内容可以准确的划分的时候，也就意味着用户对于不同模块的内容有着一定理解，他们也可以判断对这个模块的内容是否感兴趣。如果说普通的长页面是一篇长篇小说而已，那么加了跳转功能的长页面就是一本短篇小说集，用户可以不用一页一页的去翻就可以精准的到达他们感兴趣的章节。

当然在这里要提醒大家，跳转按钮尺寸和间距一定要注意，尺寸过小或者间距过窄都会增加用户的点击难度。

提供视觉反馈

良好的交互设计应该给用户的每一个操作都提供反馈，长页面中交互模式很简单，主要就是下拉加载新的内容。那么我们就要给用户直观的展示这个加载状态。在网络情况正常的情况下，新内容加载非常迅速，我们可以使用功能性动画来实现。

加载时间难题

加载时间过长这几乎每个长页面的一个通病，这个问题亟需解决。因为根据调查研究发现，47％的用户对一个网页的加载时间的期望值是2秒内，如果3秒后页面还没有加载完成，57%的用户会选择离开。当然这个也不是我们设计师应该去解决的问题，但是多了解了解也是好的。

标记服务（收藏）

一个长页面里给用户提供的内容是很多的，我们应该考虑到有的情况下用户看到感兴趣的内容，但是碍于时间关系没有点击进去，这个时候我们提供标记服务，让用户可以在之后找到。标记服务可以理解为“收藏”。

展示内容数量

以电商网站为例，你搜索西服，结果页面就是一个长页面。给用户展示搜索结果数量是很有必要的，让用户对内容有个了解，他们也会对浏览时间有一个预估。

总结

这篇文章对长页面的设计套路做了一个归纳和总结，希望大家看完有所收获。